@teseor/css 1.15.2 → 1.15.3

package/src/components/feedback/alert/docs.html

@@ -6,8 +6,8 @@ description: Informational banner for important messages. Use variants for diffe
 <!-- @default -->
 <div class="ui-alert">
   <div class="ui-alert__content">
-    <p class="ui-alert__title">Note</p>
-    <p class="ui-alert__description">This is a default alert message.</p>
+    <p class="ui-alert__title">{{ t('note', 'Note') }}</p>
+    <p class="ui-alert__description">{{ t('this_is_a_default_alert_message', 'This is a default alert message.') }}</p>
   </div>
 </div>
 
@@ -15,26 +15,26 @@ description: Informational banner for important messages. Use variants for diffe
 <div class="ui-column" style="--column-gap: var(--ui-space-2);">
   <div class="ui-alert ui-alert--info">
     <div class="ui-alert__content">
-      <p class="ui-alert__title">Info</p>
-      <p class="ui-alert__description">Informational message for the user.</p>
+      <p class="ui-alert__title">{{ t('info', 'Info') }}</p>
+      <p class="ui-alert__description">{{ t('informational_message_for_the_user', 'Informational message for the user.') }}</p>
     </div>
   </div>
   <div class="ui-alert ui-alert--success">
     <div class="ui-alert__content">
-      <p class="ui-alert__title">Success</p>
-      <p class="ui-alert__description">Your action was completed successfully.</p>
+      <p class="ui-alert__title">{{ t('success', 'Success') }}</p>
+      <p class="ui-alert__description">{{ t('your_action_was_completed_successfully', 'Your action was completed successfully.') }}</p>
     </div>
   </div>
   <div class="ui-alert ui-alert--warning">
     <div class="ui-alert__content">
-      <p class="ui-alert__title">Warning</p>
-      <p class="ui-alert__description">Please review before continuing.</p>
+      <p class="ui-alert__title">{{ t('warning', 'Warning') }}</p>
+      <p class="ui-alert__description">{{ t('please_review_before_continuing', 'Please review before continuing.') }}</p>
     </div>
   </div>
   <div class="ui-alert ui-alert--danger">
     <div class="ui-alert__content">
-      <p class="ui-alert__title">Error</p>
-      <p class="ui-alert__description">Something went wrong. Please try again.</p>
+      <p class="ui-alert__title">{{ t('error', 'Error') }}</p>
+      <p class="ui-alert__description">{{ t('something_went_wrong_please_try_again', 'Something went wrong. Please try again.') }}</p>
     </div>
   </div>
 </div>
@@ -47,14 +47,14 @@ description: Informational banner for important messages. Use variants for diffe
     <path d="M12 8h.01"></path>
   </svg>
   <div class="ui-alert__content">
-    <p class="ui-alert__description">Your session will expire in 5 minutes.</p>
+    <p class="ui-alert__description">{{ t('your_session_will_expire_in_5_minutes', 'Your session will expire in 5 minutes.') }}</p>
   </div>
 </div>
 
 <!-- @description_only -->
 <div class="ui-alert ui-alert--success">
   <div class="ui-alert__content">
-    <p class="ui-alert__description">File uploaded successfully.</p>
+    <p class="ui-alert__description">{{ t('file_uploaded_successfully', 'File uploaded successfully.') }}</p>
   </div>
 </div>
 
@@ -62,17 +62,17 @@ description: Informational banner for important messages. Use variants for diffe
 <div class="ui-column" style="--column-gap: var(--ui-space-2);">
   <div class="ui-alert ui-alert--info ui-alert--sm">
     <div class="ui-alert__content">
-      <p class="ui-alert__description">Small alert with compact padding.</p>
+      <p class="ui-alert__description">{{ t('small_alert_with_compact_padding', 'Small alert with compact padding.') }}</p>
     </div>
   </div>
   <div class="ui-alert ui-alert--info">
     <div class="ui-alert__content">
-      <p class="ui-alert__description">Default alert size.</p>
+      <p class="ui-alert__description">{{ t('default_alert_size', 'Default alert size.') }}</p>
     </div>
   </div>
   <div class="ui-alert ui-alert--info ui-alert--lg">
     <div class="ui-alert__content">
-      <p class="ui-alert__description">Large alert with extra padding.</p>
+      <p class="ui-alert__description">{{ t('large_alert_with_extra_padding', 'Large alert with extra padding.') }}</p>
     </div>
   </div>
 </div>
@@ -80,8 +80,8 @@ description: Informational banner for important messages. Use variants for diffe
 <!-- @dismissible -->
 <div class="ui-alert ui-alert--info ui-alert--dismissible">
   <div class="ui-alert__content">
-    <p class="ui-alert__title">Dismissible</p>
-    <p class="ui-alert__description">This alert can be closed by the user.</p>
+    <p class="ui-alert__title">{{ t('dismissible', 'Dismissible') }}</p>
+    <p class="ui-alert__description">{{ t('this_alert_can_be_closed_by_the_user', 'This alert can be closed by the user.') }}</p>
   </div>
-  <button class="ui-alert__close ui-close-button" aria-label="Close"></button>
+  <button class="ui-alert__close ui-close-button" aria-label="{{ t('close', 'Close') }}"></button>
 </div>

package/src/components/feedback/progress/docs.html

@@ -4,7 +4,7 @@ description: Progress bar indicator showing completion status. Use aria-valuenow
 ---
 
 <!-- @default -->
-<div class="ui-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Loading">
+<div class="ui-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="{{ t('loading', 'Loading') }}">
   <div class="ui-progress__bar" style="width: 60%;"></div>
 </div>
 
@@ -46,7 +46,7 @@ description: Progress bar indicator showing completion status. Use aria-valuenow
 
 <!-- @indeterminate -->
 <!-- For unknown progress duration -->
-<div class="ui-progress ui-progress--indeterminate" role="progressbar" aria-label="Loading">
+<div class="ui-progress ui-progress--indeterminate" role="progressbar" aria-label="{{ t('loading', 'Loading') }}">
   <div class="ui-progress__bar"></div>
 </div>
 

package/src/components/feedback/toast/docs.html

@@ -4,48 +4,48 @@ title: Toast
 
 <!-- @default -->
 <div class="ui-toast">
-  <span class="ui-toast__icon">i</span>
+  <span class="ui-toast__icon">{{ t('i', 'i') }}</span>
   <div class="ui-toast__content">
-    <p class="ui-toast__title">Notification</p>
-    <p class="ui-toast__description">Your changes have been saved.</p>
+    <p class="ui-toast__title">{{ t('notification', 'Notification') }}</p>
+    <p class="ui-toast__description">{{ t('your_changes_have_been_saved', 'Your changes have been saved.') }}</p>
   </div>
-  <button class="ui-toast__close">X</button>
+  <button class="ui-toast__close">{{ t('x', 'X') }}</button>
 </div>
 
 <!-- @variants | column -->
 <div class="ui-toast ui-toast--success">
   <div class="ui-toast__content">
-    <p class="ui-toast__title">Success</p>
-    <p class="ui-toast__description">Operation completed successfully.</p>
+    <p class="ui-toast__title">{{ t('success', 'Success') }}</p>
+    <p class="ui-toast__description">{{ t('operation_completed_successfully', 'Operation completed successfully.') }}</p>
   </div>
 </div>
 <div class="ui-toast ui-toast--warning">
   <div class="ui-toast__content">
-    <p class="ui-toast__title">Warning</p>
-    <p class="ui-toast__description">Please review before continuing.</p>
+    <p class="ui-toast__title">{{ t('warning', 'Warning') }}</p>
+    <p class="ui-toast__description">{{ t('please_review_before_continuing', 'Please review before continuing.') }}</p>
   </div>
 </div>
 <div class="ui-toast ui-toast--danger">
   <div class="ui-toast__content">
-    <p class="ui-toast__title">Error</p>
-    <p class="ui-toast__description">Something went wrong.</p>
+    <p class="ui-toast__title">{{ t('error', 'Error') }}</p>
+    <p class="ui-toast__description">{{ t('something_went_wrong', 'Something went wrong.') }}</p>
   </div>
 </div>
 <div class="ui-toast ui-toast--info">
   <div class="ui-toast__content">
-    <p class="ui-toast__title">Info</p>
-    <p class="ui-toast__description">New updates available.</p>
+    <p class="ui-toast__title">{{ t('info', 'Info') }}</p>
+    <p class="ui-toast__description">{{ t('new_updates_available', 'New updates available.') }}</p>
   </div>
 </div>
 
 <!-- @with_action -->
 <div class="ui-toast">
   <div class="ui-toast__content">
-    <p class="ui-toast__title">File deleted</p>
-    <p class="ui-toast__description">document.pdf was moved to trash.</p>
+    <p class="ui-toast__title">{{ t('file_deleted', 'File deleted') }}</p>
+    <p class="ui-toast__description">{{ t('documentpdf_was_moved_to_trash', 'document.pdf was moved to trash.') }}</p>
   </div>
-  <button class="ui-toast__action ui-button ui-button--sm ui-button--secondary">Undo</button>
-  <button class="ui-toast__close">X</button>
+  <button class="ui-toast__action ui-button ui-button--sm ui-button--secondary">{{ t('undo', 'Undo') }}</button>
+  <button class="ui-toast__close">{{ t('x', 'X') }}</button>
 </div>
 
 <!-- @viewport_positions | column -->
@@ -54,7 +54,7 @@ title: Toast
   <div class="ui-toast-viewport ui-toast-viewport--top-end" style="position:absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
-        <p class="ui-toast__title">Top End</p>
+        <p class="ui-toast__title">{{ t('top_end', 'Top End') }}</p>
       </div>
     </div>
   </div>
@@ -63,7 +63,7 @@ title: Toast
   <div class="ui-toast-viewport ui-toast-viewport--bottom-end" style="position:absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
-        <p class="ui-toast__title">Bottom End</p>
+        <p class="ui-toast__title">{{ t('bottom_end', 'Bottom End') }}</p>
       </div>
     </div>
   </div>
@@ -72,7 +72,7 @@ title: Toast
   <div class="ui-toast-viewport ui-toast-viewport--top-start" style="position:absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
-        <p class="ui-toast__title">Top Start</p>
+        <p class="ui-toast__title">{{ t('top_start', 'Top Start') }}</p>
       </div>
     </div>
   </div>
@@ -81,7 +81,7 @@ title: Toast
   <div class="ui-toast-viewport ui-toast-viewport--top-center" style="position:absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
-        <p class="ui-toast__title">Top Center</p>
+        <p class="ui-toast__title">{{ t('top_center', 'Top Center') }}</p>
       </div>
     </div>
   </div>
@@ -90,7 +90,7 @@ title: Toast
   <div class="ui-toast-viewport ui-toast-viewport--bottom-start" style="position:absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
-        <p class="ui-toast__title">Bottom Start</p>
+        <p class="ui-toast__title">{{ t('bottom_start', 'Bottom Start') }}</p>
       </div>
     </div>
   </div>
@@ -99,7 +99,7 @@ title: Toast
   <div class="ui-toast-viewport ui-toast-viewport--bottom-center" style="position:absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
-        <p class="ui-toast__title">Bottom Center</p>
+        <p class="ui-toast__title">{{ t('bottom_center', 'Bottom Center') }}</p>
       </div>
     </div>
   </div>

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

@@ -26,5 +26,5 @@ description: Native checkbox input with custom styling. Supports checked, indete
 <!-- @with_label -->
 <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
   <input class="ui-checkbox" type="checkbox"></input>
-  <span>Accept terms and conditions</span>
+  <span>{{ t('accept_terms_and_conditions', 'Accept terms and conditions') }}</span>
 </label>

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

@@ -6,96 +6,96 @@ mergeInto: checkbox
 
 <!-- @default -->
 <fieldset class="ui-checkbox-group">
-  <legend class="ui-checkbox-group__legend">Notifications</legend>
+  <legend class="ui-checkbox-group__legend">{{ t('notifications', 'Notifications') }}</legend>
   <div class="ui-checkbox-group__items">
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox" checked></input>
-      <span>Email</span>
+      <span>{{ t('email', 'Email') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox"></input>
-      <span>SMS</span>
+      <span>{{ t('sms', 'SMS') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox"></input>
-      <span>Push</span>
+      <span>{{ t('push', 'Push') }}</span>
     </label>
   </div>
 </fieldset>
 
 <!-- @horizontal -->
 <fieldset class="ui-checkbox-group ui-checkbox-group--horizontal">
-  <legend class="ui-checkbox-group__legend">Interests</legend>
+  <legend class="ui-checkbox-group__legend">{{ t('interests', 'Interests') }}</legend>
   <div class="ui-checkbox-group__items">
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox" checked></input>
-      <span>Design</span>
+      <span>{{ t('design', 'Design') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox"></input>
-      <span>Engineering</span>
+      <span>{{ t('engineering', 'Engineering') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox" checked></input>
-      <span>Product</span>
+      <span>{{ t('product', 'Product') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox"></input>
-      <span>Marketing</span>
+      <span>{{ t('marketing', 'Marketing') }}</span>
     </label>
   </div>
 </fieldset>
 
 <!-- @compact -->
 <fieldset class="ui-checkbox-group ui-checkbox-group--compact">
-  <legend class="ui-checkbox-group__legend">Features</legend>
+  <legend class="ui-checkbox-group__legend">{{ t('features', 'Features') }}</legend>
   <div class="ui-checkbox-group__items">
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox" checked></input>
-      <span>Dark mode</span>
+      <span>{{ t('dark_mode', 'Dark mode') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox" checked></input>
-      <span>Notifications</span>
+      <span>{{ t('notifications', 'Notifications') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox"></input>
-      <span>Analytics</span>
+      <span>{{ t('analytics', 'Analytics') }}</span>
     </label>
   </div>
 </fieldset>
 
 <!-- @error_state -->
 <fieldset class="ui-checkbox-group ui-checkbox-group--error">
-  <legend class="ui-checkbox-group__legend">Terms</legend>
+  <legend class="ui-checkbox-group__legend">{{ t('terms', 'Terms') }}</legend>
   <div class="ui-checkbox-group__items">
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox ui-checkbox--error" type="checkbox"></input>
-      <span>I accept the terms of service</span>
+      <span>{{ t('i_accept_the_terms_of_service', 'I accept the terms of service') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox ui-checkbox--error" type="checkbox"></input>
-      <span>I accept the privacy policy</span>
+      <span>{{ t('i_accept_the_privacy_policy', 'I accept the privacy policy') }}</span>
     </label>
   </div>
-  <span class="ui-form-error">You must accept all terms to continue</span>
+  <span class="ui-form-error">{{ t('you_must_accept_all_terms_to_continue', 'You must accept all terms to continue') }}</span>
 </fieldset>
 
 <!-- @disabled -->
 <fieldset class="ui-checkbox-group" disabled>
-  <legend class="ui-checkbox-group__legend">Permissions (locked)</legend>
+  <legend class="ui-checkbox-group__legend">{{ t('permissions_locked', 'Permissions (locked)') }}</legend>
   <div class="ui-checkbox-group__items">
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox" checked></input>
-      <span>Read</span>
+      <span>{{ t('read', 'Read') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox" checked></input>
-      <span>Write</span>
+      <span>{{ t('write', 'Write') }}</span>
     </label>
     <label class="ui-checkbox-group__item">
       <input class="ui-checkbox" type="checkbox"></input>
-      <span>Admin</span>
+      <span>{{ t('admin', 'Admin') }}</span>
     </label>
   </div>
 </fieldset>

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

@@ -5,37 +5,37 @@ description: Form field wrapper that combines label, control, helper text, and e
 
 <!-- @default -->
 <div class="ui-field">
-  <label class="ui-label" for="email">Email</label>
+  <label class="ui-label" for="email">{{ t('email', 'Email') }}</label>
   <div class="ui-field__control">
-    <input class="ui-input" type="email" id="email" placeholder="Enter email"></input>
+    <input class="ui-input" type="email" id="email" placeholder="{{ t('enter_email', 'Enter email') }}"></input>
   </div>
 </div>
 
 <!-- @with_helper_text -->
 <div class="ui-field">
-  <label class="ui-label" for="password">Password</label>
+  <label class="ui-label" for="password">{{ t('password', 'Password') }}</label>
   <div class="ui-field__control">
     <input class="ui-input" type="password" id="password"></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>
 
 <!-- @with_error -->
 <div class="ui-field">
-  <label class="ui-label" for="username">Username</label>
+  <label class="ui-label" for="username">{{ t('username', 'Username') }}</label>
   <div class="ui-field__control">
     <input class="ui-input ui-input--error" type="text" id="username" value="ab"></input>
-    <span class="ui-form-error">Username must be at least 3 characters</span>
+    <span class="ui-form-error">{{ t('username_must_be_at_least_3_characters', 'Username must be at least 3 characters') }}</span>
   </div>
 </div>
 
 <!-- @horizontal_layout -->
 <!-- Label beside control for wider forms -->
 <div class="ui-field ui-field--horizontal">
-  <label class="ui-label ui-field__label" for="name">Full Name</label>
+  <label class="ui-label ui-field__label" for="name">{{ t('full_name', 'Full Name') }}</label>
   <div class="ui-field__control">
     <input class="ui-input" type="text" id="name"></input>
-    <span class="ui-form-helper">As it appears on your ID</span>
+    <span class="ui-form-helper">{{ t('as_it_appears_on_your_id', 'As it appears on your ID') }}</span>
   </div>
 </div>
 
@@ -43,17 +43,17 @@ description: Form field wrapper that combines label, control, helper text, and e
 <!-- Auto-switches to horizontal layout when container is wide enough (>= 30rem). Requires a parent with container-type: inline-size (use ui-container-inline utility). -->
 <div class="ui-container-inline">
   <div class="ui-field ui-field--responsive">
-    <label class="ui-label ui-field__label" for="resp-name">Full Name</label>
+    <label class="ui-label ui-field__label" for="resp-name">{{ t('full_name', 'Full Name') }}</label>
     <div class="ui-field__control">
       <input class="ui-input" type="text" id="resp-name"></input>
-      <span class="ui-form-helper">Stacks vertically in narrow containers, horizontal at >= 30rem</span>
+      <span class="ui-form-helper">{{ t('stacks_vertically_in_narrow_containers', 'Stacks vertically in narrow containers, horizontal at >= 30rem') }}</span>
     </div>
   </div>
 </div>
 
 <!-- @required_field -->
 <div class="ui-field">
-  <label class="ui-label ui-label--required" for="req">Required Field</label>
+  <label class="ui-label ui-label--required" for="req">{{ t('required_field', 'Required Field') }}</label>
   <div class="ui-field__control">
     <input class="ui-input" type="text" id="req" required></input>
   </div>

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

@@ -5,17 +5,17 @@ description: Groups related form fields with an optional legend and border.
 
 <!-- @default -->
 <fieldset class="ui-fieldset">
-  <legend class="ui-fieldset__legend">Personal Information</legend>
+  <legend class="ui-fieldset__legend">{{ t('personal_information', 'Personal Information') }}</legend>
   <div class="ui-field">
-    <label class="ui-label" for="fname">First Name</label>
+    <label class="ui-label" for="fname">{{ t('first_name', 'First Name') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="text" id="fname" placeholder="Jane"></input>
+      <input class="ui-input" type="text" id="fname" placeholder="{{ t('jane', 'Jane') }}"></input>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label" for="lname">Last Name</label>
+    <label class="ui-label" for="lname">{{ t('last_name', 'Last Name') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="text" id="lname" placeholder="Doe"></input>
+      <input class="ui-input" type="text" id="lname" placeholder="{{ t('doe', 'Doe') }}"></input>
     </div>
   </div>
 </fieldset>
@@ -23,17 +23,17 @@ description: Groups related form fields with an optional legend and border.
 <!-- @bordered -->
 <!-- Visible border wrapping the field group -->
 <fieldset class="ui-fieldset ui-fieldset--bordered">
-  <legend class="ui-fieldset__legend">Shipping Address</legend>
+  <legend class="ui-fieldset__legend">{{ t('shipping_address', 'Shipping Address') }}</legend>
   <div class="ui-field">
-    <label class="ui-label" for="street">Street</label>
+    <label class="ui-label" for="street">{{ t('street', 'Street') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="text" id="street" placeholder="123 Example St"></input>
+      <input class="ui-input" type="text" id="street" placeholder="{{ t('123_example_st', '123 Example St') }}"></input>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label" for="city">City</label>
+    <label class="ui-label" for="city">{{ t('city', 'City') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="text" id="city" placeholder="Springfield"></input>
+      <input class="ui-input" type="text" id="city" placeholder="{{ t('springfield', 'Springfield') }}"></input>
     </div>
   </div>
 </fieldset>
@@ -41,22 +41,22 @@ description: Groups related form fields with an optional legend and border.
 <!-- @compact -->
 <!-- Reduced spacing for dense forms -->
 <fieldset class="ui-fieldset ui-fieldset--compact">
-  <legend class="ui-fieldset__legend">Preferences</legend>
+  <legend class="ui-fieldset__legend">{{ t('preferences', 'Preferences') }}</legend>
   <div class="ui-field">
-    <label class="ui-label" for="lang">Language</label>
+    <label class="ui-label" for="lang">{{ t('language', 'Language') }}</label>
     <div class="ui-field__control">
       <select class="ui-select" id="lang">
-        <option>English</option>
-        <option>Spanish</option>
+        <option>{{ t('english', 'English') }}</option>
+        <option>{{ t('spanish', 'Spanish') }}</option>
       </select>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label" for="tz">Timezone</label>
+    <label class="ui-label" for="tz">{{ t('timezone', 'Timezone') }}</label>
     <div class="ui-field__control">
       <select class="ui-select" id="tz">
-        <option>UTC-5 Eastern</option>
-        <option>UTC-8 Pacific</option>
+        <option>{{ t('utc_5_eastern', 'UTC-5 Eastern') }}</option>
+        <option>{{ t('utc_8_pacific', 'UTC-8 Pacific') }}</option>
       </select>
     </div>
   </div>
@@ -65,17 +65,17 @@ description: Groups related form fields with an optional legend and border.
 <!-- @bordered_compact -->
 <!-- Bordered with reduced spacing -->
 <fieldset class="ui-fieldset ui-fieldset--bordered ui-fieldset--compact">
-  <legend class="ui-fieldset__legend">Payment</legend>
+  <legend class="ui-fieldset__legend">{{ t('payment', 'Payment') }}</legend>
   <div class="ui-field">
-    <label class="ui-label" for="card">Card Number</label>
+    <label class="ui-label" for="card">{{ t('card_number', 'Card Number') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="text" id="card" placeholder="4242 4242 4242 4242"></input>
+      <input class="ui-input" type="text" id="card" placeholder="{{ t('4242_4242_4242_4242', '4242 4242 4242 4242') }}"></input>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label" for="exp">Expiry</label>
+    <label class="ui-label" for="exp">{{ t('expiry', 'Expiry') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="text" id="exp" placeholder="MM/YY"></input>
+      <input class="ui-input" type="text" id="exp" placeholder="{{ t('mmyy', 'MM/YY') }}"></input>
     </div>
   </div>
 </fieldset>
@@ -83,15 +83,15 @@ description: Groups related form fields with an optional legend and border.
 <!-- @disabled -->
 <!-- Native disabled attribute disables all child controls -->
 <fieldset class="ui-fieldset ui-fieldset--bordered" disabled>
-  <legend class="ui-fieldset__legend">Account (locked)</legend>
+  <legend class="ui-fieldset__legend">{{ t('account_locked', 'Account (locked)') }}</legend>
   <div class="ui-field">
-    <label class="ui-label" for="uname">Username</label>
+    <label class="ui-label" for="uname">{{ t('username', 'Username') }}</label>
     <div class="ui-field__control">
       <input class="ui-input" type="text" id="uname" value="janedoe"></input>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label" for="role">Role</label>
+    <label class="ui-label" for="role">{{ t('role', 'Role') }}</label>
     <div class="ui-field__control">
       <input class="ui-input" type="text" id="role" value="Editor"></input>
     </div>
@@ -102,17 +102,17 @@ description: Groups related form fields with an optional legend and border.
 <!-- Fieldset as a spacing container without visible legend -->
 <fieldset class="ui-fieldset">
   <div class="ui-field">
-    <label class="ui-label" for="search">Search</label>
+    <label class="ui-label" for="search">{{ t('search', 'Search') }}</label>
     <div class="ui-field__control">
-      <input class="ui-input" type="search" id="search" placeholder="Search..."></input>
+      <input class="ui-input" type="search" id="search" placeholder="{{ t('search', 'Search...') }}"></input>
     </div>
   </div>
   <div class="ui-field">
-    <label class="ui-label" for="cat">Category</label>
+    <label class="ui-label" for="cat">{{ t('category', 'Category') }}</label>
     <div class="ui-field__control">
       <select class="ui-select" id="cat">
-        <option>All</option>
-        <option>Articles</option>
+        <option>{{ t('all', 'All') }}</option>
+        <option>{{ t('articles', 'Articles') }}</option>
       </select>
     </div>
   </div>