@teseor/css 1.15.1 → 1.15.3

package/src/components/forms/radio-group/docs.html

@@ -6,92 +6,92 @@ mergeInto: radio
 
 <!-- @default -->
 <fieldset class="ui-radio-group">
-  <legend class="ui-radio-group__legend">Payment method</legend>
+  <legend class="ui-radio-group__legend">{{ t('payment_method', 'Payment method') }}</legend>
   <div class="ui-radio-group__items">
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="payment" checked></input>
-      <span>Credit card</span>
+      <span>{{ t('credit_card', 'Credit card') }}</span>
     </label>
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="payment"></input>
-      <span>Debit card</span>
+      <span>{{ t('debit_card', 'Debit card') }}</span>
     </label>
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="payment"></input>
-      <span>Bank transfer</span>
+      <span>{{ t('bank_transfer', 'Bank transfer') }}</span>
     </label>
   </div>
 </fieldset>
 
 <!-- @horizontal -->
 <fieldset class="ui-radio-group ui-radio-group--horizontal">
-  <legend class="ui-radio-group__legend">Size</legend>
+  <legend class="ui-radio-group__legend">{{ t('size', 'Size') }}</legend>
   <div class="ui-radio-group__items">
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="size" checked></input>
-      <span>Small</span>
+      <span>{{ t('small', 'Small') }}</span>
     </label>
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="size"></input>
-      <span>Medium</span>
+      <span>{{ t('medium', 'Medium') }}</span>
     </label>
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="size"></input>
-      <span>Large</span>
+      <span>{{ t('large', 'Large') }}</span>
     </label>
   </div>
 </fieldset>
 
 <!-- @compact -->
 <fieldset class="ui-radio-group ui-radio-group--compact">
-  <legend class="ui-radio-group__legend">Priority</legend>
+  <legend class="ui-radio-group__legend">{{ t('priority', 'Priority') }}</legend>
   <div class="ui-radio-group__items">
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="priority" checked></input>
-      <span>Low</span>
+      <span>{{ t('low', 'Low') }}</span>
     </label>
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="priority"></input>
-      <span>Medium</span>
+      <span>{{ t('medium', 'Medium') }}</span>
     </label>
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="priority"></input>
-      <span>High</span>
+      <span>{{ t('high', 'High') }}</span>
     </label>
   </div>
 </fieldset>
 
 <!-- @error_state -->
 <fieldset class="ui-radio-group ui-radio-group--error">
-  <legend class="ui-radio-group__legend">Shipping</legend>
+  <legend class="ui-radio-group__legend">{{ t('shipping', 'Shipping') }}</legend>
   <div class="ui-radio-group__items">
     <label class="ui-radio-group__item">
       <input class="ui-radio ui-radio--error" type="radio" name="shipping"></input>
-      <span>Standard</span>
+      <span>{{ t('standard', 'Standard') }}</span>
     </label>
     <label class="ui-radio-group__item">
       <input class="ui-radio ui-radio--error" type="radio" name="shipping"></input>
-      <span>Express</span>
+      <span>{{ t('express', 'Express') }}</span>
     </label>
   </div>
-  <span class="ui-form-error">Please select a shipping method</span>
+  <span class="ui-form-error">{{ t('please_select_a_shipping_method', 'Please select a shipping method') }}</span>
 </fieldset>
 
 <!-- @disabled -->
 <fieldset class="ui-radio-group" disabled>
-  <legend class="ui-radio-group__legend">Plan (locked)</legend>
+  <legend class="ui-radio-group__legend">{{ t('plan_locked', 'Plan (locked)') }}</legend>
   <div class="ui-radio-group__items">
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="plan" checked></input>
-      <span>Free</span>
+      <span>{{ t('free', 'Free') }}</span>
     </label>
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="plan"></input>
-      <span>Pro</span>
+      <span>{{ t('pro', 'Pro') }}</span>
     </label>
     <label class="ui-radio-group__item">
       <input class="ui-radio" type="radio" name="plan"></input>
-      <span>Enterprise</span>
+      <span>{{ t('enterprise', 'Enterprise') }}</span>
     </label>
   </div>
 </fieldset>

package/src/components/forms/search-input/docs.html

@@ -11,7 +11,7 @@ description: Search field with built-in search icon and optional clear button.
       <path d="m21 21-4.3-4.3"></path>
     </svg>
   </span>
-  <input class="ui-search-input__field" type="search" placeholder="Search..."></input>
+  <input class="ui-search-input__field" type="search" placeholder="{{ t('search', 'Search...') }}"></input>
 </div>
 
 <!-- @with_clear_button -->
@@ -23,7 +23,7 @@ description: Search field with built-in search icon and optional clear button.
     </svg>
   </span>
   <input class="ui-search-input__field" type="search" value="Design tokens"></input>
-  <button class="ui-search-input__clear" type="button" aria-label="Clear search">
+  <button class="ui-search-input__clear" type="button" aria-label="{{ t('clear_search', 'Clear search') }}">
     <svg viewBox="0 0 24 24">
       <path d="M18 6 6 18"></path>
       <path d="m6 6 12 12"></path>
@@ -39,7 +39,7 @@ description: Search field with built-in search icon and optional clear button.
       <path d="m21 21-4.3-4.3"></path>
     </svg>
   </span>
-  <input class="ui-search-input__field" type="search" placeholder="Small"></input>
+  <input class="ui-search-input__field" type="search" placeholder="{{ t('small', 'Small') }}"></input>
 </div>
 <div class="ui-search-input">
   <span class="ui-search-input__icon">
@@ -48,7 +48,7 @@ description: Search field with built-in search icon and optional clear button.
       <path d="m21 21-4.3-4.3"></path>
     </svg>
   </span>
-  <input class="ui-search-input__field" type="search" placeholder="Default"></input>
+  <input class="ui-search-input__field" type="search" placeholder="{{ t('default', 'Default') }}"></input>
 </div>
 <div class="ui-search-input ui-search-input--lg">
   <span class="ui-search-input__icon">
@@ -57,7 +57,7 @@ description: Search field with built-in search icon and optional clear button.
       <path d="m21 21-4.3-4.3"></path>
     </svg>
   </span>
-  <input class="ui-search-input__field" type="search" placeholder="Large"></input>
+  <input class="ui-search-input__field" type="search" placeholder="{{ t('large', 'Large') }}"></input>
 </div>
 
 <!-- @block -->
@@ -69,7 +69,7 @@ description: Search field with built-in search icon and optional clear button.
       <path d="m21 21-4.3-4.3"></path>
     </svg>
   </span>
-  <input class="ui-search-input__field" type="search" placeholder="Full width search..."></input>
+  <input class="ui-search-input__field" type="search" placeholder="{{ t('full_width_search', 'Full width search...') }}"></input>
 </div>
 
 <!-- @disabled -->
@@ -80,5 +80,5 @@ description: Search field with built-in search icon and optional clear button.
       <path d="m21 21-4.3-4.3"></path>
     </svg>
   </span>
-  <input class="ui-search-input__field" type="search" placeholder="Disabled" disabled></input>
+  <input class="ui-search-input__field" type="search" placeholder="{{ t('disabled', 'Disabled') }}" disabled></input>
 </div>

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

@@ -5,63 +5,63 @@ description: Native select dropdown with custom styling. Dropdown options use br
 
 <!-- @default -->
 <select class="ui-select">
-  <option value disabled selected>Choose option...</option>
-  <option value="1">Option 1</option>
-  <option value="2">Option 2</option>
-  <option value="3">Option 3</option>
+  <option value disabled selected>{{ t('choose_option', 'Choose option...') }}</option>
+  <option value="1">{{ t('option_1', 'Option 1') }}</option>
+  <option value="2">{{ t('option_2', 'Option 2') }}</option>
+  <option value="3">{{ t('option_3', 'Option 3') }}</option>
 </select>
 
 <!-- @sizes | column -->
 <select class="ui-select ui-select--sm">
-  <option>Small</option>
-  <option>Option 2</option>
+  <option>{{ t('small', 'Small') }}</option>
+  <option>{{ t('option_2', 'Option 2') }}</option>
 </select>
 <select class="ui-select">
-  <option>Default</option>
-  <option>Option 2</option>
+  <option>{{ t('default', 'Default') }}</option>
+  <option>{{ t('option_2', 'Option 2') }}</option>
 </select>
 <select class="ui-select ui-select--lg">
-  <option>Large</option>
-  <option>Option 2</option>
+  <option>{{ t('large', 'Large') }}</option>
+  <option>{{ t('option_2', 'Option 2') }}</option>
 </select>
 
 <!-- @variants | column -->
 <select class="ui-select">
-  <option>Outline (default)</option>
+  <option>{{ t('outline_default', 'Outline (default)') }}</option>
 </select>
 <select class="ui-select ui-select--filled">
-  <option>Filled</option>
+  <option>{{ t('filled', 'Filled') }}</option>
 </select>
 <select class="ui-select ui-select--ghost">
-  <option>Ghost</option>
+  <option>{{ t('ghost', 'Ghost') }}</option>
 </select>
 
 <!-- @states | column -->
 <select class="ui-select ui-select--error">
-  <option>Error state</option>
+  <option>{{ t('error_state', 'Error state') }}</option>
 </select>
 <select class="ui-select ui-select--success">
-  <option>Success state</option>
+  <option>{{ t('success_state', 'Success state') }}</option>
 </select>
 <select class="ui-select" disabled>
-  <option>Disabled</option>
+  <option>{{ t('disabled', 'Disabled') }}</option>
 </select>
 
 <!-- @full_width -->
 <select class="ui-select ui-select--block">
-  <option value>Full width select...</option>
-  <option value="1">Option 1</option>
+  <option value>{{ t('full_width_select', 'Full width select...') }}</option>
+  <option value="1">{{ t('option_1', 'Option 1') }}</option>
 </select>
 
 <!-- @with_option_groups -->
 <select class="ui-select ui-select--block">
-  <option value disabled selected>Choose a fruit...</option>
+  <option value disabled selected>{{ t('choose_a_fruit', 'Choose a fruit...') }}</option>
   <optgroup label="Citrus">
-    <option value="orange">Orange</option>
-    <option value="lemon">Lemon</option>
+    <option value="orange">{{ t('orange', 'Orange') }}</option>
+    <option value="lemon">{{ t('lemon', 'Lemon') }}</option>
   </optgroup>
   <optgroup label="Berries">
-    <option value="strawberry">Strawberry</option>
-    <option value="blueberry">Blueberry</option>
+    <option value="strawberry">{{ t('strawberry', 'Strawberry') }}</option>
+    <option value="blueberry">{{ t('blueberry', 'Blueberry') }}</option>
   </optgroup>
 </select>

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/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/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>