@hypoth-ui/wc 0.1.1

package/dist/chunk-ZWV4VI6D.js

@@ -0,0 +1,153 @@
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/icon/icon.ts
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// src/components/icon/icon-adapter.ts
+import { createElement, icons } from "lucide";
+function toPascalCase(str) {
+  return str.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("");
+}
+function getIconSvg(name, options) {
+  const pascalName = toPascalCase(name);
+  const iconNode = icons[pascalName];
+  if (!iconNode) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`[ds-icon] Icon "${name}" not found in Lucide library.`);
+    }
+    return null;
+  }
+  const customAttrs = {};
+  if (options?.size) {
+    customAttrs.width = options.size;
+    customAttrs.height = options.size;
+  }
+  if (options?.color) {
+    customAttrs.color = options.color;
+  }
+  if (options?.strokeWidth) {
+    customAttrs["stroke-width"] = options.strokeWidth;
+  }
+  const [tag, defaultAttrs, children] = iconNode;
+  const mergedAttrs = { ...defaultAttrs, ...customAttrs };
+  const modifiedIconNode = children ? [tag, mergedAttrs, children] : [tag, mergedAttrs];
+  const element = createElement(modifiedIconNode);
+  return element;
+}
+function hasIcon(name) {
+  const pascalName = toPascalCase(name);
+  return pascalName in icons;
+}
+
+// src/components/icon/icon.ts
+var SIZE_MAP = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+var DsIcon = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.size = "md";
+    this.label = "";
+    this.color = "";
+    this._svgElement = null;
+    this._isValidIcon = true;
+  }
+  static {
+    this.styles = [];
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("name") || changedProperties.has("size")) {
+      this.updateSvg();
+    }
+  }
+  updateSvg() {
+    if (!this.name) {
+      this._svgElement = null;
+      this._isValidIcon = false;
+      return;
+    }
+    if (!hasIcon(this.name)) {
+      this._svgElement = null;
+      this._isValidIcon = false;
+      return;
+    }
+    this._svgElement = getIconSvg(this.name, {
+      size: SIZE_MAP[this.size]
+    });
+    this._isValidIcon = this._svgElement !== null;
+  }
+  render() {
+    const isDecorative = !this.label;
+    const classes = {
+      "ds-icon": true,
+      [`ds-icon--${this.size}`]: true,
+      "ds-icon--fallback": !this._isValidIcon
+    };
+    const style = this.color ? `color: ${this.color}` : "";
+    if (!this._isValidIcon) {
+      return html`
+        <span
+          class=${classMap(classes)}
+          style=${style || nothing}
+          aria-hidden="true"
+        ></span>
+      `;
+    }
+    if (isDecorative) {
+      return html`
+        <span
+          class=${classMap(classes)}
+          style=${style || nothing}
+          aria-hidden="true"
+        >
+          ${this._svgElement}
+        </span>
+      `;
+    }
+    return html`
+      <span
+        class=${classMap(classes)}
+        style=${style || nothing}
+        role="img"
+        aria-label=${this.label}
+      >
+        ${this._svgElement}
+      </span>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsIcon.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsIcon.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], DsIcon.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], DsIcon.prototype, "color", 2);
+__decorateClass([
+  state()
+], DsIcon.prototype, "_svgElement", 2);
+__decorateClass([
+  state()
+], DsIcon.prototype, "_isValidIcon", 2);
+define("ds-icon", DsIcon);
+
+export {
+  DsIcon
+};
+//# sourceMappingURL=chunk-ZWV4VI6D.js.map

package/dist/chunk-ZWV4VI6D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/icon/icon.ts","../src/components/icon/icon-adapter.ts"],"sourcesContent":["import { type TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { DSElement } from \"../../base/ds-element.js\";\nimport { define } from \"../../registry/define.js\";\nimport { getIconSvg, hasIcon } from \"./icon-adapter.js\";\n\nexport type IconSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Size mappings in pixels for SVG generation\n */\nconst SIZE_MAP: Record<IconSize, number> = {\n  xs: 12,\n  sm: 16,\n  md: 20,\n  lg: 24,\n  xl: 32,\n};\n\n/**\n * An accessible icon component with Lucide integration.\n *\n * @element ds-icon\n *\n * @example\n * ```html\n * <!-- Decorative icon (hidden from screen readers) -->\n * <ds-icon name=\"search\"></ds-icon>\n *\n * <!-- Meaningful icon (announced to screen readers) -->\n * <ds-icon name=\"alert-triangle\" label=\"Warning\"></ds-icon>\n * ```\n */\nexport class DsIcon extends DSElement {\n  static override styles = [];\n\n  /**\n   * The icon name from Lucide library (kebab-case).\n   * e.g., \"search\", \"arrow-right\", \"external-link\"\n   */\n  @property({ type: String, reflect: true })\n  name = \"\";\n\n  /**\n   * The icon size.\n   */\n  @property({ type: String, reflect: true })\n  size: IconSize = \"md\";\n\n  /**\n   * Accessible label for meaningful icons.\n   * When provided, the icon is announced to screen readers.\n   * When omitted, the icon is decorative and hidden from screen readers.\n   */\n  @property({ type: String })\n  label = \"\";\n\n  /**\n   * Custom color for the icon.\n   * Accepts any valid CSS color value.\n   * Default is currentColor (inherits from text color).\n   */\n  @property({ type: String })\n  color = \"\";\n\n  /**\n   * Cached SVG element\n   */\n  @state()\n  private _svgElement: SVGSVGElement | null = null;\n\n  /**\n   * Track if icon is valid\n   */\n  @state()\n  private _isValidIcon = true;\n\n  override willUpdate(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has(\"name\") || changedProperties.has(\"size\")) {\n      this.updateSvg();\n    }\n  }\n\n  private updateSvg(): void {\n    if (!this.name) {\n      this._svgElement = null;\n      this._isValidIcon = false;\n      return;\n    }\n\n    if (!hasIcon(this.name)) {\n      this._svgElement = null;\n      this._isValidIcon = false;\n      return;\n    }\n\n    this._svgElement = getIconSvg(this.name, {\n      size: SIZE_MAP[this.size],\n    });\n    this._isValidIcon = this._svgElement !== null;\n  }\n\n  override render(): TemplateResult {\n    const isDecorative = !this.label;\n\n    const classes = {\n      \"ds-icon\": true,\n      [`ds-icon--${this.size}`]: true,\n      \"ds-icon--fallback\": !this._isValidIcon,\n    };\n\n    const style = this.color ? `color: ${this.color}` : \"\";\n\n    // Render fallback if icon not found\n    if (!this._isValidIcon) {\n      return html`\n        <span\n          class=${classMap(classes)}\n          style=${style || nothing}\n          aria-hidden=\"true\"\n        ></span>\n      `;\n    }\n\n    // Decorative icon (no label)\n    if (isDecorative) {\n      return html`\n        <span\n          class=${classMap(classes)}\n          style=${style || nothing}\n          aria-hidden=\"true\"\n        >\n          ${this._svgElement}\n        </span>\n      `;\n    }\n\n    // Meaningful icon (with label)\n    return html`\n      <span\n        class=${classMap(classes)}\n        style=${style || nothing}\n        role=\"img\"\n        aria-label=${this.label}\n      >\n        ${this._svgElement}\n      </span>\n    `;\n  }\n}\n\n// Register the component\ndefine(\"ds-icon\", DsIcon);\n\n// TypeScript declaration for HTML\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ds-icon\": DsIcon;\n  }\n}\n","/**\n * Icon Adapter for Lucide Icons\n *\n * Provides a unified interface for accessing icons from the Lucide library.\n * Uses createElement() for efficient SVG generation.\n */\n\nimport { createElement, icons } from \"lucide\";\nimport type { IconNode } from \"lucide\";\n\n/**\n * Convert kebab-case to PascalCase for Lucide icon names\n * e.g., \"arrow-right\" -> \"ArrowRight\"\n */\nfunction toPascalCase(str: string): string {\n  return str\n    .split(\"-\")\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n    .join(\"\");\n}\n\n/**\n * Get an SVG element for the specified icon name.\n *\n * @param name - The icon name in kebab-case (e.g., \"arrow-right\", \"search\", \"external-link\")\n * @param options - Optional attributes to apply to the SVG\n * @returns SVGSVGElement or null if icon not found\n *\n * @example\n * ```typescript\n * const svg = getIconSvg(\"search\");\n * if (svg) {\n *   container.appendChild(svg);\n * }\n * ```\n */\nexport function getIconSvg(\n  name: string,\n  options?: {\n    size?: number | string;\n    color?: string;\n    strokeWidth?: number | string;\n  }\n): SVGSVGElement | null {\n  // Convert kebab-case name to PascalCase for Lucide lookup\n  const pascalName = toPascalCase(name);\n\n  // Check if icon exists in Lucide\n  const iconNode = icons[pascalName as keyof typeof icons] as IconNode | undefined;\n\n  if (!iconNode) {\n    if (process.env.NODE_ENV !== \"production\") {\n      console.warn(`[ds-icon] Icon \"${name}\" not found in Lucide library.`);\n    }\n    return null;\n  }\n\n  // Build custom attributes to merge with default icon attrs\n  const customAttrs: Record<string, string | number> = {};\n\n  if (options?.size) {\n    customAttrs.width = options.size;\n    customAttrs.height = options.size;\n  }\n\n  if (options?.color) {\n    customAttrs.color = options.color;\n  }\n\n  if (options?.strokeWidth) {\n    customAttrs[\"stroke-width\"] = options.strokeWidth;\n  }\n\n  // Merge custom attributes with the icon's default attributes\n  // IconNode is [tag, attrs, children?]\n  const [tag, defaultAttrs, children] = iconNode;\n  const mergedAttrs = { ...defaultAttrs, ...customAttrs };\n  const modifiedIconNode: IconNode = children ? [tag, mergedAttrs, children] : [tag, mergedAttrs];\n\n  const element = createElement(modifiedIconNode);\n\n  return element as SVGSVGElement;\n}\n\n/**\n * Check if an icon name exists in the Lucide library.\n *\n * @param name - The icon name in kebab-case\n * @returns True if the icon exists\n */\nexport function hasIcon(name: string): boolean {\n  const pascalName = toPascalCase(name);\n  return pascalName in icons;\n}\n\n/**\n * Get all available icon names.\n *\n * @returns Array of icon names in kebab-case\n */\nexport function getAvailableIcons(): string[] {\n  return Object.keys(icons).map((name) =>\n    name\n      .replace(/([A-Z])/g, \"-$1\")\n      .toLowerCase()\n      .replace(/^-/, \"\")\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/core.d.ts

@@ -0,0 +1,127 @@
+export { D as DSElement, D as LightElement } from './ds-element-Db0LMfxI.js';
+export { f as ComponentRegistryType, i as ComponentTag, C as CustomElementConstructor, a as FormAssociatedElement, b as FormAssociatedInterface, F as FormAssociatedMixin, c as FormLifecycleCallbacks, V as ValidationFlags, d as getComponentClass, e as getComponentClassSync, g as getRegisteredTags, h as hasComponent, l as loadAllComponents, r as registerComponent } from './registry-Bns0t11H.js';
+import 'lit';
+import './primitives.js';
+import './spinner-BWaNlc-Y.js';
+
+/**
+ * Event emission utilities for design system components.
+ *
+ * All custom events use the `ds:` prefix to avoid collision with native DOM events.
+ */
+/**
+ * Options for emitting custom events
+ */
+interface EmitEventOptions<T = unknown> {
+    /** Event payload data */
+    detail?: T;
+    /** Whether event bubbles up the DOM tree (default: true) */
+    bubbles?: boolean;
+    /** Whether event crosses shadow DOM boundaries (default: true) */
+    composed?: boolean;
+    /** Whether event can be cancelled (default: false) */
+    cancelable?: boolean;
+}
+/**
+ * Emit a design system custom event with the `ds:` prefix.
+ *
+ * Events are automatically prefixed with `ds:` namespace.
+ * Default behavior: bubbles and composed are true.
+ *
+ * @param element - The element dispatching the event
+ * @param name - Event name (without ds: prefix)
+ * @param options - Event options including detail payload
+ * @returns The dispatched CustomEvent
+ *
+ * @example
+ * ```typescript
+ * // Emit ds:change event
+ * emitEvent(this, 'change', { detail: { value: newValue } });
+ *
+ * // Emit ds:dismiss with reason
+ * emitEvent(this, 'dismiss', { detail: { reason: 'escape' } });
+ *
+ * // Emit cancelable event
+ * const event = emitEvent(this, 'before-close', { cancelable: true });
+ * if (event.defaultPrevented) {
+ *   // Consumer called event.preventDefault()
+ *   return;
+ * }
+ * ```
+ */
+declare function emitEvent<T = unknown>(element: HTMLElement, name: string, options?: EmitEventOptions<T>): CustomEvent<T>;
+/**
+ * Standard event names used across the design system.
+ *
+ * Components SHOULD use these standard names when applicable
+ * for consistency across the component library.
+ *
+ * Naming conventions (per event-names.ts):
+ * - React props use camelCase callbacks (e.g., onPress, onValueChange)
+ * - Web Components use ds: prefixed custom events (e.g., ds:press, ds:change)
+ */
+declare const StandardEvents: {
+    /** User activation (click, Enter, Space) - buttons, links, menu items */
+    readonly PRESS: "press";
+    /** Value changed (inputs, selects) */
+    readonly CHANGE: "change";
+    /** Item selected (lists, menus) */
+    readonly SELECT: "select";
+    /** Open state changed (dialogs, dropdowns, menus) - detail: { open, reason } */
+    readonly OPEN_CHANGE: "open-change";
+    /** Component dismissed (toasts, alerts) */
+    readonly DISMISS: "dismiss";
+    /** Focus moved within component */
+    readonly FOCUS_CHANGE: "focus-change";
+    /** Expanded state changed (trees, accordions, collapsibles) */
+    readonly EXPANDED_CHANGE: "expanded-change";
+    /** Checked state changed (checkboxes, switches, radio groups) */
+    readonly CHECKED_CHANGE: "checked-change";
+    /** Sort state changed (tables) */
+    readonly SORT_CHANGE: "sort-change";
+    /** Index changed (pagination, tabs, steppers, carousels) */
+    readonly INDEX_CHANGE: "index-change";
+    /** Search query changed */
+    readonly SEARCH: "search";
+    /** Hover state changed */
+    readonly HOVER_CHANGE: "hover-change";
+    /** Items reordered (drag-and-drop) */
+    readonly REORDER: "reorder";
+    /** Content copied to clipboard */
+    readonly COPY: "copy";
+    /** Element resized */
+    readonly RESIZE: "resize";
+    /** @deprecated Use OPEN_CHANGE instead */
+    readonly OPEN: "open";
+    /** @deprecated Use OPEN_CHANGE instead */
+    readonly CLOSE: "close";
+    /** @deprecated Use OPEN_CHANGE with cancelable: true instead */
+    readonly BEFORE_CLOSE: "before-close";
+    /** @deprecated Use PRESS instead */
+    readonly CLICK: "click";
+    /** Navigate event (links) */
+    readonly NAVIGATE: "navigate";
+};
+type StandardEventName = (typeof StandardEvents)[keyof typeof StandardEvents];
+
+/**
+ * Safe custom element registration utility.
+ * Prevents duplicate registration errors.
+ */
+type CustomElementConstructor = new (...args: unknown[]) => HTMLElement;
+/**
+ * Register a custom element if not already defined.
+ * @param tagName - The custom element tag name (e.g., 'ds-button')
+ * @param elementClass - The custom element class
+ */
+declare function define(tagName: string, elementClass: CustomElementConstructor): void;
+/**
+ * Check if a custom element is already registered.
+ */
+declare function isDefined(tagName: string): boolean;
+/**
+ * Wait for a custom element to be defined.
+ */
+declare function whenDefined(tagName: string): Promise<CustomElementConstructor>;
+
+export { type EmitEventOptions, type StandardEventName, StandardEvents, define, emitEvent, isDefined, whenDefined };

package/dist/core.js

@@ -0,0 +1,38 @@
+import {
+  getComponentClass,
+  getComponentClassSync,
+  getRegisteredTags,
+  hasComponent,
+  loadAllComponents,
+  registerComponent
+} from "./chunk-66HFYJD7.js";
+import {
+  FormAssociatedMixin
+} from "./chunk-UM7WRO7W.js";
+import {
+  StandardEvents,
+  emitEvent
+} from "./chunk-YDQ434UH.js";
+import {
+  DSElement,
+  define,
+  isDefined,
+  whenDefined
+} from "./chunk-H4GJJZ3N.js";
+export {
+  DSElement,
+  FormAssociatedMixin,
+  DSElement as LightElement,
+  StandardEvents,
+  define,
+  emitEvent,
+  getComponentClass,
+  getComponentClassSync,
+  getRegisteredTags,
+  hasComponent,
+  isDefined,
+  loadAllComponents,
+  registerComponent,
+  whenDefined
+};
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

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