@fusion.dev/helix 0.12.3 → 0.13.1

package/dist/element-events.generated.js

@@ -32,6 +32,7 @@ registerElementEvents({
         'helix-before-close',
         'helix-before-open',
         'helix-create',
+        'helix-filter',
         'input',
         'toggle',
     ],
@@ -52,6 +53,7 @@ registerElementEvents({
     'helix-drilldown': ['helix-select'],
     'helix-drilldown-item': ['helix-select'],
     'helix-file-input': ['change', 'helix-before-change', 'input'],
+    'helix-filter-input': ['change', 'helix-before-change', 'input'],
     'helix-heatmap': ['helix-resize'],
     'helix-image': ['error', 'load'],
     'helix-input': ['change', 'helix-before-change', 'input'],

package/dist/filter-input/index.d.ts

@@ -0,0 +1 @@
+export * from './root/filter-input-root.js';

package/dist/filter-input/index.js

@@ -0,0 +1 @@
+export * from './root/filter-input-root.js';

package/dist/filter-input/root/filter-input-root.css.d.ts

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

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

@@ -0,0 +1,119 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+--_filter-input-size: var(--filter-input-size, var(--helix-size-control));
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+}
+
+[part="field"] {
+align-items: center;
+background-color: var(--filter-input-background-color, var(--helix-color-well));
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-subtle);
+display: flex;
+flex-wrap: wrap;
+gap: var(--helix-space-2xs);
+min-block-size: var(--_filter-input-size);
+
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--helix-space-xs);
+transition:
+border-color var(--helix-duration-fast) var(--helix-easing-standard),
+background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not(:disabled)) [part="field"]:hover {
+border-color: var(--helix-color-primary);
+}
+
+:host(:focus-within) [part="field"],
+:host(:focus-within) [part="field"]:hover {
+border-color: var(--helix-color-primary);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: 0;
+}
+
+:host(:state(invalid)) [part="field"],
+:host(:state(invalid)) [part="field"]:hover,
+:host(:state(invalid):focus-within) [part="field"],
+:host(:state(invalid):focus-within) [part="field"]:hover {
+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;
+color: var(--helix-color-foreground);
+flex: 1 1 var(--filter-input-control-size, 6ch);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+}
+
+slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+}
+
+[part="clear"] {
+--icon-size: var(--helix-size-icon-tight);
+all: unset;
+
+align-items: center;
+align-self: center;
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: flex;
+flex: 0 0 auto;
+justify-content: center;
+min-block-size: var(--helix-size-icon-loose);
+min-inline-size: var(--helix-size-icon-loose);
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="clear"]:hover {
+color: var(--helix-color-foreground);
+}
+
+[part="clear"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host(:disabled) [part="field"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

package/dist/filter-input/root/filter-input-root.d.ts

@@ -0,0 +1,37 @@
+import { HelixHeadlessFilterInput } from '@fusion.dev/helix-headless/filter-input';
+import type { CSSResultGroup } from 'lit';
+import '../../icon/index.js';
+/**
+ * @summary A field that narrows something else, beside what is already narrowing it.
+ *
+ * @description
+ * The frame is the field rather than the input, so the tokens sit inside the
+ * same box as the text and the focus ring is drawn once around the whole
+ * control. It grows down a line at a time as tokens are added, which is the
+ * arrangement Combobox takes when it is holding a selection.
+ *
+ * **The tokens are the consumer's own elements**, so the only thing said about
+ * them here is to keep their size and not run past the field. A `Tag` slotted
+ * into `tags` already looks like one; anything else looks like whatever it is.
+ *
+ * Height comes from the region, like every other control: `data-density` on
+ * whatever holds it, not a `size` here.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases SearchField, FacetInput, TokenInput
+ * @documentation https://helix.fusion.dev/components/filter-input
+ *
+ * @cssproperty --filter-input-background-color - Fill behind the field.
+ * @cssproperty --filter-input-control-size - Smallest the text keeps as tokens fill the line, before it wraps to its own.
+ * @cssproperty --filter-input-size - Height of the field with nothing in it, which it grows from.
+ */
+export declare class HelixFilterInput extends HelixHeadlessFilterInput {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-filter-input': HelixFilterInput;
+    }
+}

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

@@ -0,0 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessFilterInput } from '@fusion.dev/helix-headless/filter-input';
+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 } from './filter-input-root.css.js';
+let HelixFilterInput = class HelixFilterInput extends HelixHeadlessFilterInput {
+    static { this.styles = [glyphStyles, fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixFilterInput = __decorate([
+    customElement('helix-filter-input')
+], HelixFilterInput);
+export { HelixFilterInput };

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export * from './drawer/index.js';
 export * from './drilldown/index.js';
 export * from './empty/index.js';
 export * from './file-input/index.js';
+export * from './filter-input/index.js';
 export * from './flex/index.js';
 export * from './format-date/index.js';
 export * from './grid/index.js';

package/dist/index.js

@@ -34,6 +34,7 @@ export * from './drawer/index.js';
 export * from './drilldown/index.js';
 export * from './empty/index.js';
 export * from './file-input/index.js';
+export * from './filter-input/index.js';
 export * from './flex/index.js';
 export * from './format-date/index.js';
 export * from './grid/index.js';

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.12.3",
+  "version": "0.13.1",
   "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.12.3",
-    "@fusion.dev/helix-headless": "0.12.3",
-    "@fusion.dev/helix-styles": "0.12.3"
+    "@fusion.dev/helix-core": "0.13.1",
+    "@fusion.dev/helix-headless": "0.13.1",
+    "@fusion.dev/helix-styles": "0.13.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.12.3",
-    "@fusion.dev/helix-testing": "0.12.3",
+    "@fusion.dev/helix-cem": "0.13.1",
+    "@fusion.dev/helix-testing": "0.13.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",