@fusion.dev/helix 0.140.0 → 0.141.0

package/custom-elements.json

@@ -4332,7 +4332,7 @@
                 "text": "{ glow: TokenColor; ground: TokenColor; haze: TokenColor; peak: TokenColor }"
               },
               "privacy": "private",
-              "default": "{ glow: [0.29, 0.61, 1], ground: [0, 0, 0], haze: [0.02, 0.15, 0.34], peak: [1, 1, 1], }",
+              "default": "{ glow: [0.88, 0.88, 0.88], ground: [0, 0, 0], haze: [0.16, 0.16, 0.16], peak: [1, 1, 1], }",
               "description": "The four ramp stops, resolved.\n\n**Cached, because reading them is not free and they do not move.** Each\nread sets a style, calls `getComputedStyle`, fills a pixel and reads it\nback: a style recalc and a canvas readback apiece. Doing that inside\n`paint` meant four of each on every frame, forever, to fetch values that\nchange only when the color mode does. The controller already says when\nthat happens, so this is filled from there and from the first paint."
             },
             {
@@ -4597,7 +4597,7 @@
                   "text": "void"
                 }
               },
-              "description": "Resolves the ramp. Called when the palette moves, not when a frame draws.\n\nLight pages peak on a deep brand blue and dark ones on the foreground, and\nthe ground is what says which: mixing a saturated hue toward near-black\ntakes the chroma out of exactly the pixels carrying the most of it. Read\nfrom the ground's own luminance rather than asked of the color mode, which\nis a private token this tier may not reach for."
+              "description": "Resolves the ramp. Called when the palette moves, not when a frame draws.\n\nLight pages peak on the pressed `primary-active` and dark ones on the\nforeground, and the ground is what says which: mixing a saturated hue\ntoward near-black takes the chroma out of exactly the pixels carrying the\nmost of it. Read from the ground's own luminance rather than asked of the\ncolor mode, which is a private token this tier may not reach for."
             },
             {
               "kind": "method",
@@ -6740,7 +6740,7 @@
               "type": {
                 "text": "'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning' | undefined"
               },
-              "description": "What the mark means. The stylesheet picks the fill from it.\n\n**`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are\na small mark carrying a meaning beside something else, and the two had\ndifferent sets for no reason anybody decided: a tag could say `success` and\na badge could not, so a page marking a build green wrote one word on the\nchip and had no word for the count beside it. Every fill these name already\nexists and every one carries `foreground-on-accent`, so this costs a rule\napiece and no new color.\n\n**`primary` is sayable as well as the default**, which is the reason\n`Announcement` gives for its own neutral: a generated page should be able to\nsay what it means rather than express it by leaving an attribute off.",
+              "description": "What the mark means. The stylesheet picks the fill from it.\n\n**`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are\na small mark carrying a meaning beside something else, and the two had\ndifferent sets for no reason anybody decided: a tag could say `success` and\na badge could not, so a page marking a build green wrote one word on the\nchip and had no word for the count beside it. Every fill these name already\nexists with its family's label, so this costs a rule apiece and no new\ncolor.\n\n**`primary` is sayable as well as the default**, which is the reason\n`Announcement` gives for its own neutral: a generated page should be able to\nsay what it means rather than express it by leaving an attribute off.",
               "attribute": "tone",
               "reflects": true
             },
@@ -7173,7 +7173,7 @@
               "type": {
                 "text": "'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning' | undefined"
               },
-              "description": "What the mark means. The stylesheet picks the fill from it.\n\n**`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are\na small mark carrying a meaning beside something else, and the two had\ndifferent sets for no reason anybody decided: a tag could say `success` and\na badge could not, so a page marking a build green wrote one word on the\nchip and had no word for the count beside it. Every fill these name already\nexists and every one carries `foreground-on-accent`, so this costs a rule\napiece and no new color.\n\n**`primary` is sayable as well as the default**, which is the reason\n`Announcement` gives for its own neutral: a generated page should be able to\nsay what it means rather than express it by leaving an attribute off.",
+              "description": "What the mark means. The stylesheet picks the fill from it.\n\n**`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are\na small mark carrying a meaning beside something else, and the two had\ndifferent sets for no reason anybody decided: a tag could say `success` and\na badge could not, so a page marking a build green wrote one word on the\nchip and had no word for the count beside it. Every fill these name already\nexists with its family's label, so this costs a rule apiece and no new\ncolor.\n\n**`primary` is sayable as well as the default**, which is the reason\n`Announcement` gives for its own neutral: a generated page should be able to\nsay what it means rather than express it by leaving an attribute off.",
               "fieldName": "tone"
             },
             {
@@ -12326,7 +12326,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The background is a tint of the tone's status color, mixed with `color-mix`.\nA bar on the inline start edge also marks the tone, so it still shows in\ngrayscale and for people who do not distinguish the hues.\n\nThis tier has no treatment property. `tone` is set on the headless tier and\ncarries the meaning, and this tier draws it.",
+          "description": "The background is a tint of the tone's color, mixed with `color-mix`. A\n`neutral` callout is drawn in the muted ink, for a note that reports no\nstatus, so it keeps to the palette whatever the brand.\nA bar on the inline start edge also marks the tone, so it still shows in\ngrayscale and for people who do not distinguish the hues.\n\nThis tier has no treatment property. `tone` is set on the headless tier and\ncarries the meaning, and this tier draws it.",
           "name": "HelixCallout",
           "cssProperties": [
             {
@@ -12395,9 +12395,9 @@
               "kind": "field",
               "name": "tone",
               "type": {
-                "text": "'danger' | 'info' | 'success' | 'warning' | undefined"
+                "text": "'danger' | 'info' | 'neutral' | 'success' | 'warning' | undefined"
               },
-              "description": "What kind of attention the passage needs.\n\n`tone` is the axis for what a thing means, and this is a subset of it: a\ncallout reports a status and never a brand role, so it takes four of the\nseven values. One word per axis is the whole of the registry, which is why\nthere is no `severity` beside it.",
+              "description": "What kind of attention the passage needs.\n\n`tone` is the axis for what a thing means, and this is a subset of it: a\ncallout reports a status, or `neutral` for an aside that reports none, and\nnever a brand role, so it takes five of the seven values. One word per axis\nis the whole of the registry, which is why there is no `severity` beside it.",
               "attribute": "tone",
               "reflects": true,
               "inheritedFrom": {
@@ -12778,7 +12778,7 @@
             "name": "HelixHeadlessCallout",
             "package": "@fusion.dev/helix-headless/callout"
           },
-          "summary": "A passage set apart as information, a warning, or an error.",
+          "summary": "A passage set apart as a note, information, a warning, or an error.",
           "helix": {
             "category": "markers",
             "since": "0.1.0",
@@ -12811,9 +12811,9 @@
             {
               "name": "tone",
               "type": {
-                "text": "'danger' | 'info' | 'success' | 'warning' | undefined"
+                "text": "'danger' | 'info' | 'neutral' | 'success' | 'warning' | undefined"
               },
-              "description": "What kind of attention the passage needs.\n\n`tone` is the axis for what a thing means, and this is a subset of it: a\ncallout reports a status and never a brand role, so it takes four of the\nseven values. One word per axis is the whole of the registry, which is why\nthere is no `severity` beside it.",
+              "description": "What kind of attention the passage needs.\n\n`tone` is the axis for what a thing means, and this is a subset of it: a\ncallout reports a status, or `neutral` for an aside that reports none, and\nnever a brand role, so it takes five of the seven values. One word per axis\nis the whole of the registry, which is why there is no `severity` beside it.",
               "fieldName": "tone",
               "inheritedFrom": {
                 "name": "HelixHeadlessCallout",
@@ -168138,6 +168138,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.140.0"
+    "version": "0.141.0"
   }
 }

package/dist/aura/root/aura-root.d.ts

@@ -424,11 +424,11 @@ export declare class HelixAura extends HelixElement {
     /**
      * Resolves the ramp. Called when the palette moves, not when a frame draws.
      *
-     * Light pages peak on a deep brand blue and dark ones on the foreground, and
-     * the ground is what says which: mixing a saturated hue toward near-black
-     * takes the chroma out of exactly the pixels carrying the most of it. Read
-     * from the ground's own luminance rather than asked of the color mode, which
-     * is a private token this tier may not reach for.
+     * Light pages peak on the pressed `primary-active` and dark ones on the
+     * foreground, and the ground is what says which: mixing a saturated hue
+     * toward near-black takes the chroma out of exactly the pixels carrying the
+     * most of it. Read from the ground's own luminance rather than asked of the
+     * color mode, which is a private token this tier may not reach for.
      */
     private readPalette;
     private link;

package/dist/aura/root/aura-root.js

@@ -32,9 +32,9 @@ let HelixAura = class HelixAura extends HelixElement {
             this.paintOnce();
         });
         this.palette = {
-            glow: [0.29, 0.61, 1],
+            glow: [0.88, 0.88, 0.88],
             ground: [0, 0, 0],
-            haze: [0.02, 0.15, 0.34],
+            haze: [0.16, 0.16, 0.16],
             peak: [1, 1, 1],
         };
         this.canvas = null;
@@ -267,11 +267,11 @@ let HelixAura = class HelixAura extends HelixElement {
         const ground = this.tokens.read('--helix-color-background', [0, 0, 0]);
         const light = ground[0] * 0.2126 + ground[1] * 0.7152 + ground[2] * 0.0722 > 0.5;
         this.palette = {
-            glow: this.tokens.read('--helix-color-primary', [0.29, 0.61, 1]),
+            glow: this.tokens.read('--helix-color-primary', [0.88, 0.88, 0.88]),
             ground,
-            haze: this.tokens.read('--helix-color-primary-subtle', [0.02, 0.15, 0.34]),
+            haze: this.tokens.read('--helix-color-primary-subtle', [0.16, 0.16, 0.16]),
             peak: light
-                ? this.tokens.read('--helix-color-primary-active', [0.1, 0.2, 0.55])
+                ? this.tokens.read('--helix-color-primary-active', [0.02, 0.02, 0.02])
                 : this.tokens.read('--helix-color-foreground', [1, 1, 1]),
         };
     }

package/dist/badge/root/badge-root.css.js

@@ -5,6 +5,8 @@ export const styles = createSheet(`:host {
 --_badge-text: var(--helix-text-xs);
 --_badge-inset: var(--helix-space-2xs);
 --_badge-dot: var(--helix-space-xs);
+
+--_badge-on: var(--helix-color-foreground-on-primary);
 display: inline-flex;
 position: relative;
 vertical-align: middle;
@@ -18,7 +20,7 @@ block-size: var(--_badge-size);
 border-radius: var(--helix-radii-full);
 
 box-shadow: 0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));
-color: var(--helix-color-foreground-on-accent);
+color: var(--_badge-on);
 display: inline-flex;
 font-size: var(--_badge-text);
 font-weight: var(--helix-weight-semibold);
@@ -70,6 +72,17 @@ background-color: var(--badge-background-color, var(--helix-color-primary-surfac
 background-color: var(--badge-background-color, var(--helix-color-accent-surface));
 }
 
+:host([tone="accent"]) {
+--_badge-on: var(--helix-color-foreground-on-accent);
+}
+
+:host([tone="danger"]),
+:host([tone="info"]),
+:host([tone="success"]),
+:host([tone="warning"]) {
+--_badge-on: var(--helix-color-foreground-on-status);
+}
+
 :host([tone="info"]) [part="indicator"] {
 background-color: var(--badge-background-color, var(--helix-color-info-surface));
 }

package/dist/badge/root/badge-root.d.ts

@@ -27,8 +27,8 @@ export declare class HelixBadge extends HelixHeadlessBadge {
      * different sets for no reason anybody decided: a tag could say `success` and
      * a badge could not, so a page marking a build green wrote one word on the
      * chip and had no word for the count beside it. Every fill these name already
-     * exists and every one carries `foreground-on-accent`, so this costs a rule
-     * apiece and no new color.
+     * exists with its family's label, so this costs a rule apiece and no new
+     * color.
      *
      * **`primary` is sayable as well as the default**, which is the reason
      * `Announcement` gives for its own neutral: a generated page should be able to

package/dist/button/root/button-root.css.js

@@ -24,7 +24,7 @@ var(--helix-color-background)
 --_button-edge: var(--helix-color-primary);
 --_button-fill: var(--helix-color-primary-surface);
 --_button-fill-hover: var(--helix-color-primary-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-accent);
+--_button-on-tone: var(--helix-color-foreground-on-primary);
 --_button-tone: var(--helix-color-primary);
 --_button-tone-hover: var(--helix-color-primary-hover);
 }
@@ -41,7 +41,7 @@ var(--helix-color-background)
 --_button-edge: var(--helix-color-danger);
 --_button-fill: var(--helix-color-danger-surface);
 --_button-fill-hover: var(--helix-color-danger-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-accent);
+--_button-on-tone: var(--helix-color-foreground-on-status);
 --_button-tone: var(--helix-color-danger);
 
 --_button-tone-hover: color-mix(

package/dist/callout/root/callout-root.css.js

@@ -28,6 +28,10 @@ inset-inline-start: 0;
 position: absolute;
 }
 
+:host([tone="neutral"]) {
+--_callout-color: var(--helix-color-foreground-muted);
+}
+
 :host([tone="success"]) {
 --_callout-color: var(--helix-color-success);
 }

package/dist/callout/root/callout-root.d.ts

@@ -1,10 +1,12 @@
 import { HelixHeadlessCallout } from '@fusion.dev/helix-headless/callout';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A passage set apart as information, a warning, or an error.
+ * @summary A passage set apart as a note, information, a warning, or an error.
  *
  * @description
- * The background is a tint of the tone's status color, mixed with `color-mix`.
+ * The background is a tint of the tone's color, mixed with `color-mix`. A
+ * `neutral` callout is drawn in the muted ink, for a note that reports no
+ * status, so it keeps to the palette whatever the brand.
  * A bar on the inline start edge also marks the tone, so it still shows in
  * grayscale and for people who do not distinguish the hues.
  *

package/dist/color-picker/root/color-picker-root.css.js

@@ -44,14 +44,27 @@ touch-action: none;
 }
 
 [part="grid"]::after {
+
+--_color-picker-mark-half: calc(var(--helix-size-icon-tight) / 2);
 block-size: var(--helix-size-icon-tight);
-border: var(--helix-border-thick) solid var(--helix-color-surface);
+border: var(--helix-border-thick) solid var(--helix-color-foreground-media);
 border-radius: var(--helix-radii-full);
-box-shadow: var(--helix-shadow-sm);
+box-shadow:
+0 0 0 var(--helix-border-thin)
+color-mix(in oklab, var(--helix-color-surface-media) 60%, transparent),
+var(--helix-shadow-sm);
 content: "";
 inline-size: var(--helix-size-icon-tight);
-inset-block-start: calc(100% - var(--color-picker-brightness, 100%));
-inset-inline-start: var(--color-picker-saturation, 100%);
+inset-block-start: clamp(
+var(--_color-picker-mark-half),
+calc(100% - var(--color-picker-brightness, 100%)),
+calc(100% - var(--_color-picker-mark-half))
+);
+inset-inline-start: clamp(
+var(--_color-picker-mark-half),
+var(--color-picker-saturation, 100%),
+calc(100% - var(--_color-picker-mark-half))
+);
 pointer-events: none;
 position: absolute;
 translate: -50% -50%;

package/dist/icon-button/root/icon-button-root.css.js

@@ -25,7 +25,7 @@ var(--helix-color-background)
 --_icon-button-ink-hover: var(--helix-color-primary);
 --_icon-button-fill: var(--helix-color-primary-surface);
 --_icon-button-fill-hover: var(--helix-color-primary-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-accent);
+--_icon-button-on-tone: var(--helix-color-foreground-on-primary);
 --_icon-button-tone: var(--helix-color-primary);
 --_icon-button-tone-hover: var(--helix-color-primary-hover);
 }
@@ -47,7 +47,7 @@ var(--helix-color-background)
 --_icon-button-ink-hover: var(--helix-color-danger);
 --_icon-button-fill: var(--helix-color-danger-surface);
 --_icon-button-fill-hover: var(--helix-color-danger-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-accent);
+--_icon-button-on-tone: var(--helix-color-foreground-on-status);
 --_icon-button-tone: var(--helix-color-danger);
 --_icon-button-tone-hover: color-mix(
 in oklab,

package/dist/map/marker/map-marker.css.js

@@ -3,7 +3,7 @@ export const styles = createSheet(`:host {
 --_map-marker-color: var(--map-marker-color, var(--helix-color-primary));
 
 --_map-marker-fill: var(--map-marker-color, var(--helix-color-primary-surface));
---_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-accent));
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-primary));
 
 --_map-marker-edge: var(--helix-color-surface);
 --_map-marker-lift: 0px;
@@ -180,7 +180,7 @@ var(--map-marker-cluster-color, var(--helix-color-primary-surface)) 28%,
 transparent
 ),
 var(--_map-marker-shadow);
-color: var(--helix-color-foreground-on-accent);
+color: var(--helix-color-foreground-on-primary);
 font-size: calc(var(--_map-marker-size) * 0.42);
 font-variant-numeric: tabular-nums;
 rotate: none;
@@ -301,14 +301,17 @@ outline-offset: var(--helix-size-focus-offset);
 :host([tone="accent"]) {
 --_map-marker-color: var(--helix-color-accent);
 --_map-marker-fill: var(--helix-color-accent-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-accent));
 }
 :host([tone="danger"]) {
 --_map-marker-color: var(--helix-color-danger);
 --_map-marker-fill: var(--helix-color-danger-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
 }
 :host([tone="info"]) {
 --_map-marker-color: var(--helix-color-info);
 --_map-marker-fill: var(--helix-color-info-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
 }
 
 :host([tone="neutral"]) {
@@ -319,10 +322,12 @@ outline-offset: var(--helix-size-focus-offset);
 :host([tone="success"]) {
 --_map-marker-color: var(--helix-color-success);
 --_map-marker-fill: var(--helix-color-success-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
 }
 :host([tone="warning"]) {
 --_map-marker-color: var(--helix-color-warning);
 --_map-marker-fill: var(--helix-color-warning-surface);
+--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
 }
 
 :host(:state(passed)) {

package/dist/map/points/map-points.css.js

@@ -8,7 +8,7 @@ display: block;
 inline-size: 0;
 inset-block-start: 0;
 left: 0;
-outline-color: var(--map-points-ink, var(--helix-color-foreground-on-accent));
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-primary));
 pointer-events: none;
 position: absolute;
 }
@@ -58,14 +58,17 @@ opacity: 1;
 
 :host([tone="accent"]) {
 color: var(--helix-color-accent-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-accent));
 }
 
 :host([tone="danger"]) {
 color: var(--helix-color-danger-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
 }
 
 :host([tone="info"]) {
 color: var(--helix-color-info-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
 }
 
 :host([tone="neutral"]) {
@@ -75,8 +78,10 @@ outline-color: var(--map-points-ink, var(--helix-color-surface));
 
 :host([tone="success"]) {
 color: var(--helix-color-success-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
 }
 
 :host([tone="warning"]) {
 color: var(--helix-color-warning-surface);
+outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
 }`);

package/dist/map/root/map-root.css.js

@@ -155,7 +155,7 @@ font-weight: var(--helix-weight-semibold);
 [part="tilt"][aria-pressed="true"] {
 background-color: var(--helix-color-primary-surface);
 border-color: var(--helix-color-primary-surface);
-color: var(--helix-color-foreground-on-accent);
+color: var(--helix-color-foreground-on-primary);
 }
 
 [part="tilt"][aria-pressed="true"]:hover {

package/dist/popover/root/popover-root.css.js

@@ -20,7 +20,8 @@ inset: auto;
 margin: var(--helix-space-none);
 
 max-inline-size: calc(100vw - var(--helix-space-lg));
-padding: var(--popover-padding, var(--helix-space-md));
+
+padding: var(--helix-space-none);
 inline-size: var(--popover-inline-size, max-content);
 }
 
@@ -28,10 +29,6 @@ inline-size: var(--popover-inline-size, max-content);
 display: none;
 }
 
-:host([separation="plain"]) [part="popover"] {
-padding: var(--popover-padding, var(--helix-space-none));
-}
-
 [part="popover"] {
 --_travel: calc(var(--helix-space-2xs) * -1);
 
@@ -85,6 +82,11 @@ transition: none;
 [part="content"] {
 max-block-size: var(--popover-max-block-size, var(--floating-available-block-size, none));
 overflow: auto;
+padding: var(--popover-padding, var(--helix-space-md));
+}
+
+:host([separation="plain"]) [part="content"] {
+padding: var(--popover-padding, var(--helix-space-none));
 }
 
 @media print {

package/dist/speed-dial/root/speed-dial-root.css.js

@@ -115,7 +115,7 @@ block-size: var(--helix-size-control);
 border-radius: var(--helix-radii-full);
 box-shadow: var(--helix-shadow-md);
 box-sizing: border-box;
-color: var(--helix-color-foreground-on-accent);
+color: var(--helix-color-foreground-on-primary);
 cursor: pointer;
 display: inline-flex;
 inline-size: var(--helix-size-control);

package/dist/switch/root/switch-root.css.js

@@ -79,7 +79,7 @@ opacity: 0;
 
 :host(:state(checked)) [part="track"]::after {
 
-background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-accent));
+background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));
 
 translate: calc(var(--_switch-width) - var(--_switch-height)) -50%;
 }