@teseor/css 1.15.2 → 1.15.5

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>

package/src/components/data-display/avatar/docs.html

@@ -5,7 +5,7 @@ description: User or entity thumbnail representation. Supports image with fallba
 
 <!-- @default | row -->
 <div class="ui-avatar">
-  <span class="ui-avatar__fallback">JD</span>
+  <span class="ui-avatar__fallback">{{ t('jd', 'JD') }}</span>
 </div>
 <div class="ui-avatar">
   <img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=1" alt="User"></img>
@@ -13,24 +13,24 @@ description: User or entity thumbnail representation. Supports image with fallba
 
 <!-- @sizes | row -->
 <div class="ui-avatar ui-avatar--xs">
-  <span class="ui-avatar__fallback">XS</span>
+  <span class="ui-avatar__fallback">{{ t('xs', 'XS') }}</span>
 </div>
 <div class="ui-avatar ui-avatar--sm">
-  <span class="ui-avatar__fallback">SM</span>
+  <span class="ui-avatar__fallback">{{ t('sm', 'SM') }}</span>
 </div>
 <div class="ui-avatar">
-  <span class="ui-avatar__fallback">MD</span>
+  <span class="ui-avatar__fallback">{{ t('md', 'MD') }}</span>
 </div>
 <div class="ui-avatar ui-avatar--lg">
-  <span class="ui-avatar__fallback">LG</span>
+  <span class="ui-avatar__fallback">{{ t('lg', 'LG') }}</span>
 </div>
 <div class="ui-avatar ui-avatar--xl">
-  <span class="ui-avatar__fallback">XL</span>
+  <span class="ui-avatar__fallback">{{ t('xl', 'XL') }}</span>
 </div>
 
 <!-- @square_shape | row -->
 <div class="ui-avatar ui-avatar--square">
-  <span class="ui-avatar__fallback">ORG</span>
+  <span class="ui-avatar__fallback">{{ t('org', 'ORG') }}</span>
 </div>
 <div class="ui-avatar ui-avatar--square">
   <img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=org" alt="Org"></img>
@@ -59,6 +59,6 @@ description: User or entity thumbnail representation. Supports image with fallba
     <img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=g3" alt></img>
   </div>
   <div class="ui-avatar">
-    <span class="ui-avatar__fallback">+5</span>
+    <span class="ui-avatar__fallback">{{ t('5', '+5') }}</span>
   </div>
 </div>

package/src/components/data-display/card/docs.html

@@ -3,22 +3,22 @@ title: Card
 ---
 
 <!-- @default -->
-<div class="ui-card">Default card with padding and border</div>
+<div class="ui-card">{{ t('default_card_with_padding_and_border', 'Default card with padding and border') }}</div>
 
 <!-- @background_variants | column -->
-<div class="ui-card">Default background</div>
-<div class="ui-card ui-card--subtle">Subtle background</div>
-<div class="ui-card ui-card--muted">Muted background</div>
+<div class="ui-card">{{ t('default_background', 'Default background') }}</div>
+<div class="ui-card ui-card--subtle">{{ t('subtle_background', 'Subtle background') }}</div>
+<div class="ui-card ui-card--muted">{{ t('muted_background', 'Muted background') }}</div>
 
 <!-- @padding_variants | column -->
-<div class="ui-card ui-card--sm">Small padding</div>
-<div class="ui-card">Default padding</div>
-<div class="ui-card ui-card--lg">Large padding</div>
-<div class="ui-card ui-card--flush">No padding (flush)</div>
+<div class="ui-card ui-card--sm">{{ t('small_padding', 'Small padding') }}</div>
+<div class="ui-card">{{ t('default_padding', 'Default padding') }}</div>
+<div class="ui-card ui-card--lg">{{ t('large_padding', 'Large padding') }}</div>
+<div class="ui-card ui-card--flush">{{ t('no_padding_flush', 'No padding (flush)') }}</div>
 
 <!-- @interactive | column -->
-<div class="ui-card ui-card--interactive">Hover and click this card</div>
-<div class="ui-card ui-card--interactive ui-card--subtle">Interactive subtle card</div>
+<div class="ui-card ui-card--interactive">{{ t('hover_and_click_this_card', 'Hover and click this card') }}</div>
+<div class="ui-card ui-card--interactive ui-card--subtle">{{ t('interactive_subtle_card', 'Interactive subtle card') }}</div>
 
 <!-- @responsive_container_query -->
 <!-- Switches to horizontal layout when container is wide enough. Requires a parent with container-type: inline-size (use ui-container-inline utility). -->
@@ -26,8 +26,8 @@ title: Card
   <div class="ui-card ui-card--responsive">
     <div class="ui-card__media" style="background: var(--ui-color-bg-muted); min-block-size: 6rem"></div>
     <div class="ui-card__body">
-      <strong>Responsive Card</strong>
-      <p>Stacks vertically in narrow containers, switches to side-by-side at >= 30rem.</p>
+      <strong>{{ t('responsive_card', 'Responsive Card') }}</strong>
+      <p>{{ t('stacks_vertically_narrow', 'Stacks vertically in narrow containers, switches to side-by-side at >= 30rem.') }}</p>
     </div>
   </div>
 </div>

package/src/components/data-display/card/index.scss

@@ -73,7 +73,7 @@
     flex-direction: column;
 
     // Horizontal layout when container is wide enough
-    @container (inline-size >= 30rem) {
+    @container (inline-size >= #{t.$container-threshold-sm}) {
       flex-direction: row;
     }
   }
@@ -82,7 +82,7 @@
     // Vertical: full width
     inline-size: 100%;
 
-    @container (inline-size >= 30rem) {
+    @container (inline-size >= #{t.$container-threshold-sm}) {
       // Horizontal: fixed width, fill height
       flex: 0 0 auto;
 

package/src/components/data-display/data-list/docs.html

@@ -5,16 +5,16 @@ title: Data List
 <!-- @default -->
 <dl class="ui-data-list">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Name</dt>
-    <dd class="ui-data-list__value">John Doe</dd>
+    <dt class="ui-data-list__label">{{ t('name', 'Name') }}</dt>
+    <dd class="ui-data-list__value">{{ t('john_doe', 'John Doe') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Email</dt>
-    <dd class="ui-data-list__value">john@example.com</dd>
+    <dt class="ui-data-list__label">{{ t('email', 'Email') }}</dt>
+    <dd class="ui-data-list__value">{{ t('johnexamplecom', 'john@example.com') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Role</dt>
-    <dd class="ui-data-list__value">Administrator</dd>
+    <dt class="ui-data-list__label">{{ t('role', 'Role') }}</dt>
+    <dd class="ui-data-list__value">{{ t('administrator', 'Administrator') }}</dd>
   </div>
 </dl>
 
@@ -22,16 +22,16 @@ title: Data List
 <!-- Side-by-side label and value -->
 <dl class="ui-data-list ui-data-list--horizontal">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Status</dt>
-    <dd class="ui-data-list__value">Active</dd>
+    <dt class="ui-data-list__label">{{ t('status', 'Status') }}</dt>
+    <dd class="ui-data-list__value">{{ t('active', 'Active') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Created</dt>
-    <dd class="ui-data-list__value">Dec 8, 2025</dd>
+    <dt class="ui-data-list__label">{{ t('created', 'Created') }}</dt>
+    <dd class="ui-data-list__value">{{ t('dec_8_2025', 'Dec 8, 2025') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Updated</dt>
-    <dd class="ui-data-list__value">Dec 8, 2025</dd>
+    <dt class="ui-data-list__label">{{ t('updated', 'Updated') }}</dt>
+    <dd class="ui-data-list__value">{{ t('dec_8_2025', 'Dec 8, 2025') }}</dd>
   </div>
 </dl>
 
@@ -39,16 +39,16 @@ title: Data List
 <!-- With separator lines between items -->
 <dl class="ui-data-list ui-data-list--divided">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Order ID</dt>
-    <dd class="ui-data-list__value">#12345</dd>
+    <dt class="ui-data-list__label">{{ t('order_id', 'Order ID') }}</dt>
+    <dd class="ui-data-list__value">{{ t('12345', '#12345') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Total</dt>
-    <dd class="ui-data-list__value">$99.00</dd>
+    <dt class="ui-data-list__label">{{ t('total', 'Total') }}</dt>
+    <dd class="ui-data-list__value">{{ t('9900', '$99.00') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Payment</dt>
-    <dd class="ui-data-list__value">Credit Card</dd>
+    <dt class="ui-data-list__label">{{ t('payment', 'Payment') }}</dt>
+    <dd class="ui-data-list__value">{{ t('credit_card', 'Credit Card') }}</dd>
   </div>
 </dl>
 
@@ -56,39 +56,39 @@ title: Data List
 <!-- Alternating background for readability -->
 <dl class="ui-data-list ui-data-list--striped">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">CPU</dt>
-    <dd class="ui-data-list__value">Intel i7</dd>
+    <dt class="ui-data-list__label">{{ t('cpu', 'CPU') }}</dt>
+    <dd class="ui-data-list__value">{{ t('intel_i7', 'Intel i7') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Memory</dt>
-    <dd class="ui-data-list__value">16 GB</dd>
+    <dt class="ui-data-list__label">{{ t('memory', 'Memory') }}</dt>
+    <dd class="ui-data-list__value">{{ t('16_gb', '16 GB') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Storage</dt>
-    <dd class="ui-data-list__value">512 GB SSD</dd>
+    <dt class="ui-data-list__label">{{ t('storage', 'Storage') }}</dt>
+    <dd class="ui-data-list__value">{{ t('512_gb_ssd', '512 GB SSD') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Display</dt>
-    <dd class="ui-data-list__value">14" Retina</dd>
+    <dt class="ui-data-list__label">{{ t('display', 'Display') }}</dt>
+    <dd class="ui-data-list__value">{{ t('14_retina', '14" Retina') }}</dd>
   </div>
 </dl>
 
 <!-- @sizes | column -->
 <dl class="ui-data-list ui-data-list--sm">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Small</dt>
-    <dd class="ui-data-list__value">Compact display</dd>
+    <dt class="ui-data-list__label">{{ t('small', 'Small') }}</dt>
+    <dd class="ui-data-list__value">{{ t('compact_display', 'Compact display') }}</dd>
   </div>
 </dl>
 <dl class="ui-data-list">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Default</dt>
-    <dd class="ui-data-list__value">Standard display</dd>
+    <dt class="ui-data-list__label">{{ t('default', 'Default') }}</dt>
+    <dd class="ui-data-list__value">{{ t('standard_display', 'Standard display') }}</dd>
   </div>
 </dl>
 <dl class="ui-data-list ui-data-list--lg">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Large</dt>
-    <dd class="ui-data-list__value">Spacious display</dd>
+    <dt class="ui-data-list__label">{{ t('large', 'Large') }}</dt>
+    <dd class="ui-data-list__value">{{ t('spacious_display', 'Spacious display') }}</dd>
   </div>
 </dl>

package/src/components/data-display/icon/docs.html

@@ -20,23 +20,23 @@ description: CSS classes for sizing and styling SVG icons. Works with any stroke
 <!-- Scale icons from extra small to extra large. -->
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>xs</small>
+  <small>{{ t('xs', 'xs') }}</small>
 </div>
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>sm</small>
+  <small>{{ t('sm', 'sm') }}</small>
 </div>
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>md</small>
+  <small>{{ t('md', 'md') }}</small>
 </div>
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--lg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>lg</small>
+  <small>{{ t('lg', 'lg') }}</small>
 </div>
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--xl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>xl</small>
+  <small>{{ t('xl', 'xl') }}</small>
 </div>
 
 <!-- @stroke_width | row -->

package/src/components/data-display/image/docs.html

@@ -49,7 +49,7 @@ description: Responsive image with fallback placeholder, optional caption, and s
 <!-- @caption -->
 <figure class="ui-image ui-image--md ui-image--rounded">
   <img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%23ffb74d' width='192' height='140'/%3E%3C/svg%3E" alt="With caption"></img>
-  <figcaption class="ui-image__caption">An optional image caption</figcaption>
+  <figcaption class="ui-image__caption">{{ t('an_optional_image_caption', 'An optional image caption') }}</figcaption>
 </figure>
 
 <!-- @fallback | row -->