ionbase-ui 0.69.0 → 0.73.0

package/dist/meta/contrast.json

@@ -9350,6 +9350,20 @@
       "ratio": 7.56,
       "min": 4.5
     },
+    {
+      "component": "stat-tile",
+      "context": "ion-stat-tile ion-stat-tile__comparison",
+      "state": "default",
+      "fg": "--text-tertiary",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#4b5563",
+      "bgHex": "#ffffff",
+      "ratio": 7.56,
+      "min": 4.5
+    },
     {
       "component": "stepper",
       "context": "ion-stepper ion-stepper__description",
@@ -10614,6 +10628,20 @@
       "ratio": 8.28,
       "min": 4.5
     },
+    {
+      "component": "stat-tile",
+      "context": "ion-stat-tile ion-stat-tile__comparison",
+      "state": "default",
+      "fg": "--text-tertiary",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#9ca3b0",
+      "bgHex": "#000000",
+      "ratio": 8.28,
+      "min": 4.5
+    },
     {
       "component": "stepper",
       "context": "ion-stepper ion-stepper__description",
@@ -11522,6 +11550,21 @@
       "ratio": 9.04,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-muted",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#f0f2f4",
+      "ratio": 9.04,
+      "min": 4.5
+    },
     {
       "component": "spinner",
       "context": "ion-spinner",
@@ -12698,6 +12741,21 @@
       "ratio": 9.53,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-page",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#f6f8f9",
+      "ratio": 9.53,
+      "min": 4.5
+    },
     {
       "component": "spinner",
       "context": "ion-spinner",
@@ -14014,6 +14072,21 @@
       "ratio": 10.15,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-default",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#ffffff",
+      "ratio": 10.15,
+      "min": 4.5
+    },
     {
       "component": "sidebar",
       "context": "ion-sidebar",
@@ -14354,6 +14427,20 @@
       "ratio": 10.15,
       "min": 4.5
     },
+    {
+      "component": "stat-tile",
+      "context": "ion-stat-tile ion-stat-tile__label",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#ffffff",
+      "ratio": 10.15,
+      "min": 4.5
+    },
     {
       "component": "stepper",
       "context": "ion-stepper ion-stepper__step",
@@ -15829,6 +15916,21 @@
       "ratio": 11.38,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-muted",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#1d2735",
+      "ratio": 11.38,
+      "min": 4.5
+    },
     {
       "component": "spinner",
       "context": "ion-spinner",
@@ -17032,6 +17134,21 @@
       "ratio": 13.31,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-page",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#131923",
+      "ratio": 13.31,
+      "min": 4.5
+    },
     {
       "component": "spinner",
       "context": "ion-spinner",
@@ -18089,6 +18206,21 @@
       "ratio": 14.14,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__label",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-muted",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#f6f8f9",
+      "bgHex": "#1d2735",
+      "ratio": 14.14,
+      "min": 4.5
+    },
     {
       "component": "stepper",
       "context": "ion-stepper ion-stepper__trigger",
@@ -18842,6 +18974,21 @@
       "ratio": 15.71,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__label",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-muted",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#131923",
+      "bgHex": "#f0f2f4",
+      "ratio": 15.71,
+      "min": 4.5
+    },
     {
       "component": "stepper",
       "context": "ion-stepper ion-stepper__trigger",
@@ -19725,6 +19872,21 @@
       "ratio": 15.86,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-default",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#000000",
+      "ratio": 15.86,
+      "min": 4.5
+    },
     {
       "component": "sidebar",
       "context": "ion-sidebar",
@@ -20065,6 +20227,20 @@
       "ratio": 15.86,
       "min": 4.5
     },
+    {
+      "component": "stat-tile",
+      "context": "ion-stat-tile ion-stat-tile__label",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#000000",
+      "ratio": 15.86,
+      "min": 4.5
+    },
     {
       "component": "stepper",
       "context": "ion-stepper ion-stepper__step",
@@ -20711,6 +20887,36 @@
       "ratio": 16.55,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__label",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-page",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#131923",
+      "bgHex": "#f6f8f9",
+      "ratio": 16.55,
+      "min": 4.5
+    },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__label",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-page",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#f6f8f9",
+      "bgHex": "#131923",
+      "ratio": 16.55,
+      "min": 4.5
+    },
     {
       "component": "stepper",
       "context": "ion-stepper ion-stepper__trigger",
@@ -21714,6 +21920,35 @@
       "ratio": 17.63,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__label",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-default",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#131923",
+      "bgHex": "#ffffff",
+      "ratio": 17.63,
+      "min": 4.5
+    },
+    {
+      "component": "stat-tile",
+      "context": "ion-stat-tile ion-stat-tile__value",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#131923",
+      "bgHex": "#ffffff",
+      "ratio": 17.63,
+      "min": 4.5
+    },
     {
       "component": "stepper",
       "context": "ion-stepper ion-stepper__trigger",
@@ -22533,6 +22768,35 @@
       "ratio": 19.71,
       "min": 4.5
     },
+    {
+      "component": "setting-row",
+      "context": "ion-setting-row ion-setting-row__label",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-default",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#f6f8f9",
+      "bgHex": "#000000",
+      "ratio": 19.71,
+      "min": 4.5
+    },
+    {
+      "component": "stat-tile",
+      "context": "ion-stat-tile ion-stat-tile__value",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#f6f8f9",
+      "bgHex": "#000000",
+      "ratio": 19.71,
+      "min": 4.5
+    },
     {
       "component": "stepper",
       "context": "ion-stepper ion-stepper__trigger",

package/dist/meta/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.69.0",
+  "version": "0.73.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useToast"
@@ -663,7 +663,12 @@
     "ScrollProgress": {
       "summary": "A compact progress rail that expands into a section list. A disclosure, not a menu — and it computes nothing itself.",
       "status": "stable",
-      "variants": {},
+      "variants": {
+        "placement": [
+          "right",
+          "left"
+        ]
+      },
       "detail": "dist/meta/ScrollProgress.json",
       "hasIntent": true
     },
@@ -700,6 +705,13 @@
       "detail": "dist/meta/Select.json",
       "hasIntent": true
     },
+    "SettingRow": {
+      "summary": "One setting: its name and description on the left, the control on the right — and the control named and described by them automatically.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/SettingRow.json",
+      "hasIntent": true
+    },
     "Sidebar": {
       "summary": "An application's navigation as a column: pinned header and footer that take any component, a scrolling body of titled, collapsible sections, and nested items that expand.",
       "status": "stable",
@@ -747,6 +759,30 @@
       "detail": "dist/meta/Spinner.json",
       "hasIntent": true
     },
+    "StatGroup": {
+      "summary": "A row of StatTiles, as a description list. Wraps on its own — no breakpoints in the caller's code.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/StatGroup.json",
+      "hasIntent": true
+    },
+    "StatTile": {
+      "summary": "One headline figure and how it moved against a comparison period. Good and bad come from `goodWhen`, never from the sign alone.",
+      "status": "stable",
+      "variants": {
+        "changeUnit": [
+          "points",
+          "percent"
+        ],
+        "goodWhen": [
+          "neutral",
+          "up",
+          "down"
+        ]
+      },
+      "detail": "dist/meta/StatTile.json",
+      "hasIntent": true
+    },
     "Stepper": {
       "summary": "Where the user is in a task that has an order. An ordered list of steps, each stating its position and status in text.",
       "status": "stable",

package/dist/meta/patterns/SettingsPanel.json

@@ -6,6 +6,7 @@
     "the settings are grouped and the groups are worth naming"
   ],
   "composes": [
+    "SettingRow",
     "Toggle",
     "Checkbox",
     "RadioGroup",
@@ -21,7 +22,7 @@
   ],
   "structure": [
     "Named groups, separated by Divider, each with a heading.",
-    "One row per setting: label and description on the left, control on the right.",
+    "One SettingRow per setting: label and description on the left, control on the right, wired together by the row.",
     "For save-on-submit panels, a save bar that appears only when something is dirty, with save and discard.",
     "Tabs for panels large enough that a single scroll is unreasonable — but never with unsaved changes hidden behind an inactive tab."
   ],

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.69.0",
+  "version": "0.73.0",
   "usage": "A pattern is a documented composition of components, not a component. Read one here, then read the contracts of what it composes.",
   "patterns": {
     "AgentRun": {
@@ -147,6 +147,7 @@
     "SettingsPanel": {
       "summary": "Grouped settings that either apply immediately or are saved together — never both in one panel.",
       "composes": [
+        "SettingRow",
         "Toggle",
         "Checkbox",
         "RadioGroup",

package/dist/styles/index.css

@@ -90,6 +90,8 @@
  */
 @import url('./date-picker.css');
 @import url('./date-range-picker.css');
+@import url('./stat-tile.css');
+@import url('./setting-row.css');
 
 /*
  * Visually hidden, but not hidden from assistive tech.

package/dist/styles/scroll-progress.css

@@ -160,13 +160,24 @@
  * very percentage the reader opened the panel to act on. Keyboard users are
  * unaffected either way: the rows are real buttons in tab order, so Tab
  * scrolls each one into view without touching the wheel.
+ *
+ * CLOSED IS `display: none`, NOT ONLY INVISIBLE
+ *
+ * `visibility: hidden` removes the panel from sight and from tab order, but a
+ * hidden box still counts toward its scroll container's overflow. A rail near
+ * the right edge of a page therefore widened the page by however far the
+ * closed panel reached past it — 152px in the demo app — and a phone scrolled
+ * sideways into empty space. `display: none` takes it out of layout entirely.
+ * The reveal survives: `transition-behavior: allow-discrete` holds `display`
+ * until the fade-out finishes, and `@starting-style` gives the fade-in a
+ * starting point. A browser without either simply shows and hides it without
+ * the fade. `visibility` stays in the transition for the same browsers.
  */
 .ion-scroll-progress__panel {
   position: absolute;
-  left: 0;
   top: 50%;
   z-index: 10;
-  display: flex;
+  display: none;
   flex-direction: column;
   gap: var(--spacing-4);
   width: 220px;
@@ -181,20 +192,47 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transform: translateY(-50%) translateX(-4px);
+  transform: translateY(-50%) translateX(var(--ion-scroll-progress-slide));
   transition:
     opacity var(--ion-duration-base) var(--ion-ease-out),
     transform var(--ion-duration-base) var(--ion-ease-out),
-    visibility var(--ion-duration-base);
+    visibility var(--ion-duration-base),
+    display var(--ion-duration-base) allow-discrete;
+}
+
+/*
+ * Placement picks the edge the panel is anchored to and the direction it
+ * slides in from — always from the rail outward. `right` is the original
+ * behaviour; `left` is for a rail against the right edge of the page, where a
+ * rightward panel would leave the screen.
+ */
+.ion-scroll-progress__panel--right {
+  --ion-scroll-progress-slide: -4px;
+
+  left: 0;
+}
+
+.ion-scroll-progress__panel--left {
+  --ion-scroll-progress-slide: 4px;
+
+  right: 0;
 }
 
 .ion-scroll-progress__panel[data-open='true'] {
+  display: flex;
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateY(-50%) translateX(0);
 }
 
+@starting-style {
+  .ion-scroll-progress__panel[data-open='true'] {
+    opacity: 0;
+    transform: translateY(-50%) translateX(var(--ion-scroll-progress-slide));
+  }
+}
+
 /*
  * `display: block`, not `flex`: `text-overflow: ellipsis` does not apply to an
  * anonymous flex item, so a flex row here would clip the label with no ellipsis

package/dist/styles/setting-row.css

@@ -0,0 +1,58 @@
+/*
+ * SettingRow
+ *
+ * Promoted from the demo app's settings screen: the name and description on the
+ * left in `text/default` and `text/secondary`, the control on the right, 16px
+ * apart. The label is the Body/Default Semibold rung, the description a step
+ * down on body-sm.
+ *
+ * IT STACKS BY ITS OWN WIDTH
+ *
+ * The demo stacked the row below a 767px VIEWPORT, which is the wrong question:
+ * a settings row in a 360px drawer on a desktop is just as cramped as one on a
+ * phone. The row is a size container and the inner flex reads it, so it stacks
+ * wherever it is narrow. Container queries apply to descendants only, which is
+ * why there is an `__inner` at all.
+ */
+.ion-setting-row {
+  container-type: inline-size;
+  font-family: var(--font-family-sans);
+}
+
+.ion-setting-row__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+}
+
+.ion-setting-row__text {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.ion-setting-row__label {
+  color: var(--text-default);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ion-setting-row__description {
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-setting-row__control {
+  flex-shrink: 0;
+}
+
+@container (width < 30rem) {
+  .ion-setting-row__inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+  }
+}

package/dist/styles/stat-tile.css

@@ -0,0 +1,66 @@
+/*
+ * StatTile, StatGroup
+ *
+ * Promoted from the demo app's Overview KPI row, where the measurements were
+ * settled against a real dashboard rather than invented here: a card on
+ * `surface/default` with a `border/subtle` rule and the `lg` radius, the label
+ * a rung down in `text/secondary`, the figure on the h4 rung, and the change as
+ * a small Badge beside a caption.
+ *
+ * THE GRID NEEDS NO BREAKPOINT
+ *
+ * `auto-fit` with a minimum tile width wraps on its own: four tiles in a row on
+ * a desktop, two on a phone. The minimum is `min(100%, 10rem)` so a single tile
+ * in a container narrower than 10rem shrinks instead of overflowing it.
+ */
+.ion-stat-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+  gap: var(--spacing-12);
+  margin: 0;
+}
+
+.ion-stat-tile {
+  display: grid;
+  align-content: start;
+  gap: var(--spacing-8);
+  padding: var(--spacing-16);
+  border: var(--border-width-default) solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background-color: var(--surface-default);
+  font-family: var(--font-family-sans);
+}
+
+.ion-stat-tile__label {
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-stat-tile__body {
+  display: grid;
+  gap: var(--spacing-6);
+  margin: 0;
+}
+
+/* Tabular figures, so a row of tiles lines its digits up as values change. */
+.ion-stat-tile__value {
+  color: var(--text-default);
+  font-size: var(--type-h4);
+  line-height: var(--type-h4-line-height);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+.ion-stat-tile__change {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-6);
+}
+
+.ion-stat-tile__comparison {
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+}

package/dist/styles/table.css

@@ -30,7 +30,16 @@
  * assuming "MIXED" meant "top and bottom". One `border-bottom`, not a
  * 4-sided border that needs collapsing.
  */
+
+/*
+ * `position: relative` makes the scroll container a containing block. Without
+ * it, absolutely positioned content in a cell — the selection checkbox's real
+ * input, `.ion-visually-hidden` text, avatar media — is placed against the
+ * nearest positioned ancestor outside the table, escapes `overflow-x`, and
+ * widens the page: 382px of sideways scroll on a 390px phone in the demo app.
+ */
 .ion-table-container {
+  position: relative;
   width: 100%;
   overflow-x: auto;
   border: var(--border-width-default) solid var(--border-default);