@teseor/css 1.15.1 → 1.15.3

package/src/layout/container/docs.html

@@ -6,29 +6,29 @@ description: Content wrapper with max-width and inline padding. Centers page con
 <!-- @default -->
 <!-- Constrains content to a max width with horizontal padding. -->
 <div class="ui-container" style="background: var(--ui-color-bg-muted)">
-  <p>Content within a container</p>
+  <p>{{ t('content_within_a_container', 'Content within a container') }}</p>
 </div>
 
 <!-- @centered -->
 <!-- Centers the container horizontally with auto margins. -->
 <div class="ui-container ui-container--center" style="background: var(--ui-color-bg-muted)">
-  <p>Centered container</p>
+  <p>{{ t('centered_container', 'Centered container') }}</p>
 </div>
 
 <!-- @sizes | column -->
 <!-- Width presets for different layout needs. -->
 <div class="ui-container ui-container--sm ui-container--center" style="background: var(--ui-color-bg-muted)">
-  <p>Small</p>
+  <p>{{ t('small', 'Small') }}</p>
 </div>
 <div class="ui-container ui-container--md ui-container--center" style="background: var(--ui-color-bg-muted)">
-  <p>Medium</p>
+  <p>{{ t('medium', 'Medium') }}</p>
 </div>
 <div class="ui-container ui-container--lg ui-container--center" style="background: var(--ui-color-bg-muted)">
-  <p>Large (default)</p>
+  <p>{{ t('large_default', 'Large (default)') }}</p>
 </div>
 <div class="ui-container ui-container--xl ui-container--center" style="background: var(--ui-color-bg-muted)">
-  <p>Extra large</p>
+  <p>{{ t('extra_large', 'Extra large') }}</p>
 </div>
 <div class="ui-container ui-container--full" style="background: var(--ui-color-bg-muted)">
-  <p>Full width</p>
+  <p>{{ t('full_width', 'Full width') }}</p>
 </div>

package/src/layout/content/docs.html

@@ -6,30 +6,30 @@ description: Content wrapper with consistent vertical spacing. Use inside contai
 <!-- @default -->
 <!-- Vertical flex layout with gap between children and block/inline padding. -->
 <div class="ui-content" style="0: b; 1: a; 2: c; 3: k; 4: g; 5: r; 6: o; 7: u; 8: n; 9: d; 10: :; 11:  ; 12: v; 13: a; 14: r; 15: (; 16: -; 17: -; 18: u; 19: i; 20: -; 21: c; 22: o; 23: l; 24: o; 25: r; 26: -; 27: b; 28: g; 29: -; 30: s; 31: u; 32: b; 33: t; 34: l; 35: e; 36: )">
-  <p>First section of content with consistent spacing.</p>
-  <p>Second section automatically spaced by the gap token.</p>
-  <p>Third section follows the same rhythm.</p>
+  <p>{{ t('first_section_of_content_with_consistent_spacing', 'First section of content with consistent spacing.') }}</p>
+  <p>{{ t('second_section_spaced_by_gap', 'Second section automatically spaced by the gap token.') }}</p>
+  <p>{{ t('third_section_follows_the_same_rhythm', 'Third section follows the same rhythm.') }}</p>
 </div>
 
 <!-- @prose -->
 <!-- Narrower max-width for readable long-form text (640px / 80 units). -->
 <div class="ui-content ui-content--prose" style="0: b; 1: a; 2: c; 3: k; 4: g; 5: r; 6: o; 7: u; 8: n; 9: d; 10: :; 11:  ; 12: v; 13: a; 14: r; 15: (; 16: -; 17: -; 18: u; 19: i; 20: -; 21: c; 22: o; 23: l; 24: o; 25: r; 26: -; 27: b; 28: g; 29: -; 30: s; 31: u; 32: b; 33: t; 34: l; 35: e; 36: )">
-  <p>Prose content is constrained to a comfortable reading width. Long paragraphs stay readable without requiring the eye to travel too far across the screen.</p>
-  <p>This works well for articles, documentation, and form layouts.</p>
+  <p>{{ t('prose_content_constrained', 'Prose content is constrained to a comfortable reading width. Long paragraphs stay readable without requiring the eye to travel too far across the screen.') }}</p>
+  <p>{{ t('works_for_articles_docs_forms', 'This works well for articles, documentation, and form layouts.') }}</p>
 </div>
 
 <!-- @flush -->
 <!-- No padding, only gap between children. Useful when the parent handles padding. -->
 <div class="ui-content ui-content--flush" style="0: b; 1: a; 2: c; 3: k; 4: g; 5: r; 6: o; 7: u; 8: n; 9: d; 10: :; 11:  ; 12: v; 13: a; 14: r; 15: (; 16: -; 17: -; 18: u; 19: i; 20: -; 21: c; 22: o; 23: l; 24: o; 25: r; 26: -; 27: b; 28: g; 29: -; 30: s; 31: u; 32: b; 33: t; 34: l; 35: e; 36: )">
-  <p>Flush content has no padding.</p>
-  <p>Gap between children is preserved.</p>
+  <p>{{ t('flush_content_has_no_padding', 'Flush content has no padding.') }}</p>
+  <p>{{ t('gap_between_children_is_preserved', 'Gap between children is preserved.') }}</p>
 </div>
 
 <!-- @with_container -->
 <!-- Content inside a centered container for a typical page layout. -->
 <div class="ui-container ui-container--center">
   <div class="ui-content">
-    <h2 class="ui-heading ui-heading--3">Page Title</h2>
-    <p>Content with consistent spacing and max-width.</p>
+    <h2 class="ui-heading ui-heading--3">{{ t('page_title', 'Page Title') }}</h2>
+    <p>{{ t('content_with_consistent_spacing_and_max_width', 'Content with consistent spacing and max-width.') }}</p>
   </div>
 </div>

package/src/layout/footer/docs.html

@@ -7,32 +7,32 @@ description: Page footer with start, center, and end sections. Supports sticky/f
 <!-- Basic footer with three sections. -->
 <footer class="ui-footer ui-footer--bordered">
   <div class="ui-footer__start">
-    <small>2026 Brand</small>
+    <small>{{ t('2026_brand', '2026 Brand') }}</small>
   </div>
   <div class="ui-footer__center">
-    <span>Footer links</span>
+    <span>{{ t('footer_links', 'Footer links') }}</span>
   </div>
   <div class="ui-footer__end">
-    <small>v1.0.0</small>
+    <small>{{ t('v100', 'v1.0.0') }}</small>
   </div>
 </footer>
 
 <!-- @sticky -->
 <!-- Stays at the bottom of the viewport on scroll. -->
 <footer class="ui-footer ui-footer--sticky ui-footer--bordered">
-  <div class="ui-footer__start"><small>Brand</small></div>
-  <div class="ui-footer__center">Links</div>
-  <div class="ui-footer__end"><small>v1.0.0</small></div>
+  <div class="ui-footer__start"><small>{{ t('brand', 'Brand') }}</small></div>
+  <div class="ui-footer__center">{{ t('links', 'Links') }}</div>
+  <div class="ui-footer__end"><small>{{ t('v100', 'v1.0.0') }}</small></div>
 </footer>
 
 <!-- @bordered -->
 <!-- Top border via inset box-shadow to preserve grid rhythm. -->
 <footer class="ui-footer ui-footer--bordered">
   <div class="ui-footer__start">
-    <small>Bordered footer</small>
+    <small>{{ t('bordered_footer', 'Bordered footer') }}</small>
   </div>
   <div class="ui-footer__end">
-    <small>v1.0.0</small>
+    <small>{{ t('v100', 'v1.0.0') }}</small>
   </div>
 </footer>
 
@@ -40,31 +40,31 @@ description: Page footer with start, center, and end sections. Supports sticky/f
 <!-- Subtle drop shadow above the footer. -->
 <footer class="ui-footer ui-footer--raised">
   <div class="ui-footer__start">
-    <small>Raised footer</small>
+    <small>{{ t('raised_footer', 'Raised footer') }}</small>
   </div>
   <div class="ui-footer__end">
-    <small>v1.0.0</small>
+    <small>{{ t('v100', 'v1.0.0') }}</small>
   </div>
 </footer>
 
 <!-- @fixed -->
 <!-- Fixed to viewport bottom, always visible. -->
 <footer class="ui-footer ui-footer--fixed ui-footer--bordered">
-  <div class="ui-footer__start"><small>Brand</small></div>
-  <div class="ui-footer__end"><small>v1.0.0</small></div>
+  <div class="ui-footer__start"><small>{{ t('brand', 'Brand') }}</small></div>
+  <div class="ui-footer__end"><small>{{ t('v100', 'v1.0.0') }}</small></div>
 </footer>
 
 <!-- @full_layout -->
 <!-- Footer inside an app-shell with topbar and sidebar. -->
 <body class="ui-app-shell">
   <header class="ui-topbar ui-topbar--bordered">
-    <div class="ui-topbar__start"><strong>App</strong></div>
+    <div class="ui-topbar__start"><strong>{{ t('app', 'App') }}</strong></div>
   </header>
   <main class="ui-main ui-main--full">
-    <div class="ui-container">Content</div>
+    <div class="ui-container">{{ t('content', 'Content') }}</div>
     <footer class="ui-footer ui-footer--bordered">
-      <div class="ui-footer__start"><small>Brand</small></div>
-      <div class="ui-footer__end"><small>v1.0.0</small></div>
+      <div class="ui-footer__start"><small>{{ t('brand', 'Brand') }}</small></div>
+      <div class="ui-footer__end"><small>{{ t('v100', 'v1.0.0') }}</small></div>
     </footer>
   </main>
 </body>

package/src/layout/grid/docs.html

@@ -21,63 +21,63 @@ description: CSS Grid with column variants, subgrid support, and span utilities.
   <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">4</div>
 </div>
 <div class="ui-grid ui-grid--auto">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Auto</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Auto</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Auto</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('auto', 'Auto') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('auto', 'Auto') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('auto', 'Auto') }}</div>
 </div>
 
 <!-- @subgrid -->
 <!-- Children inherit parent grid tracks for cross-item alignment. -->
 <div class="ui-grid ui-grid--3">
   <div class="ui-grid--subgrid" style="grid-column: span 3">
-    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Subgrid child 1</div>
-    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Subgrid child 2</div>
-    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Subgrid child 3</div>
+    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('subgrid_child_1', 'Subgrid child 1') }}</div>
+    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('subgrid_child_2', 'Subgrid child 2') }}</div>
+    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('subgrid_child_3', 'Subgrid child 3') }}</div>
   </div>
 </div>
 <div class="ui-grid ui-grid--3" style="grid-template-rows: auto 1fr auto">
   <div class="ui-grid--subgrid-rows" style="grid-row: span 3; border: 1px solid var(--ui-color-border); padding: var(--ui-space-2)">
-    <strong>Card A</strong>
-    <p>Short content.</p>
-    <span style="color: var(--ui-color-text-muted)">Footer</span>
+    <strong>{{ t('card_a', 'Card A') }}</strong>
+    <p>{{ t('short_content', 'Short content.') }}</p>
+    <span style="color: var(--ui-color-text-muted)">{{ t('footer', 'Footer') }}</span>
   </div>
   <div class="ui-grid--subgrid-rows" style="grid-row: span 3; border: 1px solid var(--ui-color-border); padding: var(--ui-space-2)">
-    <strong>Card B</strong>
-    <p>Longer content that wraps to multiple lines to demonstrate row alignment.</p>
-    <span style="color: var(--ui-color-text-muted)">Footer</span>
+    <strong>{{ t('card_b', 'Card B') }}</strong>
+    <p>{{ t('longer_content_wraps_demo', 'Longer content that wraps to multiple lines to demonstrate row alignment.') }}</p>
+    <span style="color: var(--ui-color-text-muted)">{{ t('footer', 'Footer') }}</span>
   </div>
   <div class="ui-grid--subgrid-rows" style="grid-row: span 3; border: 1px solid var(--ui-color-border); padding: var(--ui-space-2)">
-    <strong>Card C</strong>
-    <p>Medium text.</p>
-    <span style="color: var(--ui-color-text-muted)">Footer</span>
+    <strong>{{ t('card_c', 'Card C') }}</strong>
+    <p>{{ t('medium_text', 'Medium text.') }}</p>
+    <span style="color: var(--ui-color-text-muted)">{{ t('footer', 'Footer') }}</span>
   </div>
 </div>
 <div class="ui-grid ui-grid--3" style="grid-template-rows: auto auto">
   <div class="ui-grid--subgrid-both" style="grid-column: span 3; grid-row: span 2">
-    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">A1</div>
-    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">A2</div>
-    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">A3</div>
-    <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">B1</div>
-    <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">B2</div>
-    <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">B3</div>
+    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('a1', 'A1') }}</div>
+    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('a2', 'A2') }}</div>
+    <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('a3', 'A3') }}</div>
+    <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">{{ t('b1', 'B1') }}</div>
+    <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">{{ t('b2', 'B2') }}</div>
+    <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">{{ t('b3', 'B3') }}</div>
   </div>
 </div>
 
 <!-- @column_span -->
 <!-- Span multiple columns with .ui-grid-col-span-{2,3,4,full} utilities. -->
 <div class="ui-grid ui-grid--4">
-  <div style="grid-column: span 2; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Span 2</div>
+  <div style="grid-column: span 2; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('span_2', 'Span 2') }}</div>
   <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">1</div>
   <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">1</div>
   <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">1</div>
-  <div style="grid-column: span 3; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Span 3</div>
-  <div style="grid-column: 1 / -1; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Span full</div>
+  <div style="grid-column: span 3; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('span_3', 'Span 3') }}</div>
+  <div style="grid-column: 1 / -1; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('span_full', 'Span full') }}</div>
 </div>
 
 <!-- @row_span -->
 <!-- Span multiple rows with .ui-grid-row-span-{2,3,full} utilities. -->
 <div class="ui-grid ui-grid--3">
-  <div style="grid-row: span 2; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Row span 2</div>
+  <div style="grid-row: span 2; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('row_span_2', 'Row span 2') }}</div>
   <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">1</div>
   <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">2</div>
   <div style="background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">3</div>

package/src/layout/main/docs.html

@@ -7,7 +7,7 @@ description: Main content area that accounts for sidebar and topbar offsets in a
 <!-- Offsets content for a start-side sidebar and optional topbar. -->
 <div style="position: relative; height: var(--ui-row-4)">
   <main class="ui-main" style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">
-    <p>Main content area</p>
+    <p>{{ t('main_content_area', 'Main content area') }}</p>
   </main>
 </div>
 
@@ -15,7 +15,7 @@ description: Main content area that accounts for sidebar and topbar offsets in a
 <!-- Offsets content for an end-side sidebar instead of start. -->
 <div style="position: relative; height: var(--ui-row-4)">
   <main class="ui-main ui-main--sidebar-end" style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">
-    <p>Content with end sidebar</p>
+    <p>{{ t('content_with_end_sidebar', 'Content with end sidebar') }}</p>
   </main>
 </div>
 
@@ -23,6 +23,6 @@ description: Main content area that accounts for sidebar and topbar offsets in a
 <!-- No sidebar offset. Use when there is no sidebar. -->
 <div style="position: relative; height: var(--ui-row-4)">
   <main class="ui-main ui-main--full" style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">
-    <p>Full width content</p>
+    <p>{{ t('full_width_content', 'Full width content') }}</p>
   </main>
 </div>

package/src/layout/nav-rail/docs.html

@@ -7,12 +7,12 @@ description: Narrow fixed vertical navigation rail for icon-based navigation wit
 <!-- Fixed narrow rail with icon items and bottom actions. -->
 <nav class="ui-nav-rail" style="0: p; 1: o; 2: s; 3: i; 4: t; 5: i; 6: o; 7: n; 8: :; 9:  ; 10: r; 11: e; 12: l; 13: a; 14: t; 15: i; 16: v; 17: e; 18: ;; 19:  ; 20: b; 21: l; 22: o; 23: c; 24: k; 25: -; 26: s; 27: i; 28: z; 29: e; 30: :; 31:  ; 32: 3; 33: 2; 34: 0; 35: p; 36: x">
   <div class="ui-nav-rail__items">
-    <button class="ui-button ui-button--ghost ui-button--icon">H</button>
-    <button class="ui-button ui-button--ghost ui-button--icon">S</button>
-    <button class="ui-button ui-button--ghost ui-button--icon">M</button>
+    <button class="ui-button ui-button--ghost ui-button--icon">{{ t('h', 'H') }}</button>
+    <button class="ui-button ui-button--ghost ui-button--icon">{{ t('s', 'S') }}</button>
+    <button class="ui-button ui-button--ghost ui-button--icon">{{ t('m', 'M') }}</button>
   </div>
   <div class="ui-nav-rail__actions">
-    <button class="ui-button ui-button--ghost ui-button--icon">G</button>
+    <button class="ui-button ui-button--ghost ui-button--icon">{{ t('g', 'G') }}</button>
   </div>
 </nav>
 
@@ -31,7 +31,7 @@ description: Narrow fixed vertical navigation rail for icon-based navigation wit
 <!-- Nav rail respects --topbar-height, offsetting below the topbar. -->
 <body class="ui-app-shell" style="--topbar-height: var(--ui-row-3)">
   <header class="ui-topbar ui-topbar--fixed ui-topbar--bordered">
-    <div class="ui-topbar__start"><strong>App</strong></div>
+    <div class="ui-topbar__start"><strong>{{ t('app', 'App') }}</strong></div>
   </header>
   <nav class="ui-nav-rail">
     <div class="ui-nav-rail__items"><!-- icons --></div>

package/src/layout/page-header/docs.html

@@ -7,11 +7,11 @@ description: Content area header with title, description, actions, and optional
 <!-- Title with actions on the end side. -->
 <header class="ui-page-header ui-page-header--bordered">
   <div class="ui-page-header__title">
-    <h1 class="ui-heading ui-heading--xl">Users</h1>
-    <p>Manage user accounts and permissions.</p>
+    <h1 class="ui-heading ui-heading--xl">{{ t('users', 'Users') }}</h1>
+    <p>{{ t('manage_user_accounts_and_permissions', 'Manage user accounts and permissions.') }}</p>
   </div>
   <div class="ui-page-header__actions">
-    <button class="ui-button ui-button--primary">Add user</button>
+    <button class="ui-button ui-button--primary">{{ t('add_user', 'Add user') }}</button>
   </div>
 </header>
 
@@ -19,13 +19,13 @@ description: Content area header with title, description, actions, and optional
 <!-- Breadcrumb spans the full width above the title row. -->
 <header class="ui-page-header ui-page-header--bordered">
   <nav class="ui-page-header__breadcrumb">
-    <span>Home / Settings / Users</span>
+    <span>{{ t('home_settings_users', 'Home / Settings / Users') }}</span>
   </nav>
   <div class="ui-page-header__title">
-    <h1 class="ui-heading ui-heading--xl">Users</h1>
+    <h1 class="ui-heading ui-heading--xl">{{ t('users', 'Users') }}</h1>
   </div>
   <div class="ui-page-header__actions">
-    <button class="ui-button">Export</button>
+    <button class="ui-button">{{ t('export', 'Export') }}</button>
   </div>
 </header>
 
@@ -33,7 +33,7 @@ description: Content area header with title, description, actions, and optional
 <!-- Bottom border via inset box-shadow. -->
 <header class="ui-page-header ui-page-header--bordered">
   <div class="ui-page-header__title">
-    <h1 class="ui-heading ui-heading--xl">Dashboard</h1>
+    <h1 class="ui-heading ui-heading--xl">{{ t('dashboard', 'Dashboard') }}</h1>
   </div>
 </header>
 
@@ -41,9 +41,9 @@ description: Content area header with title, description, actions, and optional
 <!-- Sticks to the top of the scroll container. -->
 <header class="ui-page-header ui-page-header--sticky ui-page-header--bordered">
   <div class="ui-page-header__title">
-    <h1 class="ui-heading ui-heading--xl">Sticky Header</h1>
+    <h1 class="ui-heading ui-heading--xl">{{ t('sticky_header', 'Sticky Header') }}</h1>
   </div>
   <div class="ui-page-header__actions">
-    <button class="ui-button">Save</button>
+    <button class="ui-button">{{ t('save', 'Save') }}</button>
   </div>
 </header>

package/src/layout/row/docs.html

@@ -5,40 +5,40 @@ description: Horizontal layout with wrapping.
 
 <!-- @basic -->
 <div class="ui-row ui-row--md">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Tag 1</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Tag 2</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Tag 3</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Tag 4</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('tag_1', 'Tag 1') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('tag_2', 'Tag 2') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('tag_3', 'Tag 3') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('tag_4', 'Tag 4') }}</div>
 </div>
 
 <!-- @sizes -->
 <div class="ui-row ui-row--xs">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">xs</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">xs</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">xs</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs', 'xs') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs', 'xs') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs', 'xs') }}</div>
 </div>
 <div class="ui-row ui-row--lg">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">lg</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">lg</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">lg</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg', 'lg') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg', 'lg') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg', 'lg') }}</div>
 </div>
 <div class="ui-row ui-row--sm">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">sm</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">sm</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">sm</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('sm', 'sm') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('sm', 'sm') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('sm', 'sm') }}</div>
 </div>
 
 <!-- @alignment -->
 <div class="ui-row ui-row--start" style="background: var(--ui-color-bg-muted)">
-  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">Start</div>
+  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('start', 'Start') }}</div>
 </div>
 <div class="ui-row ui-row--center" style="background: var(--ui-color-bg-muted)">
-  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">Center</div>
+  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('center', 'Center') }}</div>
 </div>
 <div class="ui-row ui-row--end" style="background: var(--ui-color-bg-muted)">
-  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">End</div>
+  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('end', 'End') }}</div>
 </div>
 <div class="ui-row ui-row--between" style="background: var(--ui-color-bg-muted)">
-  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">Between A</div>
-  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">Between B</div>
+  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('between_a', 'Between A') }}</div>
+  <div style="background: var(--ui-color-bg); padding: var(--ui-space-2)">{{ t('between_b', 'Between B') }}</div>
 </div>

package/src/layout/sidebar/docs.html

@@ -6,22 +6,22 @@ description: Fixed-position sidebar for app layouts with adjustable widths and p
 <!-- @basic -->
 <!-- Default sidebar positioned on the start side. Use inside an app-shell layout. -->
 <aside class="ui-sidebar">
-  <p>Sidebar content</p>
+  <p>{{ t('sidebar_content', 'Sidebar content') }}</p>
 </aside>
 
 <!-- @widths | column -->
 <aside class="ui-sidebar ui-sidebar--sm" style="position: relative; height: auto;">
-  <p>Small (192px)</p>
+  <p>{{ t('small_192px', 'Small (192px)') }}</p>
 </aside>
 <aside class="ui-sidebar ui-sidebar--md" style="position: relative; height: auto;">
-  <p>Medium (240px, default)</p>
+  <p>{{ t('medium_240px_default', 'Medium (240px, default)') }}</p>
 </aside>
 <aside class="ui-sidebar ui-sidebar--lg" style="position: relative; height: auto;">
-  <p>Large (320px)</p>
+  <p>{{ t('large_320px', 'Large (320px)') }}</p>
 </aside>
 
 <!-- @end_position -->
 <!-- Position sidebar on the end side with --end modifier. -->
 <aside class="ui-sidebar ui-sidebar--end">
-  <p>End sidebar</p>
+  <p>{{ t('end_sidebar', 'End sidebar') }}</p>
 </aside>