@grandbazar/ui-baza 1.5.2 → 1.5.4

package/dist/style.css

@@ -2090,7 +2090,14 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._tableCaption_fn9c1_2 {
+  /* Spacing through margins rather than flex: flex on a list is one of the ways Safari loses the
+     list role, and the cards need no layout of their own. */
+  ._stackedList_5wdsh_4 > * + * {
+    margin-top: var(--space-xl);
+  }
+}
+@layer ui_baza_components {
+  ._tableCaption_tlco9_2 {
     padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
     color: var(--color-neutral);
     font-weight: var(--font-weight-bold);
@@ -2099,25 +2106,55 @@ textarea {
     text-align: left;
     caption-side: top;
   }
+
+  /* Stacked has no card around the list, so the heading sits flush with the cards below it. */
+  ._stackedCaption_tlco9_13 {
+    padding-inline: 0;
+  }
 }
 @layer ui_baza_components {
-  ._tableCell_1lfet_2 {
+  ._tableCell_1492t_2 {
     padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
     font-variant-numeric: tabular-nums;
     vertical-align: middle;
 
-    &._left_1lfet_7 {
+    &._left_1492t_7 {
       text-align: left;
     }
 
-    &._center_1lfet_11 {
+    &._center_1492t_11 {
       text-align: center;
     }
 
-    &._right_1lfet_15 {
+    &._right_1492t_15 {
       text-align: right;
     }
   }
+
+  ._stackedCell_1492t_20 {
+    font-variant-numeric: tabular-nums;
+  }
+
+  ._stackedPair_1492t_24 {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--space-xl);
+  }
+
+  /* Deliberately the same type as .tableHeaderCell: the label stands in for the column header. */
+  ._stackedLabel_1492t_32 {
+    flex-shrink: 0;
+    color: var(--color-neutral-340);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  ._stackedValue_1492t_40 {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+  }
 }
 @layer ui_baza_components {
   ._tableHeaderCell_1r67q_2 {
@@ -2143,38 +2180,58 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._scrollContainer_hioz2_2 {
+  ._container_1s7gk_2 {
+    --table-cell-padding-block: var(--space-xl);
+    --table-cell-padding-inline: var(--space-2xl);
+
     width: 100%;
+    color: var(--color-neutral);
+    font-size: var(--size-md);
+    line-height: var(--line-height-md);
+  }
+
+  ._scrollContainer_1s7gk_12 {
     overflow-x: auto;
   }
 
+  ._stackedContainer_1s7gk_16 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xl);
+  }
+
   /* The surface is the mode's business: `default` is a self-contained card, `bare` expects the
      consumer's own surface around it and would otherwise draw a second box inside it. */
-  ._default_hioz2_9 {
+  ._default_1s7gk_24 {
     border: 1px solid var(--color-neutral-alpha-100);
     border-radius: var(--radius-content-md);
     background-color: var(--color-white);
   }
 
-  ._bare_hioz2_15 {
+  ._bare_1s7gk_30 {
     border: none;
     border-radius: 0;
     background-color: var(--color-transparent);
   }
 
-  ._table_hioz2_21 {
-    --table-cell-padding-block: var(--space-xl);
-    --table-cell-padding-inline: var(--space-2xl);
+  /* The card draws the surface in stacked, and reads it back through these inherited properties. */
+  ._stackedContainer_1s7gk_16._default_1s7gk_24 {
+    --table-card-border: 1px solid var(--color-neutral-alpha-100);
+    --table-card-radius: var(--radius-content-md);
+    --table-row-background: var(--color-white);
 
+    border: none;
+    border-radius: 0;
+    background-color: var(--color-transparent);
+  }
+
+  ._table_1s7gk_47 {
     width: 100%;
     border-collapse: collapse;
-    color: var(--color-neutral);
-    font-size: var(--size-md);
-    line-height: var(--line-height-md);
   }
 }
 @layer ui_baza_components {
-  ._tableRow_1p3oc_2 {
+  ._tableRow_tf0oz_2 {
     & > * {
       border-bottom: 1px solid var(--color-neutral-alpha-100);
     }
@@ -2184,11 +2241,24 @@ textarea {
     }
   }
 
-  ._default_1p3oc_12 {
-    background-color: var(--color-transparent);
+  ._stackedRow_tf0oz_12 {
+    display: flex;
+    flex-direction: column;
+    padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+    gap: var(--space-md);
+    border: var(--table-card-border, none);
+    border-radius: var(--table-card-radius, 0);
+  }
+
+  ._stackedPairs_tf0oz_21 > * + * {
+    margin-top: var(--space-md);
+  }
+
+  ._default_tf0oz_25 {
+    background-color: var(--table-row-background, var(--color-transparent));
   }
 
-  ._group_1p3oc_16 {
+  ._group_tf0oz_29 {
     background-color: var(--color-neutral-40);
     color: var(--color-neutral-540);
     font-size: var(--size-sm);
@@ -2196,7 +2266,7 @@ textarea {
   }
 
   /* Keep .current below .group: both are single-class selectors, so source order decides the background of a row that is both. */
-  ._current_1p3oc_23 {
+  ._current_tf0oz_36 {
     background-color: var(--color-accent-alpha-100);
     color: var(--color-neutral);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",