@fusion.dev/helix 0.13.0 → 0.13.2

package/custom-elements.json

@@ -20753,6 +20753,18 @@
                 "module": "src/combobox/root/combobox-root.ts"
               }
             },
+            {
+              "type": {
+                "text": "HelixFilterEvent"
+              },
+              "description": "Fired as the reader types, carrying the text the list is being narrowed to. Cancelable: refusing it leaves the list whole, and is how a consumer takes the filtering for themselves.",
+              "name": "helix-filter",
+              "reactProp": "onhelix-filter",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCombobox",
+                "module": "src/combobox/root/combobox-root.ts"
+              }
+            },
             {
               "type": {
                 "text": "Event"
@@ -71752,6 +71764,26 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tags/tags.css.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/shared/tags/tags.css.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/skeleton/index.ts",

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

@@ -44,25 +44,11 @@ position: absolute;
 translate: 0 -50%;
 }
 
-[part="tags"] {
-display: contents;
-}
-
 [part="tag"] {
 flex: 0 0 auto;
 max-inline-size: 100%;
 }
 
-[part="rest"] {
-align-self: center;
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-white-space: nowrap;
-}
-
 [part="control"] {
 all: unset;
 box-sizing: border-box;

package/dist/combobox/root/combobox-root.js

@@ -10,10 +10,11 @@ import '../../listbox/index.js';
 import '../../tag/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles as tagRowStyles } from '../../shared/tags/tags.css.js';
 import { styles } from './combobox-root.css.js';
 let HelixCombobox = class HelixCombobox extends HelixHeadlessCombobox {
     static { this.tier = 'helix-'; }
-    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+    static { this.styles = [fieldStyles, fieldStackedStyles, tagRowStyles, styles]; }
 };
 HelixCombobox = __decorate([
     customElement('helix-combobox')

package/dist/element-events.generated.js

@@ -32,6 +32,7 @@ registerElementEvents({
         'helix-before-close',
         'helix-before-open',
         'helix-create',
+        'helix-filter',
         'input',
         'toggle',
     ],

package/dist/filter-input/root/filter-input-root.css.js

@@ -43,25 +43,11 @@ border-color: var(--helix-color-danger);
 outline-color: var(--helix-color-danger);
 }
 
-[part="tags"] {
-display: contents;
-}
-
 ::slotted([slot="tags"]) {
 flex: 0 0 auto;
 max-inline-size: 100%;
 }
 
-[part="rest"] {
-align-self: center;
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-white-space: nowrap;
-}
-
 [part="control"] {
 all: unset;
 box-sizing: border-box;

package/dist/filter-input/root/filter-input-root.js

@@ -10,9 +10,16 @@ import '../../icon/index.js';
 import { styles as glyphStyles } from '../../icon/glyph.css.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles as tagRowStyles } from '../../shared/tags/tags.css.js';
 import { styles } from './filter-input-root.css.js';
 let HelixFilterInput = class HelixFilterInput extends HelixHeadlessFilterInput {
-    static { this.styles = [glyphStyles, fieldStyles, fieldStackedStyles, styles]; }
+    static { this.styles = [
+        glyphStyles,
+        fieldStyles,
+        fieldStackedStyles,
+        tagRowStyles,
+        styles,
+    ]; }
 };
 HelixFilterInput = __decorate([
     customElement('helix-filter-input')

package/dist/shared/tags/tags.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/shared/tags/tags.css.js

@@ -0,0 +1,14 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="tags"] {
+display: contents;
+}
+
+[part="rest"] {
+align-self: center;
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+white-space: nowrap;
+}`);

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.13.0",
+  "version": "0.13.2",
   "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.13.0",
-    "@fusion.dev/helix-headless": "0.13.0",
-    "@fusion.dev/helix-styles": "0.13.0"
+    "@fusion.dev/helix-core": "0.13.2",
+    "@fusion.dev/helix-headless": "0.13.2",
+    "@fusion.dev/helix-styles": "0.13.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.13.0",
-    "@fusion.dev/helix-testing": "0.13.0",
+    "@fusion.dev/helix-cem": "0.13.2",
+    "@fusion.dev/helix-testing": "0.13.2",
     "@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

@@ -4046,6 +4046,9 @@ export type HelixComboboxHelixBeforeOpenElementEvent =
 /** `helix-create` event type */
 export type HelixComboboxHelixCreateElementEvent =
   HelixComboboxElementEvent<HelixCreateEvent>;
+/** `helix-filter` event type */
+export type HelixComboboxHelixFilterElementEvent =
+  HelixComboboxElementEvent<HelixFilterEvent>;
 
 export type HelixComboboxProps = {
   /** Whether the element is open.
@@ -4195,6 +4198,8 @@ differently: they are one chooser to a consumer. */
   "onhelix-before-open"?: ((e: HelixComboboxHelixBeforeOpenElementEvent) => void) | undefined;
   /** Fired when the reader asks for something the list does not hold, and cancelable. */
   "onhelix-create"?: ((e: HelixComboboxHelixCreateElementEvent) => void) | undefined;
+  /** Fired as the reader types, carrying the text the list is being narrowed to. Cancelable: refusing it leaves the list whole, and is how a consumer takes the filtering for themselves. */
+  "onhelix-filter"?: ((e: HelixComboboxHelixFilterElementEvent) => void) | undefined;
   /** Says the state moved, carrying `newState` and `oldState`. */
   ontoggle?: ((e: HelixComboboxElementEvent) => void) | undefined;
 };
@@ -4348,6 +4353,8 @@ differently: they are one chooser to a consumer. */
   ) => void) | undefined;
   /** Fired when the reader asks for something the list does not hold, and cancelable. */
   "on:helix-create"?: ((e: HelixComboboxHelixCreateElementEvent) => void) | undefined;
+  /** Fired as the reader types, carrying the text the list is being narrowed to. Cancelable: refusing it leaves the list whole, and is how a consumer takes the filtering for themselves. */
+  "on:helix-filter"?: ((e: HelixComboboxHelixFilterElementEvent) => void) | undefined;
   /** Says the state moved, carrying `newState` and `oldState`. */
   "on:toggle"?: ((e: HelixComboboxElementEvent) => void) | undefined;
 
@@ -21527,6 +21534,7 @@ export type CustomElements = {
    * - `helix-before-close`: Fired before it closes. Cancelable: refusing it takes the decision and nothing moves.
    * - `helix-before-open`: Fired before the panel opens. Cancelable: refusing it takes the decision and nothing moves.
    * - `helix-create`: Fired when the reader asks for something the list does not hold, and cancelable.
+   * - `helix-filter`: Fired as the reader types, carrying the text the list is being narrowed to. Cancelable: refusing it leaves the list whole, and is how a consumer takes the filtering for themselves.
    * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
    *
    * ## Slots
@@ -37479,6 +37487,7 @@ export type CustomElementsSolidJs = {
    * - `helix-before-close`: Fired before it closes. Cancelable: refusing it takes the decision and nothing moves.
    * - `helix-before-open`: Fired before the panel opens. Cancelable: refusing it takes the decision and nothing moves.
    * - `helix-create`: Fired when the reader asks for something the list does not hold, and cancelable.
+   * - `helix-filter`: Fired as the reader types, carrying the text the list is being narrowed to. Cancelable: refusing it leaves the list whole, and is how a consumer takes the filtering for themselves.
    * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
    *
    * ## Slots

package/types/vue.d.ts

@@ -2073,6 +2073,9 @@ export type HelixComboboxHelixBeforeOpenElementEvent =
 /** `helix-create` event type */
 export type HelixComboboxHelixCreateElementEvent =
   HelixComboboxElementEvent<HelixCreateEvent>;
+/** `helix-filter` event type */
+export type HelixComboboxHelixFilterElementEvent =
+  HelixComboboxElementEvent<HelixFilterEvent>;
 
 export type HelixComboboxVueProps = {
   /** Whether the element is open.
@@ -2220,6 +2223,8 @@ export type HelixComboboxVueEvents = {
   "helix-before-open": HelixComboboxHelixBeforeOpenElementEvent;
   /** Fired when the reader asks for something the list does not hold, and cancelable. */
   "helix-create": HelixComboboxHelixCreateElementEvent;
+  /** Fired as the reader types, carrying the text the list is being narrowed to. Cancelable: refusing it leaves the list whole, and is how a consumer takes the filtering for themselves. */
+  "helix-filter": HelixComboboxHelixFilterElementEvent;
   /** Says the state moved, carrying `newState` and `oldState`. */
   toggle: HelixComboboxElementEvent;
 };