@fusion.dev/helix 0.20.2 → 0.22.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"
@@ -6131,7 +6136,7 @@
               }
             },
             {
-              "description": "After it, for a count or a mark.",
+              "description": "After the label and outside the link, so it may be a control: this is where a switcher's menu trigger goes. A count or a mark is equally at home here and is no longer read into the link's accessible name.",
               "name": "end",
               "inheritedFrom": {
                 "name": "HelixHeadlessBreadcrumb",
@@ -6771,8 +6776,8 @@
                 "slug": "overflow"
               },
               {
-                "description": "A crumb that opens a menu, for switching what the trail is about.",
-                "min": 320,
+                "description": "A crumb that is both a link and a switch: the word goes to its page, the chevron opens the siblings.",
+                "min": 380,
                 "slug": "switcher"
               }
             ],

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/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.2",
+  "version": "0.22.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.2",
-    "@fusion.dev/helix-headless": "0.20.2",
-    "@fusion.dev/helix-styles": "0.20.2"
+    "@fusion.dev/helix-core": "0.22.0",
+    "@fusion.dev/helix-headless": "0.22.0",
+    "@fusion.dev/helix-styles": "0.22.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.20.2",
-    "@fusion.dev/helix-testing": "0.20.2",
+    "@fusion.dev/helix-cem": "0.22.0",
+    "@fusion.dev/helix-testing": "0.22.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.
@@ -19431,7 +19467,7 @@ export type CustomElements = {
    *
    * - `(default)`: The step: a link, or the text of the current page.
    * - `separator`: Replaces the chevron shown before this item.
-   * - `end`: After it, for a count or a mark.
+   * - `end`: After the label and outside the link, so it may be a control: this is where a switcher's menu trigger goes. A count or a mark is equally at home here and is no longer read into the link's accessible name.
    * - `start`: Before the label, for an icon.
    *
    * ## CSS Custom Properties
@@ -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.
@@ -35406,7 +35454,7 @@ export type CustomElementsSolidJs = {
    *
    * - `(default)`: The step: a link, or the text of the current page.
    * - `separator`: Replaces the chevron shown before this item.
-   * - `end`: After it, for a count or a mark.
+   * - `end`: After the label and outside the link, so it may be a control: this is where a switcher's menu trigger goes. A count or a mark is equally at home here and is no longer read into the link's accessible name.
    * - `start`: Before the label, for an icon.
    *
    * ## CSS Custom Properties

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.