@teseor/css 1.15.1 → 1.15.3

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

@@ -6,20 +6,20 @@ description: Layout container for form fields with consistent spacing, sections,
 <!-- @default -->
 <form class="ui-form">
   <div class="ui-field">
-    <label class="ui-label" for="f-name">Name</label>
+    <label class="ui-label" for="f-name">{{ t('name', 'Name') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="text" id="f-name" placeholder="Full name"></input>
+      <input class="ui-input" type="text" id="f-name" placeholder="{{ t('full_name', 'Full name') }}"></input>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label" for="f-email">Email</label>
+    <label class="ui-label" for="f-email">{{ t('email', 'Email') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="email" id="f-email" placeholder="you@example.com"></input>
+      <input class="ui-input" type="email" id="f-email" placeholder="{{ t('email_placeholder', 'you@example.com') }}"></input>
     </div>
   </div>
   <div class="ui-form__actions">
-    <button class="ui-button">Submit</button>
-    <button class="ui-button ui-button--ghost" type="button">Cancel</button>
+    <button class="ui-button">{{ t('submit', 'Submit') }}</button>
+    <button class="ui-button ui-button--ghost" type="button">{{ t('cancel', 'Cancel') }}</button>
   </div>
 </form>
 
@@ -27,37 +27,37 @@ description: Layout container for form fields with consistent spacing, sections,
 <!-- Group related fields using fieldset-based sections -->
 <form class="ui-form">
   <fieldset class="ui-form__section">
-    <legend class="ui-heading ui-heading--sm">Personal</legend>
+    <legend class="ui-heading ui-heading--sm">{{ t('personal', 'Personal') }}</legend>
     <div class="ui-field">
-      <label class="ui-label" for="s-first">First name</label>
+      <label class="ui-label" for="s-first">{{ t('first_name', 'First name') }}</label>
       <div class="ui-field__control">
         <input class="ui-input" type="text" id="s-first"></input>
       </div>
     </div>
     <div class="ui-field">
-      <label class="ui-label" for="s-last">Last name</label>
+      <label class="ui-label" for="s-last">{{ t('last_name', 'Last name') }}</label>
       <div class="ui-field__control">
         <input class="ui-input" type="text" id="s-last"></input>
       </div>
     </div>
   </fieldset>
   <fieldset class="ui-form__section">
-    <legend class="ui-heading ui-heading--sm">Account</legend>
+    <legend class="ui-heading ui-heading--sm">{{ t('account', 'Account') }}</legend>
     <div class="ui-field">
-      <label class="ui-label" for="s-email">Email</label>
+      <label class="ui-label" for="s-email">{{ t('email', 'Email') }}</label>
       <div class="ui-field__control">
         <input class="ui-input" type="email" id="s-email"></input>
       </div>
     </div>
     <div class="ui-field">
-      <label class="ui-label" for="s-pass">Password</label>
+      <label class="ui-label" for="s-pass">{{ t('password', 'Password') }}</label>
       <div class="ui-field__control">
         <input class="ui-input" type="password" id="s-pass"></input>
       </div>
     </div>
   </fieldset>
   <div class="ui-form__actions">
-    <button class="ui-button">Create account</button>
+    <button class="ui-button">{{ t('create_account', 'Create account') }}</button>
   </div>
 </form>
 
@@ -65,19 +65,19 @@ description: Layout container for form fields with consistent spacing, sections,
 <!-- Tighter spacing for dense interfaces -->
 <form class="ui-form ui-form--compact">
   <div class="ui-field">
-    <label class="ui-label" for="c-user">Username</label>
+    <label class="ui-label" for="c-user">{{ t('username', 'Username') }}</label>
     <div class="ui-field__control">
       <input class="ui-input" type="text" id="c-user"></input>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label" for="c-pass">Password</label>
+    <label class="ui-label" for="c-pass">{{ t('password', 'Password') }}</label>
     <div class="ui-field__control">
       <input class="ui-input" type="password" id="c-pass"></input>
     </div>
   </div>
   <div class="ui-form__actions">
-    <button class="ui-button">Log in</button>
+    <button class="ui-button">{{ t('log_in', 'Log in') }}</button>
   </div>
 </form>
 
@@ -85,23 +85,23 @@ description: Layout container for form fields with consistent spacing, sections,
 <!-- Horizontal layout for short forms like search or filters -->
 <form class="ui-form ui-form--inline">
   <div class="ui-field">
-    <label class="ui-label" for="i-search">Search</label>
+    <label class="ui-label" for="i-search">{{ t('search', 'Search') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="search" id="i-search" placeholder="Search..."></input>
+      <input class="ui-input" type="search" id="i-search" placeholder="{{ t('search', 'Search...') }}"></input>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label" for="i-cat">Category</label>
+    <label class="ui-label" for="i-cat">{{ t('category', 'Category') }}</label>
     <div class="ui-field__control">
       <select class="ui-select" id="i-cat">
-        <option>All</option>
-        <option>Articles</option>
-        <option>Products</option>
+        <option>{{ t('all', 'All') }}</option>
+        <option>{{ t('articles', 'Articles') }}</option>
+        <option>{{ t('products', 'Products') }}</option>
       </select>
     </div>
   </div>
   <div class="ui-form__actions">
-    <button class="ui-button">Filter</button>
+    <button class="ui-button">{{ t('filter', 'Filter') }}</button>
   </div>
 </form>
 
@@ -109,21 +109,21 @@ description: Layout container for form fields with consistent spacing, sections,
 <!-- Combining form layout with field error states -->
 <form class="ui-form">
   <div class="ui-field">
-    <label class="ui-label ui-label--required" for="v-email">Email</label>
+    <label class="ui-label ui-label--required" for="v-email">{{ t('email', 'Email') }}</label>
     <div class="ui-field__control">
       <input class="ui-input ui-input--error" type="email" id="v-email" value="not-an-email"></input>
-      <span class="ui-form-error">Enter a valid email address</span>
+      <span class="ui-form-error">{{ t('enter_a_valid_email_address', 'Enter a valid email address') }}</span>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label ui-label--required" for="v-pass">Password</label>
+    <label class="ui-label ui-label--required" for="v-pass">{{ t('password', 'Password') }}</label>
     <div class="ui-field__control">
       <input class="ui-input" type="password" id="v-pass"></input>
-      <span class="ui-form-helper">Must be at least 8 characters</span>
+      <span class="ui-form-helper">{{ t('must_be_at_least_8_characters', 'Must be at least 8 characters') }}</span>
     </div>
   </div>
   <div class="ui-form__actions">
-    <button class="ui-button">Sign up</button>
-    <button class="ui-button ui-button--ghost" type="button">Reset</button>
+    <button class="ui-button">{{ t('sign_up', 'Sign up') }}</button>
+    <button class="ui-button ui-button--ghost" type="button">{{ t('reset', 'Reset') }}</button>
   </div>
 </form>

package/src/components/forms/form-error/docs.html

@@ -4,12 +4,12 @@ description: Validation error message for form fields. Displays in danger color.
 ---
 
 <!-- @default -->
-<span class="ui-form-error">This field is required</span>
+<span class="ui-form-error">{{ t('this_field_is_required', 'This field is required') }}</span>
 
 <!-- @with_icon -->
 <span class="ui-form-error">
   <svg class="ui-form-error__icon ui-icon ui-icon--sm" viewBox="0 0 24 24" fill="currentColor">
     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
   </svg>
-  <span>Please enter a valid email</span>
+  <span>{{ t('please_enter_a_valid_email', 'Please enter a valid email') }}</span>
 </span>

package/src/components/forms/form-helper/docs.html

@@ -4,36 +4,36 @@ description: Helper text for form fields. Provides additional context or instruc
 ---
 
 <!-- @default -->
-<span class="ui-form-helper">Must be at least 8 characters</span>
+<span class="ui-form-helper">{{ t('must_be_at_least_8_characters', 'Must be at least 8 characters') }}</span>
 
 <!-- @with_input_field | column -->
 <!-- Helper text paired with a form input for context. -->
 <div class="ui-column ui-column--xs">
-  <input class="ui-input" type="email" placeholder="Email address"></input>
-  <span class="ui-form-helper">We will never share your email</span>
+  <input class="ui-input" type="email" placeholder="{{ t('email_address', 'Email address') }}"></input>
+  <span class="ui-form-helper">{{ t('we_will_never_share_your_email', 'We will never share your email') }}</span>
 </div>
 
 <!-- @error_state | column -->
 <!-- Helper text styled for validation errors using the input error context. -->
 <div class="ui-column ui-column--xs">
   <input class="ui-input ui-input--error" type="text" value="abc"></input>
-  <span class="ui-form-helper" style="color: var(--ui-color-danger);">Password must be at least 8 characters</span>
+  <span class="ui-form-helper" style="color: var(--ui-color-danger);">{{ t('password_must_be_at_least_8_characters', 'Password must be at least 8 characters') }}</span>
 </div>
 
 <!-- @success_state | column -->
 <!-- Helper text for successful validation. -->
 <div class="ui-column ui-column--xs">
   <input class="ui-input ui-input--success" type="text" value="strongpassword123"></input>
-  <span class="ui-form-helper" style="color: var(--ui-color-success);">Password strength: strong</span>
+  <span class="ui-form-helper" style="color: var(--ui-color-success);">{{ t('password_strength_strong', 'Password strength: strong') }}</span>
 </div>
 
 <!-- @with_select | column -->
 <!-- Helper text paired with a select field. -->
 <div class="ui-column ui-column--xs">
   <select class="ui-select">
-    <option>Choose a country</option>
-    <option>United States</option>
-    <option>Canada</option>
+    <option>{{ t('choose_a_country', 'Choose a country') }}</option>
+    <option>{{ t('united_states', 'United States') }}</option>
+    <option>{{ t('canada', 'Canada') }}</option>
   </select>
-  <span class="ui-form-helper">Required for shipping calculations</span>
+  <span class="ui-form-helper">{{ t('required_for_shipping_calculations', 'Required for shipping calculations') }}</span>
 </div>

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

@@ -4,27 +4,27 @@ description: Text input field for user data entry. Heights align to grid rows.
 ---
 
 <!-- @default -->
-<input class="ui-input" type="text" placeholder="Enter text..."></input>
+<input class="ui-input" type="text" placeholder="{{ t('enter_text', 'Enter text...') }}"></input>
 
 <!-- @sizes | column -->
-<input class="ui-input ui-input--sm" type="text" placeholder="Small (1.5 rows)"></input>
-<input class="ui-input" type="text" placeholder="Default (2 rows)"></input>
-<input class="ui-input ui-input--lg" type="text" placeholder="Large (2.5 rows)"></input>
+<input class="ui-input ui-input--sm" type="text" placeholder="{{ t('small_15_rows', 'Small (1.5 rows)') }}"></input>
+<input class="ui-input" type="text" placeholder="{{ t('default_2_rows', 'Default (2 rows)') }}"></input>
+<input class="ui-input ui-input--lg" type="text" placeholder="{{ t('large_25_rows', 'Large (2.5 rows)') }}"></input>
 
 <!-- @variants | column -->
-<input class="ui-input" type="text" placeholder="Outline (default)"></input>
-<input class="ui-input ui-input--filled" type="text" placeholder="Filled"></input>
-<input class="ui-input ui-input--ghost" type="text" placeholder="Ghost"></input>
+<input class="ui-input" type="text" placeholder="{{ t('outline_default', 'Outline (default)') }}"></input>
+<input class="ui-input ui-input--filled" type="text" placeholder="{{ t('filled', 'Filled') }}"></input>
+<input class="ui-input ui-input--ghost" type="text" placeholder="{{ t('ghost', 'Ghost') }}"></input>
 
 <!-- @states | column -->
-<input class="ui-input" type="text" placeholder="Default"></input>
+<input class="ui-input" type="text" placeholder="{{ t('default', 'Default') }}"></input>
 <input class="ui-input ui-input--error" type="text" value="Invalid input"></input>
 <input class="ui-input ui-input--success" type="text" value="Valid input"></input>
-<input class="ui-input" type="text" placeholder="Disabled" disabled></input>
+<input class="ui-input" type="text" placeholder="{{ t('disabled', 'Disabled') }}" disabled></input>
 <input class="ui-input" type="text" value="Read only" readonly></input>
 
 <!-- @full_width -->
-<input class="ui-input ui-input--block" type="text" placeholder="Full width input"></input>
+<input class="ui-input ui-input--block" type="text" placeholder="{{ t('full_width_input', 'Full width input') }}"></input>
 
 <!-- @with_prefix_icon -->
 <div class="ui-input-group ui-input-group--has-prefix">
@@ -34,12 +34,12 @@ description: Text input field for user data entry. Heights align to grid rows.
       <path d="m21 21-4.3-4.3"></path>
     </svg>
   </span>
-  <input class="ui-input ui-input--block" type="search" placeholder="Search..."></input>
+  <input class="ui-input ui-input--block" type="search" placeholder="{{ t('search', 'Search...') }}"></input>
 </div>
 
 <!-- @with_suffix_icon -->
 <div class="ui-input-group ui-input-group--has-suffix">
-  <input class="ui-input ui-input--block" type="email" placeholder="Email address"></input>
+  <input class="ui-input ui-input--block" type="email" placeholder="{{ t('email_address', 'Email address') }}"></input>
   <span class="ui-input-group__addon ui-input-group__addon--end">
     <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
       <rect width="20" height="16" x="2" y="4" rx="2"></rect>
@@ -56,7 +56,7 @@ description: Text input field for user data entry. Heights align to grid rows.
       <circle cx="12" cy="7" r="4"></circle>
     </svg>
   </span>
-  <input class="ui-input ui-input--block" type="text" placeholder="Username"></input>
+  <input class="ui-input ui-input--block" type="text" placeholder="{{ t('username', 'Username') }}"></input>
   <span class="ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive">
     <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
       <path d="M18 6 6 18"></path>

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

@@ -4,23 +4,23 @@ description: Form control labels. Associates text with inputs via htmlFor or wra
 ---
 
 <!-- @default -->
-<label class="ui-label" for="input1">Email address</label>
+<label class="ui-label" for="input1">{{ t('email_address', 'Email address') }}</label>
 
 <!-- @required -->
 <label class="ui-label" for="input2">
-Email address
+{{ t('email_address', 'Email address') }}
   <span class="ui-label__required">*</span>
 </label>
 
 <!-- @optional -->
 <label class="ui-label" for="input3">
-Phone number
-  <span class="ui-label__optional">(optional)</span>
+{{ t('phone_number', 'Phone number') }}
+  <span class="ui-label__optional">{{ t('optional', '(optional)') }}</span>
 </label>
 
 <!-- @sizes | column -->
-<label class="ui-label">Default size</label>
-<label class="ui-label ui-label--lg">Large size</label>
+<label class="ui-label">{{ t('default_size', 'Default size') }}</label>
+<label class="ui-label ui-label--lg">{{ t('large_size', 'Large size') }}</label>
 
 <!-- @disabled -->
-<label class="ui-label" aria-disabled="true">Disabled label</label>
+<label class="ui-label" aria-disabled="true">{{ t('disabled_label', 'Disabled label') }}</label>

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

@@ -5,13 +5,13 @@ description: Numeric input with increment and decrement stepper buttons.
 
 <!-- @default -->
 <div class="ui-number-input">
-  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+  <button class="ui-number-input__decrement" type="button" aria-label="{{ t('decrease', 'Decrease') }}">
     <svg viewBox="0 0 24 24">
       <path d="M5 12h14"></path>
     </svg>
   </button>
   <input class="ui-number-input__field" type="number" value="5"></input>
-  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+  <button class="ui-number-input__increment" type="button" aria-label="{{ t('increase', 'Increase') }}">
     <svg viewBox="0 0 24 24">
       <path d="M12 5v14"></path>
       <path d="M5 12h14"></path>
@@ -21,13 +21,13 @@ description: Numeric input with increment and decrement stepper buttons.
 
 <!-- @sizes | column -->
 <div class="ui-number-input ui-number-input--sm">
-  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+  <button class="ui-number-input__decrement" type="button" aria-label="{{ t('decrease', 'Decrease') }}">
     <svg viewBox="0 0 24 24">
       <path d="M5 12h14"></path>
     </svg>
   </button>
   <input class="ui-number-input__field" type="number" value="3"></input>
-  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+  <button class="ui-number-input__increment" type="button" aria-label="{{ t('increase', 'Increase') }}">
     <svg viewBox="0 0 24 24">
       <path d="M12 5v14"></path>
       <path d="M5 12h14"></path>
@@ -35,13 +35,13 @@ description: Numeric input with increment and decrement stepper buttons.
   </button>
 </div>
 <div class="ui-number-input">
-  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+  <button class="ui-number-input__decrement" type="button" aria-label="{{ t('decrease', 'Decrease') }}">
     <svg viewBox="0 0 24 24">
       <path d="M5 12h14"></path>
     </svg>
   </button>
   <input class="ui-number-input__field" type="number" value="5"></input>
-  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+  <button class="ui-number-input__increment" type="button" aria-label="{{ t('increase', 'Increase') }}">
     <svg viewBox="0 0 24 24">
       <path d="M12 5v14"></path>
       <path d="M5 12h14"></path>
@@ -49,13 +49,13 @@ description: Numeric input with increment and decrement stepper buttons.
   </button>
 </div>
 <div class="ui-number-input ui-number-input--lg">
-  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+  <button class="ui-number-input__decrement" type="button" aria-label="{{ t('decrease', 'Decrease') }}">
     <svg viewBox="0 0 24 24">
       <path d="M5 12h14"></path>
     </svg>
   </button>
   <input class="ui-number-input__field" type="number" value="10"></input>
-  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+  <button class="ui-number-input__increment" type="button" aria-label="{{ t('increase', 'Increase') }}">
     <svg viewBox="0 0 24 24">
       <path d="M12 5v14"></path>
       <path d="M5 12h14"></path>
@@ -66,13 +66,13 @@ description: Numeric input with increment and decrement stepper buttons.
 <!-- @block -->
 <!-- Full-width layout. -->
 <div class="ui-number-input ui-number-input--block">
-  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+  <button class="ui-number-input__decrement" type="button" aria-label="{{ t('decrease', 'Decrease') }}">
     <svg viewBox="0 0 24 24">
       <path d="M5 12h14"></path>
     </svg>
   </button>
   <input class="ui-number-input__field" type="number" value="5"></input>
-  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+  <button class="ui-number-input__increment" type="button" aria-label="{{ t('increase', 'Increase') }}">
     <svg viewBox="0 0 24 24">
       <path d="M12 5v14"></path>
       <path d="M5 12h14"></path>
@@ -82,13 +82,13 @@ description: Numeric input with increment and decrement stepper buttons.
 
 <!-- @disabled -->
 <div class="ui-number-input ui-number-input--disabled">
-  <button class="ui-number-input__decrement" type="button" aria-label="Decrease" disabled>
+  <button class="ui-number-input__decrement" type="button" aria-label="{{ t('decrease', 'Decrease') }}" disabled>
     <svg viewBox="0 0 24 24">
       <path d="M5 12h14"></path>
     </svg>
   </button>
   <input class="ui-number-input__field" type="number" value="0" disabled></input>
-  <button class="ui-number-input__increment" type="button" aria-label="Increase" disabled>
+  <button class="ui-number-input__increment" type="button" aria-label="{{ t('increase', 'Increase') }}" disabled>
     <svg viewBox="0 0 24 24">
       <path d="M12 5v14"></path>
       <path d="M5 12h14"></path>

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

@@ -5,8 +5,8 @@ description: Secure password field with toggle visibility button.
 
 <!-- @default -->
 <div class="ui-password-input">
-  <input class="ui-password-input__field" type="password" placeholder="Enter password"></input>
-  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+  <input class="ui-password-input__field" type="password" placeholder="{{ t('enter_password', 'Enter password') }}"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="{{ t('show_password', 'Show password') }}">
     <svg viewBox="0 0 24 24">
       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
       <circle cx="12" cy="12" r="3"></circle>
@@ -16,8 +16,8 @@ description: Secure password field with toggle visibility button.
 
 <!-- @sizes | column -->
 <div class="ui-password-input ui-password-input--sm">
-  <input class="ui-password-input__field" type="password" placeholder="Small"></input>
-  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+  <input class="ui-password-input__field" type="password" placeholder="{{ t('small', 'Small') }}"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="{{ t('show_password', 'Show password') }}">
     <svg viewBox="0 0 24 24">
       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
       <circle cx="12" cy="12" r="3"></circle>
@@ -25,8 +25,8 @@ description: Secure password field with toggle visibility button.
   </button>
 </div>
 <div class="ui-password-input">
-  <input class="ui-password-input__field" type="password" placeholder="Default"></input>
-  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+  <input class="ui-password-input__field" type="password" placeholder="{{ t('default', 'Default') }}"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="{{ t('show_password', 'Show password') }}">
     <svg viewBox="0 0 24 24">
       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
       <circle cx="12" cy="12" r="3"></circle>
@@ -34,8 +34,8 @@ description: Secure password field with toggle visibility button.
   </button>
 </div>
 <div class="ui-password-input ui-password-input--lg">
-  <input class="ui-password-input__field" type="password" placeholder="Large"></input>
-  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+  <input class="ui-password-input__field" type="password" placeholder="{{ t('large', 'Large') }}"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="{{ t('show_password', 'Show password') }}">
     <svg viewBox="0 0 24 24">
       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
       <circle cx="12" cy="12" r="3"></circle>
@@ -46,8 +46,8 @@ description: Secure password field with toggle visibility button.
 <!-- @block -->
 <!-- Full-width layout. -->
 <div class="ui-password-input ui-password-input--block">
-  <input class="ui-password-input__field" type="password" placeholder="Full width"></input>
-  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+  <input class="ui-password-input__field" type="password" placeholder="{{ t('full_width', 'Full width') }}"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="{{ t('show_password', 'Show password') }}">
     <svg viewBox="0 0 24 24">
       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
       <circle cx="12" cy="12" r="3"></circle>
@@ -58,7 +58,7 @@ description: Secure password field with toggle visibility button.
 <!-- @states | column -->
 <div class="ui-password-input ui-password-input--error">
   <input class="ui-password-input__field" type="password" value="wrongpass"></input>
-  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+  <button class="ui-password-input__toggle" type="button" aria-label="{{ t('show_password', 'Show password') }}">
     <svg viewBox="0 0 24 24">
       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
       <circle cx="12" cy="12" r="3"></circle>
@@ -67,7 +67,7 @@ description: Secure password field with toggle visibility button.
 </div>
 <div class="ui-password-input ui-password-input--success">
   <input class="ui-password-input__field" type="password" value="correctpass"></input>
-  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+  <button class="ui-password-input__toggle" type="button" aria-label="{{ t('show_password', 'Show password') }}">
     <svg viewBox="0 0 24 24">
       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
       <circle cx="12" cy="12" r="3"></circle>
@@ -75,8 +75,8 @@ description: Secure password field with toggle visibility button.
   </button>
 </div>
 <div class="ui-password-input ui-password-input--disabled">
-  <input class="ui-password-input__field" type="password" placeholder="Disabled" disabled></input>
-  <button class="ui-password-input__toggle" type="button" aria-label="Show password" disabled>
+  <input class="ui-password-input__field" type="password" placeholder="{{ t('disabled', 'Disabled') }}" disabled></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="{{ t('show_password', 'Show password') }}" disabled>
     <svg viewBox="0 0 24 24">
       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
       <circle cx="12" cy="12" r="3"></circle>

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

@@ -26,24 +26,24 @@ description: Native radio button with custom styling. Use for mutually exclusive
 <!-- @with_label -->
 <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
   <input class="ui-radio" type="radio" name="labeled"></input>
-  <span>Option one</span>
+  <span>{{ t('option_one', 'Option one') }}</span>
 </label>
 
 <!-- @radio_group -->
 <fieldset style="border: none; padding: 0; margin: 0;">
-  <legend style="font-weight: 600; margin-block-end: var(--ui-space-1);">Choose an option</legend>
+  <legend style="font-weight: 600; margin-block-end: var(--ui-space-1);">{{ t('choose_an_option', 'Choose an option') }}</legend>
   <div class="ui-column" style="--column-gap: var(--ui-space-1);">
     <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
       <input class="ui-radio" type="radio" name="group-demo" checked></input>
-      <span>Option A</span>
+      <span>{{ t('option_a', 'Option A') }}</span>
     </label>
     <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
       <input class="ui-radio" type="radio" name="group-demo"></input>
-      <span>Option B</span>
+      <span>{{ t('option_b', 'Option B') }}</span>
     </label>
     <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
       <input class="ui-radio" type="radio" name="group-demo"></input>
-      <span>Option C</span>
+      <span>{{ t('option_c', 'Option C') }}</span>
     </label>
   </div>
 </fieldset>