@teseor/css 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

package/src/components/navigation/tabs/api.json

@@ -63,6 +63,11 @@
       "default": "var(--ui-color-bg)",
       "description": "Tab bg active"
     },
+    {
+      "name": "--ui-tabs-tab-line-height",
+      "default": "var(--ui-line-height-none)",
+      "description": "Tab line height"
+    },
     {
       "name": "--ui-tabs-panel-padding",
       "default": "var(--ui-space-3)",

package/src/components/navigation/tabs/index.scss

@@ -30,6 +30,8 @@
     --_tab-bg: var(--ui-tabs-tab-bg, transparent);
     // @desc Tab bg active
     --_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Tab line height
+    --_tab-line-height: var(--ui-tabs-tab-line-height, var(--ui-line-height-none, #{t.$line-height-none}));
     // @desc Panel padding on all sides
     --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, #{t.$space-3}));
   }
@@ -80,7 +82,7 @@
     font-family: var(--_font-sans);
     font-size: var(--_tab-font-size);
     font-weight: var(--_weight-medium);
-    line-height: 1;
+    line-height: var(--_tab-line-height);
     color: var(--_color-text-muted);
 
     background: var(--_tab-bg);

package/src/config/tokens/_variables.scss

@@ -103,8 +103,8 @@ $sizes: (
 // ==========================================================================
 
 // Font families (system stack, consumers override via CSS tokens)
-$font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
-$font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
+$font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Helvetica Neue", arial, sans-serif;
+$font-mono: ui-monospace, "SFMono-Regular", "SF Mono", menlo, consolas, "Liberation Mono", "Courier New", monospace;
 
 // Font sizes (derived from base, 1.2 modular scale)
 $font-size-base: 1rem; // 16px — core knob
@@ -117,6 +117,9 @@ $font-size-2xl: 1.75rem; // 28px
 $font-size-3xl: 2rem; // 32px
 $font-size-4xl: 2.5rem; // 40px
 
+// Unitless line height (no extra leading)
+$line-height-none: 1;
+
 // Tight line heights (compact UI elements)
 $line-height-tight-xs: $row;
 $line-height-tight-sm: $row;

package/src/config/tokens/core.scss

@@ -8,26 +8,26 @@
     --ui-unit: calc(8px * var(--ui-scale));
 
     // Base colors — shades auto-generated via color-mix in tokens.scale
-    --ui-color-primary: oklch(55% 0.22 250);
+    --ui-color-primary: oklch(54% 0.20 260);
     --ui-color-success: oklch(60% 0.18 145);
     --ui-color-warning: oklch(75% 0.18 70);
     --ui-color-danger: oklch(60% 0.22 25);
-    --ui-color-neutral: oklch(50% 0.02 250);
+    --ui-color-neutral: oklch(45% 0.015 260);
 
     // Font families — system stacks, override for brand fonts
-    --ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
-    --ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
+    --ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Helvetica Neue", arial, sans-serif;
+    --ui-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", menlo, consolas, "Liberation Mono", "Courier New", monospace;
 
     // Base font size — all font-size-* tokens derive from this via calc()
     --ui-font-size-base: calc(1rem * var(--ui-scale));
 
     // Base radius — sm/md/lg derive from this
-    --ui-radius-base: var(--ui-unit);
+    --ui-radius-base: 6px;
 
     // Base border width — sm/md/lg derive from this
     --ui-border-width-base: calc(var(--ui-unit) * 0.125);
 
     // Shadow strength — controls opacity of all shadow levels
-    --ui-shadow-strength: 20%;
+    --ui-shadow-strength: 12%;
   }
 }

package/src/config/tokens/typography.scss

@@ -17,6 +17,9 @@
     // Two modes: normal (for body text) and tight (for UI/forms)
     // ==========================================================================
 
+    // Unitless line height (no extra leading)
+    --ui-line-height-none: 1;
+
     // Tight line-heights for compact UI elements
     --ui-line-height-tight-xs: var(--ui-row-1);
     --ui-line-height-tight-sm: var(--ui-row-1);

package/src/layout/sidebar-nav/api.json

@@ -76,9 +76,19 @@
     },
     {
       "name": "--ui-sidebar-nav-group-label-weight",
-      "default": "var(--ui-font-weight-bold)",
+      "default": "var(--ui-font-weight-semibold)",
       "description": "Group label weight"
     },
+    {
+      "name": "--ui-sidebar-nav-group-label-transform",
+      "default": "none",
+      "description": "Group label text-transform"
+    },
+    {
+      "name": "--ui-sidebar-nav-group-label-letter-spacing",
+      "default": "normal",
+      "description": "Group label letter-spacing"
+    },
     {
       "name": "--ui-sidebar-nav-item-height",
       "default": "var(--ui-row-2)",
@@ -116,17 +126,17 @@
     },
     {
       "name": "--ui-sidebar-nav-item-active-bg",
-      "default": "var(--ui-color-primary-subtle)",
+      "default": "var(--ui-color-bg-muted)",
       "description": "Item active bg"
     },
     {
       "name": "--ui-sidebar-nav-item-active-color",
-      "default": "var(--ui-color-primary-hover)",
+      "default": "var(--ui-color-primary)",
       "description": "Item active color"
     },
     {
       "name": "--ui-sidebar-nav-item-active-weight",
-      "default": "var(--ui-font-weight-medium)",
+      "default": "normal",
       "description": "Item active weight"
     },
     {

package/src/layout/sidebar-nav/index.scss

@@ -83,7 +83,11 @@
     // @desc Group label color
     --_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));
     // @desc Group label weight
-    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-font-weight-bold));
+    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-font-weight-semibold));
+    // @desc Group label text-transform
+    --_transform: var(--ui-sidebar-nav-group-label-transform, none);
+    // @desc Group label letter-spacing
+    --_letter-spacing: var(--ui-sidebar-nav-group-label-letter-spacing, normal);
 
     display: block;
 
@@ -92,8 +96,8 @@
 
     font-size: var(--_font-size);
     font-weight: var(--_weight);
-    letter-spacing: #{t.$letter-spacing-wide};
-    text-transform: uppercase;
+    letter-spacing: var(--_letter-spacing);
+    text-transform: var(--_transform);
     color: var(--_color);
   }
 
@@ -156,12 +160,14 @@
     min-block-size: var(--_height);
     padding-inline: var(--_padding-inline);
 
+    font-family: inherit;
     font-size: var(--_font-size);
     font-weight: var(--_weight, normal);
     text-decoration: none;
     color: var(--_color);
 
     background: var(--_bg);
+    border: none;
     border-radius: var(--_radius);
     cursor: pointer;
 
@@ -187,11 +193,11 @@
   // Active state
   .sidebar-nav__item--active {
     // @desc Item active bg
-    --_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));
+    --_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-bg-muted));
     // @desc Item active color
-    --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));
+    --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary));
     // @desc Item active weight
-    --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-font-weight-medium));
+    --_weight: var(--ui-sidebar-nav-item-active-weight, normal);
   }
 
   // Nested item indent

package/src/utilities/position/api.json

@@ -1,6 +1,25 @@
 {
   "name": "position",
   "type": "utility",
-  "utilities": ["relative", "absolute", "overflow-hidden", "inset-0"],
+  "utilities": [
+    "relative",
+    "absolute",
+    "fixed",
+    "sticky",
+    "inset-0",
+    "top-0",
+    "bottom-0",
+    "start-0",
+    "end-0",
+    "top-2",
+    "bottom-2",
+    "start-2",
+    "end-2",
+    "z-10",
+    "z-20",
+    "z-50",
+    "overflow-hidden",
+    "overflow-auto"
+  ],
   "cssVars": []
 }

package/src/utilities/position/docs.html

@@ -9,6 +9,13 @@ description: Position, overflow, and inset utilities for controlling element pla
   <div class="ui-absolute ui-top-0 ui-end-0 ui-bg-subtle ui-p-1">{{ t('absolute_top_end', 'Absolute top-end') }}</div>
   <div class="ui-absolute ui-bottom-0 ui-start-0 ui-bg-subtle ui-p-1">{{ t('absolute_bottom_start', 'Absolute bottom-start') }}</div>
 </div>
+<div class="ui-sticky ui-top-0 ui-bg-muted ui-p-2">
+  <span class="ui-text-sm">{{ t('sticky_element', 'Sticky element (sticks to top on scroll)') }}</span>
+</div>
+<div class="ui-relative ui-overflow-hidden ui-bg-muted" style="block-size: var(--ui-row-4); transform: translate(0)">
+  <div class="ui-fixed ui-top-0 ui-start-0 ui-bg-subtle ui-p-1">{{ t('fixed_in_container', 'Fixed (contained by transform parent)') }}</div>
+</div>
+<p class="ui-text-sm ui-text-muted">{{ t('position_classes', 'Also available: ui-static') }}</p>
 
 <!-- @inset | row -->
 <!-- Pin element to all edges or specific sides. -->
@@ -19,6 +26,24 @@ description: Position, overflow, and inset utilities for controlling element pla
   <div class="ui-absolute ui-inset-block-0 ui-start-0 ui-bg-subtle ui-p-2">{{ t('inset_block_0_start_0', 'inset-block-0 + start-0') }}</div>
 </div>
 
+<!-- @inset-scale | row -->
+<!-- Offset from edges using space tokens (1-4). -->
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-1 ui-end-1 ui-bg-subtle ui-p-1">{{ t('top_1_end_1', 'top-1 end-1') }}</div>
+  <div class="ui-absolute ui-bottom-2 ui-start-2 ui-bg-subtle ui-p-1">{{ t('bottom_2_start_2', 'bottom-2 start-2') }}</div>
+</div>
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-0 ui-end-2 ui-bg-subtle ui-p-1">{{ t('top_0_end_2', 'top-0 end-2') }}</div>
+</div>
+
+<!-- @z-index | row -->
+<!-- Control stacking order. Scale: 0, 10, 20, 30, 40, 50. -->
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-1 ui-start-1 ui-z-10 ui-bg-subtle ui-p-1">{{ t('z_10', 'z-10') }}</div>
+  <div class="ui-absolute ui-top-2 ui-start-2 ui-z-20 ui-bg ui-p-1 ui-rounded">{{ t('z_20_on_top', 'z-20 on top') }}</div>
+  <div class="ui-absolute ui-top-3 ui-start-3 ui-z-50 ui-bg-subtle ui-p-1 ui-rounded">{{ t('z_50_highest', 'z-50 highest') }}</div>
+</div>
+
 <!-- @overflow | row -->
 <!-- Control overflow behavior. -->
 <div class="ui-overflow-hidden ui-bg-muted ui-p-2" style="block-size: var(--ui-row-3)">

package/src/utilities/position/position.scss

@@ -35,20 +35,51 @@
     inset-inline: 0;
   }
 
-  .top-0 {
-    inset-block-start: 0;
+  @each $n in (0, 1, 2, 3, 4) {
+    .top-#{$n} {
+      inset-block-start: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+
+    .bottom-#{$n} {
+      inset-block-end: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+
+    .start-#{$n} {
+      inset-inline-start: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+
+    .end-#{$n} {
+      inset-inline-end: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+  }
+
+  // Z-index
+  .z-0 {
+    z-index: 0;
+  }
+
+  .z-10 {
+    z-index: 10;
+  }
+
+  .z-20 {
+    z-index: 20;
+  }
+
+  .z-30 {
+    z-index: 30;
   }
 
-  .bottom-0 {
-    inset-block-end: 0;
+  .z-40 {
+    z-index: 40;
   }
 
-  .start-0 {
-    inset-inline-start: 0;
+  .z-50 {
+    z-index: 50;
   }
 
-  .end-0 {
-    inset-inline-end: 0;
+  .z-auto {
+    z-index: auto;
   }
 
   // Overflow

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

@@ -14,16 +14,16 @@ description: Scroll-driven animation utilities for progress indicators and viewp
 
 <!-- @view_fade -->
 <!-- Elements fade in as they enter the viewport. -->
-<div class="ui-view-fade ui-card ui-p-2">{{ t('i_fade_in_on_scroll', 'I fade in on scroll') }}</div>
+<div class="ui-view-fade ui-card ui-card--sm">{{ 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">{{ t('i_slide_up_into_view', 'I slide up into view') }}</div>
+<div class="ui-view-slide-up ui-card ui-card--sm">{{ 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">{{ t('i_slide_from_the_start', 'I slide from the start') }}</div>
+<div class="ui-view-slide-start ui-card ui-card--sm">{{ 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">{{ t('i_scale_into_view', 'I scale into view') }}</div>
+<div class="ui-view-scale ui-card ui-card--sm">{{ 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 demo-narrow">
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_1', 'Item 1') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_2', 'Item 2') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_3', 'Item 3') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_4', 'Item 4') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_1', 'Item 1') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_2', 'Item 2') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_3', 'Item 3') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ 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 demo-narrow">
-  <div class="ui-snap-center ui-card ui-p-2 demo-snap-item">{{ t('center_1', 'Center 1') }}</div>
-  <div class="ui-snap-center ui-card ui-p-2 demo-snap-item">{{ t('center_2', 'Center 2') }}</div>
-  <div class="ui-snap-center ui-card ui-p-2 demo-snap-item">{{ t('center_3', 'Center 3') }}</div>
+  <div class="ui-snap-center ui-card ui-card--sm demo-snap-item">{{ t('center_1', 'Center 1') }}</div>
+  <div class="ui-snap-center ui-card ui-card--sm demo-snap-item">{{ t('center_2', 'Center 2') }}</div>
+  <div class="ui-snap-center ui-card ui-card--sm demo-snap-item">{{ 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">{{ 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 class="ui-snap-start ui-card ui-card--sm">{{ t('section_1', 'Section 1') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm">{{ t('section_2', 'Section 2') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm">{{ 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 demo-narrow">
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('proximity_1', 'Proximity 1') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('proximity_2', 'Proximity 2') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('proximity_3', 'Proximity 3') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('proximity_1', 'Proximity 1') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('proximity_2', 'Proximity 2') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ 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">{{ 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 class="ui-snap-start ui-card ui-card--sm">{{ t('section_1', 'Section 1') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm">{{ t('section_2', 'Section 2') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm">{{ 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 demo-narrow">
-  <div class="ui-snap-end ui-card ui-p-2 demo-snap-item">{{ t('end_1', 'End 1') }}</div>
-  <div class="ui-snap-end ui-card ui-p-2 demo-snap-item">{{ t('end_2', 'End 2') }}</div>
-  <div class="ui-snap-end ui-card ui-p-2 demo-snap-item">{{ t('end_3', 'End 3') }}</div>
+  <div class="ui-snap-end ui-card ui-card--sm demo-snap-item">{{ t('end_1', 'End 1') }}</div>
+  <div class="ui-snap-end ui-card ui-card--sm demo-snap-item">{{ t('end_2', 'End 2') }}</div>
+  <div class="ui-snap-end ui-card ui-card--sm demo-snap-item">{{ t('end_3', 'End 3') }}</div>
 </div>
 <div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
-  <div class="ui-snap-start ui-snap-always ui-card ui-p-2 demo-snap-item">{{ t('always_1', 'Always 1') }}</div>
-  <div class="ui-snap-start ui-snap-always ui-card ui-p-2 demo-snap-item">{{ t('always_2', 'Always 2') }}</div>
-  <div class="ui-snap-start ui-snap-always ui-card ui-p-2 demo-snap-item">{{ t('always_3', 'Always 3') }}</div>
+  <div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">{{ t('always_1', 'Always 1') }}</div>
+  <div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">{{ t('always_2', 'Always 2') }}</div>
+  <div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">{{ 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 demo-narrow ui-overflow-x-auto">
-  <div class="ui-card ui-p-2 demo-snap-item">{{ t('no_snap_1', 'No snap 1') }}</div>
-  <div class="ui-card ui-p-2 demo-snap-item">{{ t('no_snap_2', 'No snap 2') }}</div>
+  <div class="ui-card ui-card--sm demo-snap-item">{{ t('no_snap_1', 'No snap 1') }}</div>
+  <div class="ui-card ui-card--sm demo-snap-item">{{ 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 demo-narrow">
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_1', 'p-1') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_1', 'p-1') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_1', 'p-1') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_1', 'p-1') }}</div>
 </div>
 <div class="ui-snap-x ui-snap-p-2 ui-flex ui-gap-2 ui-p-2 demo-narrow">
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_2', 'p-2') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_2', 'p-2') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_2', 'p-2') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_2', 'p-2') }}</div>
 </div>
 <div class="ui-snap-x ui-snap-p-4 ui-flex ui-gap-2 ui-p-2 demo-narrow">
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_4', 'p-4') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_4', 'p-4') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_4', 'p-4') }}</div>
+  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_4', 'p-4') }}</div>
 </div>

package/src/utilities/visually-hidden/docs.html

@@ -6,7 +6,7 @@ description: Hides content visually while keeping it accessible to screen reader
 
 <!-- @default -->
 <!-- Content is hidden visually but announced by screen readers -->
-<button>
+<button class="ui-button">
 {{ t('submit', 'Submit') }}
   <span class="ui-visually-hidden"> {{ t('form_to_contact_support', 'form to contact support') }}</span>
 </button>