@teseor/css 1.15.1 → 1.15.3

package/src/components/navigation/nav/docs.html

@@ -8,16 +8,16 @@ description: Horizontal or vertical navigation links for primary and secondary n
 <nav class="ui-nav">
   <ul class="ui-nav__list">
     <li>
-      <a class="ui-nav__item ui-nav__item--active" href="#">Dashboard</a>
+      <a class="ui-nav__item ui-nav__item--active" href="#">{{ t('dashboard', 'Dashboard') }}</a>
     </li>
     <li>
-      <a class="ui-nav__item" href="#">Projects</a>
+      <a class="ui-nav__item" href="#">{{ t('projects', 'Projects') }}</a>
     </li>
     <li>
-      <a class="ui-nav__item" href="#">Settings</a>
+      <a class="ui-nav__item" href="#">{{ t('settings', 'Settings') }}</a>
     </li>
     <li>
-      <a class="ui-nav__item ui-nav__item--disabled" href="#">Disabled</a>
+      <a class="ui-nav__item ui-nav__item--disabled" href="#">{{ t('disabled', 'Disabled') }}</a>
     </li>
   </ul>
 </nav>
@@ -27,13 +27,13 @@ description: Horizontal or vertical navigation links for primary and secondary n
 <nav class="ui-nav ui-nav--pills">
   <ul class="ui-nav__list">
     <li>
-      <a class="ui-nav__item ui-nav__item--active" href="#">Overview</a>
+      <a class="ui-nav__item ui-nav__item--active" href="#">{{ t('overview', 'Overview') }}</a>
     </li>
     <li>
-      <a class="ui-nav__item" href="#">Analytics</a>
+      <a class="ui-nav__item" href="#">{{ t('analytics', 'Analytics') }}</a>
     </li>
     <li>
-      <a class="ui-nav__item" href="#">Reports</a>
+      <a class="ui-nav__item" href="#">{{ t('reports', 'Reports') }}</a>
     </li>
   </ul>
 </nav>
@@ -43,13 +43,13 @@ description: Horizontal or vertical navigation links for primary and secondary n
 <nav class="ui-nav ui-nav--vertical" style="inline-size: 200px">
   <ul class="ui-nav__list">
     <li>
-      <a class="ui-nav__item ui-nav__item--active" href="#">Profile</a>
+      <a class="ui-nav__item ui-nav__item--active" href="#">{{ t('profile', 'Profile') }}</a>
     </li>
     <li>
-      <a class="ui-nav__item" href="#">Account</a>
+      <a class="ui-nav__item" href="#">{{ t('account', 'Account') }}</a>
     </li>
     <li>
-      <a class="ui-nav__item" href="#">Security</a>
+      <a class="ui-nav__item" href="#">{{ t('security', 'Security') }}</a>
     </li>
   </ul>
 </nav>
@@ -59,13 +59,13 @@ description: Horizontal or vertical navigation links for primary and secondary n
 <nav class="ui-nav ui-nav--vertical ui-nav--pills" style="inline-size: 200px">
   <ul class="ui-nav__list">
     <li>
-      <a class="ui-nav__item ui-nav__item--active" href="#">General</a>
+      <a class="ui-nav__item ui-nav__item--active" href="#">{{ t('general', 'General') }}</a>
     </li>
     <li>
-      <a class="ui-nav__item" href="#">Notifications</a>
+      <a class="ui-nav__item" href="#">{{ t('notifications', 'Notifications') }}</a>
     </li>
     <li>
-      <a class="ui-nav__item" href="#">Billing</a>
+      <a class="ui-nav__item" href="#">{{ t('billing', 'Billing') }}</a>
     </li>
   </ul>
 </nav>

package/src/components/navigation/pagination/docs.html

@@ -4,7 +4,7 @@ title: Pagination
 
 <!-- @default -->
 <nav class="ui-pagination">
-  <a class="ui-pagination__link ui-pagination__prev" href="#">Prev</a>
+  <a class="ui-pagination__link ui-pagination__prev" href="#">{{ t('prev', 'Prev') }}</a>
   <ul class="ui-pagination__list">
     <li class="ui-pagination__item">
       <a class="ui-pagination__link" href="#">1</a>
@@ -22,12 +22,12 @@ title: Pagination
       <a class="ui-pagination__link" href="#">5</a>
     </li>
   </ul>
-  <a class="ui-pagination__link ui-pagination__next" href="#">Next</a>
+  <a class="ui-pagination__link ui-pagination__next" href="#">{{ t('next', 'Next') }}</a>
 </nav>
 
 <!-- @with_ellipsis -->
 <nav class="ui-pagination">
-  <a class="ui-pagination__link ui-pagination__prev" href="#">Prev</a>
+  <a class="ui-pagination__link ui-pagination__prev" href="#">{{ t('prev', 'Prev') }}</a>
   <ul class="ui-pagination__list">
     <li class="ui-pagination__item">
       <a class="ui-pagination__link" href="#">1</a>
@@ -51,12 +51,12 @@ title: Pagination
       <a class="ui-pagination__link" href="#">20</a>
     </li>
   </ul>
-  <a class="ui-pagination__link ui-pagination__next" href="#">Next</a>
+  <a class="ui-pagination__link ui-pagination__next" href="#">{{ t('next', 'Next') }}</a>
 </nav>
 
 <!-- @disabled_states -->
 <nav class="ui-pagination">
-  <a class="ui-pagination__link ui-pagination__prev ui-pagination__link--disabled" aria-disabled="true">Prev</a>
+  <a class="ui-pagination__link ui-pagination__prev ui-pagination__link--disabled" aria-disabled="true">{{ t('prev', 'Prev') }}</a>
   <ul class="ui-pagination__list">
     <li class="ui-pagination__item">
       <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">1</a>
@@ -68,7 +68,7 @@ title: Pagination
       <a class="ui-pagination__link" href="#">3</a>
     </li>
   </ul>
-  <a class="ui-pagination__link ui-pagination__next" href="#">Next</a>
+  <a class="ui-pagination__link ui-pagination__next" href="#">{{ t('next', 'Next') }}</a>
 </nav>
 
 <!-- @sizes | column -->

package/src/components/navigation/tabs/docs.html

@@ -5,23 +5,23 @@ title: Tabs
 <!-- @default -->
 <div class="ui-tabs">
   <div class="ui-tabs__list">
-    <button class="ui-tabs__tab ui-tabs__tab--active">Tab 1</button>
-    <button class="ui-tabs__tab">Tab 2</button>
-    <button class="ui-tabs__tab">Tab 3</button>
+    <button class="ui-tabs__tab ui-tabs__tab--active">{{ t('tab_1', 'Tab 1') }}</button>
+    <button class="ui-tabs__tab">{{ t('tab_2', 'Tab 2') }}</button>
+    <button class="ui-tabs__tab">{{ t('tab_3', 'Tab 3') }}</button>
   </div>
-  <div class="ui-tabs__panel ui-tabs__panel--active">Panel 1 content</div>
-  <div class="ui-tabs__panel">Panel 2 content</div>
-  <div class="ui-tabs__panel">Panel 3 content</div>
+  <div class="ui-tabs__panel ui-tabs__panel--active">{{ t('panel_1_content', 'Panel 1 content') }}</div>
+  <div class="ui-tabs__panel">{{ t('panel_2_content', 'Panel 2 content') }}</div>
+  <div class="ui-tabs__panel">{{ t('panel_3_content', 'Panel 3 content') }}</div>
 </div>
 
 <!-- @two_tabs -->
 <div class="ui-tabs">
   <div class="ui-tabs__list">
-    <button class="ui-tabs__tab ui-tabs__tab--active">Preview</button>
-    <button class="ui-tabs__tab">Code</button>
+    <button class="ui-tabs__tab ui-tabs__tab--active">{{ t('preview', 'Preview') }}</button>
+    <button class="ui-tabs__tab">{{ t('code', 'Code') }}</button>
   </div>
   <div class="ui-tabs__panel ui-tabs__panel--active">
-    <div class="ui-card">Preview content goes here</div>
+    <div class="ui-card">{{ t('preview_content_goes_here', 'Preview content goes here') }}</div>
   </div>
   <div class="ui-tabs__panel">
     <pre class="ui-code-block">
@@ -34,20 +34,20 @@ title: Tabs
 <div class="ui-column" style="--column-gap: var(--ui-space-3);">
   <div class="ui-tabs ui-tabs--sm">
     <div class="ui-tabs__list">
-      <button class="ui-tabs__tab ui-tabs__tab--active">Small</button>
-      <button class="ui-tabs__tab">Tab 2</button>
+      <button class="ui-tabs__tab ui-tabs__tab--active">{{ t('small', 'Small') }}</button>
+      <button class="ui-tabs__tab">{{ t('tab_2', 'Tab 2') }}</button>
     </div>
   </div>
   <div class="ui-tabs">
     <div class="ui-tabs__list">
-      <button class="ui-tabs__tab ui-tabs__tab--active">Default</button>
-      <button class="ui-tabs__tab">Tab 2</button>
+      <button class="ui-tabs__tab ui-tabs__tab--active">{{ t('default', 'Default') }}</button>
+      <button class="ui-tabs__tab">{{ t('tab_2', 'Tab 2') }}</button>
     </div>
   </div>
   <div class="ui-tabs ui-tabs--lg">
     <div class="ui-tabs__list">
-      <button class="ui-tabs__tab ui-tabs__tab--active">Large</button>
-      <button class="ui-tabs__tab">Tab 2</button>
+      <button class="ui-tabs__tab ui-tabs__tab--active">{{ t('large', 'Large') }}</button>
+      <button class="ui-tabs__tab">{{ t('tab_2', 'Tab 2') }}</button>
     </div>
   </div>
 </div>
@@ -55,9 +55,9 @@ title: Tabs
 <!-- @vertical -->
 <div class="ui-tabs ui-tabs--vertical">
   <div class="ui-tabs__list">
-    <button class="ui-tabs__tab ui-tabs__tab--active">Tab 1</button>
-    <button class="ui-tabs__tab">Tab 2</button>
-    <button class="ui-tabs__tab">Tab 3</button>
+    <button class="ui-tabs__tab ui-tabs__tab--active">{{ t('tab_1', 'Tab 1') }}</button>
+    <button class="ui-tabs__tab">{{ t('tab_2', 'Tab 2') }}</button>
+    <button class="ui-tabs__tab">{{ t('tab_3', 'Tab 3') }}</button>
   </div>
-  <div class="ui-tabs__panel ui-tabs__panel--active">Vertical tab content</div>
+  <div class="ui-tabs__panel ui-tabs__panel--active">{{ t('vertical_tab_content', 'Vertical tab content') }}</div>
 </div>

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>