@teseor/css 1.15.1 → 1.15.3

package/src/components/typography/link/docs.html

@@ -4,27 +4,27 @@ description: Styled anchor element for text links with consistent hover and focu
 ---
 
 <!-- @default -->
-<a class="ui-link" href="#">Default link</a>
+<a class="ui-link" href="#">{{ t('default_link', 'Default link') }}</a>
 
 <!-- @muted_variant -->
 <!-- For secondary or less prominent links -->
-<a class="ui-link ui-link--muted" href="#">Muted link</a>
+<a class="ui-link ui-link--muted" href="#">{{ t('muted_link', 'Muted link') }}</a>
 
 <!-- @subtle_variant -->
 <!-- No underline by default, shows on hover -->
-<a class="ui-link ui-link--subtle" href="#">Subtle link</a>
+<a class="ui-link ui-link--subtle" href="#">{{ t('subtle_link', 'Subtle link') }}</a>
 
 <!-- @external_link -->
 <!-- Adds arrow indicator for external links -->
-<a class="ui-link ui-link--external" href="#">External link</a>
+<a class="ui-link ui-link--external" href="#">{{ t('external_link', 'External link') }}</a>
 
 <!-- @disabled -->
-<a class="ui-link ui-link--disabled" href="#" aria-disabled="true">Disabled link</a>
+<a class="ui-link ui-link--disabled" href="#" aria-disabled="true">{{ t('disabled_link', 'Disabled link') }}</a>
 
 <!-- @in_context -->
 <!-- Links inherit text size from context -->
 <p style="font-size: var(--ui-size-sm);">
-Read our 
-  <a class="ui-link" href="#">privacy policy</a>
- for more information.
+{{ t('read_our', 'Read our') }} 
+  <a class="ui-link" href="#">{{ t('privacy_policy', 'privacy policy') }}</a>
+ {{ t('for_more_information', 'for more information.') }}
 </p>

package/src/components/typography/list/docs.html

@@ -6,71 +6,71 @@ description: Ordered and unordered lists with spacing control, inline layout, an
 <!-- @default -->
 <!-- Unordered list with default bullet markers. -->
 <ul class="ui-list">
-  <li class="ui-list__item">First item in the list</li>
-  <li class="ui-list__item">Second item in the list</li>
-  <li class="ui-list__item">Third item in the list</li>
+  <li class="ui-list__item">{{ t('first_item_in_the_list', 'First item in the list') }}</li>
+  <li class="ui-list__item">{{ t('second_item_in_the_list', 'Second item in the list') }}</li>
+  <li class="ui-list__item">{{ t('third_item_in_the_list', 'Third item in the list') }}</li>
 </ul>
 
 <!-- @ordered -->
 <!-- Use on ol for numbered markers. -->
 <ol class="ui-list">
-  <li>Create the branch</li>
-  <li>Implement the feature</li>
-  <li>Open a pull request</li>
-  <li>Merge after review</li>
+  <li>{{ t('create_the_branch', 'Create the branch') }}</li>
+  <li>{{ t('implement_the_feature', 'Implement the feature') }}</li>
+  <li>{{ t('open_a_pull_request', 'Open a pull request') }}</li>
+  <li>{{ t('merge_after_review', 'Merge after review') }}</li>
 </ol>
 
 <!-- @unstyled -->
 <!-- Removes markers and indent for nav or custom lists. -->
 <ul class="ui-list ui-list--unstyled">
-  <li>No bullet markers</li>
-  <li>No inline padding</li>
-  <li>Clean vertical stack</li>
+  <li>{{ t('no_bullet_markers', 'No bullet markers') }}</li>
+  <li>{{ t('no_inline_padding', 'No inline padding') }}</li>
+  <li>{{ t('clean_vertical_stack', 'Clean vertical stack') }}</li>
 </ul>
 
 <!-- @inline -->
 <!-- Horizontal flow with wrapping. Markers removed. -->
 <ul class="ui-list ui-list--inline">
-  <li>HTML</li>
-  <li>CSS</li>
-  <li>JavaScript</li>
-  <li>TypeScript</li>
-  <li>React</li>
+  <li>{{ t('html', 'HTML') }}</li>
+  <li>{{ t('css', 'CSS') }}</li>
+  <li>{{ t('javascript', 'JavaScript') }}</li>
+  <li>{{ t('typescript', 'TypeScript') }}</li>
+  <li>{{ t('react', 'React') }}</li>
 </ul>
 
 <!-- @spacing -->
 <!-- Control gap between items with compact or loose variants. -->
 <div class="ui-column" style="gap: var(--ui-space-2)">
-  <p>Compact</p>
+  <p>{{ t('compact', 'Compact') }}</p>
   <ul class="ui-list ui-list--compact">
-    <li>Tight spacing</li>
-    <li>No gap between items</li>
-    <li>Dense content</li>
+    <li>{{ t('tight_spacing', 'Tight spacing') }}</li>
+    <li>{{ t('no_gap_between_items', 'No gap between items') }}</li>
+    <li>{{ t('dense_content', 'Dense content') }}</li>
   </ul>
-  <p>Default</p>
+  <p>{{ t('default', 'Default') }}</p>
   <ul class="ui-list">
-    <li>Standard spacing</li>
-    <li>One grid unit gap</li>
-    <li>Balanced readability</li>
+    <li>{{ t('standard_spacing', 'Standard spacing') }}</li>
+    <li>{{ t('one_grid_unit_gap', 'One grid unit gap') }}</li>
+    <li>{{ t('balanced_readability', 'Balanced readability') }}</li>
   </ul>
-  <p>Loose</p>
+  <p>{{ t('loose', 'Loose') }}</p>
   <ul class="ui-list ui-list--loose">
-    <li>Extra breathing room</li>
-    <li>Two grid units gap</li>
-    <li>Prominent separation</li>
+    <li>{{ t('extra_breathing_room', 'Extra breathing room') }}</li>
+    <li>{{ t('two_grid_units_gap', 'Two grid units gap') }}</li>
+    <li>{{ t('prominent_separation', 'Prominent separation') }}</li>
   </ul>
 </div>
 
 <!-- @nested -->
 <!-- Lists inside lists inherit spacing and show sub-level markers. -->
 <ul class="ui-list">
-  <li>Top-level item</li>
+  <li>{{ t('top_level_item', 'Top-level item') }}</li>
   <li>
-    <span>Parent with children</span>
+    <span>{{ t('parent_with_children', 'Parent with children') }}</span>
     <ul class="ui-list">
-      <li>Nested child</li>
-      <li>Another nested child</li>
+      <li>{{ t('nested_child', 'Nested child') }}</li>
+      <li>{{ t('another_nested_child', 'Another nested child') }}</li>
     </ul>
   </li>
-  <li>Back to top level</li>
+  <li>{{ t('back_to_top_level', 'Back to top level') }}</li>
 </ul>

package/src/config/guides/accessibility.docs.html

@@ -31,10 +31,10 @@ weight: 3
 <!-- @system_theme_detection -->
 <!-- Dark mode activates automatically when the OS is set to dark and no explicit data-theme attribute is present. Set data-theme to override. -->
 <div class="ui-card">
-  <p>Follows system preference when no data-theme is set</p>
+  <p>{{ t('follows_system_preference', 'Follows system preference when no data-theme is set') }}</p>
 </div>
 <div class="ui-card" data-theme="dark">
-  <p>Forced dark regardless of system preference</p>
+  <p>{{ t('forced_dark_regardless_of_system_preference', 'Forced dark regardless of system preference') }}</p>
 </div>
 // Explicit toggle (highest priority)
 [data-theme="dark"] {
@@ -53,10 +53,10 @@ weight: 3
 <!-- @focus_indicators -->
 <!-- All interactive elements use :focus-visible for keyboard-only focus rings. Mouse clicks do not show focus outlines. -->
 <div class="ui-row ui-row--sm">
-  <button class="ui-button ui-button--focus">Button</button>
-  <input class="ui-input ui-input--focus" placeholder="Input"></input>
+  <button class="ui-button ui-button--focus">{{ t('button', 'Button') }}</button>
+  <input class="ui-input ui-input--focus" placeholder="{{ t('input', 'Input') }}"></input>
   <select class="ui-select ui-select--focus">
-    <option>Select</option>
+    <option>{{ t('select', 'Select') }}</option>
   </select>
 </div>
 

package/src/config/guides/getting-started.docs.html

@@ -23,23 +23,23 @@ import '@teseor/css/dist/index.css';
 <!-- @root_class -->
 <!-- Add the .ui-root class to set baseline typography and colors. -->
 <div class="ui-root">
-  <p>Text inherits font, size, color from .ui-root</p>
+  <p>{{ t('text_inherits_from_ui_root', 'Text inherits font, size, color from .ui-root') }}</p>
 </div>
 
 <!-- @first_component -->
 <!-- Use any component by adding its class. No JS required. -->
 <div class="ui-row ui-row--sm">
-  <button class="ui-button">Primary</button>
-  <button class="ui-button ui-button--secondary">Secondary</button>
-  <button class="ui-button ui-button--danger">Danger</button>
+  <button class="ui-button">{{ t('primary', 'Primary') }}</button>
+  <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
+  <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
 <div class="ui-card">
-  <h3 class="ui-heading ui-heading--4">Card Title</h3>
-  <p>Cards use semantic tokens for padding, border, and background.</p>
+  <h3 class="ui-heading ui-heading--4">{{ t('card_title', 'Card Title') }}</h3>
+  <p>{{ t('cards_use_semantic_tokens', 'Cards use semantic tokens for padding, border, and background.') }}</p>
 </div>
 
 <!-- @customize -->
 <!-- Override design tokens with CSS custom properties. No build step required. -->
 <div class="theme-demo" style="--ui-hue-primary: 270">
-  <button class="ui-button">Purple brand</button>
+  <button class="ui-button">{{ t('purple_brand', 'Purple brand') }}</button>
 </div>

package/src/config/guides/theming.docs.html

@@ -8,62 +8,62 @@ weight: 2
 <!-- @brand_colors -->
 <!-- Change the entire color palette by adjusting hue values -->
 <div class="theme-demo">
-  <button class="ui-button">Primary</button>
-  <button class="ui-button ui-button--secondary">Secondary</button>
-  <button class="ui-button ui-button--danger">Danger</button>
+  <button class="ui-button">{{ t('primary', 'Primary') }}</button>
+  <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
+  <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
 <div class="theme-demo theme-purple">
-  <button class="ui-button">Primary</button>
-  <button class="ui-button ui-button--secondary">Secondary</button>
-  <button class="ui-button ui-button--danger">Danger</button>
+  <button class="ui-button">{{ t('primary', 'Primary') }}</button>
+  <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
+  <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
 <div class="theme-demo theme-teal">
-  <button class="ui-button">Primary</button>
-  <button class="ui-button ui-button--secondary">Secondary</button>
-  <button class="ui-button ui-button--danger">Danger</button>
+  <button class="ui-button">{{ t('primary', 'Primary') }}</button>
+  <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
+  <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
 <div class="theme-demo theme-orange">
-  <button class="ui-button">Primary</button>
-  <button class="ui-button ui-button--secondary">Secondary</button>
-  <button class="ui-button ui-button--danger">Danger</button>
+  <button class="ui-button">{{ t('primary', 'Primary') }}</button>
+  <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
+  <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
 
 <!-- @dark_mode -->
 <!-- Dark mode uses the CSS light-dark() function. Tokens resolve automatically based on color-scheme. Override with data-theme attribute. -->
 <div class="theme-demo">
   <div class="ui-card">
-    <p>Follows OS color scheme</p>
+    <p>{{ t('follows_os_color_scheme', 'Follows OS color scheme') }}</p>
   </div>
 </div>
 <div class="theme-demo" data-theme="light">
   <div class="ui-card">
-    <p>Always light</p>
+    <p>{{ t('always_light', 'Always light') }}</p>
   </div>
 </div>
 <div class="theme-demo" data-theme="dark">
   <div class="ui-card">
-    <p>Always dark</p>
+    <p>{{ t('always_dark', 'Always dark') }}</p>
   </div>
 </div>
 
 <!-- @component_overrides -->
 <!-- Override specific component tokens -->
 <div class="theme-demo custom-buttons">
-  <button class="ui-button ui-button--sm">Small</button>
-  <button class="ui-button">Default</button>
-  <button class="ui-button ui-button--lg">Large</button>
+  <button class="ui-button ui-button--sm">{{ t('small', 'Small') }}</button>
+  <button class="ui-button">{{ t('default', 'Default') }}</button>
+  <button class="ui-button ui-button--lg">{{ t('large', 'Large') }}</button>
 </div>
 <div class="theme-demo custom-cards">
   <div class="ui-card">
-    <p>Card with custom padding</p>
+    <p>{{ t('card_with_custom_padding', 'Card with custom padding') }}</p>
   </div>
 </div>
 
 <!-- @full_theme_example -->
 <!-- Complete theme customization -->
 <div class="theme-demo theme-corporate">
-  <button class="ui-button">Action</button>
+  <button class="ui-button">{{ t('action', 'Action') }}</button>
   <div class="ui-card">
-    <p>Corporate theme with teal accent and sharp corners</p>
+    <p>{{ t('corporate_theme_with_teal_accent_and_sharp_corners', 'Corporate theme with teal accent and sharp corners') }}</p>
   </div>
 </div>

package/src/config/tokens/docs.html

@@ -15,34 +15,34 @@ skipValidation: true
 <!-- Border radius tokens derived from the 8px unit. -->
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-sm)"></div>
-  <small>sm (4px)</small>
+  <small>{{ t('sm_4px', 'sm (4px)') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-md)"></div>
-  <small>md (8px)</small>
+  <small>{{ t('md_8px', 'md (8px)') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-lg)"></div>
-  <small>lg (16px)</small>
+  <small>{{ t('lg_16px', 'lg (16px)') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-full)"></div>
-  <small>full</small>
+  <small>{{ t('full', 'full') }}</small>
 </div>
 
 <!-- @shadows | row -->
 <!-- Elevation shadows using the primary hue for tinted depth. -->
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-space-8); height: var(--ui-row-3); background: var(--ui-color-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm)"></div>
-  <small>sm</small>
+  <small>{{ t('sm', 'sm') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-space-8); height: var(--ui-row-3); background: var(--ui-color-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-md)"></div>
-  <small>md</small>
+  <small>{{ t('md', 'md') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-space-8); height: var(--ui-row-3); background: var(--ui-color-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-lg)"></div>
-  <small>lg</small>
+  <small>{{ t('lg', 'lg') }}</small>
 </div>
 
 <!-- @motion -->

package/src/config/tokens/grid/docs.html

@@ -5,6 +5,6 @@ skipValidation: true
 ---
 
 <!-- @default | column -->
-<div style="background: var(--ui-color-primary); color: var(--ui-color-text-inverse); height: var(--ui-row-1); display: flex; align-items: center; padding: 0 var(--ui-space-2)">row-1 (16px)</div>
-<div style="background: var(--ui-color-primary); color: var(--ui-color-text-inverse); height: var(--ui-row-2); display: flex; align-items: center; padding: 0 var(--ui-space-2)">row-2 (32px)</div>
-<div style="background: var(--ui-color-primary); color: var(--ui-color-text-inverse); height: var(--ui-row-3); display: flex; align-items: center; padding: 0 var(--ui-space-2)">row-3 (48px)</div>
+<div style="background: var(--ui-color-primary); color: var(--ui-color-text-inverse); height: var(--ui-row-1); display: flex; align-items: center; padding: 0 var(--ui-space-2)">{{ t('row_1_16px', 'row-1 (16px)') }}</div>
+<div style="background: var(--ui-color-primary); color: var(--ui-color-text-inverse); height: var(--ui-row-2); display: flex; align-items: center; padding: 0 var(--ui-space-2)">{{ t('row_2_32px', 'row-2 (32px)') }}</div>
+<div style="background: var(--ui-color-primary); color: var(--ui-color-text-inverse); height: var(--ui-row-3); display: flex; align-items: center; padding: 0 var(--ui-space-2)">{{ t('row_3_48px', 'row-3 (48px)') }}</div>

package/src/config/tokens/spacing/docs.html

@@ -7,25 +7,25 @@ skipValidation: true
 <!-- @default | row -->
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-space-1); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
-  <small>space-1</small>
+  <small>{{ t('space_1', 'space-1') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-space-2); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
-  <small>space-2</small>
+  <small>{{ t('space_2', 'space-2') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-space-3); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
-  <small>space-3</small>
+  <small>{{ t('space_3', 'space-3') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-space-4); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
-  <small>space-4</small>
+  <small>{{ t('space_4', 'space-4') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-space-6); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
-  <small>space-6</small>
+  <small>{{ t('space_6', 'space-6') }}</small>
 </div>
 <div class="ui-column ui-column--xs" style="align-items: center">
   <div style="width: var(--ui-space-8); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
-  <small>space-8</small>
+  <small>{{ t('space_8', 'space-8') }}</small>
 </div>

package/src/debug/docs.html

@@ -20,8 +20,8 @@ skipValidation: true
 <!-- Outlines all child elements to reveal layout boundaries. -->
 <div class="ui-debug-outline">
   <div class="ui-row ui-row--sm">
-    <div style="padding: var(--ui-space-1)">A</div>
-    <div style="padding: var(--ui-space-1)">B</div>
-    <div style="padding: var(--ui-space-1)">C</div>
+    <div style="padding: var(--ui-space-1)">{{ t('a', 'A') }}</div>
+    <div style="padding: var(--ui-space-1)">{{ t('b', 'B') }}</div>
+    <div style="padding: var(--ui-space-1)">{{ t('c', 'C') }}</div>
   </div>
 </div>

package/src/layout/app-shell/docs.html

@@ -21,27 +21,27 @@ description: Layout primitives for app shells with sidebars and content containe
 <!-- Add a fixed topbar by setting --topbar-height on app-shell. Sidebar and main offset automatically. -->
 <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__end">User</div>
+    <div class="ui-topbar__start"><strong>{{ t('app', 'App') }}</strong></div>
+    <div class="ui-topbar__end">{{ t('user', 'User') }}</div>
   </header>
-  <aside class="ui-sidebar">Sidebar</aside>
+  <aside class="ui-sidebar">{{ t('sidebar', 'Sidebar') }}</aside>
   <main class="ui-main">
-    <div class="ui-container">Content</div>
+    <div class="ui-container">{{ t('content', 'Content') }}</div>
   </main>
 </body>
 
 <!-- @sidebar_widths | column -->
 <div class="ui-row ui-row--sm">
   <code>.ui-sidebar--sm</code>
-  <span>192px (24 units)</span>
+  <span>{{ t('192px_24_units', '192px (24 units)') }}</span>
 </div>
 <div class="ui-row ui-row--sm">
   <code>.ui-sidebar--md</code>
-  <span>240px (30 units) - default</span>
+  <span>{{ t('240px_30_units_default', '240px (30 units) - default') }}</span>
 </div>
 <div class="ui-row ui-row--sm">
   <code>.ui-sidebar--lg</code>
-  <span>320px (40 units)</span>
+  <span>{{ t('320px_40_units', '320px (40 units)') }}</span>
 </div>
 
 <!-- @sidebar_position -->
@@ -52,33 +52,33 @@ description: Layout primitives for app shells with sidebars and content containe
 <!-- @container_widths | column -->
 <div class="ui-row ui-row--sm">
   <code>.ui-container--sm</code>
-  <span>640px (80 units)</span>
+  <span>{{ t('640px_80_units', '640px (80 units)') }}</span>
 </div>
 <div class="ui-row ui-row--sm">
   <code>.ui-container--md</code>
-  <span>800px (100 units)</span>
+  <span>{{ t('800px_100_units', '800px (100 units)') }}</span>
 </div>
 <div class="ui-row ui-row--sm">
   <code>.ui-container--lg</code>
-  <span>960px (120 units) - default</span>
+  <span>{{ t('960px_120_units_default', '960px (120 units) - default') }}</span>
 </div>
 <div class="ui-row ui-row--sm">
   <code>.ui-container--xl</code>
-  <span>1280px (160 units)</span>
+  <span>{{ t('1280px_160_units', '1280px (160 units)') }}</span>
 </div>
 <div class="ui-row ui-row--sm">
   <code>.ui-container--full</code>
-  <span>No max width</span>
+  <span>{{ t('no_max_width', 'No max width') }}</span>
 </div>
 
 <!-- @with_footer -->
 <!-- Place footer inside the content area, after the container. -->
 <body class="ui-app-shell">
   <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/aspect-ratio/docs.html

@@ -6,33 +6,33 @@ description: Constrains a container to a specific aspect ratio. Media children f
 <!-- @presets -->
 <div class="ui-row ui-row--md">
   <div class="ui-aspect-ratio ui-aspect-ratio--square" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
-    <span style="padding: var(--ui-space-2)">square</span>
+    <span style="padding: var(--ui-space-2)">{{ t('square', 'square') }}</span>
   </div>
   <div class="ui-aspect-ratio ui-aspect-ratio--video" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
-    <span style="padding: var(--ui-space-2)">video</span>
+    <span style="padding: var(--ui-space-2)">{{ t('video', 'video') }}</span>
   </div>
   <div class="ui-aspect-ratio ui-aspect-ratio--photo" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
-    <span style="padding: var(--ui-space-2)">photo</span>
+    <span style="padding: var(--ui-space-2)">{{ t('photo', 'photo') }}</span>
   </div>
   <div class="ui-aspect-ratio ui-aspect-ratio--wide" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
-    <span style="padding: var(--ui-space-2)">wide</span>
+    <span style="padding: var(--ui-space-2)">{{ t('wide', 'wide') }}</span>
   </div>
   <div class="ui-aspect-ratio ui-aspect-ratio--portrait" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
-    <span style="padding: var(--ui-space-2)">portrait</span>
+    <span style="padding: var(--ui-space-2)">{{ t('portrait', 'portrait') }}</span>
   </div>
 </div>
 
 <!-- @with_media -->
 <div class="ui-row ui-row--md">
   <div class="ui-aspect-ratio ui-aspect-ratio--video" style="inline-size: 240px">
-    <div style="inline-size: 100%; block-size: 100%; background: var(--ui-color-primary); color: var(--ui-color-on-primary); display: grid; place-items: center">img (video)</div>
+    <div style="inline-size: 100%; block-size: 100%; background: var(--ui-color-primary); color: var(--ui-color-on-primary); display: grid; place-items: center">{{ t('img_video', 'img (video)') }}</div>
   </div>
   <div class="ui-aspect-ratio ui-aspect-ratio--square" style="inline-size: 240px">
-    <div style="inline-size: 100%; block-size: 100%; background: var(--ui-color-primary); color: var(--ui-color-on-primary); display: grid; place-items: center">img (square)</div>
+    <div style="inline-size: 100%; block-size: 100%; background: var(--ui-color-primary); color: var(--ui-color-on-primary); display: grid; place-items: center">{{ t('img_square', 'img (square)') }}</div>
   </div>
 </div>
 
 <!-- @custom_ratio -->
 <div class="ui-aspect-ratio" style="--ui-aspect-ratio: 2.35 / 1; inline-size: 320px; background: var(--ui-color-bg-muted)">
-  <span style="padding: var(--ui-space-2)">2.35:1 (cinemascope)</span>
+  <span style="padding: var(--ui-space-2)">{{ t('2351_cinemascope', '2.35:1 (cinemascope)') }}</span>
 </div>

package/src/layout/box/docs.html

@@ -4,21 +4,21 @@ description: Base container with style props. Foundation for layout primitives.
 ---
 
 <!-- @default -->
-<div class="ui-box">Content</div>
+<div class="ui-box">{{ t('content', 'Content') }}</div>
 
 <!-- @padding | column -->
-<div class="ui-box ui-box--p-1 ui-box--bg-subtle">Padding 1</div>
-<div class="ui-box ui-box--p-2 ui-box--bg-subtle">Padding 2</div>
-<div class="ui-box ui-box--p-3 ui-box--bg-subtle">Padding 3</div>
-<div class="ui-box ui-box--p-4 ui-box--bg-subtle">Padding 4</div>
+<div class="ui-box ui-box--p-1 ui-box--bg-subtle">{{ t('padding_1', 'Padding 1') }}</div>
+<div class="ui-box ui-box--p-2 ui-box--bg-subtle">{{ t('padding_2', 'Padding 2') }}</div>
+<div class="ui-box ui-box--p-3 ui-box--bg-subtle">{{ t('padding_3', 'Padding 3') }}</div>
+<div class="ui-box ui-box--p-4 ui-box--bg-subtle">{{ t('padding_4', 'Padding 4') }}</div>
 
 <!-- @background | column -->
-<div class="ui-box ui-box--p-2 ui-box--bg-subtle">Subtle background</div>
-<div class="ui-box ui-box--p-2 ui-box--bg-muted">Muted background</div>
+<div class="ui-box ui-box--p-2 ui-box--bg-subtle">{{ t('subtle_background', 'Subtle background') }}</div>
+<div class="ui-box ui-box--p-2 ui-box--bg-muted">{{ t('muted_background', 'Muted background') }}</div>
 
 <!-- @rounded | row -->
-<div class="ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded">Rounded</div>
-<div class="ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded-lg">Rounded lg</div>
+<div class="ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded">{{ t('rounded', 'Rounded') }}</div>
+<div class="ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded-lg">{{ t('rounded_lg', 'Rounded lg') }}</div>
 
 <!-- @custom_via_css_variables -->
-<div class="ui-box" style="--box-padding: var(--ui-space-3); --box-bg: var(--ui-color-primary); --box-color: white; --box-radius: var(--ui-radius-lg);">Custom box</div>
+<div class="ui-box" style="--box-padding: var(--ui-space-3); --box-bg: var(--ui-color-primary); --box-color: white; --box-radius: var(--ui-radius-lg);">{{ t('custom_box', 'Custom box') }}</div>

package/src/layout/center/docs.html

@@ -6,18 +6,18 @@ description: Centers content horizontally and vertically.
 <!-- @basic -->
 <!-- Centers children both horizontally and vertically using flexbox. -->
 <div class="ui-center" style="height: var(--ui-row-4); background: var(--ui-color-bg-muted)">
-  <span>Centered content</span>
+  <span>{{ t('centered_content', 'Centered content') }}</span>
 </div>
 
 <!-- @column_direction -->
 <!-- Stack centered children vertically. -->
 <div class="ui-center ui-center--column" style="height: var(--ui-row-6); background: var(--ui-color-bg-muted)">
-  <span>First line</span>
-  <span>Second line</span>
+  <span>{{ t('first_line', 'First line') }}</span>
+  <span>{{ t('second_line', 'Second line') }}</span>
 </div>
 
 <!-- @full_page_center -->
 <!-- Center content within a full viewport area, useful for loading or empty states. -->
 <div class="ui-center" style="height: var(--ui-row-8); background: var(--ui-color-bg-muted)">
-  <p>No results found</p>
+  <p>{{ t('no_results_found', 'No results found') }}</p>
 </div>

package/src/layout/column/docs.html

@@ -5,25 +5,25 @@ description: Vertical layout with consistent gap.
 
 <!-- @basic -->
 <div class="ui-column ui-column--sm">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Item 1</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Item 2</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Item 3</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('item_1', 'Item 1') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('item_2', 'Item 2') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">{{ t('item_3', 'Item 3') }}</div>
 </div>
 
 <!-- @sizes -->
 <div class="ui-column ui-column--xs">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">xs gap</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">xs gap</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs_gap', 'xs gap') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xs_gap', 'xs gap') }}</div>
 </div>
 <div class="ui-column ui-column--md">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">md gap</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">md gap</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('md_gap', 'md gap') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('md_gap', 'md gap') }}</div>
 </div>
 <div class="ui-column ui-column--lg">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">lg gap</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">lg gap</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg_gap', 'lg gap') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('lg_gap', 'lg gap') }}</div>
 </div>
 <div class="ui-column ui-column--xl">
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">xl gap</div>
-  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">xl gap</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xl_gap', 'xl gap') }}</div>
+  <div style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('xl_gap', 'xl gap') }}</div>
 </div>