@teseor/css 1.15.1 → 1.15.3

package/src/layout/sidebar-nav/docs.html

@@ -5,42 +5,42 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @basic -->
 <!-- Simple navigation with grouped items. -->
-<nav class="ui-sidebar-nav" aria-label="Main navigation" style="block-size: 400px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('main_navigation', 'Main navigation') }}" style="block-size: 400px;">
   <div class="ui-sidebar-nav__header">
-    <strong>App Name</strong>
+    <strong>{{ t('app_name', 'App Name') }}</strong>
   </div>
   <div class="ui-sidebar-nav__content">
     <div class="ui-sidebar-nav__group">
-      <span class="ui-sidebar-nav__group-label">Main</span>
+      <span class="ui-sidebar-nav__group-label">{{ t('main', 'Main') }}</span>
       <ul class="ui-sidebar-nav__group-items">
         <li>
           <a class="ui-sidebar-nav__item ui-sidebar-nav__item--active" href="#" aria-current="page">
-            <span class="ui-sidebar-nav__label">Dashboard</span>
+            <span class="ui-sidebar-nav__label">{{ t('dashboard', 'Dashboard') }}</span>
           </a>
         </li>
         <li>
           <a class="ui-sidebar-nav__item" href="#">
-            <span class="ui-sidebar-nav__label">Projects</span>
+            <span class="ui-sidebar-nav__label">{{ t('projects', 'Projects') }}</span>
           </a>
         </li>
         <li>
           <a class="ui-sidebar-nav__item" href="#">
-            <span class="ui-sidebar-nav__label">Tasks</span>
+            <span class="ui-sidebar-nav__label">{{ t('tasks', 'Tasks') }}</span>
           </a>
         </li>
       </ul>
     </div>
     <div class="ui-sidebar-nav__group">
-      <span class="ui-sidebar-nav__group-label">Settings</span>
+      <span class="ui-sidebar-nav__group-label">{{ t('settings', 'Settings') }}</span>
       <ul class="ui-sidebar-nav__group-items">
         <li>
           <a class="ui-sidebar-nav__item" href="#">
-            <span class="ui-sidebar-nav__label">Profile</span>
+            <span class="ui-sidebar-nav__label">{{ t('profile', 'Profile') }}</span>
           </a>
         </li>
         <li>
           <a class="ui-sidebar-nav__item" href="#">
-            <span class="ui-sidebar-nav__label">Preferences</span>
+            <span class="ui-sidebar-nav__label">{{ t('preferences', 'Preferences') }}</span>
           </a>
         </li>
       </ul>
@@ -48,14 +48,14 @@ description: Navigation component for sidebars with support for groups, nested i
   </div>
   <div class="ui-sidebar-nav__footer">
     <a class="ui-sidebar-nav__item" href="#">
-      <span class="ui-sidebar-nav__label">Logout</span>
+      <span class="ui-sidebar-nav__label">{{ t('logout', 'Logout') }}</span>
     </a>
   </div>
 </nav>
 
 <!-- @with_icons -->
 <!-- Navigation items with icons for visual clarity. -->
-<nav class="ui-sidebar-nav" aria-label="Navigation" style="block-size: 300px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 300px;">
   <div class="ui-sidebar-nav__content">
     <ul class="ui-sidebar-nav__group-items">
       <li>
@@ -65,7 +65,7 @@ description: Navigation component for sidebars with support for groups, nested i
               <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
             </svg>
           </span>
-          <span class="ui-sidebar-nav__label">Home</span>
+          <span class="ui-sidebar-nav__label">{{ t('home', 'Home') }}</span>
         </a>
       </li>
       <li>
@@ -76,7 +76,7 @@ description: Navigation component for sidebars with support for groups, nested i
               <circle cx="9" cy="7" r="4"></circle>
             </svg>
           </span>
-          <span class="ui-sidebar-nav__label">Users</span>
+          <span class="ui-sidebar-nav__label">{{ t('users', 'Users') }}</span>
         </a>
       </li>
       <li>
@@ -87,7 +87,7 @@ description: Navigation component for sidebars with support for groups, nested i
               <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
             </svg>
           </span>
-          <span class="ui-sidebar-nav__label">Settings</span>
+          <span class="ui-sidebar-nav__label">{{ t('settings', 'Settings') }}</span>
         </a>
       </li>
     </ul>
@@ -96,12 +96,12 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @with_badges -->
 <!-- Navigation items with badges for counts or status indicators. -->
-<nav class="ui-sidebar-nav" aria-label="Navigation" style="block-size: 200px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 200px;">
   <div class="ui-sidebar-nav__content">
     <ul class="ui-sidebar-nav__group-items">
       <li>
         <a class="ui-sidebar-nav__item" href="#">
-          <span class="ui-sidebar-nav__label">Inbox</span>
+          <span class="ui-sidebar-nav__label">{{ t('inbox', 'Inbox') }}</span>
           <span class="ui-sidebar-nav__badge">
             <span class="ui-badge ui-badge--primary">12</span>
           </span>
@@ -109,7 +109,7 @@ description: Navigation component for sidebars with support for groups, nested i
       </li>
       <li>
         <a class="ui-sidebar-nav__item" href="#">
-          <span class="ui-sidebar-nav__label">Notifications</span>
+          <span class="ui-sidebar-nav__label">{{ t('notifications', 'Notifications') }}</span>
           <span class="ui-sidebar-nav__badge">
             <span class="ui-badge ui-badge--danger">3</span>
           </span>
@@ -117,7 +117,7 @@ description: Navigation component for sidebars with support for groups, nested i
       </li>
       <li>
         <a class="ui-sidebar-nav__item" href="#">
-          <span class="ui-sidebar-nav__label">Updates</span>
+          <span class="ui-sidebar-nav__label">{{ t('updates', 'Updates') }}</span>
           <span class="ui-sidebar-nav__badge">
             <span class="ui-status ui-status--success"></span>
           </span>
@@ -129,37 +129,37 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @nested_items -->
 <!-- Navigation with nested/indented items for sub-sections. -->
-<nav class="ui-sidebar-nav" aria-label="Navigation" style="block-size: 280px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 280px;">
   <div class="ui-sidebar-nav__content">
     <div class="ui-sidebar-nav__group">
-      <span class="ui-sidebar-nav__group-label">Components</span>
+      <span class="ui-sidebar-nav__group-label">{{ t('components', 'Components') }}</span>
       <ul class="ui-sidebar-nav__group-items">
         <li>
           <div class="ui-sidebar-nav__subgroup">
-            <span class="ui-sidebar-nav__subgroup-label">Actions</span>
+            <span class="ui-sidebar-nav__subgroup-label">{{ t('actions', 'Actions') }}</span>
           </div>
         </li>
         <li>
           <a class="ui-sidebar-nav__item ui-sidebar-nav__item--nested" href="#">
-            <span class="ui-sidebar-nav__label">Button</span>
+            <span class="ui-sidebar-nav__label">{{ t('button', 'Button') }}</span>
           </a>
         </li>
         <li>
           <a class="ui-sidebar-nav__item ui-sidebar-nav__item--nested ui-sidebar-nav__item--active" href="#" aria-current="page">
-            <span class="ui-sidebar-nav__label">Button Group</span>
+            <span class="ui-sidebar-nav__label">{{ t('button_group', 'Button Group') }}</span>
           </a>
         </li>
         <li>
-          <span class="ui-sidebar-nav__subgroup-label">Forms</span>
+          <span class="ui-sidebar-nav__subgroup-label">{{ t('forms', 'Forms') }}</span>
         </li>
         <li>
           <a class="ui-sidebar-nav__item ui-sidebar-nav__item--nested" href="#">
-            <span class="ui-sidebar-nav__label">Input</span>
+            <span class="ui-sidebar-nav__label">{{ t('input', 'Input') }}</span>
           </a>
         </li>
         <li>
           <a class="ui-sidebar-nav__item ui-sidebar-nav__item--nested" href="#">
-            <span class="ui-sidebar-nav__label">Select</span>
+            <span class="ui-sidebar-nav__label">{{ t('select', 'Select') }}</span>
           </a>
         </li>
       </ul>
@@ -169,38 +169,38 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @collapsed -->
 <!-- Icon-only mode for compact sidebars. -->
-<nav class="ui-sidebar-nav ui-sidebar-nav--collapsed" aria-label="Navigation" style="block-size: 200px;">
+<nav class="ui-sidebar-nav ui-sidebar-nav--collapsed" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 200px;">
   <div class="ui-sidebar-nav__content">
     <ul class="ui-sidebar-nav__group-items">
       <li>
-        <a class="ui-sidebar-nav__item ui-sidebar-nav__item--active" href="#" aria-current="page" aria-label="Home">
+        <a class="ui-sidebar-nav__item ui-sidebar-nav__item--active" href="#" aria-current="page" aria-label="{{ t('home', 'Home') }}">
           <span class="ui-sidebar-nav__icon">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
             </svg>
           </span>
-          <span class="ui-sidebar-nav__label">Home</span>
+          <span class="ui-sidebar-nav__label">{{ t('home', 'Home') }}</span>
         </a>
       </li>
       <li>
-        <a class="ui-sidebar-nav__item" href="#" aria-label="Users">
+        <a class="ui-sidebar-nav__item" href="#" aria-label="{{ t('users', 'Users') }}">
           <span class="ui-sidebar-nav__icon">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
               <circle cx="9" cy="7" r="4"></circle>
             </svg>
           </span>
-          <span class="ui-sidebar-nav__label">Users</span>
+          <span class="ui-sidebar-nav__label">{{ t('users', 'Users') }}</span>
         </a>
       </li>
       <li>
-        <a class="ui-sidebar-nav__item" href="#" aria-label="Settings">
+        <a class="ui-sidebar-nav__item" href="#" aria-label="{{ t('settings', 'Settings') }}">
           <span class="ui-sidebar-nav__icon">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <circle cx="12" cy="12" r="3"></circle>
             </svg>
           </span>
-          <span class="ui-sidebar-nav__label">Settings</span>
+          <span class="ui-sidebar-nav__label">{{ t('settings', 'Settings') }}</span>
         </a>
       </li>
     </ul>
@@ -209,22 +209,22 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @disabled_items -->
 <!-- Non-interactive navigation items. -->
-<nav class="ui-sidebar-nav" aria-label="Navigation" style="block-size: 180px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 180px;">
   <div class="ui-sidebar-nav__content">
     <ul class="ui-sidebar-nav__group-items">
       <li>
         <a class="ui-sidebar-nav__item" href="#">
-          <span class="ui-sidebar-nav__label">Active Link</span>
+          <span class="ui-sidebar-nav__label">{{ t('active_link', 'Active Link') }}</span>
         </a>
       </li>
       <li>
         <span class="ui-sidebar-nav__item ui-sidebar-nav__item--disabled">
-          <span class="ui-sidebar-nav__label">Disabled Link</span>
+          <span class="ui-sidebar-nav__label">{{ t('disabled_link', 'Disabled Link') }}</span>
         </span>
       </li>
       <li>
         <a class="ui-sidebar-nav__item" href="#">
-          <span class="ui-sidebar-nav__label">Another Link</span>
+          <span class="ui-sidebar-nav__label">{{ t('another_link', 'Another Link') }}</span>
         </a>
       </li>
     </ul>

package/src/layout/topbar/docs.html

@@ -7,32 +7,32 @@ description: Fixed or sticky header bar for app layouts with start, center, and
 <!-- Basic topbar with three sections: start (brand), center (search/nav), and end (actions). -->
 <header class="ui-topbar ui-topbar--bordered">
   <div class="ui-topbar__start">
-    <strong>Brand</strong>
+    <strong>{{ t('brand', 'Brand') }}</strong>
   </div>
   <div class="ui-topbar__center">
-    <span>Center content</span>
+    <span>{{ t('center_content', 'Center content') }}</span>
   </div>
   <div class="ui-topbar__end">
-    <span>Actions</span>
+    <span>{{ t('actions', 'Actions') }}</span>
   </div>
 </header>
 
 <!-- @sticky -->
 <!-- Stays at the top of the viewport on scroll. -->
 <header class="ui-topbar ui-topbar--sticky ui-topbar--bordered">
-  <div class="ui-topbar__start"><strong>Brand</strong></div>
-  <div class="ui-topbar__center">Nav</div>
-  <div class="ui-topbar__end">Actions</div>
+  <div class="ui-topbar__start"><strong>{{ t('brand', 'Brand') }}</strong></div>
+  <div class="ui-topbar__center">{{ t('nav', 'Nav') }}</div>
+  <div class="ui-topbar__end">{{ t('actions', 'Actions') }}</div>
 </header>
 
 <!-- @bordered -->
 <!-- Bottom border via inset box-shadow to preserve grid rhythm. -->
 <header class="ui-topbar ui-topbar--bordered">
   <div class="ui-topbar__start">
-    <strong>Bordered</strong>
+    <strong>{{ t('bordered', 'Bordered') }}</strong>
   </div>
   <div class="ui-topbar__end">
-    <span>Actions</span>
+    <span>{{ t('actions', 'Actions') }}</span>
   </div>
 </header>
 
@@ -40,10 +40,10 @@ description: Fixed or sticky header bar for app layouts with start, center, and
 <!-- Subtle drop shadow below the topbar. -->
 <header class="ui-topbar ui-topbar--raised">
   <div class="ui-topbar__start">
-    <strong>Raised</strong>
+    <strong>{{ t('raised', 'Raised') }}</strong>
   </div>
   <div class="ui-topbar__end">
-    <span>Actions</span>
+    <span>{{ t('actions', 'Actions') }}</span>
   </div>
 </header>
 
@@ -51,11 +51,11 @@ description: Fixed or sticky header bar for app layouts with start, center, and
 <!-- Set --topbar-height on .app-shell so sidebar and main offset correctly. The topbar itself uses --fixed, and sidebar/main read --topbar-height. -->
 <body class="ui-app-shell" style="--topbar-height: var(--ui-row-3)">
   <header class="ui-topbar ui-topbar--fixed ui-topbar--bordered">
-    <div class="ui-topbar__start"><strong>App</strong></div>
-    <div class="ui-topbar__end">User</div>
+    <div class="ui-topbar__start"><strong>{{ t('app', 'App') }}</strong></div>
+    <div class="ui-topbar__end">{{ t('user', 'User') }}</div>
   </header>
-  <aside class="ui-sidebar">Sidebar</aside>
+  <aside class="ui-sidebar">{{ t('sidebar', 'Sidebar') }}</aside>
   <main class="ui-main">
-    <div class="ui-container">Content</div>
+    <div class="ui-container">{{ t('content', 'Content') }}</div>
   </main>
 </body>

package/src/utilities/container/docs.html

@@ -6,19 +6,19 @@ description: Container query utilities for component-level responsive design.
 <!-- @inline_size_containment -->
 <!-- Establish inline-size containment so children can use container queries to respond to the container width. -->
 <div class="ui-container-inline ui-p-2" style="background: var(--ui-color-bg-muted)">
-  <div class="ui-card">This card is inside an inline-size container</div>
+  <div class="ui-card">{{ t('this_card_is_inside_an_inline_size_container', 'This card is inside an inline-size container') }}</div>
 </div>
 
 <!-- @size_containment -->
 <!-- Establish containment on both axes for container queries on width and height. -->
 <div class="ui-container-size ui-p-2" style="background: var(--ui-color-bg-muted); block-size: 12rem">
-  <div class="ui-card">Inside a size container</div>
+  <div class="ui-card">{{ t('inside_a_size_container', 'Inside a size container') }}</div>
 </div>
 
 <!-- @remove_containment -->
 <!-- Reset container type back to normal (no containment). -->
 <div class="ui-container-normal ui-p-2" style="background: var(--ui-color-bg-muted)">
-  <div class="ui-card">No containment on this container</div>
+  <div class="ui-card">{{ t('no_containment_on_this_container', 'No containment on this container') }}</div>
 </div>
 
 <!-- @with_responsive_card -->
@@ -26,6 +26,6 @@ description: Container query utilities for component-level responsive design.
 <div class="ui-container-inline">
   <div class="ui-card ui-card--responsive">
     <div class="ui-card__media" style="background: var(--ui-color-bg-muted); min-block-size: 6rem"></div>
-    <div class="ui-card__body">Card switches to horizontal layout when container is wide enough</div>
+    <div class="ui-card__body">{{ t('card_switches_to_horizontal_layout', 'Card switches to horizontal layout when container is wide enough') }}</div>
   </div>
 </div>

package/src/utilities/display/docs.html

@@ -5,23 +5,23 @@ description: Flexbox and display utilities.
 
 <!-- @flex_layout -->
 <div class="ui-flex ui-justify-between ui-items-center ui-gap-2 ui-p-2" style="background: var(--ui-color-bg-muted)">
-  <span>Start</span>
-  <span>Center (items-center)</span>
-  <span>End</span>
+  <span>{{ t('start', 'Start') }}</span>
+  <span>{{ t('center_items_center', 'Center (items-center)') }}</span>
+  <span>{{ t('end', 'End') }}</span>
 </div>
 
 <!-- @flex_direction | row -->
 <div class="ui-flex ui-flex-col ui-gap-1 ui-p-2" style="background: var(--ui-color-bg-muted)">
-  <span>Column 1</span>
-  <span>Column 2</span>
-  <span>Column 3</span>
+  <span>{{ t('column_1', 'Column 1') }}</span>
+  <span>{{ t('column_2', 'Column 2') }}</span>
+  <span>{{ t('column_3', 'Column 3') }}</span>
 </div>
 <div class="ui-flex ui-flex-row ui-gap-1 ui-p-2" style="background: var(--ui-color-bg-muted)">
-  <span>Row 1</span>
-  <span>Row 2</span>
-  <span>Row 3</span>
+  <span>{{ t('row_1', 'Row 1') }}</span>
+  <span>{{ t('row_2', 'Row 2') }}</span>
+  <span>{{ t('row_3', 'Row 3') }}</span>
 </div>
 
 <!-- @visibility | row -->
-<span class="ui-visible ui-p-1" style="background: var(--ui-color-bg-muted)">Visible</span>
-<span class="ui-invisible ui-p-1" style="background: var(--ui-color-bg-muted)">Invisible (hidden but occupies space)</span>
+<span class="ui-visible ui-p-1" style="background: var(--ui-color-bg-muted)">{{ t('visible', 'Visible') }}</span>
+<span class="ui-invisible ui-p-1" style="background: var(--ui-color-bg-muted)">{{ t('invisible_hidden_but_occupies_space', 'Invisible (hidden but occupies space)') }}</span>

package/src/utilities/scroll-animation/docs.html

@@ -8,22 +8,22 @@ description: Scroll-driven animation utilities for progress indicators and viewp
 <div style="position: relative; block-size: 12rem; overflow-y: auto;">
   <div class="ui-scroll-progress" style="position: absolute;"></div>
   <div style="block-size: 40rem; padding: var(--ui-space-2);">
-    <p>Scroll down to see the progress bar fill.</p>
+    <p>{{ t('scroll_down_to_see_the_progress_bar_fill', 'Scroll down to see the progress bar fill.') }}</p>
   </div>
 </div>
 
 <!-- @view_fade -->
 <!-- Elements fade in as they enter the viewport. -->
-<div class="ui-view-fade ui-card ui-p-2">I fade in on scroll</div>
+<div class="ui-view-fade ui-card ui-p-2">{{ t('i_fade_in_on_scroll', 'I fade in on scroll') }}</div>
 
 <!-- @view_slide_up -->
 <!-- Elements slide up and fade in on viewport entry. -->
-<div class="ui-view-slide-up ui-card ui-p-2">I slide up into view</div>
+<div class="ui-view-slide-up ui-card ui-p-2">{{ t('i_slide_up_into_view', 'I slide up into view') }}</div>
 
 <!-- @view_slide_start -->
 <!-- Elements slide in from the start edge (left in LTR) on viewport entry. -->
-<div class="ui-view-slide-start ui-card ui-p-2">I slide from the start</div>
+<div class="ui-view-slide-start ui-card ui-p-2">{{ t('i_slide_from_the_start', 'I slide from the start') }}</div>
 
 <!-- @view_scale -->
 <!-- Elements scale up and fade in on viewport entry. -->
-<div class="ui-view-scale ui-card ui-p-2">I scale into view</div>
+<div class="ui-view-scale ui-card ui-p-2">{{ t('i_scale_into_view', 'I scale into view') }}</div>

package/src/utilities/scroll-snap/docs.html

@@ -6,72 +6,72 @@ description: Scroll-snap utilities for carousels, horizontal lists, and snap-to-
 <!-- @horizontal_snap -->
 <!-- Snap children to start position on horizontal scroll. -->
 <div class="ui-snap-x ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">Item 1</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">Item 2</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">Item 3</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">Item 4</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('item_1', 'Item 1') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('item_2', 'Item 2') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('item_3', 'Item 3') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('item_4', 'Item 4') }}</div>
 </div>
 
 <!-- @center_snap -->
 <!-- Snap children to center position. -->
 <div class="ui-snap-x ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-center ui-card ui-p-2" style="min-inline-size: 10rem">Center 1</div>
-  <div class="ui-snap-center ui-card ui-p-2" style="min-inline-size: 10rem">Center 2</div>
-  <div class="ui-snap-center ui-card ui-p-2" style="min-inline-size: 10rem">Center 3</div>
+  <div class="ui-snap-center ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('center_1', 'Center 1') }}</div>
+  <div class="ui-snap-center ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('center_2', 'Center 2') }}</div>
+  <div class="ui-snap-center ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('center_3', 'Center 3') }}</div>
 </div>
 
 <!-- @vertical_snap -->
 <!-- Snap children on vertical scroll. -->
 <div class="ui-snap-y" style="max-block-size: 8rem">
-  <div class="ui-snap-start ui-card ui-p-2">Section 1</div>
-  <div class="ui-snap-start ui-card ui-p-2">Section 2</div>
-  <div class="ui-snap-start ui-card ui-p-2">Section 3</div>
+  <div class="ui-snap-start ui-card ui-p-2">{{ t('section_1', 'Section 1') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2">{{ t('section_2', 'Section 2') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2">{{ t('section_3', 'Section 3') }}</div>
 </div>
 
 <!-- @proximity_snap -->
 <!-- Softer snap that only engages when close to a snap point. -->
 <div class="ui-snap-x-proximity ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">Proximity 1</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">Proximity 2</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">Proximity 3</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('proximity_1', 'Proximity 1') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('proximity_2', 'Proximity 2') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('proximity_3', 'Proximity 3') }}</div>
 </div>
 <div class="ui-snap-y-proximity" style="max-block-size: 8rem">
-  <div class="ui-snap-start ui-card ui-p-2">Section 1</div>
-  <div class="ui-snap-start ui-card ui-p-2">Section 2</div>
-  <div class="ui-snap-start ui-card ui-p-2">Section 3</div>
+  <div class="ui-snap-start ui-card ui-p-2">{{ t('section_1', 'Section 1') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2">{{ t('section_2', 'Section 2') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2">{{ t('section_3', 'Section 3') }}</div>
 </div>
 
 <!-- @end_alignment_and_stop -->
 <!-- Snap children to end position or force stop at every snap point. -->
 <div class="ui-snap-x ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-end ui-card ui-p-2" style="min-inline-size: 10rem">End 1</div>
-  <div class="ui-snap-end ui-card ui-p-2" style="min-inline-size: 10rem">End 2</div>
-  <div class="ui-snap-end ui-card ui-p-2" style="min-inline-size: 10rem">End 3</div>
+  <div class="ui-snap-end ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('end_1', 'End 1') }}</div>
+  <div class="ui-snap-end ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('end_2', 'End 2') }}</div>
+  <div class="ui-snap-end ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('end_3', 'End 3') }}</div>
 </div>
 <div class="ui-snap-x ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-snap-always ui-card ui-p-2" style="min-inline-size: 10rem">Always 1</div>
-  <div class="ui-snap-start ui-snap-always ui-card ui-p-2" style="min-inline-size: 10rem">Always 2</div>
-  <div class="ui-snap-start ui-snap-always ui-card ui-p-2" style="min-inline-size: 10rem">Always 3</div>
+  <div class="ui-snap-start ui-snap-always ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('always_1', 'Always 1') }}</div>
+  <div class="ui-snap-start ui-snap-always ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('always_2', 'Always 2') }}</div>
+  <div class="ui-snap-start ui-snap-always ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('always_3', 'Always 3') }}</div>
 </div>
 
 <!-- @disable_snap -->
 <!-- Remove snap behavior from a container. -->
 <div class="ui-snap-none ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem; overflow-x: auto">
-  <div class="ui-card ui-p-2" style="min-inline-size: 10rem">No snap 1</div>
-  <div class="ui-card ui-p-2" style="min-inline-size: 10rem">No snap 2</div>
+  <div class="ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('no_snap_1', 'No snap 1') }}</div>
+  <div class="ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('no_snap_2', 'No snap 2') }}</div>
 </div>
 
 <!-- @scroll_padding -->
 <!-- Offset snap position for fixed headers or insets. -->
 <div class="ui-snap-x ui-snap-p-1 ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">p-1</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">p-1</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_1', 'p-1') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_1', 'p-1') }}</div>
 </div>
 <div class="ui-snap-x ui-snap-p-2 ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">p-2</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">p-2</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_2', 'p-2') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_2', 'p-2') }}</div>
 </div>
 <div class="ui-snap-x ui-snap-p-4 ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">p-4</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">p-4</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_4', 'p-4') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_4', 'p-4') }}</div>
 </div>

package/src/utilities/spacing/docs.html

@@ -4,23 +4,23 @@ description: Margin and padding utilities aligned to 8px grid.
 ---
 
 <!-- @padding | column -->
-<div class="ui-p-1" style="background: var(--ui-color-bg-muted)">p-1 (8px padding)</div>
-<div class="ui-p-2" style="background: var(--ui-color-bg-muted)">p-2 (16px padding)</div>
-<div class="ui-p-4" style="background: var(--ui-color-bg-muted)">p-4 (32px padding)</div>
+<div class="ui-p-1" style="background: var(--ui-color-bg-muted)">{{ t('p_1_8px_padding', 'p-1 (8px padding)') }}</div>
+<div class="ui-p-2" style="background: var(--ui-color-bg-muted)">{{ t('p_2_16px_padding', 'p-2 (16px padding)') }}</div>
+<div class="ui-p-4" style="background: var(--ui-color-bg-muted)">{{ t('p_4_32px_padding', 'p-4 (32px padding)') }}</div>
 
 <!-- @directional_padding | column -->
-<div class="ui-px-4 ui-py-2" style="background: var(--ui-color-bg-muted)">px-4 py-2 (horizontal 32px, vertical 16px)</div>
-<div class="ui-pt-4 ui-pb-1" style="background: var(--ui-color-bg-muted)">pt-4 pb-1 (top 32px, bottom 8px)</div>
-<div class="ui-ps-4 ui-pe-1" style="background: var(--ui-color-bg-muted)">ps-4 pe-1 (start 32px, end 8px)</div>
+<div class="ui-px-4 ui-py-2" style="background: var(--ui-color-bg-muted)">{{ t('px_4_py_2_horizontal_32px_vertical_16px', 'px-4 py-2 (horizontal 32px, vertical 16px)') }}</div>
+<div class="ui-pt-4 ui-pb-1" style="background: var(--ui-color-bg-muted)">{{ t('pt_4_pb_1_top_32px_bottom_8px', 'pt-4 pb-1 (top 32px, bottom 8px)') }}</div>
+<div class="ui-ps-4 ui-pe-1" style="background: var(--ui-color-bg-muted)">{{ t('ps_4_pe_1_start_32px_end_8px', 'ps-4 pe-1 (start 32px, end 8px)') }}</div>
 
 <!-- @margin | column -->
-<div class="ui-mb-2" style="background: var(--ui-color-bg-muted)">mb-2 (16px bottom margin)</div>
-<div class="ui-mt-4 ui-mb-2" style="background: var(--ui-color-bg-muted)">mt-4 mb-2 (top 32px, bottom 16px)</div>
-<div class="ui-mx-auto" style="background: var(--ui-color-bg-muted); max-inline-size: var(--ui-row-8)">mx-auto (centered with auto margins)</div>
+<div class="ui-mb-2" style="background: var(--ui-color-bg-muted)">{{ t('mb_2_16px_bottom_margin', 'mb-2 (16px bottom margin)') }}</div>
+<div class="ui-mt-4 ui-mb-2" style="background: var(--ui-color-bg-muted)">{{ t('mt_4_mb_2_top_32px_bottom_16px', 'mt-4 mb-2 (top 32px, bottom 16px)') }}</div>
+<div class="ui-mx-auto" style="background: var(--ui-color-bg-muted); max-inline-size: var(--ui-row-8)">{{ t('mx_auto_centered_with_auto_margins', 'mx-auto (centered with auto margins)') }}</div>
 
 <!-- @gap -->
 <div class="ui-flex ui-gap-2">
-  <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">Item</div>
-  <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">Item</div>
-  <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">Item</div>
+  <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">{{ t('item', 'Item') }}</div>
+  <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">{{ t('item', 'Item') }}</div>
+  <div class="ui-p-2" style="background: var(--ui-color-bg-muted)">{{ t('item', 'Item') }}</div>
 </div>