@teseor/css 1.15.2 → 1.15.5

package/src/components/data-display/stat/docs.html

@@ -6,27 +6,27 @@ description: Statistic display with prominent value and descriptive label.
 <!-- @default -->
 <div class="ui-stat">
   <span class="ui-stat__value">2,847</span>
-  <span class="ui-stat__label">Total users</span>
+  <span class="ui-stat__label">{{ t('total_users', 'Total users') }}</span>
 </div>
 
 <!-- @multiple_stats -->
 <div class="ui-row ui-row--lg">
   <div class="ui-stat">
-    <span class="ui-stat__value">12.5k</span>
-    <span class="ui-stat__label">Revenue</span>
+    <span class="ui-stat__value">{{ t('125k', '12.5k') }}</span>
+    <span class="ui-stat__label">{{ t('revenue', 'Revenue') }}</span>
   </div>
   <div class="ui-stat">
     <span class="ui-stat__value">573</span>
-    <span class="ui-stat__label">Orders</span>
+    <span class="ui-stat__label">{{ t('orders', 'Orders') }}</span>
   </div>
   <div class="ui-stat">
     <span class="ui-stat__value">98%</span>
-    <span class="ui-stat__label">Satisfaction</span>
+    <span class="ui-stat__label">{{ t('satisfaction', 'Satisfaction') }}</span>
   </div>
 </div>
 
 <!-- @small -->
 <div class="ui-stat ui-stat--sm">
   <span class="ui-stat__value">42</span>
-  <span class="ui-stat__label">Active now</span>
+  <span class="ui-stat__label">{{ t('active_now', 'Active now') }}</span>
 </div>

package/src/components/data-display/status/docs.html

@@ -7,23 +7,23 @@ description: Visual status indicator with colored dot to show state.
 <div style="display: flex; flex-direction: column; gap: var(--ui-space-2);">
   <span class="ui-status">
     <span class="ui-status__dot"></span>
-Default
+{{ t('default', 'Default') }}
   </span>
   <span class="ui-status ui-status--success">
     <span class="ui-status__dot"></span>
-Online
+{{ t('online', 'Online') }}
   </span>
   <span class="ui-status ui-status--warning">
     <span class="ui-status__dot"></span>
-Away
+{{ t('away', 'Away') }}
   </span>
   <span class="ui-status ui-status--danger">
     <span class="ui-status__dot"></span>
-Busy
+{{ t('busy', 'Busy') }}
   </span>
   <span class="ui-status ui-status--info">
     <span class="ui-status__dot"></span>
-In a meeting
+{{ t('in_a_meeting', 'In a meeting') }}
   </span>
 </div>
 
@@ -31,15 +31,15 @@ In a meeting
 <div style="display: flex; gap: var(--ui-space-4); align-items: center;">
   <span class="ui-status ui-status--success ui-status--sm">
     <span class="ui-status__dot"></span>
-Small
+{{ t('small', 'Small') }}
   </span>
   <span class="ui-status ui-status--success">
     <span class="ui-status__dot"></span>
-Default
+{{ t('default', 'Default') }}
   </span>
   <span class="ui-status ui-status--success ui-status--lg">
     <span class="ui-status__dot"></span>
-Large
+{{ t('large', 'Large') }}
   </span>
 </div>
 
@@ -47,7 +47,7 @@ Large
 <!-- For live or active indicators -->
 <span class="ui-status ui-status--success ui-status--pulse">
   <span class="ui-status__dot"></span>
-Live
+{{ t('live', 'Live') }}
 </span>
 
 <!-- @dot_only -->

package/src/components/data-display/table/docs.html

@@ -7,17 +7,17 @@ description: Styled table with header formatting and optional variants.
 <table class="ui-table">
   <thead>
     <tr>
-      <th>Name</th>
-      <th>Value</th>
+      <th>{{ t('name', 'Name') }}</th>
+      <th>{{ t('value', 'Value') }}</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>Alpha</td>
+      <td>{{ t('alpha', 'Alpha') }}</td>
       <td>100</td>
     </tr>
     <tr>
-      <td>Beta</td>
+      <td>{{ t('beta', 'Beta') }}</td>
       <td>200</td>
     </tr>
   </tbody>
@@ -27,8 +27,8 @@ description: Styled table with header formatting and optional variants.
 <table class="ui-table ui-table--compact">
   <thead>
     <tr>
-      <th>Token</th>
-      <th>Value</th>
+      <th>{{ t('token', 'Token') }}</th>
+      <th>{{ t('value', 'Value') }}</th>
     </tr>
   </thead>
   <tbody>
@@ -49,22 +49,22 @@ description: Styled table with header formatting and optional variants.
 <table class="ui-table ui-table--striped">
   <thead>
     <tr>
-      <th>Item</th>
-      <th>Status</th>
+      <th>{{ t('item', 'Item') }}</th>
+      <th>{{ t('status', 'Status') }}</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>Task 1</td>
-      <td>Done</td>
+      <td>{{ t('task_1', 'Task 1') }}</td>
+      <td>{{ t('done', 'Done') }}</td>
     </tr>
     <tr>
-      <td>Task 2</td>
-      <td>Pending</td>
+      <td>{{ t('task_2', 'Task 2') }}</td>
+      <td>{{ t('pending', 'Pending') }}</td>
     </tr>
     <tr>
-      <td>Task 3</td>
-      <td>Done</td>
+      <td>{{ t('task_3', 'Task 3') }}</td>
+      <td>{{ t('done', 'Done') }}</td>
     </tr>
   </tbody>
 </table>

package/src/components/data-display/tag/docs.html

@@ -4,26 +4,26 @@ description: Keyword labels for categorization. Use for filtering, attributes, o
 ---
 
 <!-- @default | row -->
-<span class="ui-tag">Tag</span>
-<span class="ui-tag">Category</span>
-<span class="ui-tag">Label</span>
+<span class="ui-tag">{{ t('tag', 'Tag') }}</span>
+<span class="ui-tag">{{ t('category', 'Category') }}</span>
+<span class="ui-tag">{{ t('label', 'Label') }}</span>
 
 <!-- @sizes | row -->
-<span class="ui-tag ui-tag--sm">Small</span>
-<span class="ui-tag">Default</span>
-<span class="ui-tag ui-tag--lg">Large</span>
+<span class="ui-tag ui-tag--sm">{{ t('small', 'Small') }}</span>
+<span class="ui-tag">{{ t('default', 'Default') }}</span>
+<span class="ui-tag ui-tag--lg">{{ t('large', 'Large') }}</span>
 
 <!-- @variants | row -->
-<span class="ui-tag">Default</span>
-<span class="ui-tag ui-tag--primary">Primary</span>
-<span class="ui-tag ui-tag--success">Success</span>
-<span class="ui-tag ui-tag--warning">Warning</span>
-<span class="ui-tag ui-tag--danger">Danger</span>
+<span class="ui-tag">{{ t('default', 'Default') }}</span>
+<span class="ui-tag ui-tag--primary">{{ t('primary', 'Primary') }}</span>
+<span class="ui-tag ui-tag--success">{{ t('success', 'Success') }}</span>
+<span class="ui-tag ui-tag--warning">{{ t('warning', 'Warning') }}</span>
+<span class="ui-tag ui-tag--danger">{{ t('danger', 'Danger') }}</span>
 
 <!-- @with_remove_button -->
 <span class="ui-tag">
-  <span>Removable</span>
-  <button class="ui-tag__remove" aria-label="Remove">
+  <span>{{ t('removable', 'Removable') }}</span>
+  <button class="ui-tag__remove" aria-label="{{ t('remove', 'Remove') }}">
     <svg class="ui-icon ui-icon--xs" viewBox="0 0 24 24">
       <path d="M18 6 6 18M6 6l12 12"></path>
     </svg>
@@ -32,8 +32,8 @@ description: Keyword labels for categorization. Use for filtering, attributes, o
 
 <!-- @tag_group -->
 <div class="ui-tag-group">
-  <span class="ui-tag">JavaScript</span>
-  <span class="ui-tag">TypeScript</span>
-  <span class="ui-tag">React</span>
-  <span class="ui-tag">CSS</span>
+  <span class="ui-tag">{{ t('javascript', 'JavaScript') }}</span>
+  <span class="ui-tag">{{ t('typescript', 'TypeScript') }}</span>
+  <span class="ui-tag">{{ t('react', 'React') }}</span>
+  <span class="ui-tag">{{ t('css', 'CSS') }}</span>
 </div>

package/src/components/disclosure/accordion/docs.html

@@ -7,29 +7,29 @@ description: Container for grouped expandable sections. Use with disclosure comp
 <div class="ui-accordion">
   <details class="ui-disclosure">
     <summary class="ui-disclosure__trigger">
-Section 1
+{{ t('section_1', 'Section 1') }}
       <span class="ui-disclosure__icon">▾</span>
     </summary>
     <div class="ui-disclosure__content">
-      <p>Content for section 1</p>
+      <p>{{ t('content_for_section_1', 'Content for section 1') }}</p>
     </div>
   </details>
   <details class="ui-disclosure">
     <summary class="ui-disclosure__trigger">
-Section 2
+{{ t('section_2', 'Section 2') }}
       <span class="ui-disclosure__icon">▾</span>
     </summary>
     <div class="ui-disclosure__content">
-      <p>Content for section 2</p>
+      <p>{{ t('content_for_section_2', 'Content for section 2') }}</p>
     </div>
   </details>
   <details class="ui-disclosure">
     <summary class="ui-disclosure__trigger">
-Section 3
+{{ t('section_3', 'Section 3') }}
       <span class="ui-disclosure__icon">▾</span>
     </summary>
     <div class="ui-disclosure__content">
-      <p>Content for section 3</p>
+      <p>{{ t('content_for_section_3', 'Content for section 3') }}</p>
     </div>
   </details>
 </div>
@@ -39,20 +39,20 @@ Section 3
 <div class="ui-accordion ui-accordion--separated">
   <details class="ui-disclosure">
     <summary class="ui-disclosure__trigger">
-Section 1
+{{ t('section_1', 'Section 1') }}
       <span class="ui-disclosure__icon">▾</span>
     </summary>
     <div class="ui-disclosure__content">
-      <p>Content for section 1</p>
+      <p>{{ t('content_for_section_1', 'Content for section 1') }}</p>
     </div>
   </details>
   <details class="ui-disclosure">
     <summary class="ui-disclosure__trigger">
-Section 2
+{{ t('section_2', 'Section 2') }}
       <span class="ui-disclosure__icon">▾</span>
     </summary>
     <div class="ui-disclosure__content">
-      <p>Content for section 2</p>
+      <p>{{ t('content_for_section_2', 'Content for section 2') }}</p>
     </div>
   </details>
 </div>
@@ -61,20 +61,20 @@ Section 2
 <div class="ui-accordion">
   <details class="ui-disclosure" open>
     <summary class="ui-disclosure__trigger">
-Open Section
+{{ t('open_section', 'Open Section') }}
       <span class="ui-disclosure__icon">▾</span>
     </summary>
     <div class="ui-disclosure__content">
-      <p>This section starts open</p>
+      <p>{{ t('this_section_starts_open', 'This section starts open') }}</p>
     </div>
   </details>
   <details class="ui-disclosure">
     <summary class="ui-disclosure__trigger">
-Closed Section
+{{ t('closed_section', 'Closed Section') }}
       <span class="ui-disclosure__icon">▾</span>
     </summary>
     <div class="ui-disclosure__content">
-      <p>Click to open</p>
+      <p>{{ t('click_to_open', 'Click to open') }}</p>
     </div>
   </details>
 </div>

package/src/components/disclosure/disclosure/docs.html

@@ -6,43 +6,43 @@ description: Expandable/collapsible content section. Uses native details/summary
 <!-- @default -->
 <details class="ui-disclosure">
   <summary class="ui-disclosure__trigger">
-Click to expand
+{{ t('click_to_expand', 'Click to expand') }}
     <span class="ui-disclosure__icon">▾</span>
   </summary>
   <div class="ui-disclosure__content">
-    <p>Hidden content that expands when clicked.</p>
+    <p>{{ t('hidden_content_that_expands_when_clicked', 'Hidden content that expands when clicked.') }}</p>
   </div>
 </details>
 
 <!-- @open_by_default -->
 <details class="ui-disclosure" open>
   <summary class="ui-disclosure__trigger">
-Already expanded
+{{ t('already_expanded', 'Already expanded') }}
     <span class="ui-disclosure__icon">▾</span>
   </summary>
   <div class="ui-disclosure__content">
-    <p>This content is visible by default.</p>
+    <p>{{ t('this_content_is_visible_by_default', 'This content is visible by default.') }}</p>
   </div>
 </details>
 
 <!-- @borderless -->
 <details class="ui-disclosure ui-disclosure--borderless">
   <summary class="ui-disclosure__trigger">
-Borderless disclosure
+{{ t('borderless_disclosure', 'Borderless disclosure') }}
     <span class="ui-disclosure__icon">▾</span>
   </summary>
   <div class="ui-disclosure__content">
-    <p>No border around the disclosure.</p>
+    <p>{{ t('no_border_around_the_disclosure', 'No border around the disclosure.') }}</p>
   </div>
 </details>
 
 <!-- @animated -->
 <details class="ui-disclosure ui-disclosure--animate">
   <summary class="ui-disclosure__trigger">
-Animated expansion
+{{ t('animated_expansion', 'Animated expansion') }}
     <span class="ui-disclosure__icon">▾</span>
   </summary>
   <div class="ui-disclosure__content">
-    <p>Content animates in when opened.</p>
+    <p>{{ t('content_animates_in_when_opened', 'Content animates in when opened.') }}</p>
   </div>
 </details>

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

@@ -100,11 +100,11 @@
   .progress--striped .progress__bar {
     background-image: linear-gradient(
       45deg,
-      rgb(255 255 255 / 0.15) 25%,
+      #{t.$stripe-highlight} 25%,
       transparent 25%,
       transparent 50%,
-      rgb(255 255 255 / 0.15) 50%,
-      rgb(255 255 255 / 0.15) 75%,
+      #{t.$stripe-highlight} 50%,
+      #{t.$stripe-highlight} 75%,
       transparent 75%,
       transparent
     );

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>