@ixfx/components 0.2.2 → 0.2.4

package/bundle/style.css

@@ -0,0 +1,133 @@
+:root {
+  --surface-0: oklch(5% .02 240);
+  --surface-1: oklch(8% .02 240);
+  --surface-2: oklch(12% .02 240);
+  --surface-3: oklch(15% .02 240);
+  --surface-4: oklch(22% .02 240);
+  --surface-5: oklch(28% .02 240);
+  --surface-6: oklch(35% .02 240);
+  --surface-2-text: #fff;
+  --surface-3-text: oklch(75% .02 240);
+  --surface-4-text: #fff;
+  --surface-5-text: #fff;
+  --surface-6-text: #fff;
+  --surface-muted-text: oklch(55% .02 240);
+  --content: oklch(10% .01 240);
+  --content-text: #fff;
+  --accent: oklch(60% .15 140);
+  --accent-text: #fff;
+  --plot-color: var(--accent);
+  --error: oklch(60% .15 20);
+  --error-text: #fff;
+  --font-family: system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+  --font-weight: 400;
+  --font-weight-bold: 600;
+  --text-xs: 10px;
+  --text-s: 11px;
+  --text-m: 12px;
+  --text-l: 13px;
+  --text-xl: 16px;
+  --text-2xl: 20px;
+  --space-xs: 3px;
+  --space-s: 4px;
+  --space-m: 8px;
+  --space-l: 12px;
+  --space-xl: 16px;
+  --space-2xl: 20px;
+  --border: 1px solid oklch(25% .02 240);
+  --border-subtle: 1px solid oklch(18% .02 240);
+  --radius-s: 3px;
+  --radius-m: 4px;
+  --radius-l: 6px;
+  --radius-xl: 8px;
+  --shadow-m: 0 4px 12px #0000004d;
+  --shadow-l: 0 4px 24px #00000080;
+  --disabled-opacity: .5;
+  --transition: .15s ease-out;
+  --prominence-idle-opacity: .6;
+  --prominence-idle-saturate: .4;
+  --prominence-tickled-opacity: .85;
+  --prominence-tickled-saturate: .8;
+  --prominence-disabled-opacity: .3;
+  --prominence-disabled-saturate: .1;
+  --transparent-bg: oklch(30% .02 240);
+  --item-border: 1px solid var(--surface-5);
+  --item-border-tickled: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
+  --item-border-selected: 1px dashed var(--accent);
+  --item-border-active: 2px solid var(--accent);
+  --item-border-dragged: 2px dotted color-mix(in oklch, var(--accent) 80%, transparent);
+  --item-border-disabled: 1px solid var(--surface-4);
+  --item-bg-tickled: var(--surface-5);
+  --item-text-tickled: var(--surface-5-text);
+  --item-bg-selected: var(--accent);
+  --item-text-selected: var(--accent-text);
+  --item-label-font-style-default: normal;
+  --item-label-font-style-selected: italic;
+  --item-label-font-style-tickled: normal;
+  --item-label-text-decoration-default: none;
+  --item-label-text-decoration-selected: none;
+  --item-label-text-decoration-tickled: underline;
+  --item-label-text-underline-offset-default: auto;
+  --item-label-text-underline-offset-tickled: 3px;
+  --deboss-3: inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-1) 60%, transparent),
+    inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-3) 50%, transparent),
+    -2px -2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);
+  --emboss-3: inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent),
+    inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),
+    2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --surface-0: oklch(70% 0 0);
+    --surface-1: oklch(80% .01 240);
+    --surface-2: oklch(85% .01 240);
+    --surface-3: oklch(90% .01 240);
+    --surface-4: oklch(94% .01 240);
+    --surface-5: oklch(96% .01 240);
+    --surface-6: oklch(99% .01 240);
+    --surface-2-text: oklch(15% .02 240);
+    --surface-3-text: oklch(25% .02 240);
+    --surface-4-text: oklch(15% .02 240);
+    --surface-5-text: oklch(10% .02 240);
+    --surface-6-text: oklch(10% .02 240);
+    --surface-muted-text: oklch(45% .02 240);
+    --content: oklch(100% 0 0);
+    --content-text: oklch(10% .02 240);
+    --accent: oklch(45% .15 140);
+    --accent-text: #fff;
+    --plot-color: var(--accent);
+    --error: oklch(55% .15 20);
+    --error-text: #fff;
+    --border: 1px solid oklch(80% .01 240);
+    --border-subtle: 1px solid oklch(88% .01 240);
+    --shadow-m: 0 2px 8px #0000001a;
+    --shadow-l: 0 4px 16px #00000026;
+    --prominence-idle-opacity: .55;
+    --prominence-idle-saturate: .35;
+    --prominence-tickled-opacity: .8;
+    --prominence-tickled-saturate: .75;
+    --prominence-disabled-opacity: .25;
+    --prominence-disabled-saturate: .1;
+    --transparent-bg: oklch(85% .01 240);
+    --item-border: 1px solid var(--surface-4);
+    --item-border-tickled: 1px solid color-mix(in oklch, var(--accent) 50%, transparent);
+    --item-border-selected: 1px dashed var(--accent);
+    --item-border-active: 2px solid var(--accent);
+    --item-border-dragged: 2px dotted var(--accent);
+    --item-border-disabled: 1px solid var(--surface-3);
+    --item-bg-tickled: var(--surface-4);
+    --item-text-tickled: var(--surface-4-text);
+    --item-bg-selected: var(--accent);
+    --item-text-selected: var(--accent-text);
+    --item-label-font-style-default: normal;
+    --item-label-font-style-selected: italic;
+    --item-label-font-style-tickled: normal;
+    --item-label-text-decoration-default: none;
+    --item-label-text-decoration-selected: none;
+    --item-label-text-decoration-tickled: underline;
+    --item-label-text-underline-offset-default: auto;
+    --item-label-text-underline-offset-tickled: 3px;
+  }
+}

package/dist/ac-text/ac-text.d.ts

@@ -0,0 +1,99 @@
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+import '../icons/icon.js';
+export type AcTextItem = {
+    readonly label: string;
+    readonly subLabel?: string;
+    readonly icon?: string;
+    readonly key?: string;
+    readonly data?: unknown;
+    /** When true, Tab-accept will not append `tabSuffix`. */
+    readonly isLeaf?: boolean;
+    /** Character positions within label that matched the query, used for CSS highlight rendering. */
+    readonly positions?: ReadonlySet<number>;
+};
+export type AcTextSelectDetail = {
+    readonly item: AcTextItem;
+    readonly query: string;
+};
+export type AcTextSelectEvent = CustomEvent<AcTextSelectDetail>;
+/**
+ * Fired when the user commits a value — either by pressing Enter on typed text
+ *  or by selecting an item from the autocomplete popup (keyboard or click).
+ */
+export type AcTextChangeDetail = {
+    /** The committed text value (typed text, or the selected item's label). */
+    readonly value: string;
+    /**
+     * The item key. For autocomplete items: `item.key ?? item.label`.
+     *  For plain typed text: the text itself.
+     */
+    readonly key: string;
+    /** The item's `data` payload. Only present for autocomplete selections. */
+    readonly data?: unknown;
+    /** Whether the commit came from plain typed text or an autocomplete selection. */
+    readonly source: `text` | `autocomplete`;
+};
+export type AcTextChangeEvent = CustomEvent<AcTextChangeDetail>;
+export type AcTextCompletionProvider = (query: string, signal: AbortSignal) => Promise<AcTextItem[]> | AcTextItem[];
+/**
+ * VS Code command-palette style autocomplete text input.
+ *
+ * Set `completionProvider` to a function that returns matching items for a
+ * given query string. Results are shown in a popup that only exists in the
+ * DOM while the input has focus.
+ *
+ * @fires {AcTextSelectEvent} ac-select — when an autocomplete item is selected
+ * @fires {AcTextChangeEvent} change — when the user commits a value (Enter on typed text or autocomplete selection)
+ *
+ * @example
+ * ```html
+ * <ixfx-ac-text placeholder="Search commands…"></ixfx-ac-text>
+ * ```
+ * ```ts
+ * el.completionProvider = async (query) => commands.filter(c =>
+ *   c.label.toLowerCase().includes(query.toLowerCase())
+ * );
+ * el.addEventListener('change', e => console.log(e.detail));
+ * ```
+ */
+export declare class AcTextElement extends LitElement {
+    #private;
+    /** Provides completion results for a query string. */
+    completionProvider: AcTextCompletionProvider | undefined;
+    /** Placeholder text for the input. */
+    placeholder: string;
+    /** Maximum number of query results to cache (LRU). */
+    cacheSize: number;
+    /** Debounce delay in ms before invoking the provider after keystroke. */
+    debounceMs: number;
+    /**
+     * Pre-populate the input with this value. Updated externally after construction is ignored
+     *  unless the input is not currently focused.
+     */
+    value: string;
+    /**
+     * String appended to the label when Tab is used to accept a suggestion.
+     *  Useful for path-style inputs where Tab-accepting a segment should add the separator.
+     */
+    tabSuffix: string;
+    private _query;
+    private _results;
+    private _isOpen;
+    private _isLoading;
+    private tickled;
+    constructor();
+    disconnectedCallback(): void;
+    protected updated(changedProps: PropertyValues): void;
+    focus(options?: FocusOptions, selectionStart?: number, selectionEnd?: number): void;
+    focusWithValue(value: string, selectionStart?: number, selectionEnd?: number): void;
+    selectRange(start: number, end?: number): void;
+    protected render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-ac-text': AcTextElement;
+    }
+}
+//# sourceMappingURL=ac-text.d.ts.map

package/dist/ac-text/ac-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ac-text.d.ts","sourceRoot":"","sources":["../../src/ac-text/ac-text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,kBAAkB,CAAC;AAM1B,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,yDAAyD;IACzD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,iGAAiG;IACjG,QAAQ,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC;AAEhE;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2EAA2E;IAC3E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,kFAAkF;IAClF,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,cAAc,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC;AAEhE,MAAM,MAAM,wBAAwB,GAChC,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,UAAU,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC;AA6BjF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,aAAc,SAAQ,UAAU;;IAC3C,sDAAsD;IAEtD,kBAAkB,EAAE,wBAAwB,GAAG,SAAS,CAAC;IAEzD,sCAAsC;IAEtC,WAAW,SAAM;IAEjB,sDAAsD;IAEtD,SAAS,SAAM;IAEf,yEAAyE;IAEzE,UAAU,SAAO;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,SAAM;IAEN,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,OAAO,CAEZ;;IAWM,oBAAoB,IAAI,IAAI;cAMlB,OAAO,CAAC,YAAY,EAAE,cAAc,GAAG,IAAI;IAiCrD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE,cAAc,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI;IAW5F,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI;IAanF,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI;cAmP3B,MAAM;IA6BzB,OAAgB,MAAM,4BA6IpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF"}