@teseor/css 1.15.2 → 1.15.5

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

@@ -51,7 +51,7 @@
   .field--responsive {
     flex-direction: column;
 
-    @container (inline-size >= 30rem) {
+    @container (inline-size >= #{t.$container-threshold-sm}) {
       flex-direction: row;
       flex-wrap: wrap;
       align-items: flex-start;
@@ -59,7 +59,7 @@
   }
 
   .field--responsive > .field__label {
-    @container (inline-size >= 30rem) {
+    @container (inline-size >= #{t.$container-threshold-sm}) {
       flex: 0 0 auto;
 
       min-inline-size: calc(#{t.$unit} * 15);
@@ -68,7 +68,7 @@
   }
 
   .field--responsive > .field__control {
-    @container (inline-size >= 30rem) {
+    @container (inline-size >= #{t.$container-threshold-sm}) {
       flex: 1 1 0;
 
       min-inline-size: calc(#{t.$unit} * 20);

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>

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>