@alleninstitute/cortex-ui 0.2.0 → 0.3.0

package/dist/types/components.d.ts

@@ -6,6 +6,79 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
+    /**
+     * A Divider drawing a rule between sections of content, or between items in a row.
+     * @example <cui-divider></cui-divider>
+     * @example <cui-divider orientation="vertical" spacing="small"></cui-divider>
+     * @example <cui-divider variant="accent" importance="secondary"></cui-divider>
+     */
+    interface CuiDivider {
+        /**
+          * Which of the two `divider` importances the rule is drawn from. Match it to the importance of the surface the divider sits on — `secondary` on a quiet tint, `primary` on a saturated fill — rather than treating it as a loudness control: on a secondary surface the primary rule is the *less* perceivable of the two. For `base`, whose surface is the page itself, `primary` is simply the stronger of the two rules.
+          * @default 'primary'
+         */
+        "importance": 'primary' | 'secondary';
+        /**
+          * Which way the rule runs. A vertical divider stretches to the height of the flex row it sits in.
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+        /**
+          * Space reserved on either side of the rule, along the axis it separates.
+          * @default 'medium'
+         */
+        "spacing": 'none' | 'small' | 'medium' | 'large';
+        /**
+          * Which intent's `divider` colour the rule is drawn in. `base` is the intent-free rule for ordinary page chrome; the seven intents tint a divider that sits inside a component already carrying that intent, such as a rule between rows of a negative-intent alert.
+          * @default 'base'
+         */
+        "variant": 'base' | 'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+    }
+    /**
+     * An Icon component that renders a Font Awesome glyph with cortex-ui's semantic colours and sizes.
+     * Font Awesome itself is **not** bundled — the consuming application loads a Font Awesome
+     * stylesheet (the free set, or a licensed pro build) and `icon` takes the raw Font Awesome
+     * classes. Any Font Awesome utility class can be passed along in the same string, so
+     * `icon="fa-solid fa-spinner fa-spin"` works without this component knowing about `fa-spin`.
+     * Loading that stylesheet is the human application owner's responsibility, never an agent's: an AI
+     * agent writing `cui-icon` markup must not install a Font Awesome package, add the stylesheet to
+     * the page, or invent a Pro Kit URL — it should write the markup and tell the person their page
+     * needs Font Awesome. Icons rendering as empty boxes in a page with no Font Awesome is the
+     * expected result, not a bug to code around.
+     * Icons are decorative by default and hidden from assistive technology. Set `label` only when the
+     * icon carries meaning that the surrounding text does not already convey.
+     * @example <cui-icon icon="fa-solid fa-user"></cui-icon>
+     * @example <cui-icon icon="fa-solid fa-triangle-exclamation" variant="warning" size="l"></cui-icon>
+     * @example <cui-icon icon="fa-solid fa-trash" label="Delete item"></cui-icon>
+     * @cssprop --cui-icon-color - Overrides the colour chosen by `variant` and `importance`. Set it to
+     * `currentColor` to make the icon follow the text colour of whatever surrounds it.
+     * @cssprop --cui-icon-size - Overrides the size chosen by `size`.
+     */
+    interface CuiIcon {
+        /**
+          * The Font Awesome classes naming the icon, e.g. `fa-solid fa-user`. The style is part of the string, so `fa-regular`, `fa-brands` and licensed pro styles like `fa-duotone` all work. Required — there is no sensible fallback glyph.
+         */
+        "icon": string;
+        /**
+          * Which rung of the `text` token family to use. It tracks the surface the icon sits on: `primary` belongs on that variant's primary surface, `secondary` on its secondary surface or on a plain background. Pairing an intent's `primary` text with a plain page background is outside the token system's design and will not be legible.
+          * @default 'secondary'
+         */
+        "importance": 'primary' | 'secondary';
+        /**
+          * Accessible name, for an icon that carries meaning on its own — an icon-only button, or a status glyph with no adjacent text. Leave it unset for a decorative icon beside text, which is the common case; the icon is then hidden from assistive technology so screen readers do not announce it twice.
+         */
+        "label"?: string;
+        /**
+          * Size of the glyph, from the font-size token scale.
+          * @default 'm'
+         */
+        "size": 'display-l' | 'display-m' | 'display-s' | 'l' | 'm' | 's' | 'xl' | 'xs' | 'xxl' | 'xxs';
+        /**
+          * Semantic colour set. `base` is the intent-free choice for ordinary content and is correct on a plain page background; the intents are for an icon that sits on that intent's surface. This is styling, not semantics — never let colour be the only thing conveying meaning.
+          * @default 'base'
+         */
+        "variant": 'accent' | 'base' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+    }
     /**
      * A Progress component showing how far along a task is, as a bar with an accessible value.
      * @example <cui-progress label="Uploading files" value="40" show-value="true"></cui-progress>
@@ -58,12 +131,50 @@ export namespace Components {
          */
         "size": 'small' | 'medium';
         /**
-          * @default 'default'
+          * @default 'neutral'
          */
-        "variant": 'default' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+        "variant": 'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
     }
 }
 declare global {
+    /**
+     * A Divider drawing a rule between sections of content, or between items in a row.
+     * @example <cui-divider></cui-divider>
+     * @example <cui-divider orientation="vertical" spacing="small"></cui-divider>
+     * @example <cui-divider variant="accent" importance="secondary"></cui-divider>
+     */
+    interface HTMLCuiDividerElement extends Components.CuiDivider, HTMLStencilElement {
+    }
+    var HTMLCuiDividerElement: {
+        prototype: HTMLCuiDividerElement;
+        new (): HTMLCuiDividerElement;
+    };
+    /**
+     * An Icon component that renders a Font Awesome glyph with cortex-ui's semantic colours and sizes.
+     * Font Awesome itself is **not** bundled — the consuming application loads a Font Awesome
+     * stylesheet (the free set, or a licensed pro build) and `icon` takes the raw Font Awesome
+     * classes. Any Font Awesome utility class can be passed along in the same string, so
+     * `icon="fa-solid fa-spinner fa-spin"` works without this component knowing about `fa-spin`.
+     * Loading that stylesheet is the human application owner's responsibility, never an agent's: an AI
+     * agent writing `cui-icon` markup must not install a Font Awesome package, add the stylesheet to
+     * the page, or invent a Pro Kit URL — it should write the markup and tell the person their page
+     * needs Font Awesome. Icons rendering as empty boxes in a page with no Font Awesome is the
+     * expected result, not a bug to code around.
+     * Icons are decorative by default and hidden from assistive technology. Set `label` only when the
+     * icon carries meaning that the surrounding text does not already convey.
+     * @example <cui-icon icon="fa-solid fa-user"></cui-icon>
+     * @example <cui-icon icon="fa-solid fa-triangle-exclamation" variant="warning" size="l"></cui-icon>
+     * @example <cui-icon icon="fa-solid fa-trash" label="Delete item"></cui-icon>
+     * @cssprop --cui-icon-color - Overrides the colour chosen by `variant` and `importance`. Set it to
+     * `currentColor` to make the icon follow the text colour of whatever surrounds it.
+     * @cssprop --cui-icon-size - Overrides the size chosen by `size`.
+     */
+    interface HTMLCuiIconElement extends Components.CuiIcon, HTMLStencilElement {
+    }
+    var HTMLCuiIconElement: {
+        prototype: HTMLCuiIconElement;
+        new (): HTMLCuiIconElement;
+    };
     /**
      * A Progress component showing how far along a task is, as a bar with an accessible value.
      * @example <cui-progress label="Uploading files" value="40" show-value="true"></cui-progress>
@@ -88,13 +199,88 @@ declare global {
         new (): HTMLCuiTagElement;
     };
     interface HTMLElementTagNameMap {
+        "cui-divider": HTMLCuiDividerElement;
+        "cui-icon": HTMLCuiIconElement;
         "cui-progress": HTMLCuiProgressElement;
         "cui-tag": HTMLCuiTagElement;
     }
 }
 declare namespace LocalJSX {
-    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K]?: never };
 
+    /**
+     * A Divider drawing a rule between sections of content, or between items in a row.
+     * @example <cui-divider></cui-divider>
+     * @example <cui-divider orientation="vertical" spacing="small"></cui-divider>
+     * @example <cui-divider variant="accent" importance="secondary"></cui-divider>
+     */
+    interface CuiDivider {
+        /**
+          * Which of the two `divider` importances the rule is drawn from. Match it to the importance of the surface the divider sits on — `secondary` on a quiet tint, `primary` on a saturated fill — rather than treating it as a loudness control: on a secondary surface the primary rule is the *less* perceivable of the two. For `base`, whose surface is the page itself, `primary` is simply the stronger of the two rules.
+          * @default 'primary'
+         */
+        "importance"?: 'primary' | 'secondary';
+        /**
+          * Which way the rule runs. A vertical divider stretches to the height of the flex row it sits in.
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+        /**
+          * Space reserved on either side of the rule, along the axis it separates.
+          * @default 'medium'
+         */
+        "spacing"?: 'none' | 'small' | 'medium' | 'large';
+        /**
+          * Which intent's `divider` colour the rule is drawn in. `base` is the intent-free rule for ordinary page chrome; the seven intents tint a divider that sits inside a component already carrying that intent, such as a rule between rows of a negative-intent alert.
+          * @default 'base'
+         */
+        "variant"?: 'base' | 'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+    }
+    /**
+     * An Icon component that renders a Font Awesome glyph with cortex-ui's semantic colours and sizes.
+     * Font Awesome itself is **not** bundled — the consuming application loads a Font Awesome
+     * stylesheet (the free set, or a licensed pro build) and `icon` takes the raw Font Awesome
+     * classes. Any Font Awesome utility class can be passed along in the same string, so
+     * `icon="fa-solid fa-spinner fa-spin"` works without this component knowing about `fa-spin`.
+     * Loading that stylesheet is the human application owner's responsibility, never an agent's: an AI
+     * agent writing `cui-icon` markup must not install a Font Awesome package, add the stylesheet to
+     * the page, or invent a Pro Kit URL — it should write the markup and tell the person their page
+     * needs Font Awesome. Icons rendering as empty boxes in a page with no Font Awesome is the
+     * expected result, not a bug to code around.
+     * Icons are decorative by default and hidden from assistive technology. Set `label` only when the
+     * icon carries meaning that the surrounding text does not already convey.
+     * @example <cui-icon icon="fa-solid fa-user"></cui-icon>
+     * @example <cui-icon icon="fa-solid fa-triangle-exclamation" variant="warning" size="l"></cui-icon>
+     * @example <cui-icon icon="fa-solid fa-trash" label="Delete item"></cui-icon>
+     * @cssprop --cui-icon-color - Overrides the colour chosen by `variant` and `importance`. Set it to
+     * `currentColor` to make the icon follow the text colour of whatever surrounds it.
+     * @cssprop --cui-icon-size - Overrides the size chosen by `size`.
+     */
+    interface CuiIcon {
+        /**
+          * The Font Awesome classes naming the icon, e.g. `fa-solid fa-user`. The style is part of the string, so `fa-regular`, `fa-brands` and licensed pro styles like `fa-duotone` all work. Required — there is no sensible fallback glyph.
+         */
+        "icon": string;
+        /**
+          * Which rung of the `text` token family to use. It tracks the surface the icon sits on: `primary` belongs on that variant's primary surface, `secondary` on its secondary surface or on a plain background. Pairing an intent's `primary` text with a plain page background is outside the token system's design and will not be legible.
+          * @default 'secondary'
+         */
+        "importance"?: 'primary' | 'secondary';
+        /**
+          * Accessible name, for an icon that carries meaning on its own — an icon-only button, or a status glyph with no adjacent text. Leave it unset for a decorative icon beside text, which is the common case; the icon is then hidden from assistive technology so screen readers do not announce it twice.
+         */
+        "label"?: string;
+        /**
+          * Size of the glyph, from the font-size token scale.
+          * @default 'm'
+         */
+        "size"?: 'display-l' | 'display-m' | 'display-s' | 'l' | 'm' | 's' | 'xl' | 'xs' | 'xxl' | 'xxs';
+        /**
+          * Semantic colour set. `base` is the intent-free choice for ordinary content and is correct on a plain page background; the intents are for an icon that sits on that intent's surface. This is styling, not semantics — never let colour be the only thing conveying meaning.
+          * @default 'base'
+         */
+        "variant"?: 'accent' | 'base' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+    }
     /**
      * A Progress component showing how far along a task is, as a bar with an accessible value.
      * @example <cui-progress label="Uploading files" value="40" show-value="true"></cui-progress>
@@ -147,11 +333,24 @@ declare namespace LocalJSX {
          */
         "size"?: 'small' | 'medium';
         /**
-          * @default 'default'
+          * @default 'neutral'
          */
-        "variant"?: 'default' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+        "variant"?: 'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
     }
 
+    interface CuiDividerAttributes {
+        "orientation": 'horizontal' | 'vertical';
+        "spacing": 'none' | 'small' | 'medium' | 'large';
+        "variant": 'base' | 'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+        "importance": 'primary' | 'secondary';
+    }
+    interface CuiIconAttributes {
+        "icon": string;
+        "variant": 'accent' | 'base' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+        "importance": 'primary' | 'secondary';
+        "size": 'display-l' | 'display-m' | 'display-s' | 'l' | 'm' | 's' | 'xl' | 'xs' | 'xxl' | 'xxs';
+        "label": string;
+    }
     interface CuiProgressAttributes {
         "label": string;
         "value": number;
@@ -162,11 +361,13 @@ declare namespace LocalJSX {
     }
     interface CuiTagAttributes {
         "label": string;
-        "variant": 'default' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+        "variant": 'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
         "size": 'small' | 'medium';
     }
 
     interface IntrinsicElements {
+        "cui-divider": Omit<CuiDivider, keyof CuiDividerAttributes> & { [K in keyof CuiDivider & keyof CuiDividerAttributes]?: CuiDivider[K] } & { [K in keyof CuiDivider & keyof CuiDividerAttributes as `attr:${K}`]?: CuiDividerAttributes[K] } & { [K in keyof CuiDivider & keyof CuiDividerAttributes as `prop:${K}`]?: CuiDivider[K] };
+        "cui-icon": Omit<CuiIcon, keyof CuiIconAttributes> & { [K in keyof CuiIcon & keyof CuiIconAttributes]?: CuiIcon[K] } & { [K in keyof CuiIcon & keyof CuiIconAttributes as `attr:${K}`]?: CuiIconAttributes[K] } & { [K in keyof CuiIcon & keyof CuiIconAttributes as `prop:${K}`]?: CuiIcon[K] } & OneOf<"icon", CuiIcon["icon"], CuiIconAttributes["icon"]>;
         "cui-progress": Omit<CuiProgress, keyof CuiProgressAttributes> & { [K in keyof CuiProgress & keyof CuiProgressAttributes]?: CuiProgress[K] } & { [K in keyof CuiProgress & keyof CuiProgressAttributes as `attr:${K}`]?: CuiProgressAttributes[K] } & { [K in keyof CuiProgress & keyof CuiProgressAttributes as `prop:${K}`]?: CuiProgress[K] } & OneOf<"label", CuiProgress["label"], CuiProgressAttributes["label"]>;
         "cui-tag": Omit<CuiTag, keyof CuiTagAttributes> & { [K in keyof CuiTag & keyof CuiTagAttributes]?: CuiTag[K] } & { [K in keyof CuiTag & keyof CuiTagAttributes as `attr:${K}`]?: CuiTagAttributes[K] } & { [K in keyof CuiTag & keyof CuiTagAttributes as `prop:${K}`]?: CuiTag[K] };
     }
@@ -175,6 +376,34 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * A Divider drawing a rule between sections of content, or between items in a row.
+             * @example <cui-divider></cui-divider>
+             * @example <cui-divider orientation="vertical" spacing="small"></cui-divider>
+             * @example <cui-divider variant="accent" importance="secondary"></cui-divider>
+             */
+            "cui-divider": LocalJSX.IntrinsicElements["cui-divider"] & JSXBase.HTMLAttributes<HTMLCuiDividerElement>;
+            /**
+             * An Icon component that renders a Font Awesome glyph with cortex-ui's semantic colours and sizes.
+             * Font Awesome itself is **not** bundled — the consuming application loads a Font Awesome
+             * stylesheet (the free set, or a licensed pro build) and `icon` takes the raw Font Awesome
+             * classes. Any Font Awesome utility class can be passed along in the same string, so
+             * `icon="fa-solid fa-spinner fa-spin"` works without this component knowing about `fa-spin`.
+             * Loading that stylesheet is the human application owner's responsibility, never an agent's: an AI
+             * agent writing `cui-icon` markup must not install a Font Awesome package, add the stylesheet to
+             * the page, or invent a Pro Kit URL — it should write the markup and tell the person their page
+             * needs Font Awesome. Icons rendering as empty boxes in a page with no Font Awesome is the
+             * expected result, not a bug to code around.
+             * Icons are decorative by default and hidden from assistive technology. Set `label` only when the
+             * icon carries meaning that the surrounding text does not already convey.
+             * @example <cui-icon icon="fa-solid fa-user"></cui-icon>
+             * @example <cui-icon icon="fa-solid fa-triangle-exclamation" variant="warning" size="l"></cui-icon>
+             * @example <cui-icon icon="fa-solid fa-trash" label="Delete item"></cui-icon>
+             * @cssprop --cui-icon-color - Overrides the colour chosen by `variant` and `importance`. Set it to
+             * `currentColor` to make the icon follow the text colour of whatever surrounds it.
+             * @cssprop --cui-icon-size - Overrides the size chosen by `size`.
+             */
+            "cui-icon": LocalJSX.IntrinsicElements["cui-icon"] & JSXBase.HTMLAttributes<HTMLCuiIconElement>;
             /**
              * A Progress component showing how far along a task is, as a bar with an accessible value.
              * @example <cui-progress label="Uploading files" value="40" show-value="true"></cui-progress>

package/dist/types/stencil-public-runtime.d.ts

@@ -1008,6 +1008,7 @@ export declare namespace JSXBase {
         onClose?: (event: Event) => void;
         open?: boolean;
         returnValue?: string;
+        closedby?: 'any' | 'closerequest' | 'none';
     }
     interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -1045,6 +1046,8 @@ export declare namespace JSXBase {
         allowtransparency?: string | boolean;
         frameBorder?: number | string;
         frameborder?: number | string;
+        fetchPriority?: 'high' | 'low' | 'auto';
+        fetchpriority?: 'high' | 'low' | 'auto';
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
         loading?: 'lazy' | 'auto' | 'eager';
@@ -1067,6 +1070,8 @@ export declare namespace JSXBase {
         crossOrigin?: string;
         crossorigin?: string;
         decoding?: 'async' | 'auto' | 'sync';
+        fetchPriority?: 'high' | 'low' | 'auto';
+        fetchpriority?: 'high' | 'low' | 'auto';
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
         loading?: 'lazy' | 'auto' | 'eager';
@@ -1166,6 +1171,8 @@ export declare namespace JSXBase {
     }
     interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
         as?: string;
+        fetchPriority?: 'high' | 'low' | 'auto';
+        fetchpriority?: 'high' | 'low' | 'auto';
         href?: string;
         hrefLang?: string;
         hreflang?: string;
@@ -1289,6 +1296,8 @@ export declare namespace JSXBase {
         crossOrigin?: string;
         crossorigin?: string;
         defer?: boolean;
+        fetchPriority?: 'high' | 'low' | 'auto';
+        fetchpriority?: 'high' | 'low' | 'auto';
         importance?: 'low' | 'auto' | 'high';
         integrity?: string;
         nonce?: string;
@@ -1404,7 +1413,9 @@ export declare namespace JSXBase {
         tabIndex?: number;
         tabindex?: number | string;
         title?: string;
+        translate?: 'yes' | 'no' | (string & {});
         popover?: string | null;
+        focusgroup?: string;
         inputMode?: string;
         inputmode?: string;
         enterKeyHint?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alleninstitute/cortex-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A web components UI library for Allen Institute projects, built with Stencil.js.",
   "contributors": [
     {
@@ -10,6 +10,10 @@
     {
       "name": "Su Li",
       "email": "su.li@alleninstitute.org"
+    },
+    {
+      "name": "Joel Arbuckle",
+      "email": "joel.arbuckle@alleninstitute.org"
     }
   ],
   "es2017": "dist/esm/index.js",
@@ -40,6 +44,8 @@
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
+    "./fonts.css": "./dist/fonts.css",
+    "./fonts/*": "./dist/fonts/*",
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/index.js",
@@ -71,33 +77,34 @@
     "access": "public"
   },
   "devDependencies": {
-    "@stencil/core": "4.43.5",
-    "@stencil/react-output-target": "1.5.3",
-    "@stencil/sass": "3.3.2",
-    "@storybook/addon-a11y": "10.4.2",
-    "@storybook/addon-docs": "10.4.2",
-    "@storybook/addon-links": "10.4.2",
-    "@storybook/addon-mcp": "^0.6.0",
-    "@storybook/addon-vitest": "10.4.2",
-    "@storybook/web-components-vite": "10.4.2",
-    "@types/react": "19.2.17",
+    "@fortawesome/fontawesome-free": "7.3.1",
+    "@stencil/core": "4.44.0",
+    "@stencil/react-output-target": "1.6.2",
+    "@stencil/sass": "3.3.3",
+    "@storybook/addon-a11y": "10.5.8",
+    "@storybook/addon-docs": "10.5.8",
+    "@storybook/addon-links": "10.5.8",
+    "@storybook/addon-mcp": "0.7.0",
+    "@storybook/addon-vitest": "10.5.8",
+    "@storybook/web-components-vite": "10.5.8",
+    "@types/react": "19.2.18",
     "@vitest/browser-playwright": "4.1.10",
     "@vitest/coverage-v8": "4.1.10",
-    "concurrently": "10.0.3",
+    "concurrently": "10.0.5",
     "git-cliff": "2.13.1",
-    "happy-dom": "20.10.6",
-    "lefthook": "2.1.9",
-    "oxfmt": "0.53.0",
-    "oxlint": "1.68.0",
-    "playwright": "^1.61.1",
+    "happy-dom": "20.11.2",
+    "lefthook": "2.1.10",
+    "oxfmt": "0.65.0",
+    "oxlint": "1.80.0",
+    "playwright": "1.62.1",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "sass-embedded": "1.100.0",
-    "storybook": "10.4.6",
-    "typescript": "6.0.3",
+    "sass-embedded": "1.103.1",
+    "storybook": "10.5.8",
+    "typescript": "7.0.2",
     "unplugin-stencil": "0.4.1",
-    "vite": "8.1.5",
-    "vitest": "4.1.9",
+    "vite": "8.2.2",
+    "vitest": "4.1.10",
     "node": "runtime:24.15.0"
   },
   "scripts": {
@@ -118,6 +125,8 @@
     "fmt": "oxfmt .",
     "fmt:check": "oxfmt --check .",
     "test": "stencil build && vitest run",
+    "test:stories": "stencil build && vitest run --project storybook-light --project storybook-dark",
+    "test:visual:update": "pnpm run test:stories --update",
     "test:docs": "node --test \"scripts/**/*.test.mjs\"",
     "test:mcp": "pnpm run build:mcp && pnpm --filter @alleninstitute/cortex-ui-mcp run test",
     "test:watch": "stencil build && concurrently -c blue,magenta \"stencil build --watch\" \"vitest\"",