@ixfx/components 0.2.3 → 0.2.5

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.d.ts

@@ -0,0 +1,97 @@
+import * as _$lit from "lit";
+import { LitElement, PropertyValues } from "lit";
+
+//#region src/ac-text/ac-text.d.ts
+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>;
+};
+type AcTextSelectDetail = {
+  readonly item: AcTextItem;
+  readonly query: string;
+};
+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).
+ */
+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`;
+};
+type AcTextChangeEvent = CustomEvent<AcTextChangeDetail>;
+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));
+ * ```
+ */
+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(): _$lit.TemplateResult<1>;
+  static styles: _$lit.CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-ac-text': AcTextElement;
+  }
+} //# sourceMappingURL=ac-text.d.ts.map
+//#endregion
+export { AcTextChangeDetail, AcTextChangeEvent, AcTextCompletionProvider, AcTextElement, AcTextItem, AcTextSelectDetail, AcTextSelectEvent };
+//# sourceMappingURL=ac-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ac-text.d.ts","names":[],"sources":["../src/ac-text/ac-text.ts"],"mappings":";;;;KAaY,UAAA;EAAA,SACD,KAAA;EAAA,SACA,QAAA;EAAA,SACA,IAAA;EAAA,SACA,GAAA;EAAA,SACA,IAAA,YAJA;EAAA,SAMA,MAAA,YAJA;EAAA,SAMA,SAAA,GAAY,WAAA;AAAA;AAAA,KAGX,kBAAA;EAAA,SACD,IAAA,EAAM,UAAA;EAAA,SACN,KAAA;AAAA;AAAA,KAGC,iBAAA,GAAoB,WAAA,CAAY,kBAAA;AAL5C;;;;AAAA,KAWY,kBAAA;EAVK,oFAYN,KAAA;EAXK;;AAGhB;;EAHgB,SAgBL,GAAA,UAbqB;EAAA,SAerB,IAAA,YATC;EAAA,SAWD,MAAA;AAAA;AAAA,KAGC,iBAAA,GAAoB,WAAA,CAAY,kBAAA;AAAA,KAEhC,wBAAA,IACP,KAAA,UAAe,MAAA,EAAQ,WAAA,KAAgB,OAAA,CAAQ,UAAA,MAAgB,UAAA;;;;;;AAHpE;;;;;AAEA;;;;;;;;;;;cAoDa,aAAA,SAAsB,UAAA;EAAA;EAnDiB;EAsDlD,kBAAA,EAAoB,wBAAA;EAtDwD;EA0D5E,WAAA;EAPW;EAWX,SAAA;;EAIA,UAAA;EAwCyC;;;;EAjCzC,KAAA;EAtB2C;;;;EA6B3C,SAAA;EAAA,QAEiB,MAAA;EAAA,QACA,QAAA;EAAA,QACA,OAAA;EAAA,QACA,UAAA;EAAA,QAET,OAAA;;EAaC,oBAAA,CAAA;EAAA,UAMU,OAAA,CAAQ,YAAA,EAAc,cAAA;EAiChC,KAAA,CAAM,OAAA,GAAU,YAAA,EAAc,cAAA,WAAyB,YAAA;EAWhE,cAAA,CAAe,KAAA,UAAe,cAAA,WAAyB,YAAA;EAavD,WAAA,CAAY,KAAA,UAAe,GAAA;EAAA,UAmPR,MAAA,CAAA,GA3QkB,KAAA,CA2QZ,cAAA;EAAA,OA6BT,MAAA,EA7BS,KAAA,CA6BH,SAAA;AAAA;AAAA,QAgJhB,MAAA;EAAA,UACI,qBAAA;IACR,cAAA,EAAgB,aAAA;EAAA;AAAA"}