@teseor/css 1.15.2 → 1.15.5

package/src/components/overlays/dialog/docs.html

@@ -8,15 +8,15 @@ description: Structured modal with header, body, and footer sections. Use with m
   <div class="ui-modal ui-modal--visible" style="position: absolute;">
     <div class="ui-modal__content ui-dialog" style="max-height: 200px;">
       <header class="ui-dialog__header">
-        <h2 class="ui-dialog__title">Dialog Title</h2>
-        <button class="ui-button ui-button--ghost ui-button--sm ui-dialog__close">X</button>
+        <h2 class="ui-dialog__title">{{ t('dialog_title', 'Dialog Title') }}</h2>
+        <button class="ui-button ui-button--ghost ui-button--sm ui-dialog__close">{{ t('x', 'X') }}</button>
       </header>
       <div class="ui-dialog__body">
-        <p>Dialog content goes here.</p>
+        <p>{{ t('dialog_content_goes_here', 'Dialog content goes here.') }}</p>
       </div>
       <footer class="ui-dialog__footer">
-        <button class="ui-button ui-button--ghost">Cancel</button>
-        <button class="ui-button">Confirm</button>
+        <button class="ui-button ui-button--ghost">{{ t('cancel', 'Cancel') }}</button>
+        <button class="ui-button">{{ t('confirm', 'Confirm') }}</button>
       </footer>
     </div>
   </div>
@@ -27,13 +27,13 @@ description: Structured modal with header, body, and footer sections. Use with m
   <div class="ui-modal ui-modal--visible" style="position: absolute;">
     <div class="ui-modal__content ui-dialog ui-dialog--borderless" style="max-height: 180px;">
       <header class="ui-dialog__header">
-        <h2 class="ui-dialog__title">Simple Dialog</h2>
+        <h2 class="ui-dialog__title">{{ t('simple_dialog', 'Simple Dialog') }}</h2>
       </header>
       <div class="ui-dialog__body">
-        <p>Content without borders.</p>
+        <p>{{ t('content_without_borders', 'Content without borders.') }}</p>
       </div>
       <footer class="ui-dialog__footer">
-        <button class="ui-button">OK</button>
+        <button class="ui-button">{{ t('ok', 'OK') }}</button>
       </footer>
     </div>
   </div>
@@ -44,14 +44,14 @@ description: Structured modal with header, body, and footer sections. Use with m
   <div class="ui-modal ui-modal--sm ui-modal--visible" style="position: absolute;">
     <div class="ui-modal__content ui-dialog">
       <header class="ui-dialog__header">
-        <h2 class="ui-dialog__title">Delete Item?</h2>
+        <h2 class="ui-dialog__title">{{ t('delete_item', 'Delete Item?') }}</h2>
       </header>
       <div class="ui-dialog__body">
-        <p>This action cannot be undone.</p>
+        <p>{{ t('this_action_cannot_be_undone', 'This action cannot be undone.') }}</p>
       </div>
       <footer class="ui-dialog__footer">
-        <button class="ui-button ui-button--ghost">Cancel</button>
-        <button class="ui-button ui-button--danger">Delete</button>
+        <button class="ui-button ui-button--ghost">{{ t('cancel', 'Cancel') }}</button>
+        <button class="ui-button ui-button--danger">{{ t('delete', 'Delete') }}</button>
       </footer>
     </div>
   </div>

package/src/components/overlays/drawer/docs.html

@@ -9,17 +9,17 @@ title: Drawer
   <div class="ui-drawer ui-drawer--end" style="position:absolute" data-state="open">
     <div class="ui-drawer__header">
       <div>
-        <h2 class="ui-drawer__title">Drawer Title</h2>
-        <p class="ui-drawer__description">Optional description text</p>
+        <h2 class="ui-drawer__title">{{ t('drawer_title', 'Drawer Title') }}</h2>
+        <p class="ui-drawer__description">{{ t('optional_description_text', 'Optional description text') }}</p>
       </div>
-      <button class="ui-drawer__close ui-button ui-button--ghost ui-button--icon">X</button>
+      <button class="ui-drawer__close ui-button ui-button--ghost ui-button--icon">{{ t('x', 'X') }}</button>
     </div>
     <div class="ui-drawer__body">
-      <p>Drawer content goes here.</p>
+      <p>{{ t('drawer_content_goes_here', 'Drawer content goes here.') }}</p>
     </div>
     <div class="ui-drawer__footer">
-      <button class="ui-button ui-button--secondary">Cancel</button>
-      <button class="ui-button">Save</button>
+      <button class="ui-button ui-button--secondary">{{ t('cancel', 'Cancel') }}</button>
+      <button class="ui-button">{{ t('save', 'Save') }}</button>
     </div>
   </div>
 </div>
@@ -28,30 +28,30 @@ title: Drawer
 <div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
   <div class="ui-drawer ui-drawer--start ui-drawer--sm" style="position:absolute" data-state="open">
     <div class="ui-drawer__header">
-      <h2 class="ui-drawer__title">Start</h2>
+      <h2 class="ui-drawer__title">{{ t('start', 'Start') }}</h2>
     </div>
     <div class="ui-drawer__body">
-      <p>From start edge</p>
+      <p>{{ t('from_start_edge', 'From start edge') }}</p>
     </div>
   </div>
 </div>
 <div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
   <div class="ui-drawer ui-drawer--top" style="position:absolute" data-state="open">
     <div class="ui-drawer__header">
-      <h2 class="ui-drawer__title">Top</h2>
+      <h2 class="ui-drawer__title">{{ t('top', 'Top') }}</h2>
     </div>
     <div class="ui-drawer__body">
-      <p>From top edge</p>
+      <p>{{ t('from_top_edge', 'From top edge') }}</p>
     </div>
   </div>
 </div>
 <div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
   <div class="ui-drawer ui-drawer--bottom" style="position:absolute" data-state="open">
     <div class="ui-drawer__header">
-      <h2 class="ui-drawer__title">Bottom</h2>
+      <h2 class="ui-drawer__title">{{ t('bottom', 'Bottom') }}</h2>
     </div>
     <div class="ui-drawer__body">
-      <p>From bottom edge</p>
+      <p>{{ t('from_bottom_edge', 'From bottom edge') }}</p>
     </div>
   </div>
 </div>
@@ -60,28 +60,28 @@ title: Drawer
 <div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
   <div class="ui-drawer ui-drawer--end ui-drawer--sm" style="position:absolute" data-state="open">
     <div class="ui-drawer__body">
-      <p>Small drawer</p>
+      <p>{{ t('small_drawer', 'Small drawer') }}</p>
     </div>
   </div>
 </div>
 <div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
   <div class="ui-drawer ui-drawer--end" style="position:absolute" data-state="open">
     <div class="ui-drawer__body">
-      <p>Default drawer</p>
+      <p>{{ t('default_drawer', 'Default drawer') }}</p>
     </div>
   </div>
 </div>
 <div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
   <div class="ui-drawer ui-drawer--end ui-drawer--lg" style="position:absolute" data-state="open">
     <div class="ui-drawer__body">
-      <p>Large drawer</p>
+      <p>{{ t('large_drawer', 'Large drawer') }}</p>
     </div>
   </div>
 </div>
 <div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
   <div class="ui-drawer ui-drawer--end ui-drawer--full" style="position:absolute" data-state="open">
     <div class="ui-drawer__body">
-      <p>Full-size drawer</p>
+      <p>{{ t('full_size_drawer', 'Full-size drawer') }}</p>
     </div>
   </div>
 </div>

package/src/components/overlays/modal/docs.html

@@ -7,7 +7,7 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 <div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
   <div class="ui-modal ui-modal--visible" style="position: absolute;">
     <div class="ui-modal__content">
-      <p>Modal content goes here</p>
+      <p>{{ t('modal_content_goes_here', 'Modal content goes here') }}</p>
     </div>
   </div>
 </div>
@@ -16,7 +16,7 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 <div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
   <div class="ui-modal ui-modal--sm ui-modal--visible" style="position: absolute;">
     <div class="ui-modal__content">
-      <p>Small modal</p>
+      <p>{{ t('small_modal', 'Small modal') }}</p>
     </div>
   </div>
 </div>
@@ -25,7 +25,7 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 <div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
   <div class="ui-modal ui-modal--lg ui-modal--visible" style="position: absolute;">
     <div class="ui-modal__content">
-      <p>Large modal</p>
+      <p>{{ t('large_modal', 'Large modal') }}</p>
     </div>
   </div>
 </div>
@@ -34,7 +34,7 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 <div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
   <div class="ui-modal ui-modal--full ui-modal--visible" style="position: absolute;">
     <div class="ui-modal__content">
-      <p>Full-screen modal</p>
+      <p>{{ t('full_screen_modal', 'Full-screen modal') }}</p>
     </div>
   </div>
 </div>
@@ -44,7 +44,7 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 <div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
   <div class="ui-modal ui-modal--visible ui-modal--entering" style="position: absolute;">
     <div class="ui-modal__content">
-      <p>Entering modal</p>
+      <p>{{ t('entering_modal', 'Entering modal') }}</p>
     </div>
   </div>
 </div>
@@ -54,12 +54,12 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
   <div class="ui-modal ui-modal--visible" style="position: absolute;">
     <div class="ui-modal__content" style="max-height: 150px;">
       <div class="ui-modal__body">
-        <p>Line 1</p>
-        <p>Line 2</p>
-        <p>Line 3</p>
-        <p>Line 4</p>
-        <p>Line 5</p>
-        <p>Line 6</p>
+        <p>{{ t('line_1', 'Line 1') }}</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>
       </div>
     </div>
   </div>

package/src/components/overlays/overlay/docs.html

@@ -6,19 +6,19 @@ description: Full viewport backdrop for modals, dialogs, and drawers. Controls v
 <!-- @default -->
 <div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
   <div class="ui-overlay" style="position: absolute;"></div>
-  <p style="position: relative; padding: var(--ui-space-2);">Content behind overlay</p>
+  <p style="position: relative; padding: var(--ui-space-2);">{{ t('content_behind_overlay', 'Content behind overlay') }}</p>
 </div>
 
 <!-- @light_variant -->
 <div style="position: relative; height: 120px; background: var(--ui-color-text);">
   <div class="ui-overlay ui-overlay--light" style="position: absolute;"></div>
-  <p style="position: relative; padding: var(--ui-space-2); color: white;">Dark content behind light overlay</p>
+  <p style="position: relative; padding: var(--ui-space-2); color: white;">{{ t('dark_content_behind_light_overlay', 'Dark content behind light overlay') }}</p>
 </div>
 
 <!-- @blur_variant -->
 <div style="position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));">
   <div class="ui-overlay ui-overlay--blur" style="position: absolute;"></div>
-  <p style="position: relative; padding: var(--ui-space-2); color: white;">Blurred backdrop</p>
+  <p style="position: relative; padding: var(--ui-space-2); color: white;">{{ t('blurred_backdrop', 'Blurred backdrop') }}</p>
 </div>
 
 <!-- @with_animation -->

package/src/components/overlays/popover/docs.html

@@ -5,34 +5,34 @@ description: Floating panel for additional content. Larger than tooltip, can con
 
 <!-- @default -->
 <div class="ui-popover" style="position: relative;">
-  <p>Popover content goes here. Can contain multiple paragraphs and other elements.</p>
+  <p>{{ t('popover_content', 'Popover content goes here. Can contain multiple paragraphs and other elements.') }}</p>
 </div>
 
 <!-- @with_header -->
 <div class="ui-popover" style="position: relative;">
   <header class="ui-popover__header">
-    <h3 class="ui-popover__title">Popover Title</h3>
+    <h3 class="ui-popover__title">{{ t('popover_title', 'Popover Title') }}</h3>
   </header>
-  <p>Content with a header section.</p>
+  <p>{{ t('content_with_a_header_section', 'Content with a header section.') }}</p>
 </div>
 
 <!-- @positions -->
 <div style="padding: var(--ui-space-4);">
   <div class="ui-popover ui-popover--top" style="position: relative;">
-    <p>Top (arrow down)</p>
+    <p>{{ t('top_arrow_down', 'Top (arrow down)') }}</p>
   </div>
 </div>
 <div style="padding: var(--ui-space-4);">
   <div class="ui-popover ui-popover--bottom" style="position: relative;">
-    <p>Bottom (arrow up)</p>
+    <p>{{ t('bottom_arrow_up', 'Bottom (arrow up)') }}</p>
   </div>
 </div>
 
 <!-- @visibility -->
 <!-- Control popover visibility and animation. -->
 <div class="ui-popover ui-popover--visible ui-popover--animate" style="position: relative;">
-  <p>Visible and animated</p>
+  <p>{{ t('visible_and_animated', 'Visible and animated') }}</p>
 </div>
 <div class="ui-popover ui-popover--hidden" style="position: relative;">
-  <p>Hidden popover</p>
+  <p>{{ t('hidden_popover', 'Hidden popover') }}</p>
 </div>

package/src/components/overlays/tooltip/docs.html

@@ -6,25 +6,25 @@ description: Small informational popup for additional context. Position via JS.
 <!-- @positions -->
 <div style="display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4); flex-wrap: wrap;">
   <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--top" style="position: relative;">Top</span>
+    <span class="ui-tooltip ui-tooltip--top" style="position: relative;">{{ t('top', 'Top') }}</span>
   </div>
   <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--bottom" style="position: relative;">Bottom</span>
+    <span class="ui-tooltip ui-tooltip--bottom" style="position: relative;">{{ t('bottom', 'Bottom') }}</span>
   </div>
   <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--start" style="position: relative;">Start</span>
+    <span class="ui-tooltip ui-tooltip--start" style="position: relative;">{{ t('start', 'Start') }}</span>
   </div>
   <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--end" style="position: relative;">End</span>
+    <span class="ui-tooltip ui-tooltip--end" style="position: relative;">{{ t('end', 'End') }}</span>
   </div>
 </div>
 
 <!-- @with_animation -->
-<span class="ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible" style="position: relative;">Animated tooltip</span>
+<span class="ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible" style="position: relative;">{{ t('animated_tooltip', 'Animated tooltip') }}</span>
 
 <!-- @anchor_positioned -->
 <!-- Browser-native positioning via CSS Anchor Positioning. No JS needed for placement. Wrapped in @supports — falls back to manual positioning in unsupported browsers. -->
 <div style="position: relative; padding: var(--ui-space-4); display: flex; gap: var(--ui-space-4);">
-  <button class="ui-button" style="anchor-name: --tooltip;">Hover me</button>
-  <span class="ui-tooltip ui-tooltip--anchored ui-tooltip--visible">Anchored tooltip</span>
+  <button class="ui-button" style="anchor-name: --tooltip;">{{ t('hover_me', 'Hover me') }}</button>
+  <span class="ui-tooltip ui-tooltip--anchored ui-tooltip--visible">{{ t('anchored_tooltip', 'Anchored tooltip') }}</span>
 </div>

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

@@ -5,17 +5,17 @@ description: Quote block with left border and optional citation.
 
 <!-- @default -->
 <blockquote class="ui-blockquote">
-  <p>Design is not just what it looks like and feels like. Design is how it works.</p>
+  <p>{{ t('design_quote_jobs', 'Design is not just what it looks like and feels like. Design is how it works.') }}</p>
 </blockquote>
 
 <!-- @with_citation -->
 <blockquote class="ui-blockquote">
-  <p>The best way to predict the future is to invent it.</p>
-  <cite class="ui-blockquote__cite">Alan Kay</cite>
+  <p>{{ t('the_best_way_to_predict_the_future_is_to_invent_it', 'The best way to predict the future is to invent it.') }}</p>
+  <cite class="ui-blockquote__cite">{{ t('alan_kay', 'Alan Kay') }}</cite>
 </blockquote>
 
 <!-- @accent_variant -->
 <blockquote class="ui-blockquote ui-blockquote--accent">
-  <p>Simplicity is the ultimate sophistication.</p>
-  <cite class="ui-blockquote__cite">Leonardo da Vinci</cite>
+  <p>{{ t('simplicity_is_the_ultimate_sophistication', 'Simplicity is the ultimate sophistication.') }}</p>
+  <cite class="ui-blockquote__cite">{{ t('leonardo_da_vinci', 'Leonardo da Vinci') }}</cite>
 </blockquote>

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

@@ -5,9 +5,9 @@ description: Inline code and code blocks with monospace font.
 
 <!-- @inline_code -->
 <p>
-Use the 
+{{ t('use_the', 'Use the') }} 
   <code class="ui-code">--space-2</code>
- token for padding.
+ {{ t('token_for_padding', 'token for padding.') }}
 </p>
 <code class="ui-code ui-code--sm">--button-height</code>
 

package/src/components/typography/code-block/docs.html

@@ -64,9 +64,9 @@ import "@teseor/css/dist/index.css";</code>
 <!-- @inline_code -->
 <!-- Use the related ui-code class for inline snippets. -->
 <p>
-  <span>Use </span>
+  <span>{{ t('use', 'Use') }} </span>
   <code class="ui-code">var(--ui-space-2)</code>
-  <span> for consistent spacing.</span>
+  <span> {{ t('for_consistent_spacing', 'for consistent spacing.') }}</span>
 </p>
 
 <!-- @compact_with_line_numbers -->

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

@@ -4,20 +4,20 @@ description: Semantic headings with visual size control. Use semantic level (h1-
 ---
 
 <!-- @sizes | column -->
-<h1 class="ui-heading ui-heading--4xl">Heading 4xl</h1>
-<h2 class="ui-heading ui-heading--3xl">Heading 3xl</h2>
-<h3 class="ui-heading ui-heading--2xl">Heading 2xl</h3>
-<h4 class="ui-heading ui-heading--xl">Heading xl</h4>
-<h5 class="ui-heading ui-heading--lg">Heading lg</h5>
-<h6 class="ui-heading ui-heading--md">Heading md</h6>
-<p class="ui-heading ui-heading--sm">Heading sm</p>
+<h1 class="ui-heading ui-heading--4xl">{{ t('heading_4xl', 'Heading 4xl') }}</h1>
+<h2 class="ui-heading ui-heading--3xl">{{ t('heading_3xl', 'Heading 3xl') }}</h2>
+<h3 class="ui-heading ui-heading--2xl">{{ t('heading_2xl', 'Heading 2xl') }}</h3>
+<h4 class="ui-heading ui-heading--xl">{{ t('heading_xl', 'Heading xl') }}</h4>
+<h5 class="ui-heading ui-heading--lg">{{ t('heading_lg', 'Heading lg') }}</h5>
+<h6 class="ui-heading ui-heading--md">{{ t('heading_md', 'Heading md') }}</h6>
+<p class="ui-heading ui-heading--sm">{{ t('heading_sm', 'Heading sm') }}</p>
 
 <!-- @decoupled_sizing | column -->
 <!-- Use any size with any semantic level. -->
-<h2 class="ui-heading ui-heading--3xl">h2 styled as 3xl</h2>
-<h1 class="ui-heading ui-heading--lg">h1 styled as lg</h1>
+<h2 class="ui-heading ui-heading--3xl">{{ t('h2_styled_as_3xl', 'h2 styled as 3xl') }}</h2>
+<h1 class="ui-heading ui-heading--lg">{{ t('h1_styled_as_lg', 'h1 styled as lg') }}</h1>
 
 <!-- @with_text_utilities | column -->
 <!-- Combine with text utilities for color and other styles. -->
-<h2 class="ui-heading ui-heading--2xl ui-text-muted">Muted heading</h2>
-<h2 class="ui-heading ui-heading--2xl ui-text-primary">Primary heading</h2>
+<h2 class="ui-heading ui-heading--2xl ui-text-muted">{{ t('muted_heading', 'Muted heading') }}</h2>
+<h2 class="ui-heading ui-heading--2xl ui-text-primary">{{ t('primary_heading', 'Primary heading') }}</h2>

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

@@ -4,11 +4,11 @@ description: Keyboard shortcut display with monospace font and key-cap styling.
 ---
 
 <!-- @default -->
-<p>{{ t('press', 'Press') }} <kbd class="ui-kbd">Ctrl</kbd> + <kbd class="ui-kbd">S</kbd> {{ t('to_save', 'to save') }}</p>
+<p>{{ t('press', 'Press') }} <kbd class="ui-kbd">{{ t('ctrl', 'Ctrl') }}</kbd> + <kbd class="ui-kbd">{{ t('s', 'S') }}</kbd> {{ t('to_save', 'to save') }}</p>
 
 <!-- @variations | row -->
-<kbd class="ui-kbd">Esc</kbd>
-<kbd class="ui-kbd">Enter</kbd>
-<kbd class="ui-kbd">Tab</kbd>
-<kbd class="ui-kbd">Shift</kbd>
-<kbd class="ui-kbd">Space</kbd>
+<kbd class="ui-kbd">{{ t('esc', 'Esc') }}</kbd>
+<kbd class="ui-kbd">{{ t('enter', 'Enter') }}</kbd>
+<kbd class="ui-kbd">{{ t('tab', 'Tab') }}</kbd>
+<kbd class="ui-kbd">{{ t('shift', 'Shift') }}</kbd>
+<kbd class="ui-kbd">{{ t('space', 'Space') }}</kbd>

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/link/index.scss

@@ -67,7 +67,7 @@
   .link[aria-disabled="true"] {
     color: var(--_color-text-muted);
 
-    opacity: 0.6;
+    opacity: #{t.$opacity-disabled};
     cursor: not-allowed;
     pointer-events: none;
   }
@@ -81,6 +81,6 @@
 
     margin-inline-start: calc(#{t.$unit} / 4);
 
-    font-size: 0.75em;
+    font-size: #{t.$font-size-relative-sm};
   }
 }

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>