@fusion.dev/helix-headless 0.97.0 → 0.99.0

package/custom-elements.json

@@ -3214,6 +3214,9 @@
               "Banded Chart"
             ],
             "tier": "headless",
+            "renders": [
+              "tooltip"
+            ],
             "group": "BaseAreaChart",
             "part": "Root",
             "examples": [
@@ -5833,6 +5836,9 @@
               "Categorical Chart"
             ],
             "tier": "headless",
+            "renders": [
+              "tooltip"
+            ],
             "group": "BaseBarChart",
             "part": "Root",
             "examples": [
@@ -13404,6 +13410,9 @@
               "Messages"
             ],
             "tier": "headless",
+            "renders": [
+              "chat-message"
+            ],
             "group": "BaseChat",
             "part": "Root",
             "examples": [
@@ -16589,6 +16598,9 @@
               "Pre"
             ],
             "tier": "headless",
+            "renders": [
+              "copy-button"
+            ],
             "group": "BaseCodeBlock",
             "part": "Root",
             "examples": [
@@ -18861,6 +18873,9 @@
               "InputColor"
             ],
             "tier": "headless",
+            "renders": [
+              "color-picker"
+            ],
             "group": "BaseColorInput",
             "part": "Root",
             "examples": [
@@ -20268,6 +20283,11 @@
               "Swatch picker"
             ],
             "tier": "headless",
+            "renders": [
+              "button",
+              "button-group",
+              "slider"
+            ],
             "group": "BaseColorPicker",
             "part": "Root",
             "examples": [
@@ -22426,6 +22446,10 @@
               "Search select"
             ],
             "tier": "headless",
+            "renders": [
+              "listbox",
+              "tag"
+            ],
             "group": "BaseCombobox",
             "part": "Root",
             "examples": [
@@ -23220,6 +23244,10 @@
               "Spotlight"
             ],
             "tier": "headless",
+            "renders": [
+              "dialog",
+              "listbox"
+            ],
             "group": "BaseCommand",
             "part": "Root",
             "examples": [
@@ -24437,6 +24465,9 @@
               "Copy to clipboard"
             ],
             "tier": "headless",
+            "renders": [
+              "tooltip"
+            ],
             "group": "BaseCopyButton",
             "part": "Root",
             "examples": [
@@ -26620,6 +26651,10 @@
               "Data grid"
             ],
             "tier": "headless",
+            "renders": [
+              "checkbox",
+              "pagination"
+            ],
             "group": "BaseDataTable",
             "part": "Root",
             "examples": [
@@ -29260,6 +29295,10 @@
               "InputDate"
             ],
             "tier": "headless",
+            "renders": [
+              "date-picker",
+              "tag"
+            ],
             "group": "BaseDateInput",
             "part": "Root",
             "examples": [
@@ -33777,6 +33816,9 @@
               "Share Chart"
             ],
             "tier": "headless",
+            "renders": [
+              "tooltip"
+            ],
             "group": "BaseDonutChart",
             "part": "Root",
             "examples": [
@@ -37713,6 +37755,9 @@
               "InputFile"
             ],
             "tier": "headless",
+            "renders": [
+              "tag"
+            ],
             "group": "BaseFileInput",
             "part": "Root",
             "examples": [
@@ -39509,6 +39554,11 @@
               "FilterBuilder"
             ],
             "tier": "headless",
+            "renders": [
+              "divider",
+              "menu",
+              "menu-item"
+            ],
             "group": "BaseFilterInput",
             "part": "Menu"
           },
@@ -43887,6 +43937,9 @@
               "Activity graph"
             ],
             "tier": "headless",
+            "renders": [
+              "tooltip"
+            ],
             "group": "BaseHeatmap",
             "part": "Root",
             "examples": [
@@ -45017,6 +45070,14 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "HelixIcon | undefined"
+              },
+              "description": "The icon itself, for a consumer who imported one.\n\n**The scalable door, and the one this library uses internally.** An icon is\ndata, `{ content, name, viewBox }`, so a value imported by name ships one\nglyph rather than the set, a weight is a subpath rather than an index of\nevery weight, and the supply stops being ours: anything exporting that\nshape works, whether it is Phosphor at another weight, Lucide, or a\nconsumer's own drawings.\n\n**A property and not an attribute**, because an object is not a string. The\nframeworks set properties and plain markup cannot, which is what `name` is\nfor. Set both and this wins, the value being the more specific statement."
+            },
             {
               "kind": "field",
               "name": "label",
@@ -45044,7 +45105,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Name of the icon in the Helix set.",
+              "description": "Name of the icon in the Helix set.\n\n**A lookup, and the reason both this and `icon` exist.** A name is a string,\nso it is what markup can carry, and resolving one means an index of the\nwhole set that no bundler can shake: 15 kB for a consumer who renders one\nmark. An attribute is the only thing an HTML author can write, and that is\nworth the index; a consumer who would rather not pay it hands over the\nvalue instead.",
               "attribute": "name"
             },
             {
@@ -45397,7 +45458,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Name of the icon in the Helix set.",
+              "description": "Name of the icon in the Helix set.\n\n**A lookup, and the reason both this and `icon` exist.** A name is a string,\nso it is what markup can carry, and resolving one means an index of the\nwhole set that no bundler can shake: 15 kB for a consumer who renders one\nmark. An attribute is the only thing an HTML author can write, and that is\nworth the index; a consumer who would rather not pay it hands over the\nvalue instead.",
               "fieldName": "name"
             }
           ],
@@ -50555,6 +50616,9 @@
               "Multi-line Chart"
             ],
             "tier": "headless",
+            "renders": [
+              "tooltip"
+            ],
             "group": "BaseLineChart",
             "part": "Root",
             "examples": [
@@ -59219,6 +59283,9 @@
               "Inbox item"
             ],
             "tier": "headless",
+            "renders": [
+              "format-date"
+            ],
             "group": "BaseNotifications",
             "part": "Notification"
           },
@@ -62572,6 +62639,9 @@
               "Data explorer"
             ],
             "tier": "headless",
+            "renders": [
+              "copy-button"
+            ],
             "group": "BaseObjectInspector",
             "part": "Root",
             "examples": [
@@ -66138,6 +66208,10 @@
               "Rows per page"
             ],
             "tier": "headless",
+            "renders": [
+              "option",
+              "select"
+            ],
             "group": "BasePagination",
             "part": "Size"
           },
@@ -74558,6 +74632,9 @@
               "Dot Plot"
             ],
             "tier": "headless",
+            "renders": [
+              "tooltip"
+            ],
             "group": "BaseScatterChart",
             "part": "Root",
             "examples": [
@@ -76686,6 +76763,9 @@
               "Picker"
             ],
             "tier": "headless",
+            "renders": [
+              "listbox"
+            ],
             "group": "BaseSelect",
             "part": "Root",
             "examples": [
@@ -84155,6 +84235,9 @@
               "Stage"
             ],
             "tier": "headless",
+            "renders": [
+              "button"
+            ],
             "group": "BaseSteps",
             "part": "Step"
           },
@@ -93833,6 +93916,10 @@
               "InputTime"
             ],
             "tier": "headless",
+            "renders": [
+              "tag",
+              "time-picker"
+            ],
             "group": "BaseTimeInput",
             "part": "Root",
             "examples": [
@@ -95266,6 +95353,10 @@
               "TimeList"
             ],
             "tier": "headless",
+            "renders": [
+              "listbox",
+              "option"
+            ],
             "group": "BaseTimePicker",
             "part": "Root",
             "examples": [
@@ -102333,6 +102424,9 @@
             "status": "stable",
             "documentation": "https://fusion.dev/helix/components/tour",
             "tier": "headless",
+            "renders": [
+              "button"
+            ],
             "group": "BaseTour",
             "part": "Stop"
           },
@@ -105686,6 +105780,10 @@
               "Up Next"
             ],
             "tier": "headless",
+            "renders": [
+              "menu",
+              "menu-item"
+            ],
             "group": "BaseVideoPlaylist",
             "part": "Menu"
           },
@@ -108303,6 +108401,10 @@
               "Movie"
             ],
             "tier": "headless",
+            "renders": [
+              "menu",
+              "menu-item"
+            ],
             "group": "BaseVideo",
             "part": "Root",
             "examples": [

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

@@ -1,4 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
+import { type HelixIcon } from '@fusion.dev/helix-icons';
 import { nothing, type TemplateResult } from 'lit';
 /**
  * @summary Renders a named icon from the Helix set.
@@ -36,6 +37,21 @@ import { nothing, type TemplateResult } from 'lit';
  * @csspart svg - The rendered SVG.
  */
 export declare class HelixHeadlessIcon extends HelixElement {
+    /**
+     * The icon itself, for a consumer who imported one.
+     *
+     * **The scalable door, and the one this library uses internally.** An icon is
+     * data, `{ content, name, viewBox }`, so a value imported by name ships one
+     * glyph rather than the set, a weight is a subpath rather than an index of
+     * every weight, and the supply stops being ours: anything exporting that
+     * shape works, whether it is Phosphor at another weight, Lucide, or a
+     * consumer's own drawings.
+     *
+     * **A property and not an attribute**, because an object is not a string. The
+     * frameworks set properties and plain markup cannot, which is what `name` is
+     * for. Set both and this wins, the value being the more specific statement.
+     */
+    icon?: HelixIcon;
     /**
      * Accessible name, for an icon that is not decorative.
      */
@@ -50,6 +66,13 @@ export declare class HelixHeadlessIcon extends HelixElement {
     mirror: boolean;
     /**
      * Name of the icon in the Helix set.
+     *
+     * **A lookup, and the reason both this and `icon` exist.** A name is a string,
+     * so it is what markup can carry, and resolving one means an index of the
+     * whole set that no bundler can shake: 15 kB for a consumer who renders one
+     * mark. An attribute is the only thing an HTML author can write, and that is
+     * worth the index; a consumer who would rather not pay it hands over the
+     * value instead.
      */
     name: string;
     protected render(): TemplateResult | typeof nothing;

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

@@ -17,7 +17,8 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         this.name = '';
     }
     render() {
-        const icon = Object.hasOwn(icons, this.name) ? icons[this.name] : undefined;
+        const named = Object.hasOwn(icons, this.name) ? icons[this.name] : undefined;
+        const icon = this.icon ?? named;
         if (!icon) {
             return nothing;
         }
@@ -35,6 +36,9 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
     </svg>`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessIcon.prototype, "icon", void 0);
 __decorate([
     property()
 ], HelixHeadlessIcon.prototype, "label", void 0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.97.0",
+  "version": "0.99.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.97.0",
-    "@fusion.dev/helix-icons": "0.97.0",
+    "@fusion.dev/helix-core": "0.99.0",
+    "@fusion.dev/helix-icons": "0.99.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.97.0",
-    "@fusion.dev/helix-testing": "0.97.0",
+    "@fusion.dev/helix-cem": "0.99.0",
+    "@fusion.dev/helix-testing": "0.99.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -7862,8 +7862,28 @@ Asked for rather than inferred from the name. The names are physical, and
 `arrow-left` drawn pointing right on an Arabic page would be the icon
 disagreeing with its own name for every reader who meant the left. */
   mirror?: (HelixHeadlessIcon["mirror"]) | undefined;
-  /** Name of the icon in the Helix set. */
+  /** Name of the icon in the Helix set.
+
+**A lookup, and the reason both this and `icon` exist.** A name is a string,
+so it is what markup can carry, and resolving one means an index of the
+whole set that no bundler can shake: 15 kB for a consumer who renders one
+mark. An attribute is the only thing an HTML author can write, and that is
+worth the index; a consumer who would rather not pay it hands over the
+value instead. */
   name?: (HelixHeadlessIcon["name"]) | undefined;
+  /** The icon itself, for a consumer who imported one.
+
+**The scalable door, and the one this library uses internally.** An icon is
+data, `{ content, name, viewBox }`, so a value imported by name ships one
+glyph rather than the set, a weight is a subpath rather than an index of
+every weight, and the supply stops being ours: anything exporting that
+shape works, whether it is Phosphor at another weight, Lucide, or a
+consumer's own drawings.
+
+**A property and not an attribute**, because an object is not a string. The
+frameworks set properties and plain markup cannot, which is what `name` is
+for. Set both and this wins, the value being the more specific statement. */
+  icon?: (HelixHeadlessIcon["icon"]) | undefined;
 };
 
 export type HelixHeadlessIconSolidJsProps = {
@@ -7875,8 +7895,28 @@ Asked for rather than inferred from the name. The names are physical, and
 `arrow-left` drawn pointing right on an Arabic page would be the icon
 disagreeing with its own name for every reader who meant the left. */
   "prop:mirror"?: (HelixHeadlessIcon["mirror"]) | undefined;
-  /** Name of the icon in the Helix set. */
+  /** Name of the icon in the Helix set.
+
+**A lookup, and the reason both this and `icon` exist.** A name is a string,
+so it is what markup can carry, and resolving one means an index of the
+whole set that no bundler can shake: 15 kB for a consumer who renders one
+mark. An attribute is the only thing an HTML author can write, and that is
+worth the index; a consumer who would rather not pay it hands over the
+value instead. */
   "prop:name"?: (HelixHeadlessIcon["name"]) | undefined;
+  /** The icon itself, for a consumer who imported one.
+
+**The scalable door, and the one this library uses internally.** An icon is
+data, `{ content, name, viewBox }`, so a value imported by name ships one
+glyph rather than the set, a weight is a subpath rather than an index of
+every weight, and the supply stops being ours: anything exporting that
+shape works, whether it is Phosphor at another weight, Lucide, or a
+consumer's own drawings.
+
+**A property and not an attribute**, because an object is not a string. The
+frameworks set properties and plain markup cannot, which is what `name` is
+for. Set both and this wins, the value being the more specific statement. */
+  "prop:icon"?: (HelixHeadlessIcon["icon"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -25535,6 +25575,25 @@ export type CustomElements = {
    * `arrow-left` drawn pointing right on an Arabic page would be the icon
    * disagreeing with its own name for every reader who meant the left.
    * - `name`: Name of the icon in the Helix set.
+   *
+   * **A lookup, and the reason both this and `icon` exist.** A name is a string,
+   * so it is what markup can carry, and resolving one means an index of the
+   * whole set that no bundler can shake: 15 kB for a consumer who renders one
+   * mark. An attribute is the only thing an HTML author can write, and that is
+   * worth the index; a consumer who would rather not pay it hands over the
+   * value instead.
+   * - `icon`: The icon itself, for a consumer who imported one.
+   *
+   * **The scalable door, and the one this library uses internally.** An icon is
+   * data, `{ content, name, viewBox }`, so a value imported by name ships one
+   * glyph rather than the set, a weight is a subpath rather than an index of
+   * every weight, and the supply stops being ours: anything exporting that
+   * shape works, whether it is Phosphor at another weight, Lucide, or a
+   * consumer's own drawings.
+   *
+   * **A property and not an attribute**, because an object is not a string. The
+   * frameworks set properties and plain markup cannot, which is what `name` is
+   * for. Set both and this wins, the value being the more specific statement. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -43608,6 +43667,25 @@ export type CustomElementsSolidJs = {
    * `arrow-left` drawn pointing right on an Arabic page would be the icon
    * disagreeing with its own name for every reader who meant the left.
    * - `name`: Name of the icon in the Helix set.
+   *
+   * **A lookup, and the reason both this and `icon` exist.** A name is a string,
+   * so it is what markup can carry, and resolving one means an index of the
+   * whole set that no bundler can shake: 15 kB for a consumer who renders one
+   * mark. An attribute is the only thing an HTML author can write, and that is
+   * worth the index; a consumer who would rather not pay it hands over the
+   * value instead.
+   * - `icon`: The icon itself, for a consumer who imported one.
+   *
+   * **The scalable door, and the one this library uses internally.** An icon is
+   * data, `{ content, name, viewBox }`, so a value imported by name ships one
+   * glyph rather than the set, a weight is a subpath rather than an index of
+   * every weight, and the supply stops being ours: anything exporting that
+   * shape works, whether it is Phosphor at another weight, Lucide, or a
+   * consumer's own drawings.
+   *
+   * **A property and not an attribute**, because an object is not a string. The
+   * frameworks set properties and plain markup cannot, which is what `name` is
+   * for. Set both and this wins, the value being the more specific statement. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by

package/types/vue.d.ts

@@ -4025,8 +4025,28 @@ Asked for rather than inferred from the name. The names are physical, and
 `arrow-left` drawn pointing right on an Arabic page would be the icon
 disagreeing with its own name for every reader who meant the left. */
   mirror?: (HelixHeadlessIcon["mirror"]) | undefined;
-  /** Name of the icon in the Helix set. */
+  /** Name of the icon in the Helix set.
+
+**A lookup, and the reason both this and `icon` exist.** A name is a string,
+so it is what markup can carry, and resolving one means an index of the
+whole set that no bundler can shake: 15 kB for a consumer who renders one
+mark. An attribute is the only thing an HTML author can write, and that is
+worth the index; a consumer who would rather not pay it hands over the
+value instead. */
   name?: (HelixHeadlessIcon["name"]) | undefined;
+  /** The icon itself, for a consumer who imported one.
+
+**The scalable door, and the one this library uses internally.** An icon is
+data, `{ content, name, viewBox }`, so a value imported by name ships one
+glyph rather than the set, a weight is a subpath rather than an index of
+every weight, and the supply stops being ours: anything exporting that
+shape works, whether it is Phosphor at another weight, Lucide, or a
+consumer's own drawings.
+
+**A property and not an attribute**, because an object is not a string. The
+frameworks set properties and plain markup cannot, which is what `name` is
+for. Set both and this wins, the value being the more specific statement. */
+  icon?: (HelixHeadlessIcon["icon"]) | undefined;
 };
 
 export type HelixHeadlessIconVueEvents = {};