@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/dropdown-menu/wc/dropdown-menu-radio-group.ts

@@ -0,0 +1,80 @@
+/**
+ * DropdownMenuRadioGroup component - container for radio items.
+ *
+ * @element ds-dropdown-menu-radio-group
+ *
+ * @slot - Radio items
+ *
+ * @fires ds:change - Fired when selection changes
+ */
+
+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";
+
+export class DsDropdownMenuRadioGroup extends DSElement {
+  /** Currently selected value */
+  @property()
+  value = "";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.setAttribute("role", "group");
+
+    // Listen for radio item selections
+    this.addEventListener("ds:radio-select", this.handleRadioSelect as EventListener);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("ds:radio-select", this.handleRadioSelect as EventListener);
+  }
+
+  private handleRadioSelect = (event: CustomEvent<{ value: string }>): void => {
+    event.stopPropagation();
+
+    const newValue = event.detail.value;
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this.updateRadioItems();
+
+      emitEvent(this, "ds:change", {
+        detail: { value: this.value },
+        bubbles: true,
+      });
+    }
+  };
+
+  private updateRadioItems(): void {
+    const items = this.querySelectorAll("ds-dropdown-menu-radio-item");
+    for (const item of items) {
+      const itemValue = item.getAttribute("value");
+      if (itemValue === this.value) {
+        item.setAttribute("checked", "");
+      } else {
+        item.removeAttribute("checked");
+      }
+    }
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("value")) {
+      this.updateRadioItems();
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-dropdown-menu-radio-group", DsDropdownMenuRadioGroup);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dropdown-menu-radio-group": DsDropdownMenuRadioGroup;
+  }
+}

package/templates/dropdown-menu/wc/dropdown-menu-radio-item.ts

@@ -0,0 +1,101 @@
+/**
+ * DropdownMenuRadioItem component - radio button menu item.
+ *
+ * @element ds-dropdown-menu-radio-item
+ *
+ * @slot - Item content
+ *
+ * @fires ds:radio-select - Fired when item is selected (internal)
+ */
+
+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";
+
+export class DsDropdownMenuRadioItem extends DSElement {
+  /** Value for selection */
+  @property()
+  value = "";
+
+  /** Whether the radio is selected */
+  @property({ type: Boolean, reflect: true })
+  checked = false;
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.setAttribute("role", "menuitemradio");
+    this.setAttribute("tabindex", "-1");
+    this.updateAriaChecked();
+
+    this.addEventListener("click", this.handleSelect);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleSelect);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  private handleSelect = (): void => {
+    if (this.disabled || this.checked) return;
+
+    // Emit internal event for radio group to handle
+    emitEvent(this, "ds:radio-select", {
+      detail: { value: this.value },
+      bubbles: true,
+    });
+
+    // Also emit ds:select for menu to close
+    emitEvent(this, "ds:select", {
+      detail: { value: this.value },
+      bubbles: true,
+    });
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.disabled) return;
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleSelect();
+    }
+  };
+
+  private updateAriaChecked(): void {
+    this.setAttribute("aria-checked", String(this.checked));
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+    }
+    if (changedProperties.has("checked")) {
+      this.updateAriaChecked();
+    }
+  }
+
+  override render() {
+    return html`
+      <span class="ds-dropdown-menu-radio-item__indicator" aria-hidden="true">
+        ${this.checked ? "●" : "○"}
+      </span>
+      <slot></slot>
+    `;
+  }
+}
+
+define("ds-dropdown-menu-radio-item", DsDropdownMenuRadioItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dropdown-menu-radio-item": DsDropdownMenuRadioItem;
+  }
+}

package/templates/dropdown-menu/wc/dropdown-menu-separator.ts

@@ -0,0 +1,28 @@
+/**
+ * DropdownMenuSeparator component - visual divider between menu items.
+ *
+ * @element ds-dropdown-menu-separator
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsDropdownMenuSeparator extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+
+  override render() {
+    return html``;
+  }
+}
+
+define("ds-dropdown-menu-separator", DsDropdownMenuSeparator);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dropdown-menu-separator": DsDropdownMenuSeparator;
+  }
+}

package/templates/dropdown-menu/wc/dropdown-menu.ts

@@ -0,0 +1,358 @@
+/**
+ * DropdownMenu component - action menu with items, separators, and submenus.
+ *
+ * Implements WAI-ARIA Menu Button pattern with full keyboard navigation.
+ *
+ * @element ds-dropdown-menu
+ *
+ * @slot trigger - Button that opens the menu
+ * @slot - Menu content (ds-dropdown-menu-content)
+ *
+ * @fires ds:open - Fired when menu opens
+ * @fires ds:close - Fired when menu closes
+ * @fires ds:select - Fired when an item is selected
+ *
+ * @example
+ * ```html
+ * <ds-dropdown-menu>
+ *   <button slot="trigger">Actions</button>
+ *   <ds-dropdown-menu-content>
+ *     <ds-dropdown-menu-label>Actions</ds-dropdown-menu-label>
+ *     <ds-dropdown-menu-item value="edit">Edit</ds-dropdown-menu-item>
+ *     <ds-dropdown-menu-item value="copy">Copy</ds-dropdown-menu-item>
+ *     <ds-dropdown-menu-separator></ds-dropdown-menu-separator>
+ *     <ds-dropdown-menu-item value="delete" variant="destructive">Delete</ds-dropdown-menu-item>
+ *   </ds-dropdown-menu-content>
+ * </ds-dropdown-menu>
+ * ```
+ */
+
+import {
+  type MenuBehavior,
+  type Placement,
+  type Presence,
+  createMenuBehavior,
+  createPresence,
+  prefersReducedMotion,
+} from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+// Import child components to ensure they're registered
+import type { DsDropdownMenuContent } from "./dropdown-menu-content.js";
+import "./dropdown-menu-content.js";
+import "./dropdown-menu-item.js";
+import "./dropdown-menu-separator.js";
+import "./dropdown-menu-label.js";
+import "./dropdown-menu-checkbox-item.js";
+import "./dropdown-menu-radio-group.js";
+import "./dropdown-menu-radio-item.js";
+
+export class DsDropdownMenu extends DSElement {
+  /** Whether the menu is open */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  /** Placement relative to trigger */
+  @property({ type: String, reflect: true })
+  placement: Placement = "bottom-start";
+
+  /** Offset distance from trigger in pixels */
+  @property({ type: Number })
+  offset = 4;
+
+  /** Whether to flip placement when near viewport edge */
+  @property({ type: Boolean })
+  flip = true;
+
+  /** Whether to animate open/close transitions */
+  @property({ type: Boolean })
+  animated = true;
+
+  /** Modal behavior - blocks interaction outside menu */
+  @property({ type: Boolean })
+  modal = true;
+
+  private menuBehavior: MenuBehavior | null = null;
+  private presence: Presence | null = null;
+  private focusFirstOnOpen: "first" | "last" | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Listen for trigger interactions
+    this.addEventListener("click", this.handleTriggerClick);
+    this.addEventListener("keydown", this.handleTriggerKeyDown);
+
+    // Listen for item selection
+    this.addEventListener("ds:select", this.handleItemSelect);
+
+    // Initialize menu behavior
+    this.initMenuBehavior();
+
+    // Setup after first render
+    this.updateComplete.then(() => {
+      this.setupTriggerAccessibility();
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleTriggerClick);
+    this.removeEventListener("keydown", this.handleTriggerKeyDown);
+    this.removeEventListener("ds:select", this.handleItemSelect);
+    this.cleanup();
+  }
+
+  /**
+   * Initializes the menu behavior primitive.
+   */
+  private initMenuBehavior(): void {
+    this.menuBehavior = createMenuBehavior({
+      defaultOpen: this.open,
+      placement: this.placement,
+      offset: this.offset,
+      flip: this.flip,
+      loop: true,
+      onOpenChange: (open) => {
+        // Sync state when behavior changes (e.g., from escape or outside click)
+        if (!open && this.open) {
+          this.handleBehaviorClose();
+        }
+      },
+      onSelect: (value) => {
+        emitEvent(this, StandardEvents.SELECT, { detail: { value } });
+      },
+    });
+
+    // Set trigger element if one exists
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    if (trigger) {
+      this.menuBehavior.setTriggerElement(trigger);
+    }
+  }
+
+  /**
+   * Handles close triggered by the behavior (escape/outside click).
+   */
+  private handleBehaviorClose(): void {
+    const content = this.querySelector("ds-dropdown-menu-content") as DsDropdownMenuContent | null;
+
+    if (this.animated && content && !prefersReducedMotion()) {
+      this.presence = createPresence({
+        onExitComplete: () => {
+          this.completeClose();
+        },
+      });
+      this.presence.hide(content);
+    } else {
+      this.open = false;
+      emitEvent(this, StandardEvents.CLOSE);
+    }
+  }
+
+  /**
+   * Opens the menu.
+   */
+  public show(): void {
+    if (this.open) return;
+
+    this.open = true;
+    this.menuBehavior?.open(this.focusFirstOnOpen ?? "first");
+    emitEvent(this, StandardEvents.OPEN);
+  }
+
+  /**
+   * Closes the menu.
+   */
+  public close(): void {
+    if (!this.open) return;
+
+    const content = this.querySelector("ds-dropdown-menu-content") as DsDropdownMenuContent | null;
+
+    // Close the behavior
+    this.menuBehavior?.close();
+
+    if (this.animated && content && !prefersReducedMotion()) {
+      this.presence = createPresence({
+        onExitComplete: () => {
+          this.completeClose();
+        },
+      });
+      this.presence.hide(content);
+    } else {
+      this.open = false;
+      emitEvent(this, StandardEvents.CLOSE);
+    }
+  }
+
+  private completeClose(): void {
+    this.presence?.destroy();
+    this.presence = null;
+    this.open = false;
+    emitEvent(this, StandardEvents.CLOSE);
+  }
+
+  public toggle(): void {
+    if (this.open) {
+      this.close();
+    } else {
+      this.show();
+    }
+  }
+
+  private handleTriggerClick = (event: Event): void => {
+    const target = event.target as HTMLElement;
+    const trigger = target.closest('[slot="trigger"]');
+
+    if (trigger && this.contains(trigger)) {
+      event.preventDefault();
+      this.menuBehavior?.setTriggerElement(trigger as HTMLElement);
+      this.focusFirstOnOpen = "first";
+      this.toggle();
+    }
+  };
+
+  private handleTriggerKeyDown = (event: KeyboardEvent): void => {
+    const target = event.target as HTMLElement;
+    const trigger = target.closest('[slot="trigger"]');
+
+    if (!trigger || !this.contains(trigger)) return;
+
+    this.menuBehavior?.setTriggerElement(trigger as HTMLElement);
+
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        this.focusFirstOnOpen = "first";
+        this.toggle();
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        this.focusFirstOnOpen = "first";
+        if (!this.open) this.show();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.focusFirstOnOpen = "last";
+        if (!this.open) this.show();
+        break;
+    }
+  };
+
+  private handleItemSelect = (): void => {
+    this.close();
+  };
+
+  private setupTriggerAccessibility(): void {
+    const trigger = this.querySelector('[slot="trigger"]');
+    const content = this.querySelector("ds-dropdown-menu-content");
+
+    if (trigger && content && this.menuBehavior) {
+      this.menuBehavior.setTriggerElement(trigger as HTMLElement);
+
+      // Apply trigger props from behavior
+      const triggerProps = this.menuBehavior.getTriggerProps();
+      trigger.setAttribute("aria-haspopup", triggerProps["aria-haspopup"]);
+      trigger.setAttribute("aria-expanded", triggerProps["aria-expanded"]);
+      trigger.setAttribute("aria-controls", triggerProps["aria-controls"]);
+    }
+  }
+
+  private updateTriggerAria(): void {
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger && this.menuBehavior) {
+      const triggerProps = this.menuBehavior.getTriggerProps();
+      trigger.setAttribute("aria-expanded", triggerProps["aria-expanded"]);
+    }
+  }
+
+  private registerMenuItems(): void {
+    const content = this.querySelector("ds-dropdown-menu-content");
+    if (!content || !this.menuBehavior) return;
+
+    const items = content.querySelectorAll<HTMLElement>(
+      "ds-dropdown-menu-item:not([disabled]), ds-dropdown-menu-checkbox-item:not([disabled]), ds-dropdown-menu-radio-item:not([disabled])"
+    );
+
+    items.forEach((item) => {
+      this.menuBehavior?.registerItem(item);
+    });
+  }
+
+  private cleanup(): void {
+    this.menuBehavior?.destroy();
+    this.menuBehavior = null;
+    this.presence?.destroy();
+    this.presence = null;
+  }
+
+  override async updated(changedProperties: Map<string, unknown>): Promise<void> {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("open")) {
+      this.updateTriggerAria();
+
+      const content = this.querySelector(
+        "ds-dropdown-menu-content"
+      ) as DsDropdownMenuContent | null;
+
+      if (this.open) {
+        content?.removeAttribute("hidden");
+
+        if (content) {
+          content.dataState = "open";
+        }
+
+        await this.updateComplete;
+
+        // Register menu items with behavior
+        this.registerMenuItems();
+
+        // Set content element (activates positioning, dismiss layer, roving focus, type-ahead)
+        this.menuBehavior?.setContentElement(content);
+      } else {
+        content?.setAttribute("hidden", "");
+
+        // Clear content element
+        this.menuBehavior?.setContentElement(null);
+      }
+    }
+
+    // Re-create behavior if placement/offset/flip change
+    if (
+      changedProperties.has("placement") ||
+      changedProperties.has("offset") ||
+      changedProperties.has("flip")
+    ) {
+      const wasOpen = this.menuBehavior?.state.open;
+      this.menuBehavior?.destroy();
+      this.initMenuBehavior();
+      if (wasOpen) {
+        this.menuBehavior?.open();
+        const content = this.querySelector("ds-dropdown-menu-content") as HTMLElement | null;
+        this.registerMenuItems();
+        this.menuBehavior?.setContentElement(content);
+      }
+    }
+  }
+
+  override render() {
+    return html`
+      <slot name="trigger"></slot>
+      <slot></slot>
+    `;
+  }
+}
+
+define("ds-dropdown-menu", DsDropdownMenu);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dropdown-menu": DsDropdownMenu;
+  }
+}

package/templates/dropdown-menu/wc/index.ts

@@ -0,0 +1,12 @@
+/**
+ * DropdownMenu component exports.
+ */
+
+export { DsDropdownMenu } from "./dropdown-menu.js";
+export { DsDropdownMenuContent } from "./dropdown-menu-content.js";
+export { DsDropdownMenuItem, type DropdownMenuItemVariant } from "./dropdown-menu-item.js";
+export { DsDropdownMenuSeparator } from "./dropdown-menu-separator.js";
+export { DsDropdownMenuLabel } from "./dropdown-menu-label.js";
+export { DsDropdownMenuCheckboxItem } from "./dropdown-menu-checkbox-item.js";
+export { DsDropdownMenuRadioGroup } from "./dropdown-menu-radio-group.js";
+export { DsDropdownMenuRadioItem } from "./dropdown-menu-radio-item.js";

package/templates/field/field-description.tsx

@@ -0,0 +1,39 @@
+import type React from "react";
+import { type HTMLAttributes, createElement, forwardRef, useEffect, useRef } from "react";
+
+export interface FieldDescriptionProps extends HTMLAttributes<HTMLElement> {
+  /** Description content */
+  children?: React.ReactNode;
+}
+
+/**
+ * React wrapper for ds-field-description Web Component.
+ * Help text for form fields.
+ */
+export const FieldDescription = forwardRef<HTMLElement, FieldDescriptionProps>(
+  (props, forwardedRef) => {
+    const { children, className, ...rest } = props;
+
+    const internalRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      if (typeof forwardedRef === "function") {
+        forwardedRef(internalRef.current);
+      } else if (forwardedRef) {
+        (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+      }
+    }, [forwardedRef]);
+
+    return createElement(
+      "ds-field-description",
+      {
+        ref: internalRef,
+        class: className,
+        ...rest,
+      },
+      children
+    );
+  }
+);
+
+FieldDescription.displayName = "FieldDescription";

package/templates/field/field-error.tsx

@@ -0,0 +1,37 @@
+import type React from "react";
+import { type HTMLAttributes, createElement, forwardRef, useEffect, useRef } from "react";
+
+export interface FieldErrorProps extends HTMLAttributes<HTMLElement> {
+  /** Error message content */
+  children?: React.ReactNode;
+}
+
+/**
+ * React wrapper for ds-field-error Web Component.
+ * Error message for form fields.
+ */
+export const FieldError = forwardRef<HTMLElement, FieldErrorProps>((props, forwardedRef) => {
+  const { children, className, ...rest } = props;
+
+  const internalRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  return createElement(
+    "ds-field-error",
+    {
+      ref: internalRef,
+      class: className,
+      ...rest,
+    },
+    children
+  );
+});
+
+FieldError.displayName = "FieldError";

package/templates/field/field.tsx

@@ -0,0 +1,46 @@
+import type React from "react";
+import { type HTMLAttributes, createElement, forwardRef, useEffect, useRef } from "react";
+
+export interface FieldProps extends HTMLAttributes<HTMLElement> {
+  /** Whether the field has an error */
+  error?: boolean;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Field content */
+  children?: React.ReactNode;
+}
+
+/**
+ * React wrapper for ds-field Web Component.
+ * Container for form field with label, input, description, and error message.
+ */
+export const Field = forwardRef<HTMLElement, FieldProps>((props, forwardedRef) => {
+  const { error = false, disabled = false, required = false, children, className, ...rest } = props;
+
+  const internalRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  return createElement(
+    "ds-field",
+    {
+      ref: internalRef,
+      error: error || undefined,
+      disabled: disabled || undefined,
+      required: required || undefined,
+      class: className,
+      ...rest,
+    },
+    children
+  );
+});
+
+Field.displayName = "Field";