@hirobius/design-system 0.21.0 → 0.23.0

package/dist/types/src/app/components/tag.d.ts

@@ -5,7 +5,7 @@
  * @usage Show an interactive filter or category chip that people can toggle.
  * @whenNot A read-only status or count label.
  * @useInstead Badge a read-only status or count
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=32-11
  *
  * The outer <button> carries the accessible 44px hit target directly via the
  * size token while the inner pill keeps the visible surface compact. Colors

package/dist/types/src/app/components/text.d.ts

@@ -3,7 +3,7 @@
  *
  * @category Typography
  * @tier primitive
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2022-31
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2022-31
  * @usage Set any text on the type ramp, with the element chosen by `as`.
  * @whenNot Navigation links, or a keyboard hint.
  * @useInstead InlineLink a link inside body copy

package/dist/types/src/app/components/textarea.d.ts

@@ -5,7 +5,7 @@
  * @usage Collect multi-line free text such as a message, note or description.
  * @whenNot A single line of text, or choosing from a list.
  * @useInstead Input a single line of text
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-14
  *
  * Mirrors Input's shell + token skin as a native `<textarea>`. Figma parity:
  * the four states Default / Focus / Error / Disabled map to the focus-ring,

package/dist/types/src/app/components/timestamp.d.ts

@@ -2,7 +2,7 @@
  * Timestamp — renders a date/time as a semantic <time> element.
  * @category Display
  * @tier primitive
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2031-11
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2031-11
  */
 import * as React from 'react';
 /** @public */

package/dist/types/src/app/components/toast.d.ts

@@ -6,7 +6,7 @@
  * @whenNot A message people must act on or that must stay next to its content.
  * @useInstead Alert a message that stays next to its content
  * @useInstead Dialog a message that needs a decision
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-367
  * @doc-exempt: no Overlays/Feedback-overlay doc page yet — add demo when created
  *
  * Imperative API: wrap the app once in <ToastProvider>, then call

package/dist/types/src/app/components/toggle.d.ts

@@ -6,7 +6,7 @@
  * @whenNot A choice that only takes effect after submitting a form, or picking from several options.
  * @useInstead Checkbox a form option confirmed on submit
  * @useInstead Radio one choice from a set
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=37-19
  */
 import type { InputHTMLAttributes } from 'react';
 /** Toggle — boolean on/off toggle with animated thumb. */

package/dist/types/src/app/context/hds-theme.d.ts

@@ -16,7 +16,7 @@
  *   theme    data-theme                "dark" (light = unset)          light
  *   density  data-density              "compact" (comfortable = unset) comfortable
  *   brand    data-brand + data-tenant  overlay slug (e.g. "acme")      base
- *   font     --hds-font-family(-mono)  any CSS font-family value       Satoshi / Geist Mono
+ *   font     --hds-font-family(-mono)  any CSS font-family value       Satoshi / IBM Plex Mono
  *
  * This provider is a thin, typed convenience that renders a `data-hds` scope
  * wrapper carrying those attributes — it does NOT own state, storage, or a

package/dist/types/src/app/design-system/generated-token-refs.d.ts

@@ -55,6 +55,19 @@ export declare const tokenRefs: {
                 readonly "700": "var(--primitive-color-green-700)";
                 readonly "950": "var(--primitive-color-green-950)";
             };
+            readonly apple: {
+                readonly "50": "var(--primitive-color-apple-50)";
+                readonly "100": "var(--primitive-color-apple-100)";
+                readonly "200": "var(--primitive-color-apple-200)";
+                readonly "300": "var(--primitive-color-apple-300)";
+                readonly "400": "var(--primitive-color-apple-400)";
+                readonly "500": "var(--primitive-color-apple-500)";
+                readonly "600": "var(--primitive-color-apple-600)";
+                readonly "700": "var(--primitive-color-apple-700)";
+                readonly "800": "var(--primitive-color-apple-800)";
+                readonly "900": "var(--primitive-color-apple-900)";
+                readonly "950": "var(--primitive-color-apple-950)";
+            };
             readonly violet: {
                 readonly "50": "var(--primitive-color-violet-50)";
                 readonly "400": "var(--primitive-color-violet-400)";

package/dist/types/src/app/design-system/generated-token-values.d.ts

@@ -56,6 +56,19 @@ export declare const tokenValues: {
                 readonly "700": "#047857";
                 readonly "950": "#022c22";
             };
+            readonly apple: {
+                readonly "50": "#f2faeb";
+                readonly "100": "#e2f3cf";
+                readonly "200": "#c7e7a4";
+                readonly "300": "#a6d873";
+                readonly "400": "#85c84c";
+                readonly "500": "#66b239";
+                readonly "600": "#54922d";
+                readonly "700": "#416f20";
+                readonly "800": "#34571b";
+                readonly "900": "#2b4518";
+                readonly "950": "#16250c";
+            };
             readonly violet: {
                 readonly "50": "#f5f3ff";
                 readonly "400": "#a78bfa";
@@ -136,7 +149,7 @@ export declare const tokenValues: {
             readonly family: {
                 readonly primary: readonly ["Satoshi", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"];
                 readonly display: readonly ["Satoshi", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"];
-                readonly mono: readonly ["Geist Mono", "Courier New", "monospace"];
+                readonly mono: readonly ["IBM Plex Mono", "Courier New", "monospace"];
             };
             readonly size: {
                 readonly xs: "12px";

package/dist/types/src/app/hooks/useInteractionState.d.ts

@@ -6,7 +6,13 @@ export interface InteractionHandlers {
     onPointerDown: () => void;
     onPointerUp: () => void;
     onPointerCancel: () => void;
-    onFocus: () => void;
+    /**
+     * Pass the focused element (`e.currentTarget`) so only keyboard-modality focus
+     * (`:focus-visible`) counts. Called with no argument it counts unconditionally.
+     */
+    onFocus: (target?: Element | null) => void;
+    /** Re-checks `:focus-visible` once a key is pressed on an already-focused element. */
+    onKeyDown: (target?: Element | null) => void;
     onBlur: () => void;
 }
 export interface InteractionState {

package/dist/types/src/index.d.ts

@@ -204,6 +204,53 @@ export declare const tokens: {
                 };
                 $description: string;
             };
+            apple: {
+                "50": {
+                    $value: string;
+                    $description: string;
+                };
+                "100": {
+                    $value: string;
+                    $description: string;
+                };
+                "200": {
+                    $value: string;
+                    $description: string;
+                };
+                "300": {
+                    $value: string;
+                    $description: string;
+                };
+                "400": {
+                    $value: string;
+                    $description: string;
+                };
+                "500": {
+                    $value: string;
+                    $description: string;
+                };
+                "600": {
+                    $value: string;
+                    $description: string;
+                };
+                "700": {
+                    $value: string;
+                    $description: string;
+                };
+                "800": {
+                    $value: string;
+                    $description: string;
+                };
+                "900": {
+                    $value: string;
+                    $description: string;
+                };
+                "950": {
+                    $value: string;
+                    $description: string;
+                };
+                $description: string;
+            };
             violet: {
                 "50": {
                     $value: string;
@@ -726,14 +773,20 @@ export declare const tokens: {
                 $description: string;
             };
             elastic: {
-                $type: string;
-                $value: {
-                    type: string;
-                    stiffness: number;
-                    damping: number;
-                    mass: number;
-                };
+                $value: number[];
                 $description: string;
+                $extensions: {
+                    "com.hirobius.hds": {
+                        $type: string;
+                        $value: {
+                            type: string;
+                            stiffness: number;
+                            damping: number;
+                            mass: number;
+                        };
+                        bezierSource: string;
+                    };
+                };
             };
         };
         shadow: {
@@ -1014,31 +1067,52 @@ export declare const tokens: {
     semantic: {
         motion: {
             $type: string;
+            $extensions: {
+                "com.hirobius.hds": {
+                    $type: string;
+                };
+            };
             productive: {
                 $value: {
                     duration: string;
-                    easing: string;
+                    delay: {
+                        value: number;
+                        unit: string;
+                    };
+                    timingFunction: string;
                 };
                 $description: string;
             };
             expressive: {
                 $value: {
                     duration: string;
-                    easing: string;
+                    delay: {
+                        value: number;
+                        unit: string;
+                    };
+                    timingFunction: string;
                 };
                 $description: string;
             };
             spatial: {
                 $value: {
                     duration: string;
-                    easing: string;
+                    delay: {
+                        value: number;
+                        unit: string;
+                    };
+                    timingFunction: string;
                 };
                 $description: string;
             };
             exit: {
                 $value: {
                     duration: string;
-                    easing: string;
+                    delay: {
+                        value: number;
+                        unit: string;
+                    };
+                    timingFunction: string;
                 };
                 $description: string;
             };
@@ -2015,38 +2089,58 @@ export declare const tokens: {
             };
         };
         elevation: {
-            $type: string;
-            flat: {
-                $value: {
-                    surface: string;
-                    shadow: null;
-                    border: string;
+            $extensions: {
+                "com.hirobius.hds": {
+                    $type: string;
                 };
+            };
+            flat: {
                 $description: string;
+                $extensions: {
+                    "com.hirobius.hds": {
+                        $value: {
+                            surface: string;
+                            shadow: null;
+                            border: string;
+                        };
+                    };
+                };
             };
             raised: {
-                $value: {
-                    surface: string;
-                    shadow: string;
-                    border: null;
-                };
                 $description: string;
+                $extensions: {
+                    "com.hirobius.hds": {
+                        $value: {
+                            surface: string;
+                            shadow: string;
+                            border: null;
+                        };
+                    };
+                };
             };
             floating: {
-                $value: {
-                    surface: string;
-                    shadow: string;
-                    border: null;
-                };
                 $description: string;
+                $extensions: {
+                    "com.hirobius.hds": {
+                        $value: {
+                            surface: string;
+                            shadow: string;
+                            border: null;
+                        };
+                    };
+                };
             };
             overlay: {
-                $value: {
-                    surface: string;
-                    shadow: string;
-                    border: null;
-                };
                 $description: string;
+                $extensions: {
+                    "com.hirobius.hds": {
+                        $value: {
+                            surface: string;
+                            shadow: string;
+                            border: null;
+                        };
+                    };
+                };
             };
         };
         size: {

package/dist/variables.css

@@ -48,6 +48,17 @@
   --primitive-color-green-400: #34d399;
   --primitive-color-green-700: #047857;
   --primitive-color-green-950: #022c22;
+  --primitive-color-apple-50: #f2faeb;
+  --primitive-color-apple-100: #e2f3cf;
+  --primitive-color-apple-200: #c7e7a4;
+  --primitive-color-apple-300: #a6d873;
+  --primitive-color-apple-400: #85c84c;
+  --primitive-color-apple-500: #66b239;
+  --primitive-color-apple-600: #54922d;
+  --primitive-color-apple-700: #416f20;
+  --primitive-color-apple-800: #34571b;
+  --primitive-color-apple-900: #2b4518;
+  --primitive-color-apple-950: #16250c;
   --primitive-color-violet-50: #f5f3ff;
   --primitive-color-violet-400: #a78bfa;
   --primitive-color-violet-700: #6d28d9;
@@ -107,7 +118,7 @@
   --primitive-radius-full: 9999px;
   --primitive-typography-family-primary: Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --primitive-typography-family-display: Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --primitive-typography-family-mono: "Geist Mono", "Courier New", monospace;
+  --primitive-typography-family-mono: "IBM Plex Mono", "Courier New", monospace;
   --primitive-typography-size-xs: 12px;
   --primitive-typography-size-sm: 14px;
   --primitive-typography-size-base: 16px;
@@ -197,8 +208,8 @@
   --semantic-color-surface-overlay: var(--primitive-color-neutral-100);
   --semantic-color-surface-scrim: var(--primitive-color-neutral-900);
   --semantic-color-surface-inverse: var(--primitive-color-neutral-black);
-  --semantic-color-surface-accent: var(--primitive-color-neutral-900);
-  --semantic-color-surface-accentSubtle: var(--primitive-color-neutral-100);
+  --semantic-color-surface-accent: var(--primitive-color-apple-500);
+  --semantic-color-surface-accentSubtle: var(--primitive-color-apple-50);
   --semantic-color-surface-hover: var(--primitive-color-neutral-100);
   --semantic-color-surface-pressed: var(--primitive-color-neutral-50);
   --semantic-color-surface-selected: var(--primitive-color-neutral-200);
@@ -208,8 +219,8 @@
   --semantic-color-content-secondary: var(--primitive-color-neutral-600);
   --semantic-color-content-disabled: var(--primitive-color-neutral-300);
   --semantic-color-content-inverse: var(--primitive-color-neutral-100);
-  --semantic-color-content-accent: var(--primitive-color-neutral-900);
-  --semantic-color-content-onAccent: var(--primitive-color-neutral-white);
+  --semantic-color-content-accent: var(--primitive-color-apple-700);
+  --semantic-color-content-onAccent: var(--primitive-color-neutral-900);
   --semantic-color-content-success: var(--primitive-color-green-700);
   --semantic-color-content-warning: var(--primitive-color-amber-800);
   --semantic-color-content-danger: var(--primitive-color-red-700);
@@ -218,7 +229,7 @@
   --semantic-color-border-subdued: var(--primitive-color-neutral-200);
   --semantic-color-border-subtle: var(--primitive-color-neutral-100);
   --semantic-color-border-strong: var(--primitive-color-neutral-300);
-  --semantic-color-border-accent: var(--primitive-color-neutral-900);
+  --semantic-color-border-accent: var(--primitive-color-apple-600);
   --semantic-color-border-success: var(--primitive-color-green-400);
   --semantic-color-border-warning: var(--primitive-color-amber-400);
   --semantic-color-feedback-error: var(--primitive-color-red-700);
@@ -335,14 +346,14 @@
   --semantic-docs-space-section: var(--primitive-space-12);
   --semantic-docs-space-paragraph: var(--primitive-space-6);
   --semantic-docs-space-inline: var(--primitive-space-2);
-  --semantic-accent-rest: var(--primitive-color-neutral-900);
-  --semantic-accent-hover: var(--primitive-color-neutral-800);
-  --semantic-accent-pressed: var(--primitive-color-neutral-950);
+  --semantic-accent-rest: var(--primitive-color-apple-500);
+  --semantic-accent-hover: var(--primitive-color-apple-600);
+  --semantic-accent-pressed: var(--primitive-color-apple-700);
   --semantic-accent-inactive: var(--primitive-color-neutral-400);
   --semantic-accent-disabled: var(--primitive-color-neutral-300);
-  --semantic-accent-content: var(--primitive-color-neutral-900);
-  --semantic-accent-contentHover: var(--primitive-color-neutral-700);
-  --semantic-accent-subtle: var(--primitive-color-neutral-100);
+  --semantic-accent-content: var(--primitive-color-apple-700);
+  --semantic-accent-contentHover: var(--primitive-color-apple-800);
+  --semantic-accent-subtle: var(--primitive-color-apple-50);
   --semantic-radius-action: var(--primitive-radius-8);
   --semantic-radius-control: var(--primitive-radius-4);
   --semantic-borderWidth-default: var(--primitive-borderWidth-xs);
@@ -493,8 +504,8 @@
   --semantic-color-surface-overlay: var(--primitive-color-neutral-850);
   --semantic-color-surface-scrim: var(--primitive-color-neutral-black);
   --semantic-color-surface-inverse: var(--primitive-color-neutral-white);
-  --semantic-color-surface-accent: var(--primitive-color-neutral-100);
-  --semantic-color-surface-accentSubtle: var(--primitive-color-neutral-900);
+  --semantic-color-surface-accent: var(--primitive-color-apple-400);
+  --semantic-color-surface-accentSubtle: var(--primitive-color-apple-900);
   --semantic-color-surface-hover: var(--primitive-color-neutral-900);
   --semantic-color-surface-pressed: var(--primitive-color-neutral-950);
   --semantic-color-surface-selected: var(--primitive-color-neutral-800);
@@ -504,7 +515,7 @@
   --semantic-color-content-secondary: var(--primitive-color-neutral-400);
   --semantic-color-content-disabled: var(--primitive-color-neutral-600);
   --semantic-color-content-inverse: var(--primitive-color-neutral-900);
-  --semantic-color-content-accent: var(--primitive-color-neutral-100);
+  --semantic-color-content-accent: var(--primitive-color-apple-400);
   --semantic-color-content-onAccent: var(--primitive-color-neutral-900);
   --semantic-color-content-success: var(--primitive-color-green-400);
   --semantic-color-content-warning: var(--primitive-color-amber-400);
@@ -514,7 +525,7 @@
   --semantic-color-border-subdued: var(--primitive-color-neutral-800);
   --semantic-color-border-subtle: var(--primitive-color-neutral-850);
   --semantic-color-border-strong: var(--primitive-color-neutral-600);
-  --semantic-color-border-accent: var(--primitive-color-neutral-100);
+  --semantic-color-border-accent: var(--primitive-color-apple-400);
   --semantic-color-border-success: var(--primitive-color-green-400);
   --semantic-color-border-warning: var(--primitive-color-amber-400);
   --semantic-color-feedback-error: var(--primitive-color-red-400);
@@ -528,14 +539,14 @@
   --semantic-color-feedback-bg-info: var(--primitive-color-blue-900);
   --semantic-color-feedback-bg-inProgress: var(--primitive-color-violet-950);
   --semantic-color-state-pressed-overlay: var(--primitive-color-neutral-white);
-  --semantic-accent-rest: var(--primitive-color-neutral-100);
-  --semantic-accent-hover: var(--primitive-color-neutral-200);
-  --semantic-accent-pressed: var(--primitive-color-neutral-300);
+  --semantic-accent-rest: var(--primitive-color-apple-400);
+  --semantic-accent-hover: var(--primitive-color-apple-500);
+  --semantic-accent-pressed: var(--primitive-color-apple-600);
   --semantic-accent-inactive: var(--primitive-color-neutral-600);
   --semantic-accent-disabled: var(--primitive-color-neutral-700);
-  --semantic-accent-content: var(--primitive-color-neutral-100);
-  --semantic-accent-contentHover: var(--primitive-color-neutral-300);
-  --semantic-accent-subtle: var(--primitive-color-neutral-800);
+  --semantic-accent-content: var(--primitive-color-apple-400);
+  --semantic-accent-contentHover: var(--primitive-color-apple-300);
+  --semantic-accent-subtle: var(--primitive-color-apple-900);
   --component-badge-bg: var(--semantic-color-feedback-bg-info);
   --component-button-primary-textDisabled: var(--semantic-color-content-disabled);
   --semantic-elevation-flat-surface: var(--semantic-color-surface-page);

package/docs/CONSUMING.md

@@ -70,7 +70,7 @@ All three:
 ### Brand fonts (optional)
 
 ```ts
-import '@hirobius/design-system/fonts.css'; // Satoshi 400/500/700 + Geist Mono 400
+import '@hirobius/design-system/fonts.css'; // Satoshi 400/500/700 + IBM Plex Mono 400
 ```
 
 `fonts.css` declares the four `@font-face` blocks with `font-display: swap`. Its
@@ -229,7 +229,7 @@ export function Example() {
 | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `@hirobius/design-system`               | The 43-component core set ([README → What belongs in the system](../README.md#what-belongs-in-the-system)), the rest of the allow-list, and the router seam (`HdsRouterProvider`, `useHdsRouter`); the `pattern` tier is in `/patterns` |
 | `@hirobius/design-system/styles.css`    | Components + utilities + tokens, NO global reset (host-safe; recommended for embedding)                                                                                                                                                 |
-| `@hirobius/design-system/fonts.css`     | Optional brand fonts: Satoshi 400/500/700 + Geist Mono 400 (`@font-face`, relative woff2 URLs)                                                                                                                                          |
+| `@hirobius/design-system/fonts.css`     | Optional brand fonts: Satoshi 400/500/700 + IBM Plex Mono 400 (`@font-face`, relative woff2 URLs)                                                                                                                                       |
 | `@hirobius/design-system/tokens.css`    | The complete stylesheet — styles.css PLUS a global Tailwind-preflight reset                                                                                                                                                             |
 | `@hirobius/design-system/variables.css` | Design tokens as CSS custom properties ONLY — no reset/preflight (host-safe)                                                                                                                                                            |
 | `@hirobius/design-system/tokens`        | Design-token values as typed TS                                                                                                                                                                                                         |