@hypoth-ui/cli 0.0.1 → 0.1.1

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

@@ -0,0 +1,261 @@
+import { type RovingFocus, createRovingFocus } from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import type { PropertyValues } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { FormAssociatedMixin } from "../../base/form-associated.js";
+import type { ValidationFlags } from "../../base/form-associated.js";
+import { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+import type { DsRadio } from "./radio.js";
+
+// Import radio component
+import "./radio.js";
+
+export type RadioOrientation = "horizontal" | "vertical";
+
+/**
+ * Container for radio button group with roving tabindex and native form participation.
+ *
+ * Uses ElementInternals for form association - the selected value is submitted with the form
+ * and the group participates in constraint validation.
+ *
+ * @element ds-radio-group
+ * @fires ds:change - Fired when selection changes with { value }
+ * @fires ds:invalid - Fired when customValidation is true and validation fails
+ *
+ * @slot - ds-radio children
+ *
+ * @example
+ * ```html
+ * <form>
+ *   <ds-field>
+ *     <ds-label>Size</ds-label>
+ *     <ds-radio-group name="size" required>
+ *       <ds-radio value="sm">Small</ds-radio>
+ *       <ds-radio value="md">Medium</ds-radio>
+ *       <ds-radio value="lg">Large</ds-radio>
+ *     </ds-radio-group>
+ *     <ds-field-error></ds-field-error>
+ *   </ds-field>
+ *   <button type="submit">Submit</button>
+ * </form>
+ * ```
+ */
+export class DsRadioGroup extends FormAssociatedMixin(DSElement) {
+  /** Layout and navigation axis */
+  @property({ type: String, reflect: true })
+  orientation: RadioOrientation = "vertical";
+
+  /** Default value for form reset */
+  private _defaultValue = "";
+
+  private rovingFocus: RovingFocus | null = null;
+  private childObserver: MutationObserver | null = null;
+
+  override connectedCallback(): void {
+    // Store default value for form reset
+    this._defaultValue = this.value;
+
+    super.connectedCallback();
+
+    // Set role on the group
+    this.setAttribute("role", "radiogroup");
+
+    // Observe child changes
+    this.childObserver = new MutationObserver(() => {
+      this.setupRadios();
+    });
+    this.childObserver.observe(this, { childList: true, subtree: true });
+
+    // Listen for radio selection events
+    this.addEventListener("ds:radio-select", this.handleRadioSelect as EventListener);
+
+    // Setup after first render
+    this.updateComplete.then(() => {
+      this.setupRadios();
+      this.setupRovingFocus();
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.childObserver?.disconnect();
+    this.childObserver = null;
+    this.rovingFocus?.destroy();
+    this.rovingFocus = null;
+    this.removeEventListener("ds:radio-select", this.handleRadioSelect as EventListener);
+  }
+
+  /**
+   * Sets up the radio items with correct checked state and disabled state.
+   */
+  private setupRadios(): void {
+    const radios = this.getRadioItems();
+
+    radios.forEach((radio) => {
+      // Set checked state based on group value
+      radio.setChecked(radio.value === this.value);
+
+      // Propagate disabled state from group
+      if (this.disabled) {
+        radio.disabled = true;
+      }
+    });
+
+    // Update roving focus tabindex
+    this.updateTabIndices();
+  }
+
+  /**
+   * Updates tabindex values for roving focus.
+   */
+  private updateTabIndices(): void {
+    const radios = this.getRadioItems();
+    const selectedIndex = radios.findIndex((r) => r.value === this.value);
+    const focusIndex = selectedIndex >= 0 ? selectedIndex : 0;
+
+    radios.forEach((radio, index) => {
+      radio.setTabIndex(index === focusIndex ? 0 : -1);
+    });
+  }
+
+  /**
+   * Sets up roving focus for keyboard navigation.
+   */
+  private setupRovingFocus(): void {
+    this.rovingFocus?.destroy();
+
+    const direction = this.orientation === "horizontal" ? "horizontal" : "vertical";
+
+    this.rovingFocus = createRovingFocus({
+      container: this,
+      selector: "[role='radio']",
+      direction,
+      loop: true,
+      skipDisabled: true,
+      onFocus: (element, _index) => {
+        // Find the parent ds-radio and select it (selection follows focus)
+        const radio = element.closest("ds-radio") as DsRadio | null;
+        if (radio && !radio.disabled && !this.disabled) {
+          this.selectValue(radio.value);
+        }
+      },
+    });
+  }
+
+  /**
+   * Gets all radio items in the group.
+   */
+  private getRadioItems(): DsRadio[] {
+    return Array.from(this.querySelectorAll("ds-radio")) as DsRadio[];
+  }
+
+  /**
+   * Handles radio selection from click or keyboard.
+   */
+  private handleRadioSelect = (event: CustomEvent<{ value: string }>): void => {
+    if (this.disabled) return;
+
+    const { value } = event.detail;
+    this.selectValue(value);
+  };
+
+  /**
+   * Selects a value and updates state.
+   */
+  private selectValue(value: string): void {
+    if (value === this.value) return;
+
+    this.value = value;
+    this.setupRadios();
+
+    emitEvent(this, StandardEvents.CHANGE, {
+      detail: { value: this.value },
+    });
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("value")) {
+      this.setupRadios();
+    }
+
+    if (changedProperties.has("orientation")) {
+      this.setupRovingFocus();
+    }
+
+    if (changedProperties.has("disabled")) {
+      this.setupRadios();
+    }
+  }
+
+  // Form association implementation
+
+  protected getFormValue(): string | null {
+    return this.value || null;
+  }
+
+  protected getValidationAnchor(): HTMLElement | undefined {
+    // Use the first radio control as validation anchor
+    return this.querySelector("ds-radio [role='radio']") as HTMLElement | undefined;
+  }
+
+  protected getValidationFlags(): ValidationFlags {
+    if (this.required && !this.value) {
+      return { valueMissing: true };
+    }
+    return {};
+  }
+
+  protected getValidationMessage(flags: ValidationFlags): string {
+    if (flags.valueMissing) {
+      return "Please select an option";
+    }
+    return "";
+  }
+
+  protected shouldUpdateFormValue(changedProperties: PropertyValues): boolean {
+    return changedProperties.has("value");
+  }
+
+  protected shouldUpdateValidity(changedProperties: PropertyValues): boolean {
+    return changedProperties.has("value");
+  }
+
+  protected onFormReset(): void {
+    this.value = this._defaultValue;
+    this.setupRadios();
+  }
+
+  protected onFormStateRestore(
+    state: string | File | FormData | null,
+    _mode: "restore" | "autocomplete"
+  ): void {
+    if (typeof state === "string") {
+      this.value = state;
+      this.setupRadios();
+    }
+  }
+
+  override render() {
+    return html`
+      <div
+        class="ds-radio-group"
+        part="container"
+        data-orientation=${this.orientation}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+define("ds-radio-group", DsRadioGroup);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-radio-group": DsRadioGroup;
+  }
+}

package/templates/radio/wc/radio.ts

@@ -0,0 +1,145 @@
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Individual radio button within a group.
+ *
+ * @element ds-radio
+ *
+ * @slot - Radio label
+ *
+ * @example
+ * ```html
+ * <ds-radio-group name="size">
+ *   <ds-radio value="sm">Small</ds-radio>
+ *   <ds-radio value="md">Medium</ds-radio>
+ *   <ds-radio value="lg">Large</ds-radio>
+ * </ds-radio-group>
+ * ```
+ */
+export class DsRadio extends DSElement {
+  /** Radio value */
+  @property({ type: String, reflect: true })
+  value = "";
+
+  /** Selected state (managed by group) */
+  @property({ type: Boolean, reflect: true })
+  checked = false;
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Label text captured from slot */
+  @state()
+  private labelText = "";
+
+  /** Unique ID for label association */
+  @state()
+  private labelId = "";
+
+  /** Whether this radio is focusable (managed by group) */
+  @state()
+  private _tabIndexValue: number | undefined = undefined;
+
+  get tabIndexValue(): number {
+    return this._tabIndexValue ?? -1;
+  }
+
+  override connectedCallback(): void {
+    // Capture label text before Lit renders
+    this.labelText = this.textContent?.trim() ?? "";
+    // Generate unique ID for label
+    this.labelId = `radio-label-${crypto.randomUUID().slice(0, 8)}`;
+    super.connectedCallback();
+  }
+
+  /**
+   * Sets the checked state (called by RadioGroup).
+   */
+  setChecked(checked: boolean): void {
+    this.checked = checked;
+  }
+
+  /**
+   * Sets the tabindex (called by RadioGroup for roving focus).
+   */
+  setTabIndex(index: number): void {
+    this._tabIndexValue = index;
+    this.requestUpdate();
+  }
+
+  /**
+   * Focus the control element.
+   */
+  focusControl(): void {
+    const control = this.querySelector("[role='radio']") as HTMLElement | null;
+    control?.focus();
+  }
+
+  private handleClick = (event: Event): void => {
+    if (this.disabled) return;
+    event.preventDefault();
+
+    // Dispatch custom event for parent to handle
+    this.dispatchEvent(
+      new CustomEvent("ds:radio-select", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    // Space key selects the radio
+    if (event.key === " " && !this.disabled) {
+      event.preventDefault();
+      this.dispatchEvent(
+        new CustomEvent("ds:radio-select", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  };
+
+  override render() {
+    return html`
+      <div
+        class="ds-radio"
+        part="container"
+        @click=${this.handleClick}
+      >
+        <div
+          role="radio"
+          part="control"
+          class="ds-radio__control"
+          .tabIndex=${this.tabIndexValue}
+          aria-checked=${this.checked ? "true" : "false"}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          aria-labelledby=${this.labelId}
+          @keydown=${this.handleKeyDown}
+        >
+          <span class="ds-radio__indicator" part="indicator">
+            ${this.checked ? html`<span class="ds-radio__dot"></span>` : null}
+          </span>
+        </div>
+        <span id=${this.labelId} class="ds-radio__label" part="label">
+          ${this.labelText}
+        </span>
+      </div>
+    `;
+  }
+}
+
+define("ds-radio", DsRadio);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-radio": DsRadio;
+  }
+}

package/templates/scroll-area/index.tsx

@@ -0,0 +1,144 @@
+/**
+ * ScrollArea compound component exports.
+ *
+ * ScrollArea provides custom styled scrollbars for content containers.
+ *
+ * @example
+ * ```tsx
+ * import { ScrollArea } from "@/components/ui";
+ *
+ * <ScrollArea.Root style={{ height: "200px" }}>
+ *   <ScrollArea.Viewport>
+ *     <!-- Long content here -->
+ *   </ScrollArea.Viewport>
+ *   <ScrollArea.Scrollbar orientation="vertical">
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ * </ScrollArea.Root>
+ * ```
+ */
+
+import {
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type ScrollAreaType = "auto" | "always" | "scroll" | "hover";
+
+export interface ScrollAreaRootProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** When scrollbars are visible */
+  type?: ScrollAreaType;
+  /** Scroll hide delay in ms (for hover type) */
+  scrollHideDelay?: number;
+  /** Orientation for which to show scrollbar */
+  orientation?: "vertical" | "horizontal" | "both";
+  /** Custom styles */
+  style?: CSSProperties;
+}
+
+export interface ScrollAreaViewportProps extends HTMLAttributes<HTMLElement> {
+  /** Scrollable content */
+  children?: ReactNode;
+}
+
+export interface ScrollAreaScrollbarProps extends HTMLAttributes<HTMLElement> {
+  /** Scrollbar content (typically a thumb) */
+  children?: ReactNode;
+  /** Scrollbar orientation */
+  orientation?: "vertical" | "horizontal";
+}
+
+export interface ScrollAreaThumbProps extends HTMLAttributes<HTMLElement> {}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * ScrollArea root component.
+ */
+const ScrollAreaRoot = forwardRef<HTMLElement, ScrollAreaRootProps>(function ScrollAreaRoot(
+  {
+    children,
+    className,
+    type = "hover",
+    scrollHideDelay = 600,
+    orientation = "vertical",
+    style,
+    ...props
+  },
+  ref
+) {
+  return createElement(
+    "ds-scroll-area",
+    {
+      ref,
+      class: className,
+      type,
+      "scroll-hide-delay": scrollHideDelay,
+      orientation,
+      style,
+      ...props,
+    },
+    children
+  );
+});
+ScrollAreaRoot.displayName = "ScrollArea.Root";
+
+/**
+ * ScrollArea viewport component.
+ */
+const ScrollAreaViewport = forwardRef<HTMLElement, ScrollAreaViewportProps>(
+  function ScrollAreaViewport({ children, className, ...props }, ref) {
+    return createElement("ds-scroll-area-viewport", { ref, class: className, ...props }, children);
+  }
+);
+ScrollAreaViewport.displayName = "ScrollArea.Viewport";
+
+/**
+ * ScrollArea scrollbar component.
+ */
+const ScrollAreaScrollbar = forwardRef<HTMLElement, ScrollAreaScrollbarProps>(
+  function ScrollAreaScrollbar({ children, className, orientation = "vertical", ...props }, ref) {
+    return createElement(
+      "ds-scroll-area-scrollbar",
+      { ref, class: className, orientation, ...props },
+      children
+    );
+  }
+);
+ScrollAreaScrollbar.displayName = "ScrollArea.Scrollbar";
+
+/**
+ * ScrollArea thumb component.
+ */
+const ScrollAreaThumb = forwardRef<HTMLElement, ScrollAreaThumbProps>(function ScrollAreaThumb(
+  { className, ...props },
+  ref
+) {
+  return createElement("ds-scroll-area-thumb", { ref, class: className, ...props });
+});
+ScrollAreaThumb.displayName = "ScrollArea.Thumb";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const ScrollArea = {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb,
+};
+
+// Also export individual components
+export { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb };

package/templates/scroll-area/wc/index.ts

@@ -0,0 +1,8 @@
+/**
+ * ScrollArea component exports.
+ */
+
+export { DsScrollArea, type ScrollAreaType } from "./scroll-area.js";
+export { DsScrollAreaViewport } from "./scroll-area-viewport.js";
+export { DsScrollAreaScrollbar } from "./scroll-area-scrollbar.js";
+export { DsScrollAreaThumb } from "./scroll-area-thumb.js";

package/templates/scroll-area/wc/scroll-area-scrollbar.ts

@@ -0,0 +1,143 @@
+/**
+ * ScrollAreaScrollbar component - scrollbar track.
+ *
+ * @element ds-scroll-area-scrollbar
+ *
+ * @slot - Scrollbar thumb
+ */
+
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsScrollAreaScrollbar extends DSElement {
+  /** Scrollbar orientation */
+  @property({ type: String, reflect: true })
+  orientation: "vertical" | "horizontal" = "vertical";
+
+  private hideTimer: ReturnType<typeof setTimeout> | null = null;
+  private isHovered = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.setAttribute("role", "scrollbar");
+    this.setAttribute("aria-orientation", this.orientation);
+
+    // Handle track click
+    this.addEventListener("mousedown", this.handleTrackClick);
+    this.addEventListener("mouseenter", this.handleMouseEnter);
+    this.addEventListener("mouseleave", this.handleMouseLeave);
+
+    // Listen for viewport scroll
+    const scrollArea = this.closest("ds-scroll-area");
+    const viewport = scrollArea?.querySelector("ds-scroll-area-viewport");
+    if (viewport) {
+      viewport.addEventListener("scroll", this.handleViewportScroll);
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("mousedown", this.handleTrackClick);
+    this.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.removeEventListener("mouseleave", this.handleMouseLeave);
+
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+    }
+
+    const scrollArea = this.closest("ds-scroll-area");
+    const viewport = scrollArea?.querySelector("ds-scroll-area-viewport");
+    if (viewport) {
+      viewport.removeEventListener("scroll", this.handleViewportScroll);
+    }
+  }
+
+  private handleTrackClick = (event: MouseEvent): void => {
+    // Ignore if clicking on thumb
+    const thumb = event.target as HTMLElement;
+    if (thumb.tagName === "DS-SCROLL-AREA-THUMB") return;
+
+    const scrollArea = this.closest("ds-scroll-area");
+    const viewport = scrollArea?.querySelector("ds-scroll-area-viewport");
+    if (!viewport) return;
+
+    const rect = this.getBoundingClientRect();
+
+    if (this.orientation === "vertical") {
+      const clickRatio = (event.clientY - rect.top) / rect.height;
+      const scrollHeight = viewport.scrollHeight - viewport.clientHeight;
+      viewport.scrollTo({
+        top: clickRatio * scrollHeight,
+        behavior: "smooth",
+      });
+    } else {
+      const clickRatio = (event.clientX - rect.left) / rect.width;
+      const scrollWidth = viewport.scrollWidth - viewport.clientWidth;
+      viewport.scrollTo({
+        left: clickRatio * scrollWidth,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  private handleViewportScroll = (): void => {
+    // Show scrollbar
+    this.setAttribute("data-state", "visible");
+
+    // Schedule hide (for hover type)
+    this.scheduleHide();
+  };
+
+  private handleMouseEnter = (): void => {
+    this.isHovered = true;
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+  };
+
+  private handleMouseLeave = (): void => {
+    this.isHovered = false;
+    this.scheduleHide();
+  };
+
+  private scheduleHide(): void {
+    const scrollArea = this.closest("ds-scroll-area");
+    const type = scrollArea?.getAttribute("type") || "hover";
+
+    if (type !== "hover") return;
+
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+    }
+
+    const delay = Number(scrollArea?.getAttribute("scroll-hide-delay")) || 600;
+
+    this.hideTimer = setTimeout(() => {
+      if (!this.isHovered) {
+        this.setAttribute("data-state", "hidden");
+      }
+    }, delay);
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("orientation")) {
+      this.setAttribute("aria-orientation", this.orientation);
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-scroll-area-scrollbar", DsScrollAreaScrollbar);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-scroll-area-scrollbar": DsScrollAreaScrollbar;
+  }
+}