diff --git a/cspell.json b/cspell.json index 51c9e5696..09559f4fb 100644 --- a/cspell.json +++ b/cspell.json @@ -148,6 +148,7 @@ "scrollbars", "scrollend", "scroller", + "Scrollers", "Segoe", "semibold", "shadowrootmode", diff --git a/docs/_includes/svgs/scroller.njk b/docs/_includes/svgs/scroller.njk new file mode 100644 index 000000000..c4f5b7389 --- /dev/null +++ b/docs/_includes/svgs/scroller.njk @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/docs/components/scroller.md b/docs/docs/components/scroller.md new file mode 100644 index 000000000..c4c0b02e5 --- /dev/null +++ b/docs/docs/components/scroller.md @@ -0,0 +1,151 @@ +--- +title: Scroller +description: Scrollers create an accessible container while providing visual cues that help users identify and navigate through content that scrolls. +layout: component +tags: [organization] +icon: scroller +--- + +```html {.example} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Party RoleCombat StyleGroup SizeCampaign SettingSignature Traits
WarriorMelee Tank1-2Forgotten RealmsPlate-armored swordmaster who taunts foes.
RogueStealth Striker1EberronShadowy lockpick with daggers and a secret gold stash.
WizardSpell Slinger1GreyhawkRobe-clad mage hurling fireballs from a messy spellbook.
ClericDivine Support1RavnicaHoly healer with a glowing amulet and sneaky ale habit.
BardCharisma King1DragonlanceLute-playing charmer with magical songs and bad puns.
+
+ + +``` + +## Examples + +### Adding Content + +The scroller component automatically provides a scrollable container for any content that exceeds the available space. Simply add your content as children of the `` element, and it will handle the rest. + +```html {.example} + +
+

Superhero Team Roles Guide

+ +
+
+``` + +### Orientation + +Set the `orientation` attribute to `vertical` and provide a height to create a vertical scroller. + +```html {.example} + +

Superhero movies are the ultimate popcorn-fueled thrill rides, turning comic book pages into cinematic rollercoasters. Back in the early 2000s, films like X-Men and Spider-Man kicked open the door, proving tights and teamwork could pack theaters. Those early flicks leaned on practical effects and heart—like Tobey Maguire’s earnest web-slinger saving a train—making us believe a guy in spandex could be a hero. They weren’t perfect, but they set the stage for the genre to become a cultural juggernaut.

+

By the 2010s, the Marvel Cinematic Universe turned superhero films into a shared saga, like a comic crossover event on steroids. The Avengers in 2012 was a game-changer, tossing Iron Man’s snark, Thor’s hammer, and Cap’s shield into one epic brawl. Directors learned to balance humor, heart, and explosions, while studios figured out how to make every movie feel like a chapter in a bigger story. Even standalone hits like Wonder Woman brought fresh vibes, with Gal Gadot’s lasso-wielding warrior stealing hearts and smashing box office records.

+

Today, superhero flicks are a global obsession, from Deadpool’s chimichanga-fueled chaos to Black Panther’s Wakandan pride. They’re not just about powers—they’re about characters we root for, like Rocket Raccoon’s scrappy loyalty or Harley Quinn’s wild energy. Fans dissect trailers like detectives, theorizing about multiverses and cameos, while memes of sad Affleck or dancing Groot flood the internet. Whether it’s a gritty Joker origin or a cosmic Guardians adventure, these movies keep us glued to our seats, dreaming of heroism and one-liners that’d make even Tony Stark jealous.

+
+``` + +### Without a Shadow + +Use the `without-shadow` attribute to remove the fading shadow effect at the edges of the scroller, which typically indicates more content is available. + +```html {.example} + +
+

Gaming consoles are like time machines for nerds, zapping us from pixelated 2D adventures to jaw-dropping cinematic worlds. Back in the ‘90s, the Super Nintendo was the cool kid on the block, using a 16-bit chip to pull off tricks like Mode 7, which made Mario Kart’s tracks feel like they were zooming right at you. It was like wizardry for a kid with a chunky controller, turning flat sprites into pseudo-3D races that had us yelling at our TVs when we got hit by a red shell.

+

Fast-forward to today, and consoles like the PlayStation 5 and Xbox Series X are basically supercomputers in sleek boxes. They’re packing enough power to make games look like Hollywood blockbusters, with lighting so real you can practically feel the sun glare in Spider-Man: Miles Morales. These machines can handle massive open worlds, like the sprawling lands of Elden Ring, without breaking a sweat, letting you swing swords or race cars while your living room feels like a sci-fi movie set. It’s a far cry from the SNES days, but the vibe’s the same: pure, controller-gripping fun.

+

What makes consoles the heart of gaming culture is how they bring everyone together, from casual players to hardcore speedrunners. Whether it’s your uncle fumbling through Super Mario World in ‘92 or your best friend screaming during a late-night Call of Duty match, consoles are the ultimate couch co-op machines. Modern systems even let you stream your clutch Fortnite wins to the world or jump into crossplay with PC pals. From the GameCube’s quirky handle to the Switch’s grab-and-go joy-cons, every console’s got its own personality, making every era of gaming feel like a legendary chapter in a never-ending quest.

+
+
+``` + +### Without a Scrollbar + +Use the `without-scrollbar` attribute to hide the scrollbar while maintaining scroll functionality. This creates a cleaner visual appearance but may reduce usability on content that needs a clear scrolling indicator. + +```html {.example} + +
+

Dungeons & Dragons 5e is the blockbuster superhero flick of tabletop RPGs, turning every session into an epic tavern brawl or dragon-slaying saga. Unlike the old 3.5e days, where you’d stack +30 bonuses like a mathlete on a mission, 5e keeps things chill with skill checks capping around +11—like a +5 from your slick Charisma and +6 from being a pro at persuasion. This means even a squad of scrappy kobolds can give your level 10 barbarian a bad day if you roll poorly. It’s like the game’s saying, “Sure, you’re a hero, but don’t get cocky!”

+

The advantage and disadvantage system is 5e’s secret sauce, making every dice roll feel like a movie cliffhanger. Instead of juggling a dozen modifiers, you just roll two d20s and take the better (or worse) one, which shakes out to about a +5 or -5 vibe shift. It’s like your rogue’s got a lucky charm when sneaking past guards or a cursed boot when dodging a fireball. This keeps the game’s flow snappy, so you’re not stuck crunching numbers when you could be roleplaying a dramatic speech to charm a dragon or bluffing your way out of a bandit ambush.

+

5e’s world is built for storytelling, not just stat sheets, and that’s why it’s the king of game nights. The rules are flexible enough for your DM to whip up a haunted forest crawl or a pirate ship heist without needing a PhD in game design. Classes like the warlock let you make shady pacts with cosmic entities, while feats like Tavern Brawler turn your monk into a bar-fighting legend who can knock out goblins with a chair. Whether you’re a newbie rolling your first d20 or a veteran plotting a castle siege, 5e’s vibe is all about epic moments—like when your party’s wizard crits on a fireball and you all cheer like you just won the Super Bowl.

+
+
+``` + +:::warning +Hiding scrollbars can negatively impact accessibility. Users who rely on visible scrollbars to navigate content may have difficulty recognizing that content is scrollable or controlling their scrolling position. Consider the needs of all users when implementing this option. +::: \ No newline at end of file diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 3ed29ceca..9b5de4e86 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -16,6 +16,7 @@ During the alpha period, things might break! We take breaking changes very serio - 🚨 BREAKING: Renamed `` to `` and improved compatibility for non-image content - 🚨 BREAKING: Added slot detection to `` and `` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off +- Added a new free component: `` (#1 of 14 per stretch goals) - Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `` - Fixed a bug that caused `` to have an undesired margin below it - Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control diff --git a/src/components/scroller/scroller.css b/src/components/scroller/scroller.css new file mode 100644 index 000000000..4fa130ec8 --- /dev/null +++ b/src/components/scroller/scroller.css @@ -0,0 +1,128 @@ +:host { + --shadow-color: var(--wa-color-surface-default); + --shadow-size: 2rem; + + /* private (defined dynamically) */ + --start-shadow-opacity: 0; + --end-shadow-opacity: 0; + + display: block; + position: relative; + max-width: 100%; + isolation: isolate; + overflow: hidden; +} + +:host([orientation='vertical']) { + display: flex; + flex-direction: column; + height: 100%; +} + +#content { + border-radius: inherit; + scroll-behavior: smooth; + scrollbar-width: thin; + + /* Prevent text in mobile Safari from being larger when the container width larger than the viewport */ + -webkit-text-size-adjust: 100%; + + &:focus { + outline: none; + } + + &:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); + } +} + +:host([without-scrollbar]) #content { + scrollbar-width: none; +} + +:host([orientation='horizontal']) #content { + overflow-x: auto; + overflow-y: hidden; +} + +:host([orientation='vertical']) #content { + flex: 1 1 auto; + min-height: 0; /* This is crucial for flex children to respect overflow */ + overflow-x: hidden; + overflow-y: auto; +} + +/* Horizontal shadows */ +:host([orientation='horizontal']) { + #start-shadow, + #end-shadow { + position: absolute; + top: 0; + bottom: 0; + width: var(--shadow-size); + pointer-events: none; + } + + #start-shadow { + opacity: var(--start-shadow-opacity); + } + + #end-shadow { + opacity: var(--end-shadow-opacity); + } + + #start-shadow { + &:dir(ltr) { + left: 0; + background: linear-gradient(to right, var(--shadow-color), transparent 100%); + } + + &:dir(rtl) { + right: 0; + background: linear-gradient(to left, var(--shadow-color), transparent 100%); + } + } + + #end-shadow { + &:dir(ltr) { + right: 0; + background: linear-gradient(to left, var(--shadow-color), transparent 100%); + } + + &:dir(rtl) { + left: 0; + background: linear-gradient(to right, var(--shadow-color), transparent 100%); + } + } +} + +/* Vertical shadows */ +:host([orientation='vertical']) { + #start-shadow, + #end-shadow { + position: absolute; + right: 0; + left: 0; + height: var(--shadow-size); + pointer-events: none; + } + + #start-shadow { + opacity: var(--start-shadow-opacity); + } + + #end-shadow { + opacity: var(--end-shadow-opacity); + } + + #start-shadow { + top: 0; + background: linear-gradient(to bottom, var(--shadow-color), transparent 100%); + } + + #end-shadow { + bottom: 0; + background: linear-gradient(to top, var(--shadow-color), transparent 100%); + } +} diff --git a/src/components/scroller/scroller.test.ts b/src/components/scroller/scroller.test.ts new file mode 100644 index 000000000..784cdecb2 --- /dev/null +++ b/src/components/scroller/scroller.test.ts @@ -0,0 +1,10 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import '../../../dist/webawesome.js'; + +describe('', () => { + it('should render a component', async () => { + const el = await fixture(html` `); + + expect(el).to.exist; + }); +}); diff --git a/src/components/scroller/scroller.ts b/src/components/scroller/scroller.ts new file mode 100644 index 000000000..2cb22b760 --- /dev/null +++ b/src/components/scroller/scroller.ts @@ -0,0 +1,139 @@ +import { html } from 'lit'; +import { customElement, eventOptions, property, query, state } from 'lit/decorators.js'; +import WebAwesomeElement from '../../internal/webawesome-element.js'; +import { LocalizeController } from '../../utilities/localize.js'; +import styles from './scroller.css'; + +/** + * @summary Scrollers create an accessible container while providing visual cues that help users identify and navigate + * through content that scrolls. + * @documentation https://backers.webawesome.com/docs/components/card + * @status stable + * @since 3.0 + * + * @slot - The content to show inside the scroller. + * + * @cssproperty [--shadow-color=var(--wa-color-surface-default)] - The base color of the shadow. + * @cssproperty [--shadow-size=2rem] - The size of the shadow. + * + * @csspart content - The container that wraps the slotted content. + */ +@customElement('wa-scroller') +export default class WaScroller extends WebAwesomeElement { + static shadowStyle = [styles]; + + private readonly localize = new LocalizeController(this); + private resizeObserver = new ResizeObserver(() => this.updateScroll()); + + @query('#content') content: HTMLElement; + + @state() canScroll = false; + + /** The scroller's orientation. */ + @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal'; + + /** Removes the visible scrollbar. */ + @property({ attribute: 'without-scrollbar', type: Boolean, reflect: true }) withoutScrollbar = false; + + /** Removes the shadows. */ + @property({ attribute: 'without-shadow', type: Boolean, reflect: true }) withoutShadow = false; + + connectedCallback() { + super.connectedCallback(); + this.resizeObserver.observe(this); + } + + disconnectedCallback() { + super.disconnectedCallback(); + this.resizeObserver.disconnect(); + } + + private handleKeyDown(event: KeyboardEvent) { + if (event.key === 'Home') { + event.preventDefault(); + this.content.scrollTo({ + left: this.orientation === 'horizontal' ? 0 : undefined, + top: this.orientation === 'vertical' ? 0 : undefined, + }); + } + + if (event.key === 'End') { + event.preventDefault(); + this.content.scrollTo({ + left: this.orientation === 'horizontal' ? this.content.scrollWidth : undefined, + top: this.orientation === 'vertical' ? this.content.scrollHeight : undefined, + }); + } + } + + private handleSlotChange() { + this.updateScroll(); + } + + @eventOptions({ passive: true }) + private updateScroll() { + if (this.orientation === 'horizontal') { + const clientWidth = Math.ceil(this.content.clientWidth); + const scrollLeft = Math.abs(Math.ceil(this.content.scrollLeft)); + const scrollWidth = Math.ceil(this.content.scrollWidth); + + // Calculate total scrollable width + const maxScroll = scrollWidth - clientWidth; + this.canScroll = maxScroll > 0; + + // Calculate shadow opacities based on first/last 2% of scroll + const startShadowOpacity = Math.min(1, scrollLeft / (maxScroll * 0.05)); + const endShadowOpacity = Math.min(1, (maxScroll - scrollLeft) / (maxScroll * 0.05)); + + // Update CSS custom properties + this.style.setProperty('--start-shadow-opacity', String(startShadowOpacity || 0)); + this.style.setProperty('--end-shadow-opacity', String(endShadowOpacity || 0)); + } else { + const clientHeight = Math.ceil(this.content.clientHeight); + const scrollTop = Math.abs(Math.ceil(this.content.scrollTop)); + const scrollHeight = Math.ceil(this.content.scrollHeight); + + // Calculate total scrollable height + const maxScroll = scrollHeight - clientHeight; + this.canScroll = maxScroll > 0; + + // Calculate shadow opacities based on first/last 2% of scroll + const startShadowOpacity = Math.min(1, scrollTop / (maxScroll * 0.05)); + const endShadowOpacity = Math.min(1, (maxScroll - scrollTop) / (maxScroll * 0.05)); + + // Update CSS custom properties + this.style.setProperty('--start-shadow-opacity', String(startShadowOpacity || 0)); + this.style.setProperty('--end-shadow-opacity', String(endShadowOpacity || 0)); + } + } + + render() { + return html` + ${this.withoutShadow + ? '' + : html` + + + `} + +
+ +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wa-scroller': WaScroller; + } +} diff --git a/src/translations/ar.ts b/src/translations/ar.ts index e168171e1..9b7ff5005 100644 --- a/src/translations/ar.ts +++ b/src/translations/ar.ts @@ -28,6 +28,7 @@ const translation: Translation = { progress: 'مقدار التقدم', remove: 'حذف', resize: 'تغيير الحجم', + scrollableRegion: 'منطقة قابلة للتمرير', scrollToEnd: 'الانتقال الى النهاية', scrollToStart: 'الانتقال الى البداية', selectAColorFromTheScreen: 'اختر لون من الشاشة', diff --git a/src/translations/cs.ts b/src/translations/cs.ts index 583d1500e..3532ee711 100644 --- a/src/translations/cs.ts +++ b/src/translations/cs.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Průběh', remove: 'Odstranit', resize: 'Změnit velikost', + scrollableRegion: 'Posunovatelná oblast', scrollToEnd: 'Scrollovat na konec', scrollToStart: 'Scrollovat na začátek', selectAColorFromTheScreen: 'Vybrat barvu z obrazovky', diff --git a/src/translations/da.ts b/src/translations/da.ts index 7ade8edbe..a0c5894a0 100644 --- a/src/translations/da.ts +++ b/src/translations/da.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Status', remove: 'Fjern', resize: 'Tilpas størrelse', + scrollableRegion: 'Rullebar region', scrollToEnd: 'Scroll til slut', scrollToStart: 'Scroll til start', selectAColorFromTheScreen: 'Vælg en farve fra skærmen', diff --git a/src/translations/de.ts b/src/translations/de.ts index 9125f3606..b73a18bfc 100644 --- a/src/translations/de.ts +++ b/src/translations/de.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Fortschritt', remove: 'Entfernen', resize: 'Größe ändern', + scrollableRegion: 'Scrollbarer Bereich', scrollToEnd: 'Zum Ende scrollen', scrollToStart: 'Zum Anfang scrollen', selectAColorFromTheScreen: 'Farbe vom Bildschirm auswählen', diff --git a/src/translations/en.ts b/src/translations/en.ts index a75db9d14..5c1d4e437 100644 --- a/src/translations/en.ts +++ b/src/translations/en.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Progress', remove: 'Remove', resize: 'Resize', + scrollableRegion: 'Scrollable region', scrollToEnd: 'Scroll to end', scrollToStart: 'Scroll to start', selectAColorFromTheScreen: 'Select a color from the screen', diff --git a/src/translations/es.ts b/src/translations/es.ts index d5b7a34d7..930519dbf 100644 --- a/src/translations/es.ts +++ b/src/translations/es.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Progreso', remove: 'Eliminar', resize: 'Cambiar el tamaño', + scrollableRegion: 'Región desplazable', scrollToEnd: 'Desplazarse hasta el final', scrollToStart: 'Desplazarse al inicio', selectAColorFromTheScreen: 'Seleccione un color de la pantalla', diff --git a/src/translations/fa.ts b/src/translations/fa.ts index a41488ac4..ee3d29bc5 100644 --- a/src/translations/fa.ts +++ b/src/translations/fa.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'پیشرفت', remove: 'حذف', resize: 'تغییر اندازه', + scrollableRegion: 'ناحیه قابل اسکرول', scrollToEnd: 'پیمایش به انتها', scrollToStart: 'پیمایش به ابتدا', selectAColorFromTheScreen: 'انتخاب یک رنگ از صفحه نمایش', diff --git a/src/translations/fi.ts b/src/translations/fi.ts index ce032fb85..ba4ffec62 100644 --- a/src/translations/fi.ts +++ b/src/translations/fi.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Edistyminen', remove: 'Poista', resize: 'Muuta kokoa', + scrollableRegion: 'Vieritettävä alue', scrollToEnd: 'Vieritä loppuun', scrollToStart: 'Vieritä alkuun', selectAColorFromTheScreen: 'Valitse väri näytöltä', diff --git a/src/translations/fr.ts b/src/translations/fr.ts index 6c81d5ccf..a821bf993 100644 --- a/src/translations/fr.ts +++ b/src/translations/fr.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Progrès', remove: 'Retirer', resize: 'Redimensionner', + scrollableRegion: 'Région défilante', scrollToEnd: `Faire défiler jusqu'à la fin`, scrollToStart: `Faire défiler jusqu'au début`, selectAColorFromTheScreen: `Sélectionnez une couleur à l'écran`, diff --git a/src/translations/he.ts b/src/translations/he.ts index fe2f0897f..a92b5f119 100644 --- a/src/translations/he.ts +++ b/src/translations/he.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'התקדמות', remove: 'לְהַסִיר', resize: 'שנה גודל', + scrollableRegion: 'אזור גלילה', scrollToEnd: 'גלול עד הסוף', scrollToStart: 'גלול להתחלה', selectAColorFromTheScreen: 'בחור צבע מהמסך', diff --git a/src/translations/hr.ts b/src/translations/hr.ts index 15622f3c8..b66c2f447 100644 --- a/src/translations/hr.ts +++ b/src/translations/hr.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Napredak', remove: 'Makni', resize: 'Promijeni veličinu', + scrollableRegion: 'Područje s mogućnošću pomicanja', scrollToEnd: 'Skrolaj do kraja', scrollToStart: 'Skrolaj na početak', selectAColorFromTheScreen: 'Odaberi boju sa ekrana', diff --git a/src/translations/hu.ts b/src/translations/hu.ts index f9ea65055..f1203c838 100644 --- a/src/translations/hu.ts +++ b/src/translations/hu.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Folyamat', remove: 'Eltávolítás', resize: 'Átméretezés', + scrollableRegion: 'Görgethető terület', scrollToEnd: 'Görgessen a végére', scrollToStart: 'Görgessen az elejére', selectAColorFromTheScreen: 'Szín választása a képernyőről', diff --git a/src/translations/id.ts b/src/translations/id.ts index 312de8bd6..876a474ce 100644 --- a/src/translations/id.ts +++ b/src/translations/id.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Kemajuan', remove: 'Hapus', resize: 'Ubah ukuran', + scrollableRegion: 'Area yang dapat digulir', scrollToEnd: 'Gulir ke akhir', scrollToStart: 'Gulir ke awal', selectAColorFromTheScreen: 'Pilih warna dari layar', diff --git a/src/translations/it.ts b/src/translations/it.ts index f254dd85e..a5712e653 100644 --- a/src/translations/it.ts +++ b/src/translations/it.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Avanzamento', remove: 'Rimuovi', resize: 'Ridimensiona', + scrollableRegion: 'Area scorrevole', scrollToEnd: 'Scorri alla fine', scrollToStart: "Scorri all'inizio", selectAColorFromTheScreen: 'Seleziona un colore dalla schermo', diff --git a/src/translations/ja.ts b/src/translations/ja.ts index 234c09846..0fb8db111 100644 --- a/src/translations/ja.ts +++ b/src/translations/ja.ts @@ -25,6 +25,7 @@ const translation: Translation = { progress: '進行', remove: '削除', resize: 'サイズ変更', + scrollableRegion: 'スクロール可能領域', scrollToEnd: '最後にスクロールする', scrollToStart: '最初にスクロールする', selectAColorFromTheScreen: '画面から色を選択してください', diff --git a/src/translations/nb.ts b/src/translations/nb.ts index 1973d981b..7f3d6a510 100644 --- a/src/translations/nb.ts +++ b/src/translations/nb.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Fremdrift', remove: 'Fjern', resize: 'Endre størrelse', + scrollableRegion: 'Rullbar region', scrollToEnd: 'Rull til slutten', scrollToStart: 'Rull til starten', selectAColorFromTheScreen: 'Velg en farge fra skjermen', diff --git a/src/translations/nl.ts b/src/translations/nl.ts index 209aee63d..2338c1f2a 100644 --- a/src/translations/nl.ts +++ b/src/translations/nl.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Voortgang', remove: 'Verwijderen', resize: 'Formaat wijzigen', + scrollableRegion: 'Scrollbaar gebied', scrollToEnd: 'Scroll naar einde', scrollToStart: 'Scroll naar begin', selectAColorFromTheScreen: 'Selecteer een kleur van het scherm', diff --git a/src/translations/nn.ts b/src/translations/nn.ts index 051884e80..74cae3997 100644 --- a/src/translations/nn.ts +++ b/src/translations/nn.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Framdrift', remove: 'Fjern', resize: 'Endre storleik', + scrollableRegion: 'Rullbar region', scrollToEnd: 'Rull til slutten', scrollToStart: 'Rull til starten', selectAColorFromTheScreen: 'Vel ein farge frå skjermen', diff --git a/src/translations/pl.ts b/src/translations/pl.ts index eda727ef0..8bf37ad2c 100644 --- a/src/translations/pl.ts +++ b/src/translations/pl.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Postęp', remove: 'Usunąć', resize: 'Zmień rozmiar', + scrollableRegion: 'Obszar przewijalny', scrollToEnd: 'Przewiń do końca', scrollToStart: 'Przewiń do początku', selectAColorFromTheScreen: 'Próbkuj z ekranu', diff --git a/src/translations/pt.ts b/src/translations/pt.ts index 2be8dbeb1..7b43fec58 100644 --- a/src/translations/pt.ts +++ b/src/translations/pt.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Progresso', remove: 'Remover', resize: 'Mudar o tamanho', + scrollableRegion: 'Região rolável', scrollToEnd: 'Rolar até o final', scrollToStart: 'Rolar até o início', selectAColorFromTheScreen: 'Selecionar uma cor da tela', diff --git a/src/translations/ru.ts b/src/translations/ru.ts index 52cb99e66..5a49d74fb 100644 --- a/src/translations/ru.ts +++ b/src/translations/ru.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Прогресс', remove: 'Удалить', resize: 'Изменить размер', + scrollableRegion: 'Scrollable region', scrollToEnd: 'Пролистать до конца', scrollToStart: 'Пролистать к началу', selectAColorFromTheScreen: 'Выберите цвет на экране', diff --git a/src/translations/sl.ts b/src/translations/sl.ts index c5e7118b3..d0af3e4a7 100644 --- a/src/translations/sl.ts +++ b/src/translations/sl.ts @@ -28,6 +28,7 @@ const translation: Translation = { progress: 'Napredek', remove: 'Odstrani', resize: 'Spremeni velikost', + scrollableRegion: 'Področje za drsenje', scrollToEnd: 'Pomakni se na konec', scrollToStart: 'Pomakni se na začetek', selectAColorFromTheScreen: 'Izberite barvo z zaslona', diff --git a/src/translations/sv.ts b/src/translations/sv.ts index c3d3a43c4..8180e1102 100644 --- a/src/translations/sv.ts +++ b/src/translations/sv.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'Framsteg', remove: 'Ta bort', resize: 'Ändra storlek', + scrollableRegion: 'Scrollbart område', scrollToEnd: 'Skrolla till slutet', scrollToStart: 'Skrolla till början', selectAColorFromTheScreen: 'Välj en färg från skärmen', diff --git a/src/translations/tr.ts b/src/translations/tr.ts index ce71ed94c..8b2e938cc 100644 --- a/src/translations/tr.ts +++ b/src/translations/tr.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: 'İlerleme', remove: 'Kaldır', resize: 'Yeniden boyutlandır', + scrollableRegion: 'Kaydırılabilir alan', scrollToEnd: 'Sona kay', scrollToStart: 'Başa kay', selectAColorFromTheScreen: 'Ekrandan bir renk seçin', diff --git a/src/translations/uk.ts b/src/translations/uk.ts index 50a2e506e..c6fe0a88f 100644 --- a/src/translations/uk.ts +++ b/src/translations/uk.ts @@ -28,6 +28,7 @@ const translation: Translation = { progress: 'Поступ', remove: 'Видалити', resize: 'Змінити розмір', + scrollableRegion: 'Область з можливістю прокрутки', scrollToEnd: 'Прокрутити в кінець', scrollToStart: 'Прокрутити на початок', selectAColorFromTheScreen: 'Виберіть колір на екрані', diff --git a/src/translations/zh-cn.ts b/src/translations/zh-cn.ts index a73a475cd..9bea0616c 100644 --- a/src/translations/zh-cn.ts +++ b/src/translations/zh-cn.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: '进度', remove: '删除', resize: '调整大小', + scrollableRegion: '可滚动区域', scrollToEnd: '滚动至页尾', scrollToStart: '滚动至页首', selectAColorFromTheScreen: '从屏幕中选择一种颜色', diff --git a/src/translations/zh-tw.ts b/src/translations/zh-tw.ts index 9f784f8d0..54e61014f 100644 --- a/src/translations/zh-tw.ts +++ b/src/translations/zh-tw.ts @@ -26,6 +26,7 @@ const translation: Translation = { progress: '進度', remove: '移除', resize: '調整大小', + scrollableRegion: '可捲動区域', scrollToEnd: '捲至頁尾', scrollToStart: '捲至頁首', selectAColorFromTheScreen: '從螢幕中選擇一種顏色', diff --git a/src/utilities/localize.ts b/src/utilities/localize.ts index 91fe83912..cc37d910c 100644 --- a/src/utilities/localize.ts +++ b/src/utilities/localize.ts @@ -37,6 +37,7 @@ export interface Translation extends DefaultTranslation { progress: string; remove: string; resize: string; + scrollableRegion: string; scrollToEnd: string; scrollToStart: string; selectAColorFromTheScreen: string;