@hypoth-ui/wc 0.1.1

package/dist/overlays.js

@@ -0,0 +1,106 @@
+import {
+  DsAlertDialog,
+  DsAlertDialogAction,
+  DsAlertDialogCancel,
+  DsAlertDialogContent,
+  DsAlertDialogDescription,
+  DsAlertDialogFooter,
+  DsAlertDialogHeader,
+  DsAlertDialogTitle,
+  DsAlertDialogTrigger,
+  DsContextMenu,
+  DsContextMenuContent,
+  DsContextMenuItem,
+  DsContextMenuLabel,
+  DsContextMenuSeparator,
+  DsDialog,
+  DsDialogContent,
+  DsDialogDescription,
+  DsDialogTitle,
+  DsDrawer,
+  DsDrawerContent,
+  DsDrawerDescription,
+  DsDrawerFooter,
+  DsDrawerHeader,
+  DsDrawerTitle,
+  DsDropdownMenu,
+  DsDropdownMenuCheckboxItem,
+  DsDropdownMenuContent,
+  DsDropdownMenuItem,
+  DsDropdownMenuLabel,
+  DsDropdownMenuRadioGroup,
+  DsDropdownMenuRadioItem,
+  DsDropdownMenuSeparator,
+  DsHoverCard,
+  DsHoverCardContent,
+  DsMenu,
+  DsMenuContent,
+  DsMenuItem,
+  DsPopover,
+  DsPopoverContent,
+  DsSheet,
+  DsSheetClose,
+  DsSheetContent,
+  DsSheetDescription,
+  DsSheetFooter,
+  DsSheetHeader,
+  DsSheetOverlay,
+  DsSheetTitle,
+  DsTooltip,
+  DsTooltipContent
+} from "./chunk-55ID7LJL.js";
+import "./chunk-JMPTFALJ.js";
+import "./chunk-YDQ434UH.js";
+import "./chunk-H4GJJZ3N.js";
+export {
+  DsAlertDialog,
+  DsAlertDialogAction,
+  DsAlertDialogCancel,
+  DsAlertDialogContent,
+  DsAlertDialogDescription,
+  DsAlertDialogFooter,
+  DsAlertDialogHeader,
+  DsAlertDialogTitle,
+  DsAlertDialogTrigger,
+  DsContextMenu,
+  DsContextMenuContent,
+  DsContextMenuItem,
+  DsContextMenuLabel,
+  DsContextMenuSeparator,
+  DsDialog,
+  DsDialogContent,
+  DsDialogDescription,
+  DsDialogTitle,
+  DsDrawer,
+  DsDrawerContent,
+  DsDrawerDescription,
+  DsDrawerFooter,
+  DsDrawerHeader,
+  DsDrawerTitle,
+  DsDropdownMenu,
+  DsDropdownMenuCheckboxItem,
+  DsDropdownMenuContent,
+  DsDropdownMenuItem,
+  DsDropdownMenuLabel,
+  DsDropdownMenuRadioGroup,
+  DsDropdownMenuRadioItem,
+  DsDropdownMenuSeparator,
+  DsHoverCard,
+  DsHoverCardContent,
+  DsMenu,
+  DsMenuContent,
+  DsMenuItem,
+  DsPopover,
+  DsPopoverContent,
+  DsSheet,
+  DsSheetClose,
+  DsSheetContent,
+  DsSheetDescription,
+  DsSheetFooter,
+  DsSheetHeader,
+  DsSheetOverlay,
+  DsSheetTitle,
+  DsTooltip,
+  DsTooltipContent
+};
+//# sourceMappingURL=overlays.js.map

package/dist/overlays.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/primitives.d.ts

@@ -0,0 +1,230 @@
+import { TemplateResult } from 'lit';
+import { D as DSElement } from './ds-element-Db0LMfxI.js';
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+type ButtonSize = "sm" | "md" | "lg";
+/**
+ * A button component following WAI-ARIA button pattern.
+ *
+ * @element ds-button
+ * @slot - Default slot for button content
+ *
+ * @csspart button - The button element
+ *
+ * @fires ds:press - When the button is activated (click, Enter, Space)
+ */
+declare class DsButton extends DSElement {
+    static styles: never[];
+    /**
+     * The button variant.
+     */
+    variant: ButtonVariant;
+    /**
+     * The button size.
+     */
+    size: ButtonSize;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the button is in a loading state.
+     */
+    loading: boolean;
+    /**
+     * Button type attribute.
+     */
+    type: "button" | "submit" | "reset";
+    /** Button behavior instance */
+    private behavior;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private handleClick;
+    private handleKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-button": DsButton;
+    }
+}
+
+type IconSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * An accessible icon component with Lucide integration.
+ *
+ * @element ds-icon
+ *
+ * @example
+ * ```html
+ * <!-- Decorative icon (hidden from screen readers) -->
+ * <ds-icon name="search"></ds-icon>
+ *
+ * <!-- Meaningful icon (announced to screen readers) -->
+ * <ds-icon name="alert-triangle" label="Warning"></ds-icon>
+ * ```
+ */
+declare class DsIcon extends DSElement {
+    static styles: never[];
+    /**
+     * The icon name from Lucide library (kebab-case).
+     * e.g., "search", "arrow-right", "external-link"
+     */
+    name: string;
+    /**
+     * The icon size.
+     */
+    size: IconSize;
+    /**
+     * Accessible label for meaningful icons.
+     * When provided, the icon is announced to screen readers.
+     * When omitted, the icon is decorative and hidden from screen readers.
+     */
+    label: string;
+    /**
+     * Custom color for the icon.
+     * Accepts any valid CSS color value.
+     * Default is currentColor (inherits from text color).
+     */
+    color: string;
+    /**
+     * Cached SVG element
+     */
+    private _svgElement;
+    /**
+     * Track if icon is valid
+     */
+    private _isValidIcon;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    private updateSvg;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-icon": DsIcon;
+    }
+}
+
+type LinkVariant = "default" | "muted" | "underline";
+interface DsNavigateEventDetail {
+    href: string;
+    external: boolean;
+    originalEvent: MouseEvent | KeyboardEvent;
+}
+/**
+ * A link component following WAI-ARIA link pattern.
+ *
+ * @element ds-link
+ * @slot - Default slot for link content
+ *
+ * @fires ds:navigate - When the link is activated (cancelable)
+ */
+declare class DsLink extends DSElement {
+    static styles: never[];
+    /**
+     * The URL to navigate to.
+     * Required for proper link functionality.
+     */
+    href: string;
+    /**
+     * Whether this link opens in a new tab.
+     * When true, adds target="_blank" and rel="noopener noreferrer".
+     */
+    external: boolean;
+    /**
+     * The link visual variant.
+     */
+    variant: LinkVariant;
+    private handleClick;
+    render(): TemplateResult;
+    private renderExternalIndicator;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-link": DsLink;
+    }
+}
+
+type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type TextWeight = "normal" | "medium" | "semibold" | "bold";
+type TextVariant = "default" | "muted" | "success" | "warning" | "error";
+type TextAs = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/**
+ * A typography component for consistent text styling.
+ *
+ * @element ds-text
+ * @slot - Default slot for text content
+ */
+declare class DsText extends DSElement {
+    static styles: never[];
+    /**
+     * The text size.
+     */
+    size: TextSize;
+    /**
+     * The font weight.
+     */
+    weight: TextWeight;
+    /**
+     * The color variant.
+     */
+    variant: TextVariant;
+    /**
+     * The semantic element to render as.
+     * Supports: span, p, h1-h6
+     */
+    as: TextAs;
+    /**
+     * Whether to truncate text with ellipsis.
+     */
+    truncate: boolean;
+    private getValidAs;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-text": DsText;
+    }
+}
+
+/**
+ * A utility component that hides content visually while keeping it accessible to screen readers.
+ *
+ * Use this component to provide additional context for assistive technology users
+ * that would be redundant or unnecessary for sighted users.
+ *
+ * @element ds-visually-hidden
+ * @slot - Content to be hidden visually but announced by screen readers
+ *
+ * @example
+ * ```html
+ * <button>
+ *   <ds-icon name="trash" aria-hidden="true"></ds-icon>
+ *   <ds-visually-hidden>Delete item</ds-visually-hidden>
+ * </button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Skip link that becomes visible on focus -->
+ * <ds-visually-hidden focusable>
+ *   <a href="#main-content">Skip to main content</a>
+ * </ds-visually-hidden>
+ * ```
+ */
+declare class DsVisuallyHidden extends DSElement {
+    static styles: never[];
+    /**
+     * When true, the content becomes visible when it or its children receive focus.
+     * Useful for skip links and other focus-triggered content.
+     */
+    focusable: boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-visually-hidden": DsVisuallyHidden;
+    }
+}
+
+export { type ButtonSize, type ButtonVariant, DsButton, DsIcon, DsLink, type DsNavigateEventDetail, DsText, DsVisuallyHidden, type IconSize, type LinkVariant, type TextAs, type TextSize, type TextVariant, type TextWeight };

package/dist/primitives.js

@@ -0,0 +1,26 @@
+import {
+  DsButton
+} from "./chunk-TXIIUVL3.js";
+import {
+  DsLink
+} from "./chunk-GXKZ6E6K.js";
+import {
+  DsText
+} from "./chunk-CZOXIJVS.js";
+import {
+  DsIcon
+} from "./chunk-ZWV4VI6D.js";
+import {
+  DsVisuallyHidden
+} from "./chunk-VX5CKSMN.js";
+import "./chunk-JMPTFALJ.js";
+import "./chunk-YDQ434UH.js";
+import "./chunk-H4GJJZ3N.js";
+export {
+  DsButton,
+  DsIcon,
+  DsLink,
+  DsText,
+  DsVisuallyHidden
+};
+//# sourceMappingURL=primitives.js.map

package/dist/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/registry-Bns0t11H.d.ts

@@ -0,0 +1,233 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { DsButton, DsLink, DsText, DsIcon, DsVisuallyHidden } from './primitives.js';
+import { D as DSElement } from './ds-element-Db0LMfxI.js';
+import { D as DsSpinner } from './spinner-BWaNlc-Y.js';
+
+/**
+ * Validation flags for ElementInternals.setValidity().
+ */
+interface ValidationFlags {
+    /** Element is required but has no value */
+    valueMissing?: boolean;
+    /** Value doesn't match the expected type */
+    typeMismatch?: boolean;
+    /** Value doesn't match the pattern attribute */
+    patternMismatch?: boolean;
+    /** Value exceeds maxlength */
+    tooLong?: boolean;
+    /** Value is shorter than minlength */
+    tooShort?: boolean;
+    /** Value exceeds max */
+    rangeOverflow?: boolean;
+    /** Value is less than min */
+    rangeUnderflow?: boolean;
+    /** Value doesn't match step */
+    stepMismatch?: boolean;
+    /** Custom validation failed */
+    customError?: boolean;
+    /** Value doesn't match any option */
+    badInput?: boolean;
+}
+/**
+ * Type for mixin constructor with any args.
+ */
+type Constructor<T = object> = new (...args: any[]) => T;
+/**
+ * Interface for form-associated element properties and methods.
+ */
+interface FormAssociatedInterface {
+    name: string;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    customValidation: boolean;
+    readonly validity: ValidityState;
+    readonly validationMessage: string;
+    readonly willValidate: boolean;
+    readonly form: HTMLFormElement | null;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+}
+/**
+ * Type for form lifecycle callbacks.
+ */
+interface FormLifecycleCallbacks {
+    formAssociatedCallback?(form: HTMLFormElement | null): void;
+    formDisabledCallback?(disabled: boolean): void;
+    formResetCallback?(): void;
+    formStateRestoreCallback?(state: string | File | FormData | null, mode: "restore" | "autocomplete"): void;
+}
+/**
+ * Combined interface for form-associated elements.
+ */
+type FormAssociatedElement = FormAssociatedInterface & FormLifecycleCallbacks;
+/**
+ * Form-associated mixin for Lit elements.
+ *
+ * Adds ElementInternals-based form participation to any Lit component.
+ * Components using this mixin participate in native HTML form submission,
+ * validation, and lifecycle callbacks.
+ *
+ * @example
+ * ```typescript
+ * import { FormAssociatedMixin } from '../base/form-associated.js';
+ * import { DSElement } from '../base/ds-element.js';
+ *
+ * class DsCheckbox extends FormAssociatedMixin(DSElement) {
+ *   @property({ type: Boolean }) checked = false;
+ *
+ *   protected getFormValue(): FormData | string | null {
+ *     return this.checked ? this.value : null;
+ *   }
+ *
+ *   protected getValidationAnchor(): HTMLElement | undefined {
+ *     return this.renderRoot.querySelector('.ds-checkbox__control') ?? undefined;
+ *   }
+ * }
+ * ```
+ */
+declare function FormAssociatedMixin<T extends Constructor<LitElement>>(Base: T): Constructor<FormAssociatedInterface & LitElement> & T & {
+    formAssociated: true;
+};
+
+type InputType = "text" | "email" | "password" | "number" | "tel" | "url" | "search";
+type InputSize = "sm" | "md" | "lg";
+/**
+ * A text input field component.
+ *
+ * @element ds-input
+ * @fires input - Fired when the input value changes
+ * @fires change - Fired when the input value is committed
+ *
+ * @example
+ * ```html
+ * <ds-field>
+ *   <ds-label>Email</ds-label>
+ *   <ds-input type="email" name="email"></ds-input>
+ * </ds-field>
+ * ```
+ */
+declare class DsInput extends DSElement {
+    /** Input type */
+    type: InputType;
+    /** Input size */
+    size: InputSize;
+    /** Input name */
+    name: string;
+    /** Input value */
+    value: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Disabled state */
+    disabled: boolean;
+    /** Read-only state */
+    readonly: boolean;
+    /** Required state */
+    required: boolean;
+    /** Error state */
+    error: boolean;
+    /** Minimum length */
+    minlength?: number;
+    /** Maximum length */
+    maxlength?: number;
+    /** Pattern for validation */
+    pattern?: string;
+    /** ARIA labelledby - ID of element that labels this input */
+    private ariaLabelledBy?;
+    /** ARIA describedby - IDs of elements that describe this input */
+    private ariaDescribedBy?;
+    private attributeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Syncs ARIA attributes from the host element to internal state.
+     * The render method will apply these to the native input.
+     */
+    private syncAriaAttributes;
+    private handleInput;
+    private handleChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-input": DsInput;
+    }
+}
+
+/**
+ * Component Registry - Centralized mapping of tag names to component classes.
+ *
+ * This registry is the single source of truth for all design system component registrations.
+ * Components do NOT self-register; instead, the loader uses this registry to register
+ * components when the application starts.
+ */
+
+/**
+ * Custom element constructor type
+ */
+type CustomElementConstructor = new (...args: unknown[]) => HTMLElement;
+/**
+ * Component registry type - maps tag names to component classes
+ */
+type ComponentRegistryType = Record<string, CustomElementConstructor>;
+/**
+ * Valid component tag names in the design system
+ */
+type ComponentTag = "ds-button" | "ds-input" | "ds-link" | "ds-text" | "ds-icon" | "ds-spinner" | "ds-visually-hidden";
+/**
+ * Get all registered tag names.
+ *
+ * @returns Array of all tag names in the registry
+ */
+declare function getRegisteredTags(): ComponentTag[];
+/**
+ * Get component class by tag name.
+ * If the component uses lazy loading, this will trigger the load.
+ *
+ * @param tagName - The custom element tag name
+ * @returns Promise resolving to the component class or undefined if not found
+ */
+declare function getComponentClass(tagName: string): Promise<CustomElementConstructor | undefined>;
+/**
+ * Get component class synchronously (only works for already-loaded components).
+ *
+ * @param tagName - The custom element tag name
+ * @returns The component class or undefined if not loaded/found
+ */
+declare function getComponentClassSync(tagName: string): CustomElementConstructor | undefined;
+/**
+ * Register a component class directly (for pre-loaded components).
+ *
+ * @param tagName - The custom element tag name
+ * @param componentClass - The component class constructor
+ */
+declare function registerComponent(tagName: string, componentClass: CustomElementConstructor): void;
+/**
+ * Check if a tag name is in the registry.
+ *
+ * @param tagName - The custom element tag name
+ * @returns True if the tag is registered
+ */
+declare function hasComponent(tagName: string): boolean;
+/**
+ * Load all components in the registry.
+ * This is useful for eager loading all components at once.
+ *
+ * @returns Promise that resolves when all components are loaded
+ */
+declare function loadAllComponents(): Promise<void>;
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-button": DsButton;
+        "ds-input": DsInput;
+        "ds-link": DsLink;
+        "ds-text": DsText;
+        "ds-icon": DsIcon;
+        "ds-spinner": DsSpinner;
+        "ds-visually-hidden": DsVisuallyHidden;
+    }
+}
+
+export { type CustomElementConstructor as C, DsInput as D, FormAssociatedMixin as F, type InputType as I, type ValidationFlags as V, type FormAssociatedElement as a, type FormAssociatedInterface as b, type FormLifecycleCallbacks as c, getComponentClass as d, getComponentClassSync as e, type ComponentRegistryType as f, getRegisteredTags as g, hasComponent as h, type ComponentTag as i, type InputSize as j, loadAllComponents as l, registerComponent as r };

package/dist/skeleton-MUdd2029.d.ts

@@ -0,0 +1,109 @@
+import { TemplateResult } from 'lit';
+import { D as DSElement } from './ds-element-Db0LMfxI.js';
+
+type ProgressVariant = "linear" | "circular";
+type ProgressSize = "sm" | "md" | "lg";
+/**
+ * Progress indicator component.
+ *
+ * @element ds-progress
+ *
+ * @csspart track - The progress track
+ * @csspart bar - The progress bar/fill
+ * @csspart label - The accessible label
+ *
+ * @cssprop --ds-progress-track - Track background color
+ * @cssprop --ds-progress-fill - Fill/indicator color
+ * @cssprop --ds-progress-height - Track height (linear)
+ */
+declare class DsProgress extends DSElement {
+    static styles: never[];
+    /**
+     * Current progress value (0-100). Omit for indeterminate.
+     */
+    value?: number;
+    /**
+     * Maximum value.
+     */
+    max: number;
+    /**
+     * Visual variant.
+     */
+    variant: ProgressVariant;
+    /**
+     * Size variant.
+     */
+    size: ProgressSize;
+    /**
+     * Accessible label.
+     */
+    label: string;
+    /**
+     * Show value as percentage text (circular only).
+     */
+    showValue: boolean;
+    private get isIndeterminate();
+    private get percentage();
+    private get valueText();
+    private renderLinear;
+    private renderCircular;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-progress": DsProgress;
+    }
+}
+
+type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
+type SkeletonSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SkeletonWidth = "full" | "3/4" | "1/2" | "1/4";
+type SkeletonAnimation = "wave" | "pulse" | "none";
+/**
+ * Skeleton loading placeholder component.
+ *
+ * @element ds-skeleton
+ *
+ * @cssprop --ds-skeleton-bg - Background color
+ * @cssprop --ds-skeleton-highlight - Shimmer highlight color
+ * @cssprop --ds-skeleton-radius - Border radius
+ */
+declare class DsSkeleton extends DSElement {
+    static styles: never[];
+    /**
+     * Shape variant.
+     */
+    variant: SkeletonVariant;
+    /**
+     * Size preset for height.
+     */
+    size?: SkeletonSize;
+    /**
+     * Width preset.
+     */
+    width?: SkeletonWidth;
+    /**
+     * Custom width (CSS value).
+     */
+    customWidth: string;
+    /**
+     * Custom height (CSS value).
+     */
+    customHeight: string;
+    /**
+     * Animation type.
+     */
+    animation: SkeletonAnimation;
+    /**
+     * Accessible label for screen readers.
+     */
+    label: string;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-skeleton": DsSkeleton;
+    }
+}
+
+export { DsProgress as D, type ProgressVariant as P, type SkeletonVariant as S, type ProgressSize as a, DsSkeleton as b, type SkeletonSize as c, type SkeletonWidth as d, type SkeletonAnimation as e };