@teseor/css 1.15.2 → 1.15.5

package/src/components/forms/textarea/docs.html

@@ -4,33 +4,33 @@ description: Multi-line text input for longer content like comments or descripti
 ---
 
 <!-- @default -->
-<textarea class="ui-textarea" placeholder="Enter your message..."></textarea>
+<textarea class="ui-textarea" placeholder="{{ t('enter_your_message', 'Enter your message...') }}"></textarea>
 
 <!-- @sizes | column -->
-<textarea class="ui-textarea ui-textarea--sm" placeholder="Small (3 rows)"></textarea>
-<textarea class="ui-textarea" placeholder="Default (4 rows)"></textarea>
-<textarea class="ui-textarea ui-textarea--lg" placeholder="Large (6 rows)"></textarea>
+<textarea class="ui-textarea ui-textarea--sm" placeholder="{{ t('small_3_rows', 'Small (3 rows)') }}"></textarea>
+<textarea class="ui-textarea" placeholder="{{ t('default_4_rows', 'Default (4 rows)') }}"></textarea>
+<textarea class="ui-textarea ui-textarea--lg" placeholder="{{ t('large_6_rows', 'Large (6 rows)') }}"></textarea>
 
 <!-- @variants | column -->
-<textarea class="ui-textarea" placeholder="Outline (default)"></textarea>
-<textarea class="ui-textarea ui-textarea--filled" placeholder="Filled"></textarea>
-<textarea class="ui-textarea ui-textarea--ghost" placeholder="Ghost"></textarea>
+<textarea class="ui-textarea" placeholder="{{ t('outline_default', 'Outline (default)') }}"></textarea>
+<textarea class="ui-textarea ui-textarea--filled" placeholder="{{ t('filled', 'Filled') }}"></textarea>
+<textarea class="ui-textarea ui-textarea--ghost" placeholder="{{ t('ghost', 'Ghost') }}"></textarea>
 
 <!-- @states | column -->
-<textarea class="ui-textarea ui-textarea--error">Invalid content</textarea>
-<textarea class="ui-textarea ui-textarea--success">Valid content</textarea>
-<textarea class="ui-textarea" disabled placeholder="Disabled"></textarea>
-<textarea class="ui-textarea" readonly>Read only content</textarea>
+<textarea class="ui-textarea ui-textarea--error">{{ t('invalid_content', 'Invalid content') }}</textarea>
+<textarea class="ui-textarea ui-textarea--success">{{ t('valid_content', 'Valid content') }}</textarea>
+<textarea class="ui-textarea" disabled placeholder="{{ t('disabled', 'Disabled') }}"></textarea>
+<textarea class="ui-textarea" readonly>{{ t('read_only_content', 'Read only content') }}</textarea>
 
 <!-- @resize_options | column -->
 <!-- Control how users can resize the textarea. -->
-<textarea class="ui-textarea" placeholder="Vertical resize (default)"></textarea>
-<textarea class="ui-textarea ui-textarea--resize-none" placeholder="No resize"></textarea>
-<textarea class="ui-textarea ui-textarea--resize-horizontal" placeholder="Horizontal resize only"></textarea>
-<textarea class="ui-textarea ui-textarea--resize-both" placeholder="Resize both directions"></textarea>
+<textarea class="ui-textarea" placeholder="{{ t('vertical_resize_default', 'Vertical resize (default)') }}"></textarea>
+<textarea class="ui-textarea ui-textarea--resize-none" placeholder="{{ t('no_resize', 'No resize') }}"></textarea>
+<textarea class="ui-textarea ui-textarea--resize-horizontal" placeholder="{{ t('horizontal_resize_only', 'Horizontal resize only') }}"></textarea>
+<textarea class="ui-textarea ui-textarea--resize-both" placeholder="{{ t('resize_both_directions', 'Resize both directions') }}"></textarea>
 
 <!-- @auto_size | column -->
 <!-- Automatically grows to fit content using field-sizing: content. Falls back to fixed min-height in unsupported browsers. -->
-<textarea class="ui-textarea ui-textarea--auto-size" placeholder="Type to grow..."></textarea>
-<textarea class="ui-textarea ui-textarea--auto-size ui-textarea--sm" placeholder="Small auto-size"></textarea>
-<textarea class="ui-textarea ui-textarea--auto-size ui-textarea--lg" placeholder="Large auto-size"></textarea>
+<textarea class="ui-textarea ui-textarea--auto-size" placeholder="{{ t('type_to_grow', 'Type to grow...') }}"></textarea>
+<textarea class="ui-textarea ui-textarea--auto-size ui-textarea--sm" placeholder="{{ t('small_auto_size', 'Small auto-size') }}"></textarea>
+<textarea class="ui-textarea ui-textarea--auto-size ui-textarea--lg" placeholder="{{ t('large_auto_size', 'Large auto-size') }}"></textarea>

package/src/components/forms/toggle/docs.html

@@ -57,5 +57,5 @@ description: Switch control for boolean states. Uses checkbox semantics with rol
     <span class="ui-toggle__track"></span>
     <span class="ui-toggle__thumb"></span>
   </label>
-  <label for="notifications">Enable notifications</label>
+  <label for="notifications">{{ t('enable_notifications', 'Enable notifications') }}</label>
 </div>

package/src/components/forms/toggle/index.scss

@@ -96,7 +96,7 @@
 
     background: var(--_thumb-bg);
     border-radius: 50%;
-    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+    box-shadow: #{t.$slider-thumb-shadow};
 
     transition: transform var(--_duration-fast) var(--_ease-default);
   }

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

@@ -4,22 +4,22 @@ description: Navigation hierarchy showing current page location in site structur
 ---
 
 <!-- @default -->
-<nav class="ui-breadcrumb" aria-label="Breadcrumb">
+<nav class="ui-breadcrumb" aria-label="{{ t('breadcrumb', 'Breadcrumb') }}">
   <ol class="ui-breadcrumb">
     <li class="ui-breadcrumb__item">
-      <a class="ui-breadcrumb__link" href="#">Home</a>
+      <a class="ui-breadcrumb__link" href="#">{{ t('home', 'Home') }}</a>
     </li>
     <li class="ui-breadcrumb__item">
-      <a class="ui-breadcrumb__link" href="#">Products</a>
+      <a class="ui-breadcrumb__link" href="#">{{ t('products', 'Products') }}</a>
     </li>
     <li class="ui-breadcrumb__item">
-      <span class="ui-breadcrumb__current" aria-current="page">Shoes</span>
+      <span class="ui-breadcrumb__current" aria-current="page">{{ t('shoes', 'Shoes') }}</span>
     </li>
   </ol>
 </nav>
 
 <!-- @with_icons -->
-<nav aria-label="Breadcrumb">
+<nav aria-label="{{ t('breadcrumb', 'Breadcrumb') }}">
   <ol class="ui-breadcrumb">
     <li class="ui-breadcrumb__item">
       <a class="ui-breadcrumb__link" href="#">
@@ -29,29 +29,29 @@ description: Navigation hierarchy showing current page location in site structur
       </a>
     </li>
     <li class="ui-breadcrumb__item">
-      <a class="ui-breadcrumb__link" href="#">Settings</a>
+      <a class="ui-breadcrumb__link" href="#">{{ t('settings', 'Settings') }}</a>
     </li>
     <li class="ui-breadcrumb__item">
-      <span class="ui-breadcrumb__current" aria-current="page">Profile</span>
+      <span class="ui-breadcrumb__current" aria-current="page">{{ t('profile', 'Profile') }}</span>
     </li>
   </ol>
 </nav>
 
 <!-- @overflow_with_ellipsis -->
 <!-- Truncate long breadcrumbs with hidden items and an ellipsis indicator. -->
-<nav aria-label="Breadcrumb">
+<nav aria-label="{{ t('breadcrumb', 'Breadcrumb') }}">
   <ol class="ui-breadcrumb">
     <li class="ui-breadcrumb__item">
-      <a class="ui-breadcrumb__link" href="#">Home</a>
+      <a class="ui-breadcrumb__link" href="#">{{ t('home', 'Home') }}</a>
     </li>
     <li class="ui-breadcrumb__item ui-breadcrumb__item--hidden">
-      <a class="ui-breadcrumb__link" href="#">Category</a>
+      <a class="ui-breadcrumb__link" href="#">{{ t('category', 'Category') }}</a>
     </li>
     <li class="ui-breadcrumb__item">
       <span class="ui-breadcrumb__ellipsis">...</span>
     </li>
     <li class="ui-breadcrumb__item">
-      <span class="ui-breadcrumb__current" aria-current="page">Current Page</span>
+      <span class="ui-breadcrumb__current" aria-current="page">{{ t('current_page', 'Current Page') }}</span>
     </li>
   </ol>
 </nav>

package/src/components/navigation/dropdown-menu/docs.html

@@ -6,20 +6,20 @@ description: Trigger button with floating menu panel. Reuses the menu component
 <!-- @default -->
 <div class="ui-dropdown-menu ui-dropdown-menu--open">
   <button class="ui-dropdown-menu__trigger ui-button" type="button">
-    <span>Actions</span>
+    <span>{{ t('actions', 'Actions') }}</span>
     <span class="ui-dropdown-menu__trigger-icon">▾</span>
   </button>
   <div class="ui-dropdown-menu__panel" role="menu">
     <div class="ui-menu">
       <ul class="ui-menu__group">
         <li>
-          <button class="ui-menu__item" role="menuitem">Edit</button>
+          <button class="ui-menu__item" role="menuitem">{{ t('edit', 'Edit') }}</button>
         </li>
         <li>
-          <button class="ui-menu__item" role="menuitem">Duplicate</button>
+          <button class="ui-menu__item" role="menuitem">{{ t('duplicate', 'Duplicate') }}</button>
         </li>
         <li>
-          <button class="ui-menu__item ui-menu__item--danger" role="menuitem">Delete</button>
+          <button class="ui-menu__item ui-menu__item--danger" role="menuitem">{{ t('delete', 'Delete') }}</button>
         </li>
       </ul>
     </div>
@@ -28,24 +28,24 @@ description: Trigger button with floating menu panel. Reuses the menu component
 
 <!-- @with_separator -->
 <div class="ui-dropdown-menu ui-dropdown-menu--open">
-  <button class="ui-dropdown-menu__trigger ui-button ui-button--secondary" type="button">File</button>
+  <button class="ui-dropdown-menu__trigger ui-button ui-button--secondary" type="button">{{ t('file', 'File') }}</button>
   <div class="ui-dropdown-menu__panel" role="menu">
     <div class="ui-menu">
       <ul class="ui-menu__group">
         <li>
-          <button class="ui-menu__item" role="menuitem">New</button>
+          <button class="ui-menu__item" role="menuitem">{{ t('new', 'New') }}</button>
         </li>
         <li>
-          <button class="ui-menu__item" role="menuitem">Open</button>
+          <button class="ui-menu__item" role="menuitem">{{ t('open', 'Open') }}</button>
         </li>
         <li>
-          <button class="ui-menu__item" role="menuitem">Save</button>
+          <button class="ui-menu__item" role="menuitem">{{ t('save', 'Save') }}</button>
         </li>
         <li>
           <hr class="ui-menu__separator">
         </li>
         <li>
-          <button class="ui-menu__item ui-menu__item--danger" role="menuitem">Close</button>
+          <button class="ui-menu__item ui-menu__item--danger" role="menuitem">{{ t('close', 'Close') }}</button>
         </li>
       </ul>
     </div>
@@ -55,12 +55,12 @@ description: Trigger button with floating menu panel. Reuses the menu component
 <!-- @top_position -->
 <!-- Opens panel above the trigger. -->
 <div class="ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--top">
-  <button class="ui-dropdown-menu__trigger ui-button">Actions</button>
+  <button class="ui-dropdown-menu__trigger ui-button">{{ t('actions', 'Actions') }}</button>
   <div class="ui-dropdown-menu__panel" role="menu">
     <div class="ui-menu">
       <ul class="ui-menu__group">
-        <li><button class="ui-menu__item" role="menuitem">Edit</button></li>
-        <li><button class="ui-menu__item" role="menuitem">Delete</button></li>
+        <li><button class="ui-menu__item" role="menuitem">{{ t('edit', 'Edit') }}</button></li>
+        <li><button class="ui-menu__item" role="menuitem">{{ t('delete', 'Delete') }}</button></li>
       </ul>
     </div>
   </div>
@@ -69,12 +69,12 @@ description: Trigger button with floating menu panel. Reuses the menu component
 <!-- @full_width -->
 <!-- Panel stretches to match trigger width. -->
 <div class="ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--full-width">
-  <button class="ui-dropdown-menu__trigger ui-button">Select option</button>
+  <button class="ui-dropdown-menu__trigger ui-button">{{ t('select_option', 'Select option') }}</button>
   <div class="ui-dropdown-menu__panel" role="menu">
     <div class="ui-menu">
       <ul class="ui-menu__group">
-        <li><button class="ui-menu__item" role="menuitem">Option A</button></li>
-        <li><button class="ui-menu__item" role="menuitem">Option B</button></li>
+        <li><button class="ui-menu__item" role="menuitem">{{ t('option_a', 'Option A') }}</button></li>
+        <li><button class="ui-menu__item" role="menuitem">{{ t('option_b', 'Option B') }}</button></li>
       </ul>
     </div>
   </div>
@@ -88,13 +88,13 @@ description: Trigger button with floating menu panel. Reuses the menu component
       <div class="ui-menu">
         <ul class="ui-menu__group">
           <li>
-            <button class="ui-menu__item" role="menuitem">View</button>
+            <button class="ui-menu__item" role="menuitem">{{ t('view', 'View') }}</button>
           </li>
           <li>
-            <button class="ui-menu__item" role="menuitem">Share</button>
+            <button class="ui-menu__item" role="menuitem">{{ t('share', 'Share') }}</button>
           </li>
           <li>
-            <button class="ui-menu__item ui-menu__item--danger" role="menuitem">Remove</button>
+            <button class="ui-menu__item ui-menu__item--danger" role="menuitem">{{ t('remove', 'Remove') }}</button>
           </li>
         </ul>
       </div>

package/src/components/navigation/dropdown-menu/index.scss

@@ -8,7 +8,7 @@
   .dropdown-menu {
     --_space-0: var(--ui-space-0, #{t.$space-0});
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
-    --_ease-default: var(--ui-ease-default, ease);
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     // @desc Z-index stacking order
     --_z: var(--ui-dropdown-menu-z, #{t.$z-dropdown});
     // @desc Panel offset from anchor
@@ -33,7 +33,7 @@
   .dropdown-menu__trigger-icon {
     display: inline-flex;
 
-    font-size: 0.6em;
+    font-size: #{t.$font-size-relative-xs};
 
     transition: transform var(--_duration-fast) var(--_ease-default);
   }

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

@@ -6,13 +6,13 @@ title: Menu
 <div class="ui-menu">
   <ul class="ui-menu__group">
     <li>
-      <button class="ui-menu__item">Edit</button>
+      <button class="ui-menu__item">{{ t('edit', 'Edit') }}</button>
     </li>
     <li>
-      <button class="ui-menu__item">Duplicate</button>
+      <button class="ui-menu__item">{{ t('duplicate', 'Duplicate') }}</button>
     </li>
     <li>
-      <button class="ui-menu__item">Archive</button>
+      <button class="ui-menu__item">{{ t('archive', 'Archive') }}</button>
     </li>
   </ul>
 </div>
@@ -23,22 +23,22 @@ title: Menu
     <li>
       <button class="ui-menu__item">
         <span class="ui-menu__item-icon">+</span>
-New File
-        <span class="ui-menu__item-shortcut">Cmd+N</span>
+{{ t('new_file', 'New File') }}
+        <span class="ui-menu__item-shortcut">{{ t('cmdn', 'Cmd+N') }}</span>
       </button>
     </li>
     <li>
       <button class="ui-menu__item">
-        <span class="ui-menu__item-icon">O</span>
-Open
-        <span class="ui-menu__item-shortcut">Cmd+O</span>
+        <span class="ui-menu__item-icon">{{ t('o', 'O') }}</span>
+{{ t('open', 'Open') }}
+        <span class="ui-menu__item-shortcut">{{ t('cmdo', 'Cmd+O') }}</span>
       </button>
     </li>
     <li>
       <button class="ui-menu__item">
-        <span class="ui-menu__item-icon">S</span>
-Save
-        <span class="ui-menu__item-shortcut">Cmd+S</span>
+        <span class="ui-menu__item-icon">{{ t('s', 'S') }}</span>
+{{ t('save', 'Save') }}
+        <span class="ui-menu__item-shortcut">{{ t('cmds', 'Cmd+S') }}</span>
       </button>
     </li>
   </ul>
@@ -46,26 +46,26 @@ Save
 
 <!-- @groups_with_labels -->
 <div class="ui-menu">
-  <div class="ui-menu__label">Edit</div>
+  <div class="ui-menu__label">{{ t('edit', 'Edit') }}</div>
   <ul class="ui-menu__group">
     <li>
-      <button class="ui-menu__item">Cut</button>
+      <button class="ui-menu__item">{{ t('cut', 'Cut') }}</button>
     </li>
     <li>
-      <button class="ui-menu__item">Copy</button>
+      <button class="ui-menu__item">{{ t('copy', 'Copy') }}</button>
     </li>
     <li>
-      <button class="ui-menu__item">Paste</button>
+      <button class="ui-menu__item">{{ t('paste', 'Paste') }}</button>
     </li>
   </ul>
   <div class="ui-menu__separator"></div>
-  <div class="ui-menu__label">View</div>
+  <div class="ui-menu__label">{{ t('view', 'View') }}</div>
   <ul class="ui-menu__group">
     <li>
-      <button class="ui-menu__item">Zoom In</button>
+      <button class="ui-menu__item">{{ t('zoom_in', 'Zoom In') }}</button>
     </li>
     <li>
-      <button class="ui-menu__item">Zoom Out</button>
+      <button class="ui-menu__item">{{ t('zoom_out', 'Zoom Out') }}</button>
     </li>
   </ul>
 </div>
@@ -74,13 +74,13 @@ Save
 <div class="ui-menu">
   <ul class="ui-menu__group">
     <li>
-      <button class="ui-menu__item">Normal Item</button>
+      <button class="ui-menu__item">{{ t('normal_item', 'Normal Item') }}</button>
     </li>
     <li>
-      <button class="ui-menu__item ui-menu__item--disabled" aria-disabled="true">Disabled Item</button>
+      <button class="ui-menu__item ui-menu__item--disabled" aria-disabled="true">{{ t('disabled_item', 'Disabled Item') }}</button>
     </li>
     <li>
-      <button class="ui-menu__item ui-menu__item--danger">Delete</button>
+      <button class="ui-menu__item ui-menu__item--danger">{{ t('delete', 'Delete') }}</button>
     </li>
   </ul>
 </div>
@@ -91,13 +91,13 @@ Save
     <li>
       <button class="ui-menu__item ui-menu__item--check">
         <span class="ui-menu__item-indicator">✓</span>
-Show Toolbar
+{{ t('show_toolbar', 'Show Toolbar') }}
       </button>
     </li>
     <li>
       <button class="ui-menu__item ui-menu__item--check">
         <span class="ui-menu__item-indicator"></span>
-Show Sidebar
+{{ t('show_sidebar', 'Show Sidebar') }}
       </button>
     </li>
   </ul>
@@ -106,13 +106,13 @@ Show Sidebar
     <li>
       <button class="ui-menu__item ui-menu__item--radio">
         <span class="ui-menu__item-indicator">•</span>
-List View
+{{ t('list_view', 'List View') }}
       </button>
     </li>
     <li>
       <button class="ui-menu__item ui-menu__item--radio">
         <span class="ui-menu__item-indicator"></span>
-Grid View
+{{ t('grid_view', 'Grid View') }}
       </button>
     </li>
   </ul>

package/src/components/navigation/menu/index.scss

@@ -15,7 +15,7 @@
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
     --_color-text: var(--ui-color-text, #{t.$color-text});
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
-    --_ease-default: var(--ui-ease-default, ease);
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     --_color-danger: var(--ui-color-danger, #{t.$color-danger});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     --_color-border: var(--ui-color-border, #{t.$color-border});
@@ -69,7 +69,7 @@
     font-size: var(--_font-size-xs);
     font-weight: var(--_weight-medium);
     line-height: var(--_row-1);
-    letter-spacing: 0.05em;
+    letter-spacing: #{t.$tracking-wide};
     text-transform: uppercase;
     color: var(--_color-text-muted);
   }

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>