@teseor/css 1.15.1 → 1.15.3

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

@@ -5,7 +5,7 @@ description: User or entity thumbnail representation. Supports image with fallba
 
 <!-- @default | row -->
 <div class="ui-avatar">
-  <span class="ui-avatar__fallback">JD</span>
+  <span class="ui-avatar__fallback">{{ t('jd', 'JD') }}</span>
 </div>
 <div class="ui-avatar">
   <img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=1" alt="User"></img>
@@ -13,24 +13,24 @@ description: User or entity thumbnail representation. Supports image with fallba
 
 <!-- @sizes | row -->
 <div class="ui-avatar ui-avatar--xs">
-  <span class="ui-avatar__fallback">XS</span>
+  <span class="ui-avatar__fallback">{{ t('xs', 'XS') }}</span>
 </div>
 <div class="ui-avatar ui-avatar--sm">
-  <span class="ui-avatar__fallback">SM</span>
+  <span class="ui-avatar__fallback">{{ t('sm', 'SM') }}</span>
 </div>
 <div class="ui-avatar">
-  <span class="ui-avatar__fallback">MD</span>
+  <span class="ui-avatar__fallback">{{ t('md', 'MD') }}</span>
 </div>
 <div class="ui-avatar ui-avatar--lg">
-  <span class="ui-avatar__fallback">LG</span>
+  <span class="ui-avatar__fallback">{{ t('lg', 'LG') }}</span>
 </div>
 <div class="ui-avatar ui-avatar--xl">
-  <span class="ui-avatar__fallback">XL</span>
+  <span class="ui-avatar__fallback">{{ t('xl', 'XL') }}</span>
 </div>
 
 <!-- @square_shape | row -->
 <div class="ui-avatar ui-avatar--square">
-  <span class="ui-avatar__fallback">ORG</span>
+  <span class="ui-avatar__fallback">{{ t('org', 'ORG') }}</span>
 </div>
 <div class="ui-avatar ui-avatar--square">
   <img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=org" alt="Org"></img>
@@ -59,6 +59,6 @@ description: User or entity thumbnail representation. Supports image with fallba
     <img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=g3" alt></img>
   </div>
   <div class="ui-avatar">
-    <span class="ui-avatar__fallback">+5</span>
+    <span class="ui-avatar__fallback">{{ t('5', '+5') }}</span>
   </div>
 </div>

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

@@ -3,22 +3,22 @@ title: Card
 ---
 
 <!-- @default -->
-<div class="ui-card">Default card with padding and border</div>
+<div class="ui-card">{{ t('default_card_with_padding_and_border', 'Default card with padding and border') }}</div>
 
 <!-- @background_variants | column -->
-<div class="ui-card">Default background</div>
-<div class="ui-card ui-card--subtle">Subtle background</div>
-<div class="ui-card ui-card--muted">Muted background</div>
+<div class="ui-card">{{ t('default_background', 'Default background') }}</div>
+<div class="ui-card ui-card--subtle">{{ t('subtle_background', 'Subtle background') }}</div>
+<div class="ui-card ui-card--muted">{{ t('muted_background', 'Muted background') }}</div>
 
 <!-- @padding_variants | column -->
-<div class="ui-card ui-card--sm">Small padding</div>
-<div class="ui-card">Default padding</div>
-<div class="ui-card ui-card--lg">Large padding</div>
-<div class="ui-card ui-card--flush">No padding (flush)</div>
+<div class="ui-card ui-card--sm">{{ t('small_padding', 'Small padding') }}</div>
+<div class="ui-card">{{ t('default_padding', 'Default padding') }}</div>
+<div class="ui-card ui-card--lg">{{ t('large_padding', 'Large padding') }}</div>
+<div class="ui-card ui-card--flush">{{ t('no_padding_flush', 'No padding (flush)') }}</div>
 
 <!-- @interactive | column -->
-<div class="ui-card ui-card--interactive">Hover and click this card</div>
-<div class="ui-card ui-card--interactive ui-card--subtle">Interactive subtle card</div>
+<div class="ui-card ui-card--interactive">{{ t('hover_and_click_this_card', 'Hover and click this card') }}</div>
+<div class="ui-card ui-card--interactive ui-card--subtle">{{ t('interactive_subtle_card', 'Interactive subtle card') }}</div>
 
 <!-- @responsive_container_query -->
 <!-- Switches to horizontal layout when container is wide enough. Requires a parent with container-type: inline-size (use ui-container-inline utility). -->
@@ -26,8 +26,8 @@ title: Card
   <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">
-      <strong>Responsive Card</strong>
-      <p>Stacks vertically in narrow containers, switches to side-by-side at >= 30rem.</p>
+      <strong>{{ t('responsive_card', 'Responsive Card') }}</strong>
+      <p>{{ t('stacks_vertically_narrow', 'Stacks vertically in narrow containers, switches to side-by-side at >= 30rem.') }}</p>
     </div>
   </div>
 </div>

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

@@ -5,16 +5,16 @@ title: Data List
 <!-- @default -->
 <dl class="ui-data-list">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Name</dt>
-    <dd class="ui-data-list__value">John Doe</dd>
+    <dt class="ui-data-list__label">{{ t('name', 'Name') }}</dt>
+    <dd class="ui-data-list__value">{{ t('john_doe', 'John Doe') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Email</dt>
-    <dd class="ui-data-list__value">john@example.com</dd>
+    <dt class="ui-data-list__label">{{ t('email', 'Email') }}</dt>
+    <dd class="ui-data-list__value">{{ t('johnexamplecom', 'john@example.com') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Role</dt>
-    <dd class="ui-data-list__value">Administrator</dd>
+    <dt class="ui-data-list__label">{{ t('role', 'Role') }}</dt>
+    <dd class="ui-data-list__value">{{ t('administrator', 'Administrator') }}</dd>
   </div>
 </dl>
 
@@ -22,16 +22,16 @@ title: Data List
 <!-- Side-by-side label and value -->
 <dl class="ui-data-list ui-data-list--horizontal">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Status</dt>
-    <dd class="ui-data-list__value">Active</dd>
+    <dt class="ui-data-list__label">{{ t('status', 'Status') }}</dt>
+    <dd class="ui-data-list__value">{{ t('active', 'Active') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Created</dt>
-    <dd class="ui-data-list__value">Dec 8, 2025</dd>
+    <dt class="ui-data-list__label">{{ t('created', 'Created') }}</dt>
+    <dd class="ui-data-list__value">{{ t('dec_8_2025', 'Dec 8, 2025') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Updated</dt>
-    <dd class="ui-data-list__value">Dec 8, 2025</dd>
+    <dt class="ui-data-list__label">{{ t('updated', 'Updated') }}</dt>
+    <dd class="ui-data-list__value">{{ t('dec_8_2025', 'Dec 8, 2025') }}</dd>
   </div>
 </dl>
 
@@ -39,16 +39,16 @@ title: Data List
 <!-- With separator lines between items -->
 <dl class="ui-data-list ui-data-list--divided">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Order ID</dt>
-    <dd class="ui-data-list__value">#12345</dd>
+    <dt class="ui-data-list__label">{{ t('order_id', 'Order ID') }}</dt>
+    <dd class="ui-data-list__value">{{ t('12345', '#12345') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Total</dt>
-    <dd class="ui-data-list__value">$99.00</dd>
+    <dt class="ui-data-list__label">{{ t('total', 'Total') }}</dt>
+    <dd class="ui-data-list__value">{{ t('9900', '$99.00') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Payment</dt>
-    <dd class="ui-data-list__value">Credit Card</dd>
+    <dt class="ui-data-list__label">{{ t('payment', 'Payment') }}</dt>
+    <dd class="ui-data-list__value">{{ t('credit_card', 'Credit Card') }}</dd>
   </div>
 </dl>
 
@@ -56,39 +56,39 @@ title: Data List
 <!-- Alternating background for readability -->
 <dl class="ui-data-list ui-data-list--striped">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">CPU</dt>
-    <dd class="ui-data-list__value">Intel i7</dd>
+    <dt class="ui-data-list__label">{{ t('cpu', 'CPU') }}</dt>
+    <dd class="ui-data-list__value">{{ t('intel_i7', 'Intel i7') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Memory</dt>
-    <dd class="ui-data-list__value">16 GB</dd>
+    <dt class="ui-data-list__label">{{ t('memory', 'Memory') }}</dt>
+    <dd class="ui-data-list__value">{{ t('16_gb', '16 GB') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Storage</dt>
-    <dd class="ui-data-list__value">512 GB SSD</dd>
+    <dt class="ui-data-list__label">{{ t('storage', 'Storage') }}</dt>
+    <dd class="ui-data-list__value">{{ t('512_gb_ssd', '512 GB SSD') }}</dd>
   </div>
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Display</dt>
-    <dd class="ui-data-list__value">14" Retina</dd>
+    <dt class="ui-data-list__label">{{ t('display', 'Display') }}</dt>
+    <dd class="ui-data-list__value">{{ t('14_retina', '14" Retina') }}</dd>
   </div>
 </dl>
 
 <!-- @sizes | column -->
 <dl class="ui-data-list ui-data-list--sm">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Small</dt>
-    <dd class="ui-data-list__value">Compact display</dd>
+    <dt class="ui-data-list__label">{{ t('small', 'Small') }}</dt>
+    <dd class="ui-data-list__value">{{ t('compact_display', 'Compact display') }}</dd>
   </div>
 </dl>
 <dl class="ui-data-list">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Default</dt>
-    <dd class="ui-data-list__value">Standard display</dd>
+    <dt class="ui-data-list__label">{{ t('default', 'Default') }}</dt>
+    <dd class="ui-data-list__value">{{ t('standard_display', 'Standard display') }}</dd>
   </div>
 </dl>
 <dl class="ui-data-list ui-data-list--lg">
   <div class="ui-data-list__item">
-    <dt class="ui-data-list__label">Large</dt>
-    <dd class="ui-data-list__value">Spacious display</dd>
+    <dt class="ui-data-list__label">{{ t('large', 'Large') }}</dt>
+    <dd class="ui-data-list__value">{{ t('spacious_display', 'Spacious display') }}</dd>
   </div>
 </dl>

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

@@ -20,23 +20,23 @@ description: CSS classes for sizing and styling SVG icons. Works with any stroke
 <!-- Scale icons from extra small to extra large. -->
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>xs</small>
+  <small>{{ t('xs', 'xs') }}</small>
 </div>
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>sm</small>
+  <small>{{ t('sm', 'sm') }}</small>
 </div>
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>md</small>
+  <small>{{ t('md', 'md') }}</small>
 </div>
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--lg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>lg</small>
+  <small>{{ t('lg', 'lg') }}</small>
 </div>
 <div class="ui-column" style="align-items: center; gap: var(--ui-space-1)">
   <svg class="ui-icon ui-icon--xl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-  <small>xl</small>
+  <small>{{ t('xl', 'xl') }}</small>
 </div>
 
 <!-- @stroke_width | row -->

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

@@ -49,7 +49,7 @@ description: Responsive image with fallback placeholder, optional caption, and s
 <!-- @caption -->
 <figure class="ui-image ui-image--md ui-image--rounded">
   <img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%23ffb74d' width='192' height='140'/%3E%3C/svg%3E" alt="With caption"></img>
-  <figcaption class="ui-image__caption">An optional image caption</figcaption>
+  <figcaption class="ui-image__caption">{{ t('an_optional_image_caption', 'An optional image caption') }}</figcaption>
 </figure>
 
 <!-- @fallback | row -->

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>