@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/select/wc/select-group.ts

@@ -0,0 +1,82 @@
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Select option group for organizing options into labeled sections.
+ *
+ * @element ds-select-group
+ *
+ * @slot - Group content (ds-select-label and ds-select-option children)
+ *
+ * @example
+ * ```html
+ * <ds-select-group>
+ *   <ds-select-label>Fruits</ds-select-label>
+ *   <ds-select-option value="apple">Apple</ds-select-option>
+ *   <ds-select-option value="banana">Banana</ds-select-option>
+ * </ds-select-group>
+ * ```
+ */
+export class DsSelectGroup extends DSElement {
+  /** Optional label for the group (alternative to ds-select-label slot) */
+  @property({ type: String })
+  label = "";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Set ARIA role
+    this.setAttribute("role", "group");
+
+    // Generate ID if not set
+    if (!this.id) {
+      this.id = `select-group-${crypto.randomUUID().slice(0, 8)}`;
+    }
+
+    // Setup aria-labelledby after first render
+    this.updateComplete.then(() => {
+      this.setupAriaLabelledBy();
+    });
+  }
+
+  private setupAriaLabelledBy(): void {
+    // Find the label element inside the group
+    const labelElement = this.querySelector("ds-select-label");
+    if (labelElement) {
+      // Ensure label has an ID
+      if (!labelElement.id) {
+        labelElement.id = `${this.id}-label`;
+      }
+      this.setAttribute("aria-labelledby", labelElement.id);
+    } else if (this.label) {
+      // Use the label property if no ds-select-label element
+      this.setAttribute("aria-label", this.label);
+    }
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("label")) {
+      if (this.label && !this.querySelector("ds-select-label")) {
+        this.setAttribute("aria-label", this.label);
+      }
+    }
+  }
+
+  override render() {
+    // Render slot directly without wrapper to avoid aria-required-children violation
+    // The host element already has role="group" set in connectedCallback
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-select-group", DsSelectGroup);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-select-group": DsSelectGroup;
+  }
+}

package/templates/select/wc/select-label.ts

@@ -0,0 +1,49 @@
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Label for a select option group.
+ *
+ * @element ds-select-label
+ *
+ * @slot - Label text content
+ *
+ * @example
+ * ```html
+ * <ds-select-group>
+ *   <ds-select-label>Fruits</ds-select-label>
+ *   <ds-select-option value="apple">Apple</ds-select-option>
+ * </ds-select-group>
+ * ```
+ */
+export class DsSelectLabel extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Set role="none" to remove from accessibility tree for listbox compliance
+    // The group uses aria-labelledby to reference this element's text content
+    this.setAttribute("role", "none");
+
+    // Generate ID if not set (used for aria-labelledby on parent group)
+    if (!this.id) {
+      this.id = `select-label-${crypto.randomUUID().slice(0, 8)}`;
+    }
+  }
+
+  override render() {
+    return html`
+      <div class="ds-select-label" part="container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+define("ds-select-label", DsSelectLabel);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-select-label": DsSelectLabel;
+  }
+}

package/templates/select/wc/select-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";
+
+/**
+ * Select option with role="option".
+ *
+ * @element ds-select-option
+ *
+ * @slot - Option content (text, icon, etc.)
+ *
+ * @example
+ * ```html
+ * <ds-select-option value="apple">Apple</ds-select-option>
+ * <ds-select-option value="banana" disabled>Banana</ds-select-option>
+ * ```
+ */
+export class DsSelectOption 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 = `select-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-select-option" part="container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+define("ds-select-option", DsSelectOption);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-select-option": DsSelectOption;
+  }
+}

package/templates/select/wc/select-trigger.ts

@@ -0,0 +1,101 @@
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Select trigger button with combobox role.
+ *
+ * @element ds-select-trigger
+ *
+ * @slot - Trigger content (button, etc.)
+ *
+ * @example
+ * ```html
+ * <ds-select>
+ *   <ds-select-trigger>
+ *     <button>Select fruit</button>
+ *   </ds-select-trigger>
+ *   <ds-select-content>...</ds-select-content>
+ * </ds-select>
+ * ```
+ */
+export class DsSelectTrigger extends DSElement {
+  /** Whether the parent select 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.setupTriggerAccessibility();
+    });
+  }
+
+  private setupTriggerAccessibility(): void {
+    const trigger = this.querySelector("button, [role='button']") as HTMLElement | null;
+    if (trigger) {
+      trigger.setAttribute("aria-haspopup", "listbox");
+      trigger.setAttribute("aria-expanded", "false");
+      if (this.disabled) {
+        trigger.setAttribute("aria-disabled", "true");
+      }
+    }
+  }
+
+  /**
+   * Updates ARIA attributes on the trigger element.
+   */
+  public updateAria(expanded: boolean, activeDescendantId?: string, controlsId?: string): void {
+    const trigger = this.querySelector("button, [role='button']") as HTMLElement | null;
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", String(expanded));
+      if (controlsId) {
+        trigger.setAttribute("aria-controls", controlsId);
+      }
+      if (expanded && activeDescendantId) {
+        trigger.setAttribute("aria-activedescendant", activeDescendantId);
+      } else {
+        trigger.removeAttribute("aria-activedescendant");
+      }
+    }
+  }
+
+  /**
+   * Gets the actual trigger button element.
+   */
+  public getTriggerElement(): HTMLElement | null {
+    return this.querySelector("button, [role='button']");
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("disabled")) {
+      const trigger = this.querySelector("button, [role='button']") as HTMLElement | null;
+      if (trigger) {
+        if (this.disabled) {
+          trigger.setAttribute("aria-disabled", "true");
+          trigger.setAttribute("disabled", "");
+        } else {
+          trigger.removeAttribute("aria-disabled");
+          trigger.removeAttribute("disabled");
+        }
+      }
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-select-trigger", DsSelectTrigger);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-select-trigger": DsSelectTrigger;
+  }
+}