@fusion.dev/helix-headless 0.98.0 → 0.99.0

package/custom-elements.json

@@ -45070,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",
@@ -45097,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"
             },
             {
@@ -45450,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"
             }
           ],

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.98.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.98.0",
-    "@fusion.dev/helix-icons": "0.98.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.98.0",
-    "@fusion.dev/helix-testing": "0.98.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 = {};