@teseor/css 1.15.2 → 1.15.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

package/src/base/docs.html

@@ -8,7 +8,7 @@ skipValidation: true
 <!-- @usage -->
 <!-- Add the .ui-root class to the html or body element to establish baseline typography and color. -->
 <div class="ui-root">
-  <p>Text inherits font-family, size, line-height, and color from .ui-root</p>
+  <p>{{ t('text_inherits_from_ui_root', 'Text inherits font-family, size, line-height, and color from .ui-root') }}</p>
 </div>
 .ui-root {
   font-family: var(--ui-font-sans);

package/src/base/typography/docs.html

@@ -9,9 +9,9 @@ skipValidation: true
 <table class="ui-table">
   <thead>
     <tr>
-      <th>Token</th>
-      <th>Size</th>
-      <th>Line-height</th>
+      <th>{{ t('token', 'Token') }}</th>
+      <th>{{ t('size', 'Size') }}</th>
+      <th>{{ t('line_height', 'Line-height') }}</th>
     </tr>
   </thead>
   <tbody>
@@ -76,47 +76,47 @@ skipValidation: true
 
 <!-- @headings -->
 <!-- Headings use semantic tokens and adjust size at breakpoints. -->
-<h1>Heading 1 - 40px / 48px</h1>
-<h2>Heading 2 - 32px / 40px</h2>
-<h3>Heading 3 - 28px / 32px</h3>
-<h4>Heading 4 - 24px / 32px</h4>
-<h5>Heading 5 - 20px / 24px</h5>
+<h1>{{ t('heading_1_40px_48px', 'Heading 1 - 40px / 48px') }}</h1>
+<h2>{{ t('heading_2_32px_40px', 'Heading 2 - 32px / 40px') }}</h2>
+<h3>{{ t('heading_3_28px_32px', 'Heading 3 - 28px / 32px') }}</h3>
+<h4>{{ t('heading_4_24px_32px', 'Heading 4 - 24px / 32px') }}</h4>
+<h5>{{ t('heading_5_20px_24px', 'Heading 5 - 20px / 24px') }}</h5>
 
 <!-- @body_text -->
 <!-- Default body text at 16px with 24px line-height (1.5x ratio). -->
 <p>
-Body text at 16px with 24px line-height. The 
-  <strong>bold text</strong>
- and 
+{{ t('body_text_at_16px_with_24px_line_height_the', 'Body text at 16px with 24px line-height. The') }} 
+  <strong>{{ t('bold_text', 'bold text') }}</strong>
+ {{ t('and', 'and') }} 
   <code>inline code</code>
- maintain the same rhythm.
+ {{ t('maintain_the_same_rhythm', 'maintain the same rhythm.') }}
 </p>
-<p class="ui-text-body-sm">Body small at 14px with 24px line-height for secondary text.</p>
+<p class="ui-text-body-sm">{{ t('body_small_demo', 'Body small at 14px with 24px line-height for secondary text.') }}</p>
 
 <!-- @text_roles -->
 <!-- Semantic text styles for specific use cases. -->
-<p class="ui-text-lead">Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros.</p>
-<p class="ui-text-eyebrow">Eyebrow text</p>
-<h2>Related Heading</h2>
-<p class="ui-text-caption">Caption text - 12px / 16px. Use for labels, hints, and metadata.</p>
+<p class="ui-text-lead">{{ t('lead_paragraph_demo', 'Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros.') }}</p>
+<p class="ui-text-eyebrow">{{ t('eyebrow_text', 'Eyebrow text') }}</p>
+<h2>{{ t('related_heading', 'Related Heading') }}</h2>
+<p class="ui-text-caption">{{ t('caption_text_demo', 'Caption text - 12px / 16px. Use for labels, hints, and metadata.') }}</p>
 
 <!-- @font_weights -->
 <!-- Four weight levels for hierarchy. -->
-<p class="ui-font-normal">Normal (400) - Body text</p>
-<p class="ui-font-medium">Medium (500) - Labels, small headings</p>
-<p class="ui-font-semibold">Semibold (600) - Subheadings</p>
-<p class="ui-font-bold">Bold (700) - Headlines, emphasis</p>
+<p class="ui-font-normal">{{ t('normal_400_body_text', 'Normal (400) - Body text') }}</p>
+<p class="ui-font-medium">{{ t('medium_500_labels_small_headings', 'Medium (500) - Labels, small headings') }}</p>
+<p class="ui-font-semibold">{{ t('semibold_600_subheadings', 'Semibold (600) - Subheadings') }}</p>
+<p class="ui-font-bold">{{ t('bold_700_headlines_emphasis', 'Bold (700) - Headlines, emphasis') }}</p>
 
 <!-- @letter_spacing -->
 <!-- Three tracking options based on use case. -->
-<p class="ui-text-3xl ui-tracking-display">Display tracking (-0.02em)</p>
-<p>Body tracking (0) - default</p>
-<p class="ui-text-eyebrow">Caps tracking (+0.08em)</p>
+<p class="ui-text-3xl ui-tracking-display">{{ t('display_tracking_002em', 'Display tracking (-0.02em)') }}</p>
+<p>{{ t('body_tracking_0_default', 'Body tracking (0) - default') }}</p>
+<p class="ui-text-eyebrow">{{ t('caps_tracking_008em', 'Caps tracking (+0.08em)') }}</p>
 
 <!-- @line_length -->
 <!-- Constrain text width for optimal readability (45-75 characters). -->
 <div class="ui-prose">
-  <p>This paragraph is constrained to 65ch max-width for optimal reading comfort. Long lines of text are harder to read because the eye has difficulty tracking back to the start of the next line.</p>
+  <p>{{ t('paragraph_constrained_65ch', 'This paragraph is constrained to 65ch max-width for optimal reading comfort. Long lines of text are harder to read because the eye has difficulty tracking back to the start of the next line.') }}</p>
 </div>
 
 <!-- @responsive_behavior -->
@@ -124,33 +124,33 @@ Body text at 16px with 24px line-height. The
 <table class="ui-table">
   <thead>
     <tr>
-      <th>Heading</th>
-      <th>Mobile</th>
-      <th>Default</th>
-      <th>Desktop</th>
+      <th>{{ t('heading', 'Heading') }}</th>
+      <th>{{ t('mobile', 'Mobile') }}</th>
+      <th>{{ t('default', 'Default') }}</th>
+      <th>{{ t('desktop', 'Desktop') }}</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>h1</td>
+      <td>{{ t('h1', 'h1') }}</td>
       <td>28px</td>
       <td>40px</td>
       <td>48px</td>
     </tr>
     <tr>
-      <td>h2</td>
+      <td>{{ t('h2', 'h2') }}</td>
       <td>24px</td>
       <td>32px</td>
       <td>40px</td>
     </tr>
     <tr>
-      <td>h3</td>
+      <td>{{ t('h3', 'h3') }}</td>
       <td>20px</td>
       <td>28px</td>
       <td>28px</td>
     </tr>
     <tr>
-      <td>h4</td>
+      <td>{{ t('h4', 'h4') }}</td>
       <td>18px</td>
       <td>24px</td>
       <td>24px</td>

package/src/components/actions/button/docs.html

@@ -5,35 +5,35 @@ description: Buttons trigger actions. Use primary for main CTA, secondary for le
 
 <!-- @variants | row -->
 <!-- Button styles for different purposes and emphasis levels. -->
-<button class="ui-button">Primary</button>
-<button class="ui-button ui-button--secondary">Secondary</button>
-<button class="ui-button ui-button--outline">Outline</button>
-<button class="ui-button ui-button--ghost">Ghost</button>
-<button class="ui-button ui-button--danger">Danger</button>
-<button class="ui-button ui-button--link">Link</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--outline">{{ t('outline', 'Outline') }}</button>
+<button class="ui-button ui-button--ghost">{{ t('ghost', 'Ghost') }}</button>
+<button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
+<button class="ui-button ui-button--link">{{ t('link', 'Link') }}</button>
 
 <!-- @sizes | row -->
 <!-- Small for dense UIs, default for most cases, large for prominent CTAs. -->
-<button class="ui-button ui-button--sm">Small</button>
-<button class="ui-button ui-button--md">Medium</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 ui-button--md">{{ t('medium', 'Medium') }}</button>
+<button class="ui-button ui-button--lg">{{ t('large', 'Large') }}</button>
 
 <!-- @radius | row -->
 <!-- Override border radius. Use radius-full for pill-shaped buttons. -->
-<button class="ui-button ui-button--radius-none">None</button>
-<button class="ui-button ui-button--radius-sm">Small</button>
-<button class="ui-button">Default</button>
-<button class="ui-button ui-button--radius-lg">Large</button>
-<button class="ui-button ui-button--radius-full">Full</button>
+<button class="ui-button ui-button--radius-none">{{ t('none', 'None') }}</button>
+<button class="ui-button ui-button--radius-sm">{{ t('small', 'Small') }}</button>
+<button class="ui-button">{{ t('default', 'Default') }}</button>
+<button class="ui-button ui-button--radius-lg">{{ t('large', 'Large') }}</button>
+<button class="ui-button ui-button--radius-full">{{ t('full', 'Full') }}</button>
 
 <!-- @block -->
 <!-- Full width button for mobile or form submit. -->
-<button class="ui-button ui-button--block">Block Button</button>
+<button class="ui-button ui-button--block">{{ t('block_button', 'Block Button') }}</button>
 
 <!-- @loading | row -->
 <!-- Shows spinner animation. Button becomes non-interactive. -->
-<button class="ui-button ui-button--loading">Loading</button>
-<button class="ui-button ui-button--secondary ui-button--loading">Loading</button>
+<button class="ui-button ui-button--loading">{{ t('loading', 'Loading') }}</button>
+<button class="ui-button ui-button--secondary ui-button--loading">{{ t('loading', 'Loading') }}</button>
 
 <!-- @icon_button | row -->
 <!-- Square icon-only buttons. Use with SVG icons from Lucide or similar sets. -->
@@ -63,10 +63,10 @@ description: Buttons trigger actions. Use primary for main CTA, secondary for le
     <path d="M5 12h14"></path>
     <path d="M12 5v14"></path>
   </svg>
-Add Item
+{{ t('add_item', 'Add Item') }}
 </button>
 <button class="ui-button ui-button--secondary">
-Next
+{{ t('next', 'Next') }}
   <svg class="ui-icon ui-button__icon ui-button__icon--end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path d="m9 18 6-6-6-6"></path>
   </svg>

package/src/components/actions/button-group/docs.html

@@ -6,37 +6,37 @@ mergeInto: button
 
 <!-- @default -->
 <div class="ui-button-group" role="group">
-  <button class="ui-button ui-button--outline">Left</button>
-  <button class="ui-button ui-button--outline">Middle</button>
-  <button class="ui-button ui-button--outline">Right</button>
+  <button class="ui-button ui-button--outline">{{ t('left', 'Left') }}</button>
+  <button class="ui-button ui-button--outline">{{ t('middle', 'Middle') }}</button>
+  <button class="ui-button ui-button--outline">{{ t('right', 'Right') }}</button>
 </div>
 
 <!-- @primary_buttons -->
 <div class="ui-button-group" role="group">
-  <button class="ui-button">Save</button>
-  <button class="ui-button">Save & Close</button>
+  <button class="ui-button">{{ t('save', 'Save') }}</button>
+  <button class="ui-button">{{ t('save_close', 'Save & Close') }}</button>
 </div>
 
 <!-- @vertical -->
 <div class="ui-button-group ui-button-group--vertical" role="group">
-  <button class="ui-button ui-button--outline">Top</button>
-  <button class="ui-button ui-button--outline">Middle</button>
-  <button class="ui-button ui-button--outline">Bottom</button>
+  <button class="ui-button ui-button--outline">{{ t('top', 'Top') }}</button>
+  <button class="ui-button ui-button--outline">{{ t('middle', 'Middle') }}</button>
+  <button class="ui-button ui-button--outline">{{ t('bottom', 'Bottom') }}</button>
 </div>
 
 <!-- @with_icons -->
-<div class="ui-button-group" role="group" aria-label="Text formatting">
-  <button class="ui-button ui-button--outline ui-button--icon" aria-label="Bold">
+<div class="ui-button-group" role="group" aria-label="{{ t('text_formatting', 'Text formatting') }}">
+  <button class="ui-button ui-button--outline ui-button--icon" aria-label="{{ t('bold', 'Bold') }}">
     <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
       <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"></path>
     </svg>
   </button>
-  <button class="ui-button ui-button--outline ui-button--icon" aria-label="Italic">
+  <button class="ui-button ui-button--outline ui-button--icon" aria-label="{{ t('italic', 'Italic') }}">
     <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
       <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"></path>
     </svg>
   </button>
-  <button class="ui-button ui-button--outline ui-button--icon" aria-label="Underline">
+  <button class="ui-button ui-button--outline ui-button--icon" aria-label="{{ t('underline', 'Underline') }}">
     <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
       <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"></path>
     </svg>

package/src/components/actions/close-button/docs.html

@@ -5,7 +5,7 @@ mergeInto: button
 ---
 
 <!-- @default -->
-<button class="ui-close-button" type="button" aria-label="Close">
+<button class="ui-close-button" type="button" aria-label="{{ t('close', 'Close') }}">
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
@@ -13,19 +13,19 @@ mergeInto: button
 </button>
 
 <!-- @sizes | row -->
-<button class="ui-close-button ui-close-button--sm" type="button" aria-label="Close">
+<button class="ui-close-button ui-close-button--sm" type="button" aria-label="{{ t('close', 'Close') }}">
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
   </svg>
 </button>
-<button class="ui-close-button" type="button" aria-label="Close">
+<button class="ui-close-button" type="button" aria-label="{{ t('close', 'Close') }}">
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
   </svg>
 </button>
-<button class="ui-close-button ui-close-button--lg" type="button" aria-label="Close">
+<button class="ui-close-button ui-close-button--lg" type="button" aria-label="{{ t('close', 'Close') }}">
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
@@ -34,13 +34,13 @@ mergeInto: button
 
 <!-- @subtle | row -->
 <!-- Lower visual prominence for secondary dismiss actions. -->
-<button class="ui-close-button ui-close-button--subtle" type="button" aria-label="Close">
+<button class="ui-close-button ui-close-button--subtle" type="button" aria-label="{{ t('close', 'Close') }}">
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
   </svg>
 </button>
-<button class="ui-close-button ui-close-button--subtle ui-close-button--sm" type="button" aria-label="Close">
+<button class="ui-close-button ui-close-button--subtle ui-close-button--sm" type="button" aria-label="{{ t('close', 'Close') }}">
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
@@ -48,25 +48,25 @@ mergeInto: button
 </button>
 
 <!-- @states | row -->
-<button class="ui-close-button" type="button" aria-label="Close">
+<button class="ui-close-button" type="button" aria-label="{{ t('close', 'Close') }}">
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
   </svg>
 </button>
-<button class="ui-close-button ui-close-button--hover" type="button" aria-label="Close">
+<button class="ui-close-button ui-close-button--hover" type="button" aria-label="{{ t('close', 'Close') }}">
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
   </svg>
 </button>
-<button class="ui-close-button ui-close-button--focus" type="button" aria-label="Close">
+<button class="ui-close-button ui-close-button--focus" type="button" aria-label="{{ t('close', 'Close') }}">
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
   </svg>
 </button>
-<button class="ui-close-button" type="button" aria-label="Close" disabled>
+<button class="ui-close-button" type="button" aria-label="{{ t('close', 'Close') }}" disabled>
   <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>

package/src/components/content/divider/docs.html

@@ -7,7 +7,7 @@ description: Visual separator between content sections. Supports horizontal/vert
 <div class="ui-divider" role="separator"></div>
 
 <!-- @with_label -->
-<div class="ui-divider" role="separator">OR</div>
+<div class="ui-divider" role="separator">{{ t('or', 'OR') }}</div>
 
 <!-- @label_alignment -->
 <div class="ui-divider ui-divider--start" role="separator">{{ t('start', 'Start') }}</div>

package/src/components/content/scroll-area/docs.html

@@ -6,122 +6,122 @@ description: Scrollable container with styled scrollbar. Provides overflow contr
 <!-- @default -->
 <div class="ui-scroll-area">
   <div class="ui-scroll-area__viewport">
-    <p>Line 1 of scrollable content</p>
-    <p>Line 2 of scrollable content</p>
-    <p>Line 3 of scrollable content</p>
-    <p>Line 4 of scrollable content</p>
-    <p>Line 5 of scrollable content</p>
-    <p>Line 6 of scrollable content</p>
-    <p>Line 7 of scrollable content</p>
-    <p>Line 8 of scrollable content</p>
-    <p>Line 9 of scrollable content</p>
-    <p>Line 10 of scrollable content</p>
-    <p>Line 11 of scrollable content</p>
-    <p>Line 12 of scrollable content</p>
-    <p>Line 13 of scrollable content</p>
-    <p>Line 14 of scrollable content</p>
-    <p>Line 15 of scrollable content</p>
+    <p>{{ t('line_1_of_scrollable_content', 'Line 1 of scrollable content') }}</p>
+    <p>{{ t('line_2_of_scrollable_content', 'Line 2 of scrollable content') }}</p>
+    <p>{{ t('line_3_of_scrollable_content', 'Line 3 of scrollable content') }}</p>
+    <p>{{ t('line_4_of_scrollable_content', 'Line 4 of scrollable content') }}</p>
+    <p>{{ t('line_5_of_scrollable_content', 'Line 5 of scrollable content') }}</p>
+    <p>{{ t('line_6_of_scrollable_content', 'Line 6 of scrollable content') }}</p>
+    <p>{{ t('line_7_of_scrollable_content', 'Line 7 of scrollable content') }}</p>
+    <p>{{ t('line_8_of_scrollable_content', 'Line 8 of scrollable content') }}</p>
+    <p>{{ t('line_9_of_scrollable_content', 'Line 9 of scrollable content') }}</p>
+    <p>{{ t('line_10_of_scrollable_content', 'Line 10 of scrollable content') }}</p>
+    <p>{{ t('line_11_of_scrollable_content', 'Line 11 of scrollable content') }}</p>
+    <p>{{ t('line_12_of_scrollable_content', 'Line 12 of scrollable content') }}</p>
+    <p>{{ t('line_13_of_scrollable_content', 'Line 13 of scrollable content') }}</p>
+    <p>{{ t('line_14_of_scrollable_content', 'Line 14 of scrollable content') }}</p>
+    <p>{{ t('line_15_of_scrollable_content', 'Line 15 of scrollable content') }}</p>
   </div>
 </div>
 
 <!-- @sizes | column -->
 <div class="ui-scroll-area ui-scroll-area--sm">
   <div class="ui-scroll-area__viewport">
-    <p>Small - Line 1</p>
-    <p>Small - Line 2</p>
-    <p>Small - Line 3</p>
-    <p>Small - Line 4</p>
-    <p>Small - Line 5</p>
-    <p>Small - Line 6</p>
-    <p>Small - Line 7</p>
-    <p>Small - Line 8</p>
+    <p>{{ t('small_line_1', 'Small - Line 1') }}</p>
+    <p>{{ t('small_line_2', 'Small - Line 2') }}</p>
+    <p>{{ t('small_line_3', 'Small - Line 3') }}</p>
+    <p>{{ t('small_line_4', 'Small - Line 4') }}</p>
+    <p>{{ t('small_line_5', 'Small - Line 5') }}</p>
+    <p>{{ t('small_line_6', 'Small - Line 6') }}</p>
+    <p>{{ t('small_line_7', 'Small - Line 7') }}</p>
+    <p>{{ t('small_line_8', 'Small - Line 8') }}</p>
   </div>
 </div>
 <div class="ui-scroll-area ui-scroll-area--xl">
   <div class="ui-scroll-area__viewport">
-    <p>XL - Line 1</p>
-    <p>XL - Line 2</p>
-    <p>XL - Line 3</p>
-    <p>XL - Line 4</p>
-    <p>XL - Line 5</p>
+    <p>{{ t('xl_line_1', 'XL - Line 1') }}</p>
+    <p>{{ t('xl_line_2', 'XL - Line 2') }}</p>
+    <p>{{ t('xl_line_3', 'XL - Line 3') }}</p>
+    <p>{{ t('xl_line_4', 'XL - Line 4') }}</p>
+    <p>{{ t('xl_line_5', 'XL - Line 5') }}</p>
   </div>
 </div>
 <div class="ui-scroll-area ui-scroll-area--lg">
   <div class="ui-scroll-area__viewport">
-    <p>Large - Line 1</p>
-    <p>Large - Line 2</p>
-    <p>Large - Line 3</p>
-    <p>Large - Line 4</p>
-    <p>Large - Line 5</p>
-    <p>Large - Line 6</p>
-    <p>Large - Line 7</p>
-    <p>Large - Line 8</p>
-    <p>Large - Line 9</p>
-    <p>Large - Line 10</p>
-    <p>Large - Line 11</p>
-    <p>Large - Line 12</p>
-    <p>Large - Line 13</p>
-    <p>Large - Line 14</p>
-    <p>Large - Line 15</p>
-    <p>Large - Line 16</p>
-    <p>Large - Line 17</p>
-    <p>Large - Line 18</p>
-    <p>Large - Line 19</p>
-    <p>Large - Line 20</p>
+    <p>{{ t('large_line_1', 'Large - Line 1') }}</p>
+    <p>{{ t('large_line_2', 'Large - Line 2') }}</p>
+    <p>{{ t('large_line_3', 'Large - Line 3') }}</p>
+    <p>{{ t('large_line_4', 'Large - Line 4') }}</p>
+    <p>{{ t('large_line_5', 'Large - Line 5') }}</p>
+    <p>{{ t('large_line_6', 'Large - Line 6') }}</p>
+    <p>{{ t('large_line_7', 'Large - Line 7') }}</p>
+    <p>{{ t('large_line_8', 'Large - Line 8') }}</p>
+    <p>{{ t('large_line_9', 'Large - Line 9') }}</p>
+    <p>{{ t('large_line_10', 'Large - Line 10') }}</p>
+    <p>{{ t('large_line_11', 'Large - Line 11') }}</p>
+    <p>{{ t('large_line_12', 'Large - Line 12') }}</p>
+    <p>{{ t('large_line_13', 'Large - Line 13') }}</p>
+    <p>{{ t('large_line_14', 'Large - Line 14') }}</p>
+    <p>{{ t('large_line_15', 'Large - Line 15') }}</p>
+    <p>{{ t('large_line_16', 'Large - Line 16') }}</p>
+    <p>{{ t('large_line_17', 'Large - Line 17') }}</p>
+    <p>{{ t('large_line_18', 'Large - Line 18') }}</p>
+    <p>{{ t('large_line_19', 'Large - Line 19') }}</p>
+    <p>{{ t('large_line_20', 'Large - Line 20') }}</p>
   </div>
 </div>
 
 <!-- @direction | column -->
 <div class="ui-scroll-area ui-scroll-area--horizontal">
   <div class="ui-scroll-area__viewport">
-    <p style="white-space: nowrap">This content scrolls horizontally when it overflows the container width. Resize the window to test.</p>
+    <p style="white-space: nowrap">{{ t('scrolls_horizontally_demo', 'This content scrolls horizontally when it overflows the container width. Resize the window to test.') }}</p>
   </div>
 </div>
 <div class="ui-scroll-area ui-scroll-area--both ui-scroll-area--sm">
   <div class="ui-scroll-area__viewport">
-    <p style="white-space: nowrap">Both directions - Line 1 with long content that overflows horizontally</p>
-    <p>Line 2</p>
-    <p>Line 3</p>
-    <p>Line 4</p>
-    <p>Line 5</p>
-    <p>Line 6</p>
-    <p>Line 7</p>
-    <p>Line 8</p>
+    <p style="white-space: nowrap">{{ t('both_directions_line_1', 'Both directions - Line 1 with long content that overflows horizontally') }}</p>
+    <p>{{ t('line_2', 'Line 2') }}</p>
+    <p>{{ t('line_3', 'Line 3') }}</p>
+    <p>{{ t('line_4', 'Line 4') }}</p>
+    <p>{{ t('line_5', 'Line 5') }}</p>
+    <p>{{ t('line_6', 'Line 6') }}</p>
+    <p>{{ t('line_7', 'Line 7') }}</p>
+    <p>{{ t('line_8', 'Line 8') }}</p>
   </div>
 </div>
 
 <!-- @thin_scrollbar -->
 <div class="ui-scroll-area ui-scroll-area--thin">
   <div class="ui-scroll-area__viewport">
-    <p>Thin scrollbar - Line 1</p>
-    <p>Thin scrollbar - Line 2</p>
-    <p>Thin scrollbar - Line 3</p>
-    <p>Thin scrollbar - Line 4</p>
-    <p>Thin scrollbar - Line 5</p>
-    <p>Thin scrollbar - Line 6</p>
-    <p>Thin scrollbar - Line 7</p>
-    <p>Thin scrollbar - Line 8</p>
-    <p>Thin scrollbar - Line 9</p>
-    <p>Thin scrollbar - Line 10</p>
-    <p>Thin scrollbar - Line 11</p>
-    <p>Thin scrollbar - Line 12</p>
+    <p>{{ t('thin_scrollbar_line_1', 'Thin scrollbar - Line 1') }}</p>
+    <p>{{ t('thin_scrollbar_line_2', 'Thin scrollbar - Line 2') }}</p>
+    <p>{{ t('thin_scrollbar_line_3', 'Thin scrollbar - Line 3') }}</p>
+    <p>{{ t('thin_scrollbar_line_4', 'Thin scrollbar - Line 4') }}</p>
+    <p>{{ t('thin_scrollbar_line_5', 'Thin scrollbar - Line 5') }}</p>
+    <p>{{ t('thin_scrollbar_line_6', 'Thin scrollbar - Line 6') }}</p>
+    <p>{{ t('thin_scrollbar_line_7', 'Thin scrollbar - Line 7') }}</p>
+    <p>{{ t('thin_scrollbar_line_8', 'Thin scrollbar - Line 8') }}</p>
+    <p>{{ t('thin_scrollbar_line_9', 'Thin scrollbar - Line 9') }}</p>
+    <p>{{ t('thin_scrollbar_line_10', 'Thin scrollbar - Line 10') }}</p>
+    <p>{{ t('thin_scrollbar_line_11', 'Thin scrollbar - Line 11') }}</p>
+    <p>{{ t('thin_scrollbar_line_12', 'Thin scrollbar - Line 12') }}</p>
   </div>
 </div>
 
 <!-- @auto_hide -->
 <div class="ui-scroll-area ui-scroll-area--auto-hide">
   <div class="ui-scroll-area__viewport">
-    <p>Scrollbar hidden until hover - Line 1</p>
-    <p>Scrollbar hidden until hover - Line 2</p>
-    <p>Scrollbar hidden until hover - Line 3</p>
-    <p>Scrollbar hidden until hover - Line 4</p>
-    <p>Scrollbar hidden until hover - Line 5</p>
-    <p>Scrollbar hidden until hover - Line 6</p>
-    <p>Scrollbar hidden until hover - Line 7</p>
-    <p>Scrollbar hidden until hover - Line 8</p>
-    <p>Scrollbar hidden until hover - Line 9</p>
-    <p>Scrollbar hidden until hover - Line 10</p>
-    <p>Scrollbar hidden until hover - Line 11</p>
-    <p>Scrollbar hidden until hover - Line 12</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_1', 'Scrollbar hidden until hover - Line 1') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_2', 'Scrollbar hidden until hover - Line 2') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_3', 'Scrollbar hidden until hover - Line 3') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_4', 'Scrollbar hidden until hover - Line 4') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_5', 'Scrollbar hidden until hover - Line 5') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_6', 'Scrollbar hidden until hover - Line 6') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_7', 'Scrollbar hidden until hover - Line 7') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_8', 'Scrollbar hidden until hover - Line 8') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_9', 'Scrollbar hidden until hover - Line 9') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_10', 'Scrollbar hidden until hover - Line 10') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_11', 'Scrollbar hidden until hover - Line 11') }}</p>
+    <p>{{ t('scrollbar_hidden_until_hover_line_12', 'Scrollbar hidden until hover - Line 12') }}</p>
   </div>
 </div>

package/src/components/content/spacer/docs.html

@@ -5,16 +5,16 @@ description: Flexible space filler that grows to fill available space in flex co
 
 <!-- @default -->
 <div class="ui-row" style="inline-size: 100%; background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">
-  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">Start</span>
+  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('start', 'Start') }}</span>
   <div class="ui-spacer"></div>
-  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">End</span>
+  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('end', 'End') }}</span>
 </div>
 
 <!-- @between_items -->
 <div class="ui-row" style="inline-size: 100%; background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">
-  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">Logo</span>
+  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('logo', 'Logo') }}</span>
   <div class="ui-spacer"></div>
-  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">Nav 1</span>
-  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">Nav 2</span>
-  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">Nav 3</span>
+  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('nav_1', 'Nav 1') }}</span>
+  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('nav_2', 'Nav 2') }}</span>
+  <span style="background: var(--ui-color-bg-muted); padding: var(--ui-space-1)">{{ t('nav_3', 'Nav 3') }}</span>
 </div>