@sken-ds/primitives 0.3.0 → 0.3.4

package/dist/sken-combobox.js

@@ -0,0 +1,590 @@
+import { t as e } from "./decorate-D4FKzyDw.js";
+import "./sken-filter-chip.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, query as o, state as s } from "lit/decorators.js";
+//#region src/components/sken-combobox.ts
+var c = class extends t {
+	constructor(...e) {
+		super(...e), this.mode = "single", this.display = "count", this.chipOverflow = "wrap", this.value = null, this.filterable = !0, this.label = "", this.helperText = "", this.placeholder = "", this.disabled = !1, this.invalid = !1, this.required = !1, this.name = "", this.size = "md", this.describedById = "", this._items = [], this._query = "", this._open = !1, this._activeIndex = -1, this._visibleChipCount = -1, this._onKeydown = (e) => {
+			if (!this.disabled) switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), this._open ? this._activeIndex = this._nextSelectableIndex(this._activeIndex, 1) : this._open_();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), this._open ? this._activeIndex = this._nextSelectableIndex(this._activeIndex, -1) : this._open_();
+					break;
+				case "Home":
+					if (!this._open) return;
+					e.preventDefault(), this._activeIndex = this._firstSelectableIndex();
+					break;
+				case "End": {
+					if (!this._open) return;
+					e.preventDefault();
+					let t = this._visibleItems;
+					for (let e = t.length - 1; e >= 0; e--) if (!t[e].disabled) {
+						this._activeIndex = e;
+						break;
+					}
+					break;
+				}
+				case "Enter": {
+					if (!this._open) {
+						e.preventDefault(), this._open_();
+						return;
+					}
+					let t = this._visibleItems[this._activeIndex];
+					t && !t.disabled && (e.preventDefault(), this._selectItem(t));
+					break;
+				}
+				case "Escape":
+					if (this._open) e.preventDefault(), this._close();
+					else if (this.value !== null && this.value !== void 0) {
+						e.preventDefault();
+						let t = this.mode === "multiple" ? [] : null;
+						this._setValue(t);
+					}
+					break;
+				case "Tab": this._close();
+			}
+		}, this._onInput = (e) => {
+			if (!this.filterable) return;
+			let t = e.target;
+			this._query = t.value, this._open || this._open_(), this._activeIndex = this._firstSelectableIndex();
+		}, this._onFocus = () => {
+			this.dispatchEvent(new FocusEvent("sken-focus", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this._onBlur = () => {
+			setTimeout(() => {
+				this._close(), this.dispatchEvent(new FocusEvent("sken-blur", {
+					bubbles: !0,
+					composed: !0
+				}));
+			}, 100);
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._observer = new MutationObserver(() => {
+			this._resolveItems(), this.requestUpdate();
+		}), this._observer.observe(this, {
+			childList: !0,
+			subtree: !0
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._observer?.disconnect();
+	}
+	willUpdate(e) {
+		this._resolveItems();
+	}
+	firstUpdated(e) {
+		this._resolveItems(), queueMicrotask(() => {
+			this._items.length === 0 && this.children.length > 0 && (this._resolveItems(), this.requestUpdate());
+		});
+	}
+	updated(e) {
+		if (super.updated(e), this.mode !== "multiple" || this.display !== "chips" || this.chipOverflow !== "count") {
+			this._visibleChipCount !== -1 && (this._visibleChipCount = -1);
+			return;
+		}
+		let t = this.renderRoot.querySelector(".chip-row");
+		if (!t) return;
+		let n = this.renderRoot.querySelector(".trigger");
+		if (!n) return;
+		let r = Array.from(t.querySelectorAll("sken-filter-chip:not(.overflow)"));
+		if (r.length === 0) {
+			this._visibleChipCount !== 0 && (this._visibleChipCount = 0);
+			return;
+		}
+		let i = getComputedStyle(n), a = (parseFloat(i.paddingLeft) || 0) + (parseFloat(i.paddingRight) || 0), o = parseFloat(i.gap) || 0, s = n.clientWidth - a, c = 32 + o, l = 0, u = 0;
+		for (let e = 0; e < r.length; e++) {
+			let t = r[e].offsetWidth, n = l + t + (e > 0 ? o : 0);
+			if (n + (r.length - (e + 1) > 0 ? c : 0) > s) break;
+			l = n, u = e + 1;
+		}
+		this._visibleChipCount !== u && (this._visibleChipCount = u);
+	}
+	_resolveItems() {
+		let e = [];
+		for (let t of Array.from(this.children)) if (customElements.get("sken-combobox-group") && t instanceof customElements.get("sken-combobox-group")) {
+			let n = t, r = n.label || "", i = n.disabled;
+			for (let t of Array.from(n.children)) if (customElements.get("sken-combobox-item") && t instanceof customElements.get("sken-combobox-item")) {
+				let n = t;
+				e.push({
+					value: n.value,
+					label: n.label,
+					disabled: n.disabled || i,
+					groupLabel: r,
+					groupDisabled: i
+				});
+			}
+		} else if (customElements.get("sken-combobox-item") && t instanceof customElements.get("sken-combobox-item")) {
+			let n = t;
+			e.push({
+				value: n.value,
+				label: n.label,
+				disabled: n.disabled,
+				groupLabel: null,
+				groupDisabled: !1
+			});
+		}
+		this._items = e;
+	}
+	get _visibleItems() {
+		if (!this._query) return this._items;
+		let e = this._query.toLowerCase();
+		return this._items.filter((e) => !e.disabled || !0).filter((t) => t.label.toLowerCase().includes(e));
+	}
+	get _visibleGroups() {
+		let e = this._visibleItems, t = /* @__PURE__ */ new Map();
+		for (let n of e) {
+			let e = n.groupLabel || null;
+			t.has(e) || t.set(e, []), t.get(e).push(n);
+		}
+		let n = [];
+		for (let [e, r] of t) n.push({
+			label: e,
+			items: r
+		});
+		return n;
+	}
+	_setValue(e) {
+		e !== this.value && (this.value = e, this.dispatchEvent(new CustomEvent("sken-change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_selectItem(e) {
+		if (!e.disabled) if (this.mode === "multiple") {
+			let t = Array.isArray(this.value) ? [...this.value] : [], n = t.indexOf(e.value);
+			n >= 0 ? t.splice(n, 1) : t.push(e.value), this._setValue(t), this._input.focus();
+		} else this._setValue(e.value), this._close();
+	}
+	_removeChip(e, t) {
+		if (t.stopPropagation(), this.mode !== "multiple") return;
+		let n = Array.isArray(this.value) ? [...this.value] : [], r = n.indexOf(e);
+		r < 0 || (n.splice(r, 1), this._setValue(n), this._input.focus());
+	}
+	_open_() {
+		this._open || this.disabled || (this._open = !0, this._activeIndex = this._firstSelectableIndex());
+	}
+	_close() {
+		this._open && (this._open = !1, this._activeIndex = -1);
+	}
+	_firstSelectableIndex() {
+		return this._visibleItems.findIndex((e) => !e.disabled);
+	}
+	_nextSelectableIndex(e, t) {
+		let n = this._visibleItems;
+		if (n.length === 0) return -1;
+		let r = e + t;
+		for (; r >= 0 && r < n.length;) {
+			if (!n[r].disabled) return r;
+			r += t;
+		}
+		return e;
+	}
+	get _displayValue() {
+		if (this._query) return this._query;
+		if (this.mode === "multiple") {
+			let e = Array.isArray(this.value) ? this.value : [];
+			return e.length === 0 || this.display === "chips" ? "" : `${e.length} selected`;
+		}
+		return this.value && typeof this.value == "string" ? this._items.find((e) => e.value === this.value)?.label ?? "" : "";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: var(--sken-family-sans, inherit);
+      color: var(--sken-foreground, #152b48);
+      inline-size: 100%;
+    }
+    .field {
+      display: grid;
+      gap: 0.375rem;
+    }
+    .label {
+      font-size: 0.8125rem;
+      font-weight: 500;
+    }
+    .trigger {
+      position: relative;
+      display: flex;
+      /* The trigger wraps its children: the chip row (if any)
+       * goes on its own line, then the input row. Without
+       * flex-wrap: wrap here, the chip row would push the input
+       * horizontally and the clear + chevron would float at
+       * the end of the first chip line. */
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.25rem;
+      padding-inline: 0.75rem;
+      padding-block: var(--sken-2, 0.5rem);
+      min-block-size: 2.25rem;
+      box-sizing: border-box;
+      inline-size: 100%;
+      border: 1px solid var(--sken-border, #dfdfe3);
+      border-radius: var(--sken-md, 0.5rem);
+      background: var(--sken-input, #fff);
+      color: var(--sken-foreground, #152b48);
+      font-size: var(--sken-size-md, 0.875rem);
+      cursor: pointer;
+      transition: border-color 120ms ease, box-shadow 120ms ease;
+    }
+    .trigger:hover:not([data-disabled='true']) {
+      border-color: var(--sken-foreground, #152b48);
+    }
+    .trigger[data-focused='true'] {
+      border-color: var(--sken-primary, #2e6fc6);
+      box-shadow: 0 0 0 2px var(--sken-ring, #2e6fc640);
+      outline: none;
+    }
+    .trigger[data-disabled='true'] {
+      cursor: not-allowed;
+      opacity: var(--sken-disabled, 0.5);
+    }
+    :host([invalid]) .trigger {
+      border-color: var(--sken-destructive, #d4181d);
+    }
+    input {
+      flex: 1;
+      min-inline-size: 0;
+      border: none;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      outline: none;
+    }
+    input::placeholder {
+      color: var(--sken-muted-foreground, #4f6076);
+    }
+    .chevron,
+    .clear {
+      inline-size: 1rem;
+      block-size: 1rem;
+      flex-shrink: 0;
+      color: var(--sken-muted-foreground, #4f6076);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      /* The trigger sets font-size: 0.875rem (--sken-size-md)
+       * and inherits Inter. Inter renders block glyphs like
+       * the down-chevron (▼, U+25BC) at near full em-box,
+       * which makes the chevron look huge next to the
+       * narrower clear (×, U+D7) which Arial renders as a
+       * thin cross. We pick a system sans explicitly so the
+       * two glyphs have similar visual weight, and drop to
+       * 0.75rem so the chevron's block shape does not eat
+       * the input's vertical padding. */
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      font-size: 0.75rem;
+      user-select: none;
+    }
+    .chevron {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 1rem;
+      block-size: 1rem;
+      flex-shrink: 0;
+      color: var(--sken-muted-foreground, #4f6076);
+      transition: transform 120ms ease;
+    }
+    .chevron svg {
+      inline-size: 100%;
+      block-size: 100%;
+      /* Default stroke-width is fine for 16x16; if the consumer
+       * needs a different size, the consumer can set
+       * --sken-icon-stroke-width on the host. */
+    }
+    .chevron[data-open='true'] {
+      transform: rotate(180deg);
+    }
+    .clear {
+      cursor: pointer;
+      /* Outlined at rest: a 1px border on a transparent
+       * background, matching the Nord Design System's tag
+       * pattern (see nordhealth.design/components/tag).
+       * The outline signals affordance without filling
+       * the trigger with a gray pill, so the combobox
+       * stays visually calm when the clear is the only
+       * thing on the right edge. */
+      background: transparent;
+      border: 1px solid var(--sken-border, #dfdfe3);
+      padding: 0;
+      border-radius: 999px;
+    }
+    .clear:hover {
+      background: var(--sken-muted, #f4f4f5);
+      border-color: var(--sken-muted-foreground, #4f6076);
+      color: var(--sken-foreground, #152b48);
+    }
+    .listbox {
+      position: absolute;
+      inset-block-start: calc(100% + 0.25rem);
+      inset-inline: 0;
+      max-block-size: 16rem;
+      overflow-y: auto;
+      background: var(--sken-card, #fff);
+      border: 1px solid var(--sken-border, #dfdfe3);
+      border-radius: var(--sken-md, 0.5rem);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      z-index: 10;
+      list-style: none;
+      margin: 0;
+      padding: 0.25rem 0;
+      /* Token-driven scrollbar so the panel matches the design
+       * language instead of inheriting the host OS default. The
+       * WebKit pseudo-elements cover Safari + older Chromium;
+       * scrollbar-width / scrollbar-color cover Firefox +
+       * modern Chromium. Both are needed because each engine
+       * ignores the other API. */
+      scrollbar-width: thin;
+      scrollbar-color: var(--sken-border, #dfdfe3) transparent;
+    }
+    .listbox::-webkit-scrollbar {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+    }
+    .listbox::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .listbox::-webkit-scrollbar-thumb {
+      background: var(--sken-border, #dfdfe3);
+      border-radius: 999px;
+      border: 2px solid var(--sken-card, #fff);
+      background-clip: padding-box;
+    }
+    .listbox::-webkit-scrollbar-thumb:hover {
+      background: var(--sken-muted-foreground, #4f6076);
+      background-clip: padding-box;
+    }
+    .group-header {
+      padding: 0.5rem 0.75rem 0.25rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--sken-muted-foreground, #4f6076);
+    }
+    .option {
+      padding: 0.5rem 0.75rem;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: var(--sken-size-md, 0.875rem);
+    }
+    .option[data-active='true'] {
+      background: var(--sken-muted, #f4f4f5);
+    }
+    .option[data-selected='true'] {
+      font-weight: 500;
+    }
+    .option[data-disabled='true'] {
+      cursor: not-allowed;
+      opacity: var(--sken-disabled, 0.5);
+    }
+    .check {
+      inline-size: 1rem;
+      block-size: 1rem;
+      flex-shrink: 0;
+      color: var(--sken-primary, #2e6fc6);
+      opacity: 0;
+    }
+    .option[data-selected='true'] .check {
+      opacity: 1;
+    }
+    .helper {
+      font-size: 0.75rem;
+      color: var(--sken-muted-foreground, #4f6076);
+    }
+    .chip-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.25rem;
+      min-inline-size: 0;
+      /* The chip row wraps to multiple lines when the chips
+       * do not fit. The trigger's own height grows accordingly;
+       * for display:chips + chip-overflow:count, the row uses
+       * nowrap + overflow:hidden instead, so the trigger
+       * height stays constant. */
+      flex-basis: 100%;
+      row-gap: 0.25rem;
+    }
+    .chip-row[data-overflow='none'] {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      /* Hide the scrollbar visually; consumers who need to
+       * see overflow can override. Same scrollbar pattern as
+       * the listbox. */
+      scrollbar-width: none;
+    }
+    .chip-row[data-overflow='none']::-webkit-scrollbar {
+      display: none;
+    }
+    .chip-row[data-overflow='count'] {
+      flex-wrap: nowrap;
+      overflow-x: hidden;
+    }
+    .chip-row sken-filter-chip.overflow {
+      /* The overflow chip reuses the same visual treatment as
+       * a regular chip but with no close button (set via the
+       * hide-close-button attribute on the primitive). */
+      background: var(--sken-primary, #2e6fc6);
+      color: var(--sken-primary-foreground, #fff);
+    }
+    .chip-row sken-filter-chip.overflow:hover {
+      background: var(--sken-primary, #2e6fc6);
+      opacity: 0.92;
+    }
+    /* The input row (input + clear + chevron) sits on its own
+     * line below the chip row. Without this wrapper, the
+     * clear + chevron would float to the end of the first
+     * chip line in display:chips mode (visually wrong).
+     * The input row is always present, even when there are
+     * no chips — that way the layout is stable across the
+     * "empty" and "with chips" states. */
+    .input-row {
+      display: flex;
+      align-items: center;
+      /* Slightly wider gap than the trigger's general one, so
+       * the clear button and the chevron do not feel
+       * glued together at the right edge of the input. The
+       * extra 4px matches the visual weight of the icons
+       * (16x16 each) without making the layout feel sparse. */
+      gap: 0.5rem;
+      flex-basis: 100%;
+      min-inline-size: 0;
+    }
+  `;
+	}
+	render() {
+		let e = this._visibleItems, t = this._visibleGroups, n = this.mode === "multiple", i = n ? new Set(Array.isArray(this.value) ? this.value : []) : new Set(this.value ? [this.value] : []), a = `sken-combobox-listbox-${Math.random().toString(36).slice(2, 8)}`, o = n && this.display === "chips", s = o ? this._items.filter((e) => i.has(e.value)) : [], c = o && this._visibleChipCount >= 0 ? s.slice(0, this._visibleChipCount) : s, l = o && this._visibleChipCount >= 0 ? s.slice(this._visibleChipCount) : [];
+		return r`
+      <div class="field">
+        ${this.label ? r`<label class="label" for="trigger">${this.label}</label>` : null}
+        <div
+          class="trigger"
+          data-focused=${this._open}
+          data-disabled=${this.disabled}
+          @click=${() => !this.disabled && (this._open ? this._close() : this._open_())}
+        >
+          ${o && s.length > 0 ? r`<div
+                class="chip-row"
+                part="chip-row"
+                data-overflow=${this.chipOverflow}
+              >
+                ${c.map((e) => r`
+                  <sken-filter-chip
+                    label=${e.label}
+                    data-sken-combobox-chip-value=${e.value}
+                    @sken-close=${(t) => this._removeChip(e.value, t)}
+                  ></sken-filter-chip>
+                `)}
+                ${l.length > 0 && this.chipOverflow === "count" ? r`<sken-filter-chip
+                      class="overflow"
+                      label="+${l.length}"
+                      data-sken-combobox-overflow=${l.length}
+                      hide-close-button
+                      @click=${(e) => {
+			e.stopPropagation(), this._open = !0;
+		}}
+                    ></sken-filter-chip>` : null}
+              </div>` : null}
+          <div class="input-row">
+            <input
+              id="trigger"
+              role="combobox"
+              aria-expanded=${this._open}
+              aria-controls=${a}
+              aria-activedescendant=${this._activeIndex >= 0 ? `${a}-opt-${this._activeIndex}` : ""}
+              aria-autocomplete=${this.filterable ? "list" : "none"}
+              aria-required=${this.required}
+              aria-invalid=${this.invalid}
+              aria-describedby=${this.describedById}
+              ?disabled=${this.disabled}
+              .value=${this._displayValue}
+              placeholder=${this.placeholder}
+              @input=${this._onInput}
+              @keydown=${this._onKeydown}
+              @focus=${this._onFocus}
+              @blur=${this._onBlur}
+            />
+            ${!this.disabled && this.value !== null && (!n || i.size > 0) ? r`<button
+                  type="button"
+                  class="clear"
+                  aria-label="Clear selection"
+                  @click=${(e) => {
+			e.stopPropagation();
+			let t = n ? [] : null;
+			this._setValue(t), this._query = "", this._input.focus();
+		}}
+                >×</button>` : null}
+            <span class="chevron" data-open=${this._open} aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3.5 6.5 L8 11 L12.5 6.5"></path>
+              </svg>
+            </span>
+          </div>
+        </div>
+
+        ${this._open ? r`<ul
+              id=${a}
+              class="listbox"
+              role="listbox"
+              aria-multiselectable=${n}
+            >
+              ${e.length === 0 ? r`<li class="option" data-disabled="true">No matches</li>` : t.map((t) => r`
+                    ${t.label ? r`<li
+                          class="group-header"
+                          role="presentation"
+                        >${t.label}</li>` : null}
+                    ${t.items.map((t) => {
+			let o = e.indexOf(t), s = o === this._activeIndex, c = i.has(t.value);
+			return r`<li
+                        id=${`${a}-opt-${o}`}
+                        class="option"
+                        role="option"
+                        data-active=${s}
+                        data-selected=${c}
+                        data-disabled=${t.disabled}
+                        aria-selected=${c}
+                        aria-disabled=${t.disabled}
+                        @mouseenter=${() => {
+				this._activeIndex = o;
+			}}
+                        @click=${() => this._selectItem(t)}
+                      >
+                        ${n ? r`<span class="check" aria-hidden="true">✓</span>` : null}
+                        <span>${t.label}</span>
+                      </li>`;
+		})}
+                  `)}
+            </ul>` : null}
+
+        ${this.helperText ? r`<div class="helper">${this.helperText}</div>` : null}
+      </div>
+    `;
+	}
+};
+e([a({ reflect: !0 })], c.prototype, "mode", void 0), e([a()], c.prototype, "display", void 0), e([a({ attribute: "chip-overflow" })], c.prototype, "chipOverflow", void 0), e([a({ attribute: !1 })], c.prototype, "value", void 0), e([a({ type: Boolean })], c.prototype, "filterable", void 0), e([a()], c.prototype, "label", void 0), e([a({ attribute: "helper-text" })], c.prototype, "helperText", void 0), e([a()], c.prototype, "placeholder", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "invalid", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "required", void 0), e([a()], c.prototype, "name", void 0), e([a({ reflect: !0 })], c.prototype, "size", void 0), e([a({ attribute: "described-by-id" })], c.prototype, "describedById", void 0), e([s()], c.prototype, "_items", void 0), e([s()], c.prototype, "_query", void 0), e([s()], c.prototype, "_open", void 0), e([s()], c.prototype, "_activeIndex", void 0), e([s()], c.prototype, "_visibleChipCount", void 0), e([o("input")], c.prototype, "_input", void 0), c = e([i("sken-combobox")], c);
+//#endregion
+export { c as SkenCombobox };
+
+//# sourceMappingURL=sken-combobox.js.map