ionbase-ui 0.70.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.70.0",
+  "version": "0.73.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useToast"
@@ -705,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",
@@ -752,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.70.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/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/tokens/base.css

@@ -214,14 +214,6 @@
   --information-700: #4715b2;
   --information-800: #350e8b;
   --information-900: #260769;
-  --chart-1: #286ef0;
-  --chart-2: #14994e;
-  --chart-3: #4f3cc8;
-  --chart-4: #ea5600;
-  --chart-5: #df2679;
-  --chart-6: #a97a14;
-  --chart-7: #eb3737;
-  --chart-8: #6b7280;
   --base-white: #ffffff;
   --base-black: #000000;
   --alpha-black-05: rgba(0, 0, 0, 0.05);
@@ -256,6 +248,8 @@
   --palette-1-50: #f6f8f9;
   --palette-1-200: #e5e7eb;
   --palette-1-300: #dde0e4;
+  --palette-1-400: #9ca3b0;
+  --palette-1-500: #6b7280;
   --palette-1-600: #4b5563;
   --palette-1-700: #384252;
   --palette-1-800: #1d2735;
@@ -263,6 +257,8 @@
   --palette-2-50: #ebf7ff;
   --palette-2-200: #c7e4fa;
   --palette-2-300: #9fd5f9;
+  --palette-2-400: #609cf0;
+  --palette-2-500: #286ef0;
   --palette-2-600: #1c62e3;
   --palette-2-700: #1541b2;
   --palette-2-800: #0e2d8b;
@@ -270,6 +266,8 @@
   --palette-3-50: #f6f1f8;
   --palette-3-200: #dfd4fc;
   --palette-3-300: #adadf5;
+  --palette-3-400: #9a8ff4;
+  --palette-3-500: #786cdd;
   --palette-3-600: #4f3cc8;
   --palette-3-700: #4715b2;
   --palette-3-800: #350e8b;
@@ -277,6 +275,8 @@
   --palette-4-50: #fdf2f8;
   --palette-4-200: #fbd0e8;
   --palette-4-300: #f9a9d5;
+  --palette-4-400: #f773b7;
+  --palette-4-500: #df2679;
   --palette-4-600: #c3135c;
   --palette-4-700: #a0134b;
   --palette-4-800: #881141;
@@ -284,6 +284,8 @@
   --palette-5-50: #fff6ea;
   --palette-5-200: #fedbb4;
   --palette-5-300: #fdc17c;
+  --palette-5-400: #ef8539;
+  --palette-5-500: #ea5600;
   --palette-5-600: #af3e0e;
   --palette-5-700: #8e2f07;
   --palette-5-800: #671f07;
@@ -291,6 +293,8 @@
   --palette-6-50: #f8fefc;
   --palette-6-200: #c6ebdc;
   --palette-6-300: #82d8b4;
+  --palette-6-400: #39b378;
+  --palette-6-500: #14994e;
   --palette-6-600: #0d7d38;
   --palette-6-700: #076426;
   --palette-6-800: #054d1a;
@@ -298,10 +302,21 @@
   --palette-7-50: #fef1f1;
   --palette-7-200: #fed2d2;
   --palette-7-300: #ffadad;
+  --palette-7-400: #f56b6b;
+  --palette-7-500: #eb3737;
   --palette-7-600: #c61616;
   --palette-7-700: #ad1515;
   --palette-7-800: #850e0e;
   --palette-7-900: #650a0a;
+  --palette-8-50: #fefce7;
+  --palette-8-200: #faef9e;
+  --palette-8-300: #f0dc7a;
+  --palette-8-400: #eac534;
+  --palette-8-500: #c89809;
+  --palette-8-600: #a97a14;
+  --palette-8-700: #91700d;
+  --palette-8-800: #795a0c;
+  --palette-8-900: #6f4815;
   --text-default: #131923;
   --text-secondary: #384252;
   --text-tertiary: #4b5563;
@@ -435,6 +450,19 @@
   --ring-focus: #286ef0;
   --ring-error: #eb3737;
   --ring-offset: #ffffff;
+  --chart-1: #286ef0;
+  --chart-2: #14994e;
+  --chart-3: #4f3cc8;
+  --chart-4: #ea5600;
+  --chart-5: #df2679;
+  --chart-6: #a97a14;
+  --chart-7: #eb3737;
+  --chart-8: #6b7280;
+  --chart-sequential-1: #9fd5f9;
+  --chart-sequential-2: #609cf0;
+  --chart-sequential-3: #286ef0;
+  --chart-sequential-4: #1541b2;
+  --chart-sequential-5: #071e69;
   --grid-margin: 80px;
   --grid-gutter: 24px;
   --grid-columns: 12;