@teseor/css 1.15.2 → 1.15.5

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/_variables.scss

@@ -119,8 +119,13 @@ $weight-bold: 700;
 // Letter spacing
 $tracking-display: -0.02em;
 $tracking-body: 0;
+$tracking-wide: 0.05em;
 $tracking-caps: 0.08em;
 
+// Relative font sizes (for sub-elements sized relative to parent)
+$font-size-relative-xs: 0.6em;
+$font-size-relative-sm: 0.75em;
+
 // ==========================================================================
 // 5. Radius — derived from $unit
 // ==========================================================================
@@ -135,6 +140,7 @@ $radius-full: 9999px;
 $border-width-sm: $unit * 0.125; // 1px
 $border-width-md: $unit * 0.25; // 2px
 $border-width-lg: $unit * 0.5; // 4px
+$focus-ring-offset: -$border-width-md;
 
 // ==========================================================================
 // 7. Shadows — static hue fallback
@@ -197,6 +203,7 @@ $overlay-bg: rgb(0 0 0 / 0.5);
 $overlay-bg-light: rgb(255 255 255 / 0.7);
 $overlay-bg-blur: rgb(0 0 0 / 0.3);
 $overlay-bg-subtle: rgb(0 0 0 / 0.1);
+$stripe-highlight: rgb(255 255 255 / 0.15);
 
 // ==========================================================================
 // 11. Semantic spacing
@@ -223,6 +230,13 @@ $spinner-duration: 750ms;
 $progress-circle-stroke-width: 8;
 $skeleton-shimmer: rgb(255 255 255 / 0.5);
 
+// Layout
+$container-threshold-sm: 30rem;
+$grid-col-min: 16rem;
+
+// Icon
+$icon-size-inline: 1em;
+
 // Misc
 $slider-thumb-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
 $toast-viewport-max-width: 420px;

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>

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

@@ -5,31 +5,31 @@ 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>
+<div class="ui-content ui-bg-subtle">
+  <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>
+<div class="ui-content ui-content--prose ui-bg-subtle">
+  <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>
+<div class="ui-content ui-content--flush ui-bg-subtle">
+  <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>