ionbase-ui 0.5.0 → 0.6.0

package/README.md

@@ -9,6 +9,8 @@ npm i ionbase-ui
 
 React 18 or 19 is a peer dependency.
 
+**[Browse every component in Storybook →](https://raza-ahmed.github.io/ionbase-design-system/)**
+
 ## Usage
 
 Import the stylesheet once, at your app entry:

package/dist/components/Header.d.ts

@@ -1,22 +1,54 @@
 import React from 'react';
-export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+export interface HeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {
     /** Figma's Logo slot. Rendered at the start, never shrinks. */
     brand?: React.ReactNode;
-    /** Figma's `Center Slot`. Hidden below 1216px, as in the Tablet and Mobile variants. */
+    /** Figma's `Center Slot` — nav items. Inline on Desktop and Tablet; moves
+     *  into the Mobile-Open menu below the mobile breakpoint. */
     center?: React.ReactNode;
-    /** Figma's `End Slot`. */
+    /** Figma's `End Slot` — buttons and actions. Same placement rules as `center`. */
     end?: React.ReactNode;
+    /** Controlled Mobile-Open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Initial Mobile-Open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Fires whenever the menu toggle changes the state, controlled or not. */
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name for the mobile menu toggle. */
+    menuLabel?: string;
     children?: React.ReactNode;
 }
 /**
- * Header renders Figma's three Device variants through media queries, not a
- * prop.
- *
- * Device is the one variant axis in the system the browser already knows the
- * answer to. Every other component takes its variant from the caller because
- * the caller is the only one who knows; a header is Mobile because the viewport
- * is narrow, and having React duplicate that judgement is how the two drift
- * apart. Breakpoints match the Breakpoint collection's container widths.
+ * Header renders Figma's four Device variants — Desktop, Tablet,
+ * Mobile-Closed, Mobile-Open — from one DOM tree.
+ *
+ * TWO AXES, AND THEY ARE NOT THE SAME KIND OF THING
+ *
+ * Figma spells Device as a single four-way variant, but it is really two: a
+ * *breakpoint* (Desktop / Tablet / Mobile) and a *state* (Closed / Open). They
+ * are modelled differently here because they are known by different people.
+ *
+ *   Breakpoint is a media query. It is the one variant axis in the system the
+ *   browser already knows the answer to — a header is Mobile because the
+ *   viewport is narrow — and having React duplicate that judgement is how the
+ *   two drift apart. Breakpoints match the Breakpoint collection's container
+ *   widths: Tablet below 1216, Mobile below 896.
+ *
+ *   Open/Closed is a prop, because only the caller knows. It follows the
+ *   controlled/uncontrolled pair the rest of the system uses.
+ *
+ * ONE TREE, TWO LAYOUTS
+ *
+ * `center` and `end` sit inline in the bar on Desktop and Tablet, and inside
+ * the dropped Menu-Container on Mobile-Open. They are rendered once, in one
+ * wrapper, which is `display: contents` above the mobile breakpoint and an
+ * absolutely positioned panel below it. Rendering them twice — or moving them
+ * with JavaScript — would mean the same nav link exists twice in the
+ * accessibility tree, and would reset any state a caller put in a slot every
+ * time the viewport crossed 896px.
+ *
+ * The centre slot is no longer hidden on Tablet. Figma's Tablet variant ships
+ * it populated; the previous release collapsed it, which was correct for the
+ * previous design and is not for this one.
  *
  * A `<header>` element with no explicit role: it is a landmark already when it
  * is a direct child of body, which is where a page header sits.

package/dist/components/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wFAAwF;IACxF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0BAA0B;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,iFAkBlB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA2BxE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,CACX;IACC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;iEAC6D;IAC7D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kFAAkF;IAClF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,iFAwElB,CAAC"}

package/dist/components/Header.js

@@ -1,18 +1,70 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, useId, useState } from 'react';
+/** Figma's `Icon` on the Mobile-Closed toggle. Inlined for the same reason
+ *  NavItem's chevron is: it is part of the control, not a slot a caller fills. */
+const MenuGlyph = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M3 6h18M3 12h18M3 18h18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+/** Figma's `Icon` on the Mobile-Open toggle. */
+const CloseGlyph = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m5 5 14 14M19 5 5 19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 /**
- * Header renders Figma's three Device variants through media queries, not a
- * prop.
+ * Header renders Figma's four Device variants — Desktop, Tablet,
+ * Mobile-Closed, Mobile-Open — from one DOM tree.
  *
- * Device is the one variant axis in the system the browser already knows the
- * answer to. Every other component takes its variant from the caller because
- * the caller is the only one who knows; a header is Mobile because the viewport
- * is narrow, and having React duplicate that judgement is how the two drift
- * apart. Breakpoints match the Breakpoint collection's container widths.
+ * TWO AXES, AND THEY ARE NOT THE SAME KIND OF THING
+ *
+ * Figma spells Device as a single four-way variant, but it is really two: a
+ * *breakpoint* (Desktop / Tablet / Mobile) and a *state* (Closed / Open). They
+ * are modelled differently here because they are known by different people.
+ *
+ *   Breakpoint is a media query. It is the one variant axis in the system the
+ *   browser already knows the answer to — a header is Mobile because the
+ *   viewport is narrow — and having React duplicate that judgement is how the
+ *   two drift apart. Breakpoints match the Breakpoint collection's container
+ *   widths: Tablet below 1216, Mobile below 896.
+ *
+ *   Open/Closed is a prop, because only the caller knows. It follows the
+ *   controlled/uncontrolled pair the rest of the system uses.
+ *
+ * ONE TREE, TWO LAYOUTS
+ *
+ * `center` and `end` sit inline in the bar on Desktop and Tablet, and inside
+ * the dropped Menu-Container on Mobile-Open. They are rendered once, in one
+ * wrapper, which is `display: contents` above the mobile breakpoint and an
+ * absolutely positioned panel below it. Rendering them twice — or moving them
+ * with JavaScript — would mean the same nav link exists twice in the
+ * accessibility tree, and would reset any state a caller put in a slot every
+ * time the viewport crossed 896px.
+ *
+ * The centre slot is no longer hidden on Tablet. Figma's Tablet variant ships
+ * it populated; the previous release collapsed it, which was correct for the
+ * previous design and is not for this one.
  *
  * A `<header>` element with no explicit role: it is a landmark already when it
  * is a direct child of body, which is where a page header sits.
  */
-export const Header = forwardRef(({ brand, center, end, className, children, ...rest }, ref) => (_jsxs("header", { ...rest, ref: ref, className: ['ion-header', className].filter(Boolean).join(' '), children: [brand && _jsx("div", { className: "ion-header__brand", children: brand }), _jsx("div", { className: "ion-header__center", children: center }), children, end && _jsx("div", { className: "ion-header__end", children: end })] })));
+export const Header = forwardRef(({ brand, center, end, open: openProp, defaultOpen = false, onOpenChange, menuLabel = 'Menu', className, children, ...rest }, ref) => {
+    const menuId = useId();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const isOpen = isControlled ? openProp : uncontrolledOpen;
+    const toggle = useCallback(() => {
+        const next = !isOpen;
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    /*
+     * Escape closes the menu. It is a disclosure rather than a modal — no focus
+     * trap, no scroll lock — so Escape is the whole of the dismissal contract,
+     * and it is handled on the header rather than the document so a header that
+     * is never open never listens.
+     */
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape' && isOpen)
+            toggle();
+        rest.onKeyDown?.(event);
+    };
+    return (_jsxs("header", { ...rest, onKeyDown: handleKeyDown, ref: ref, "data-open": isOpen || undefined, className: ['ion-header', className].filter(Boolean).join(' '), children: [brand && _jsx("div", { className: "ion-header__brand", children: brand }), _jsxs("div", { className: "ion-header__menu", id: menuId, children: [_jsx("div", { className: "ion-header__center", children: center }), _jsx("div", { className: "ion-header__end", children: end })] }), children, _jsx("button", { type: "button", className: "ion-header__toggle", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": menuLabel, onClick: toggle, children: isOpen ? _jsx(CloseGlyph, {}) : _jsx(MenuGlyph, {}) })] }));
+});
 Header.displayName = 'Header';
 //# sourceMappingURL=Header.js.map

package/dist/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAY1C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7D,qBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAE7D,KAAK,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAO,EAM1D,cAAK,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAO,EACjD,QAAQ,EACR,GAAG,IAAI,cAAK,SAAS,EAAC,iBAAiB,YAAE,GAAG,GAAO,IAC7C,CACV,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"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"}

package/dist/styles/header.css

@@ -1,31 +1,46 @@
 /*
  * Header
  *
- * Measured from Figma `Header` (70:22088). Three device variants:
+ * Measured from Figma `Header` (69:335). Four Device variants, two axes:
  *
- *   Desktop  56 tall, padding 8 / 64, end-slot gap 12
- *   Tablet   64 tall, padding 12 / 32, end-slot gap 8
- *   Mobile   64 tall, padding 12 / 16, end-slot gap 8
+ *   Desktop        56 tall, padding  8 / 64, end-slot gap 12
+ *   Tablet         56 tall, padding  8 / 24, end-slot gap  8
+ *   Mobile-Closed  64 tall, padding 12 / 16, toggle only
+ *   Mobile-Open    as Mobile-Closed, plus the dropped Menu-Container
  *
- * WHY THIS IS MEDIA QUERIES AND NOT A PROP
+ * WHY DEVICE IS A MEDIA QUERY AND OPEN IS A PROP
  *
- * Device is the one variant axis in the whole system that the browser already
- * knows the answer to. Every other component takes its variant from the caller
+ * Device is the one variant axis in the whole system the browser already knows
+ * the answer to. Every other component takes its variant from the caller
  * because the caller is the only one who knows; a header is Mobile because the
  * viewport is narrow, and asking React to duplicate that is how the two get out
- * of step. The breakpoints match the Breakpoint collection's own container
- * widths — Tablet below 1216, Mobile below 896.
+ * of step. Breakpoints match the Breakpoint collection's own container widths —
+ * Tablet below 1216, Mobile below 896.
  *
- * Note the header is taller on Tablet and Mobile than on Desktop (64 vs 56).
+ * Open/Closed is the opposite: nothing in CSS knows it, so it is a prop, and it
+ * arrives here as `[data-open]`.
+ *
+ * Note the header is taller on Mobile (64) than on Desktop and Tablet (56).
  * That looks inverted but is deliberate in the design: touch targets need the
  * height more than the desktop pointer does.
+ *
+ * ONE TREE, TWO LAYOUTS
+ *
+ * `__menu` is `display: contents` above the mobile breakpoint, so `__center`
+ * and `__end` are flex items of the bar itself; below it, the same element
+ * becomes the absolutely positioned Menu-Container. The slots are therefore
+ * rendered once, never duplicated across breakpoints.
  */
 .ion-header {
-  --ion-header-height: var(--spacing-64);
-  --ion-header-padding-y: var(--spacing-12);
-  --ion-header-padding-x: var(--spacing-16);
-  --ion-header-end-gap: var(--spacing-8);
+  /* Desktop is the base; the two narrower breakpoints override downward, so a
+   * new rung is added in one place rather than three. */
+  --ion-header-height: calc(var(--spacing-48) + var(--spacing-8)); /* 56 */
+  --ion-header-padding-y: var(--spacing-8);
+  --ion-header-padding-x: var(--spacing-64);
+  --ion-header-center-gap: var(--spacing-8);
+  --ion-header-end-gap: var(--spacing-12);
 
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -43,20 +58,18 @@
   font-family: var(--font-family-sans);
 }
 
-@media (width >= 896px) {
+@media (width < 1216px) {
   .ion-header {
-    --ion-header-padding-x: var(--spacing-32);
+    --ion-header-padding-x: var(--spacing-24);
+    --ion-header-end-gap: var(--spacing-8);
   }
 }
 
-@media (width >= 1216px) {
+@media (width < 896px) {
   .ion-header {
-    /* 56 is off the spacing scale (it jumps 48 -> 64), so it is stated as
-     * arithmetic on two rungs rather than as a literal. */
-    --ion-header-height: calc(var(--spacing-64) - var(--spacing-8));
-    --ion-header-padding-y: var(--spacing-8);
-    --ion-header-padding-x: var(--spacing-64);
-    --ion-header-end-gap: var(--spacing-12);
+    --ion-header-height: var(--spacing-64);
+    --ion-header-padding-y: var(--spacing-12);
+    --ion-header-padding-x: var(--spacing-16);
   }
 }
 
@@ -69,27 +82,117 @@
 }
 
 /*
- * The centre slot is hidden on Tablet and Mobile in Figma — both variants ship
- * it collapsed to zero. It is display:none rather than visibility:hidden so it
- * does not hold width the narrow layouts do not have.
+ * Above the mobile breakpoint the wrapper contributes no box of its own — its
+ * two children are laid out by the bar. `display: contents` is what makes the
+ * single-tree approach possible; without it the slots would need to be either
+ * duplicated or moved by script.
  */
+.ion-header__menu {
+  display: contents;
+}
+
 .ion-header__center {
-  display: none;
+  display: flex;
   align-items: center;
-  gap: var(--spacing-8);
-  flex: 1 1 auto;
+  gap: var(--ion-header-center-gap);
   min-width: 0;
 }
 
-@media (width >= 1216px) {
-  .ion-header__center {
-    display: flex;
-  }
-}
-
 .ion-header__end {
   display: flex;
   align-items: center;
   gap: var(--ion-header-end-gap);
   flex-shrink: 0;
 }
+
+/*
+ * The Mobile-Closed / Mobile-Open toggle. Figma builds it from the Icon Button
+ * component (Secondary, Small, Square) but the Header owns the instance, so the
+ * geometry is stated here rather than reached for across components: 32 square,
+ * radius/sm, 16px icon.
+ */
+.ion-header__toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-32);
+  height: var(--spacing-32);
+  padding: 0;
+  color: var(--icon-default);
+  background-color: var(--surface-default);
+  border: var(--border-width-default) solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ion-shadow-raised-lifted-xs);
+  cursor: pointer;
+}
+
+.ion-header__toggle > svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.ion-header__toggle:focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: var(--spacing-2);
+}
+
+@media (width < 896px) {
+  .ion-header__toggle {
+    display: inline-flex;
+  }
+
+  /*
+   * Menu-Container. Figma places it at y=67 against a 64-tall bar — a 3px nudge
+   * that is on no scale and matches no token, so it is anchored flush to the
+   * bar's bottom edge instead. Nothing else in the design depends on the gap.
+   */
+  .ion-header__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+    width: 100%;
+    padding: var(--spacing-12) var(--spacing-8);
+    background-color: var(--surface-default);
+    border: var(--border-width-default) solid var(--border-default);
+    border-radius: var(--radius-md);
+  }
+
+  .ion-header[data-open] .ion-header__menu {
+    display: flex;
+  }
+
+  .ion-header:not([data-open]) .ion-header__menu {
+    display: none;
+  }
+
+  /* Both slots stack full width inside the panel; the end slot keeps its row
+   * but shares the width evenly, as the two buttons do in Figma. */
+  .ion-header__center {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .ion-header__end {
+    width: 100%;
+  }
+
+  .ion-header__end > * {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * Forced-colors: box-shadow is dropped by the OS, so the toggle would lose its
+ * only edge. A border in ButtonText keeps it visible.
+ */
+@media (forced-colors: active) {
+  .ion-header__toggle {
+    border-color: ButtonText;
+  }
+}

package/dist/styles/tokens/base.css

@@ -108,6 +108,28 @@
   --spacing-80: 80px;
   --spacing-96: 96px;
   --spacing-128: 128px;
+  --scale-0: 0px;
+  --scale-1: 1px;
+  --scale-2: 2px;
+  --scale-4: 4px;
+  --scale-6: 6px;
+  --scale-8: 8px;
+  --scale-10: 10px;
+  --scale-12: 12px;
+  --scale-14: 14px;
+  --scale-16: 16px;
+  --scale-20: 20px;
+  --scale-24: 24px;
+  --scale-32: 32px;
+  --scale-full: 9999px;
+  --font-family-host-grotesk: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-family-space-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-family-merriweather: Merriweather, Georgia, "Times New Roman", serif;
+  --font-family-stix-two-text: "STIX Two Text", Georgia, "Times New Roman", serif;
+  --font-family-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-family-serif: Merriweather, Georgia, "Times New Roman", serif;
+  --font-family-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-family-serif-display: "STIX Two Text", Georgia, "Times New Roman", serif;
   --font-size-12: 12px;
   --font-size-14: 14px;
   --font-size-16: 16px;
@@ -122,14 +144,6 @@
   --font-size-56: 56px;
   --font-size-64: 64px;
   --font-size-72: 72px;
-  --font-family-host-grotesk: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
-  --font-family-merriweather: Merriweather, Georgia, "Times New Roman", serif;
-  --font-family-space-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  --font-family-stix-two-text: "STIX Two Text", Georgia, "Times New Roman", serif;
-  --font-family-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
-  --font-family-serif: Merriweather, Georgia, "Times New Roman", serif;
-  --font-family-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  --font-family-serif-display: "STIX Two Text", Georgia, "Times New Roman", serif;
   --font-weight-400: 400;
   --font-weight-500: 500;
   --font-weight-600: 600;
@@ -138,20 +152,6 @@
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
-  --scale-0: 0px;
-  --scale-1: 1px;
-  --scale-2: 2px;
-  --scale-4: 4px;
-  --scale-6: 6px;
-  --scale-8: 8px;
-  --scale-10: 10px;
-  --scale-12: 12px;
-  --scale-14: 14px;
-  --scale-16: 16px;
-  --scale-20: 20px;
-  --scale-24: 24px;
-  --scale-32: 32px;
-  --scale-full: 9999px;
   --primary-50: #ebf7ff;
   --primary-100: #e2f1fd;
   --primary-200: #c7e4fa;
@@ -260,7 +260,7 @@
   --text-primary: #1c62e3;
   --text-error: #ba1c1c;
   --text-success: #0d7d38;
-  --text-warning: #8e2f07;
+  --text-warning: #af3e0e;
   --text-information: #4715b2;
   --text-link: #1541b2;
   --text-link-hover: #0e2d8b;
@@ -271,6 +271,7 @@
   --icon-secondary: #384252;
   --icon-tertiary: #4b5563;
   --icon-disabled: #6b7280;
+  --icon-placeholder: #9ca3b0;
   --icon-on-color: #ffffff;
   --icon-inverse: #f6f8f9;
   --icon-primary: #1c62e3;

package/dist/styles/tokens/elevation.css

@@ -34,19 +34,19 @@
     0px 8px 8px -4px rgb(0 0 0 / 4%);
 
   --ion-shadow-raised-lifted-xs:
-    inset 0px -2px 1px 0px rgb(0 0 0 / 25%),
+    inset 0px -2px 1px 0px rgb(0 0 0 / 12%),
     inset 0px 2px 1px 0px rgb(255 255 255 / 20%),
     0px 1px 1px 0px rgb(7 10 13 / 6%),
     0px 1px 2px 0px rgb(7 10 13 / 4%);
 
   --ion-shadow-raised-lifted-sm:
-    inset 0px -3px 1px 0px rgb(0 0 0 / 25%),
+    inset 0px -3px 1px 0px rgb(0 0 0 / 15%),
     inset 0px 3px 1px 0px rgb(255 255 255 / 20%),
     0px 1px 2px 0px rgb(7 10 13 / 8%),
     0px 2px 4px 0px rgb(7 10 13 / 5%);
 
   --ion-shadow-raised-lifted-lg:
-    inset 0px -4px 2px 0px rgb(0 0 0 / 25%),
+    inset 0px -4px 2px 0px rgb(0 0 0 / 20%),
     inset 0px 4px 2px 0px rgb(255 255 255 / 20%),
     0px 1px 1px 0px rgb(7 10 13 / 32%),
     0px 1px 2px 0px rgb(7 10 13 / 16%);
@@ -74,15 +74,15 @@
     0px 2px 6px 0px rgb(7 10 13 / 20%);
 
   --ion-shadow-raised-flush-xs:
-    inset 0px -2px 1px 0px rgb(0 0 0 / 25%),
+    inset 0px -2px 1px 0px rgb(0 0 0 / 12%),
     inset 0px 2px 1px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-sm:
-    inset 0px -3px 1px 0px rgb(0 0 0 / 25%),
+    inset 0px -3px 1px 0px rgb(0 0 0 / 15%),
     inset 0px 3px 1px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-lg:
-    inset 0px -4px 2px 0px rgb(0 0 0 / 25%),
+    inset 0px -4px 2px 0px rgb(0 0 0 / 20%),
     inset 0px 4px 2px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-xl:

package/dist/styles/tokens/theme-dark.css

@@ -6,7 +6,7 @@
   --text-default: #f6f8f9;
   --text-secondary: #dde0e4;
   --text-tertiary: #9ca3b0;
-  --text-placeholder: #6b7280;
+  --text-placeholder: #4b5563;
   --text-on-color: #000000;
   --text-inverse: #131923;
   --text-primary: #609cf0;
@@ -22,6 +22,7 @@
   --icon-default: #f0f2f4;
   --icon-secondary: #dde0e4;
   --icon-tertiary: #9ca3b0;
+  --icon-placeholder: #4b5563;
   --icon-inverse: #131923;
   --icon-primary: #609cf0;
   --icon-error: #f56b6b;

package/dist/styles/tokens/typography.css

@@ -14,14 +14,14 @@
 }
 
 .ion-text-h1 {
-  font-family: var(--font-family-serif-display);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-weight-semibold);
   font-size: var(--type-h1);
   line-height: var(--type-h1-line-height);
 }
 
 .ion-text-h2 {
-  font-family: var(--font-family-serif-display);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-weight-semibold);
   font-size: var(--type-h2);
   line-height: var(--type-h2-line-height);
@@ -85,7 +85,7 @@
 
 .ion-text-caption {
   font-family: var(--font-family-sans);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
   font-size: var(--type-caption);
   line-height: var(--type-caption-line-height);
 }