@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/combobox/wc/combobox-content.ts

@@ -0,0 +1,97 @@
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export type ComboboxContentState = "open" | "closed";
+
+/**
+ * Combobox content container with role="listbox".
+ *
+ * @element ds-combobox-content
+ *
+ * @slot - Combobox options (ds-combobox-option elements)
+ *
+ * @attr {string} data-state - Animation state ("open" or "closed")
+ * @attr {string} data-placement - Current anchor position placement
+ *
+ * @example
+ * ```html
+ * <ds-combobox>
+ *   <input slot="input" placeholder="Search fruits..." />
+ *   <ds-combobox-content>
+ *     <ds-combobox-option value="apple">Apple</ds-combobox-option>
+ *     <ds-combobox-option value="banana">Banana</ds-combobox-option>
+ *   </ds-combobox-content>
+ * </ds-combobox>
+ * ```
+ */
+export class DsComboboxContent extends DSElement {
+  /** Unique ID for ARIA association */
+  @property({ type: String, reflect: true })
+  override id = "";
+
+  /** Animation state (open or closed) - set by parent ds-combobox */
+  @property({ type: String, reflect: true, attribute: "data-state" })
+  dataState: ComboboxContentState = "closed";
+
+  /** Optional label for the listbox */
+  @property({ type: String })
+  label = "";
+
+  /** Whether to show loading indicator */
+  @property({ type: Boolean, reflect: true })
+  loading = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Generate ID if not set
+    if (!this.id) {
+      this.id = `combobox-content-${crypto.randomUUID().slice(0, 8)}`;
+    }
+
+    // Set ARIA role for listbox
+    this.setAttribute("role", "listbox");
+
+    // Set label if provided
+    if (this.label) {
+      this.setAttribute("aria-label", this.label);
+    }
+
+    // Hidden by default (parent combobox controls visibility)
+    this.setAttribute("hidden", "");
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+
+    if (changedProperties.has("loading")) {
+      this.setAttribute("aria-busy", String(this.loading));
+    }
+  }
+
+  override render() {
+    return html`
+      <div class="ds-combobox-content" part="container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+define("ds-combobox-content", DsComboboxContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-combobox-content": DsComboboxContent;
+  }
+}

package/templates/combobox/wc/combobox-input.ts

@@ -0,0 +1,134 @@
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Combobox input wrapper with combobox role.
+ *
+ * @element ds-combobox-input
+ *
+ * @slot - Input element
+ *
+ * @example
+ * ```html
+ * <ds-combobox>
+ *   <ds-combobox-input>
+ *     <input placeholder="Search..." />
+ *   </ds-combobox-input>
+ *   <ds-combobox-content>...</ds-combobox-content>
+ * </ds-combobox>
+ * ```
+ */
+export class DsComboboxInput extends DSElement {
+  /** Whether the parent combobox is disabled */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Setup ARIA on first slotted element after render
+    this.updateComplete.then(() => {
+      this.setupInputAccessibility();
+    });
+  }
+
+  private setupInputAccessibility(): void {
+    const input = this.querySelector("input") as HTMLInputElement | null;
+    if (input) {
+      input.setAttribute("role", "combobox");
+      input.setAttribute("aria-autocomplete", "list");
+      input.setAttribute("aria-expanded", "false");
+      if (this.disabled) {
+        input.setAttribute("aria-disabled", "true");
+        input.setAttribute("disabled", "");
+      }
+    }
+  }
+
+  /**
+   * Updates ARIA attributes on the input element.
+   */
+  public updateAria(expanded: boolean, activeDescendantId?: string, controlsId?: string): void {
+    const input = this.querySelector("input") as HTMLInputElement | null;
+    if (input) {
+      input.setAttribute("aria-expanded", String(expanded));
+      if (controlsId) {
+        input.setAttribute("aria-controls", controlsId);
+      }
+      if (expanded && activeDescendantId) {
+        input.setAttribute("aria-activedescendant", activeDescendantId);
+      } else {
+        input.removeAttribute("aria-activedescendant");
+      }
+    }
+  }
+
+  /**
+   * Sets the loading state on the input.
+   */
+  public setLoading(loading: boolean): void {
+    const input = this.querySelector("input") as HTMLInputElement | null;
+    if (input) {
+      if (loading) {
+        input.setAttribute("aria-busy", "true");
+      } else {
+        input.removeAttribute("aria-busy");
+      }
+    }
+  }
+
+  /**
+   * Gets the actual input element.
+   */
+  public getInputElement(): HTMLInputElement | null {
+    return this.querySelector("input");
+  }
+
+  /**
+   * Gets the current input value.
+   */
+  public getValue(): string {
+    return this.getInputElement()?.value ?? "";
+  }
+
+  /**
+   * Sets the input value.
+   */
+  public setValue(value: string): void {
+    const input = this.getInputElement();
+    if (input) {
+      input.value = value;
+    }
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("disabled")) {
+      const input = this.querySelector("input") as HTMLInputElement | null;
+      if (input) {
+        if (this.disabled) {
+          input.setAttribute("aria-disabled", "true");
+          input.setAttribute("disabled", "");
+        } else {
+          input.removeAttribute("aria-disabled");
+          input.removeAttribute("disabled");
+        }
+      }
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-combobox-input", DsComboboxInput);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-combobox-input": DsComboboxInput;
+  }
+}

package/templates/combobox/wc/combobox-option.ts

@@ -0,0 +1,111 @@
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Combobox option with role="option".
+ *
+ * @element ds-combobox-option
+ *
+ * @slot - Option content (text, icon, etc.)
+ *
+ * @example
+ * ```html
+ * <ds-combobox-option value="apple">Apple</ds-combobox-option>
+ * <ds-combobox-option value="banana" disabled>Banana</ds-combobox-option>
+ * ```
+ */
+export class DsComboboxOption extends DSElement {
+  /** Whether the option is disabled */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Value associated with this option */
+  @property({ type: String, reflect: true })
+  value = "";
+
+  /** Display label (uses textContent if not specified) */
+  @property({ type: String })
+  label = "";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Set ARIA role
+    this.setAttribute("role", "option");
+
+    // Set tabIndex for roving focus (will be managed by parent)
+    this.tabIndex = -1;
+
+    // Generate ID if not set
+    if (!this.id) {
+      this.id = `combobox-option-${crypto.randomUUID().slice(0, 8)}`;
+    }
+
+    // Update aria-disabled
+    this.updateAriaDisabled();
+  }
+
+  /**
+   * Gets the display label for this option.
+   */
+  public getLabel(): string {
+    return this.label || this.textContent?.trim() || this.value;
+  }
+
+  private updateAriaDisabled(): void {
+    if (this.disabled) {
+      this.setAttribute("aria-disabled", "true");
+    } else {
+      this.removeAttribute("aria-disabled");
+    }
+  }
+
+  /**
+   * Sets the selected state of this option.
+   */
+  public setSelected(selected: boolean): void {
+    this.setAttribute("aria-selected", String(selected));
+    if (selected) {
+      this.setAttribute("data-selected", "");
+    } else {
+      this.removeAttribute("data-selected");
+    }
+  }
+
+  /**
+   * Sets the highlighted state of this option.
+   */
+  public setHighlighted(highlighted: boolean): void {
+    if (highlighted) {
+      this.setAttribute("data-highlighted", "");
+    } else {
+      this.removeAttribute("data-highlighted");
+    }
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("disabled")) {
+      this.updateAriaDisabled();
+    }
+  }
+
+  override render() {
+    return html`
+      <div class="ds-combobox-option" part="container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+define("ds-combobox-option", DsComboboxOption);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-combobox-option": DsComboboxOption;
+  }
+}

package/templates/combobox/wc/combobox-tag.ts

@@ -0,0 +1,103 @@
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Combobox tag for multi-select mode.
+ *
+ * @element ds-combobox-tag
+ *
+ * @slot - Tag content
+ *
+ * @fires ds:remove - Fired when tag remove button is clicked
+ *
+ * @example
+ * ```html
+ * <ds-combobox-tag value="apple">
+ *   Apple
+ *   <button slot="remove" aria-label="Remove Apple">×</button>
+ * </ds-combobox-tag>
+ * ```
+ */
+export class DsComboboxTag extends DSElement {
+  /** Value associated with this tag */
+  @property({ type: String, reflect: true })
+  value = "";
+
+  /** Display label */
+  @property({ type: String })
+  label = "";
+
+  /** Whether the tag is disabled (can't be removed) */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Set ARIA role
+    this.setAttribute("role", "listitem");
+
+    // Setup remove button listener
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  private handleClick = (event: Event): void => {
+    const target = event.target as HTMLElement;
+    const removeButton = target.closest('[slot="remove"]');
+    if (removeButton && !this.disabled) {
+      event.stopPropagation();
+      this.remove_();
+    }
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.disabled) return;
+
+    if (event.key === "Delete" || event.key === "Backspace") {
+      event.preventDefault();
+      this.remove_();
+    }
+  };
+
+  /**
+   * Triggers removal of this tag.
+   */
+  public remove_(): void {
+    if (this.disabled) return;
+    emitEvent(this, "remove", { detail: { value: this.value } });
+  }
+
+  /**
+   * Gets the display label for this tag.
+   */
+  public getLabel(): string {
+    return this.label || this.textContent?.trim() || this.value;
+  }
+
+  override render() {
+    return html`
+      <div class="ds-combobox-tag" part="container" aria-label="${this.getLabel()}, press Delete to remove">
+        <slot></slot>
+        <slot name="remove"></slot>
+      </div>
+    `;
+  }
+}
+
+define("ds-combobox-tag", DsComboboxTag);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-combobox-tag": DsComboboxTag;
+  }
+}