@fusion.dev/helix 0.20.1 → 0.21.0

package/custom-elements.json

@@ -4101,9 +4101,9 @@
               "kind": "field",
               "name": "tone",
               "type": {
-                "text": "'danger' | 'neutral' | undefined"
+                "text": "'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning' | undefined"
               },
-              "description": "What the mark means, not how loudly it is drawn: the stylesheet picks a fill\nfrom what the count *is*.",
+              "description": "What the mark means, not how loudly it is drawn: the stylesheet picks a fill\nfrom what the count *is*.\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.",
               "attribute": "tone",
               "reflects": true
             },
@@ -4368,9 +4368,9 @@
             {
               "name": "tone",
               "type": {
-                "text": "'danger' | 'neutral' | undefined"
+                "text": "'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning' | undefined"
               },
-              "description": "What the mark means, not how loudly it is drawn: the stylesheet picks a fill\nfrom what the count *is*.",
+              "description": "What the mark means, not how loudly it is drawn: the stylesheet picks a fill\nfrom what the count *is*.\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.",
               "fieldName": "tone"
             },
             {
@@ -4446,6 +4446,11 @@
               {
                 "description": "A mark with no number, for unread rather than how many.",
                 "slug": "dot"
+              },
+              {
+                "description": "What the count means, across the vocabulary a tag already speaks.",
+                "min": 520,
+                "slug": "tones"
               }
             ],
             "source": "helix/styled/src/badge"

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

@@ -62,6 +62,26 @@ opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-accelerate);
 }
 
+:host([tone="primary"]) [part="indicator"] {
+background-color: var(--badge-background-color, var(--helix-color-primary-surface));
+}
+
+:host([tone="accent"]) [part="indicator"] {
+background-color: var(--badge-background-color, var(--helix-color-accent-surface));
+}
+
+:host([tone="info"]) [part="indicator"] {
+background-color: var(--badge-background-color, var(--helix-color-info-surface));
+}
+
+:host([tone="success"]) [part="indicator"] {
+background-color: var(--badge-background-color, var(--helix-color-success-surface));
+}
+
+:host([tone="warning"]) [part="indicator"] {
+background-color: var(--badge-background-color, var(--helix-color-warning-surface));
+}
+
 :host([tone="danger"]) [part="indicator"] {
 background-color: var(--badge-background-color, var(--helix-color-danger-surface));
 }

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

@@ -22,8 +22,20 @@ export declare class HelixBadge extends HelixHeadlessBadge {
     /**
      * What the mark means, not how loudly it is drawn: the stylesheet picks a fill
      * from what the count *is*.
+     *
+     * **`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are
+     * a small mark carrying a meaning beside something else, and the two had
+     * 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.
+     *
+     * **`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
+     * say what it means rather than express it by leaving an attribute off.
      */
-    tone?: 'danger' | 'neutral';
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -50,16 +50,17 @@ padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
 background: none;
 border: 0;
 border-radius: var(--helix-radii-sm);
-color: var(--helix-color-accent);
+color: var(--helix-color-foreground-muted);
 cursor: pointer;
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-sm);
 padding-block: var(--helix-space-2xs);
 padding-inline: var(--helix-space-2xs);
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="mark-all"]:hover {
-text-decoration: underline;
+color: var(--helix-color-foreground);
 }
 
 [part="mark-all"]:focus-visible {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.20.1",
-    "@fusion.dev/helix-headless": "0.20.1",
-    "@fusion.dev/helix-styles": "0.20.1"
+    "@fusion.dev/helix-core": "0.21.0",
+    "@fusion.dev/helix-headless": "0.21.0",
+    "@fusion.dev/helix-styles": "0.21.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.20.1",
-    "@fusion.dev/helix-testing": "0.20.1",
+    "@fusion.dev/helix-cem": "0.21.0",
+    "@fusion.dev/helix-testing": "0.21.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",

package/types/jsx.d.ts

@@ -1145,7 +1145,19 @@ Falls back to the slot, or to initials, if it fails. */
 
 export type HelixBadgeProps = {
   /** What the mark means, not how loudly it is drawn: the stylesheet picks a fill
-from what the count *is*. */
+from what the count *is*.
+
+**`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are
+a small mark carrying a meaning beside something else, and the two had
+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.
+
+**`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
+say what it means rather than express it by leaving an attribute off. */
   tone?: (HelixBadge["tone"]) | undefined;
   /** Accessible name.
 
@@ -1173,7 +1185,19 @@ is showing a count must not lose the count for being handed one. */
 
 export type HelixBadgeSolidJsProps = {
   /** What the mark means, not how loudly it is drawn: the stylesheet picks a fill
-from what the count *is*. */
+from what the count *is*.
+
+**`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are
+a small mark carrying a meaning beside something else, and the two had
+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.
+
+**`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
+say what it means rather than express it by leaving an attribute off. */
   "prop:tone"?: (HelixBadge["tone"]) | undefined;
   /** Accessible name.
 
@@ -18990,6 +19014,18 @@ export type CustomElements = {
    *
    * - `tone`: What the mark means, not how loudly it is drawn: the stylesheet picks a fill
    * from what the count *is*.
+   *
+   * **`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are
+   * a small mark carrying a meaning beside something else, and the two had
+   * 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.
+   *
+   * **`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
+   * say what it means rather than express it by leaving an attribute off.
    * - `label`: Accessible name.
    *
    * Required for a dot, which has no text to read.
@@ -34954,6 +34990,18 @@ export type CustomElementsSolidJs = {
    *
    * - `tone`: What the mark means, not how loudly it is drawn: the stylesheet picks a fill
    * from what the count *is*.
+   *
+   * **`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are
+   * a small mark carrying a meaning beside something else, and the two had
+   * 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.
+   *
+   * **`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
+   * say what it means rather than express it by leaving an attribute off.
    * - `label`: Accessible name.
    *
    * Required for a dot, which has no text to read.

package/types/vue.d.ts

@@ -599,7 +599,19 @@ export type HelixAvatarVueEvents = {
 
 export type HelixBadgeVueProps = {
   /** What the mark means, not how loudly it is drawn: the stylesheet picks a fill
-from what the count *is*. */
+from what the count *is*.
+
+**`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are
+a small mark carrying a meaning beside something else, and the two had
+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.
+
+**`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
+say what it means rather than express it by leaving an attribute off. */
   tone?: (HelixBadge["tone"]) | undefined;
   /** Accessible name.