@teseor/css 1.15.2 → 1.15.5

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

@@ -7,7 +7,7 @@
   .number-input {
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_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});
     --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
     --_color-focus: var(--ui-color-focus, #{t.$color-focus});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
@@ -143,7 +143,7 @@
 
     &:focus-visible {
       outline: 2px solid var(--_color-focus);
-      outline-offset: -2px;
+      outline-offset: #{t.$focus-ring-offset};
     }
 
     &:disabled {

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

@@ -7,7 +7,7 @@
   .password-input {
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_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});
     --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
     --_color-focus: var(--ui-color-focus, #{t.$color-focus});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
@@ -152,7 +152,7 @@
 
     &:focus-visible {
       outline: 2px solid var(--_color-focus);
-      outline-offset: -2px;
+      outline-offset: #{t.$focus-ring-offset};
     }
 
     svg {

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>

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

@@ -7,7 +7,7 @@
   .search-input {
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_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});
     --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
     --_color-focus: var(--ui-color-focus, #{t.$color-focus});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
@@ -186,7 +186,7 @@
 
     &:focus-visible {
       outline: 2px solid var(--_color-focus);
-      outline-offset: -2px;
+      outline-offset: #{t.$focus-ring-offset};
     }
 
     svg {

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>