@hypoth-ui/wc 0.1.1

package/dist/chunk-66HFYJD7.js

@@ -0,0 +1,86 @@
+// src/registry/registry.ts
+var registry = /* @__PURE__ */ new Map();
+function initializeRegistry() {
+  registry.set("ds-button", {
+    loader: async () => {
+      const mod = await import("./button-MKQKTC5Q.js");
+      return mod.DsButton;
+    }
+  });
+  registry.set("ds-input", {
+    loader: async () => {
+      const mod = await import("./input-LB6UR37A.js");
+      return mod.DsInput;
+    }
+  });
+  registry.set("ds-link", {
+    loader: async () => {
+      const mod = await import("./link-NHDJ6SFY.js");
+      return mod.DsLink;
+    }
+  });
+  registry.set("ds-text", {
+    loader: async () => {
+      const mod = await import("./text-MT3S3EMU.js");
+      return mod.DsText;
+    }
+  });
+  registry.set("ds-icon", {
+    loader: async () => {
+      const mod = await import("./icon-7IZTJ5WT.js");
+      return mod.DsIcon;
+    }
+  });
+  registry.set("ds-spinner", {
+    loader: async () => {
+      const mod = await import("./spinner-UIYDUVBZ.js");
+      return mod.DsSpinner;
+    }
+  });
+  registry.set("ds-visually-hidden", {
+    loader: async () => {
+      const mod = await import("./visually-hidden-MW2XY4CS.js");
+      return mod.DsVisuallyHidden;
+    }
+  });
+}
+initializeRegistry();
+function getRegisteredTags() {
+  return Array.from(registry.keys());
+}
+async function getComponentClass(tagName) {
+  const entry = registry.get(tagName);
+  if (!entry) return void 0;
+  if (entry.class) return entry.class;
+  if (entry.loader) {
+    const result = await entry.loader();
+    const componentClass = "default" in result ? result.default : result;
+    entry.class = componentClass;
+    return entry.class;
+  }
+  return void 0;
+}
+function getComponentClassSync(tagName) {
+  const entry = registry.get(tagName);
+  return entry?.class;
+}
+function registerComponent(tagName, componentClass) {
+  registry.set(tagName, { class: componentClass });
+}
+function hasComponent(tagName) {
+  return registry.has(tagName);
+}
+async function loadAllComponents() {
+  const tags = getRegisteredTags();
+  await Promise.all(tags.map((tag) => getComponentClass(tag)));
+}
+
+export {
+  getRegisteredTags,
+  getComponentClass,
+  getComponentClassSync,
+  registerComponent,
+  hasComponent,
+  loadAllComponents
+};
+//# sourceMappingURL=chunk-66HFYJD7.js.map

package/dist/chunk-66HFYJD7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/registry.ts"],"sourcesContent":["/**\n * Component Registry - Centralized mapping of tag names to component classes.\n *\n * This registry is the single source of truth for all design system component registrations.\n * Components do NOT self-register; instead, the loader uses this registry to register\n * components when the application starts.\n */\n\nimport type { DsButton } from \"../components/button/button.js\";\nimport type { DsIcon } from \"../components/icon/icon.js\";\nimport type { DsInput } from \"../components/input/input.js\";\nimport type { DsLink } from \"../components/link/link.js\";\nimport type { DsSpinner } from \"../components/spinner/spinner.js\";\nimport type { DsText } from \"../components/text/text.js\";\nimport type { DsVisuallyHidden } from \"../components/visually-hidden/visually-hidden.js\";\n\n/**\n * Custom element constructor type\n */\nexport type CustomElementConstructor = new (...args: unknown[]) => HTMLElement;\n\n/**\n * Component registry type - maps tag names to component classes\n */\nexport type ComponentRegistryType = Record<string, CustomElementConstructor>;\n\n/**\n * Valid component tag names in the design system\n */\nexport type ComponentTag =\n  | \"ds-button\"\n  | \"ds-input\"\n  | \"ds-link\"\n  | \"ds-text\"\n  | \"ds-icon\"\n  | \"ds-spinner\"\n  | \"ds-visually-hidden\";\n\n/**\n * Lazy loader type for dynamic imports\n */\ntype ComponentLoader = () => Promise<\n  { default: CustomElementConstructor } | CustomElementConstructor\n>;\n\n/**\n * Registry entry that supports lazy loading\n */\ninterface RegistryEntry {\n  /** Component class (populated after loading) */\n  class?: CustomElementConstructor;\n  /** Lazy loader function */\n  loader?: ComponentLoader;\n}\n\n/**\n * Internal registry storage\n */\nconst registry = new Map<string, RegistryEntry>();\n\n/**\n * Initialize the registry with component mappings.\n * This is called internally and populates the registry with all known components.\n */\nfunction initializeRegistry(): void {\n  // Register components with lazy loaders for tree-shaking support\n  registry.set(\"ds-button\", {\n    loader: async () => {\n      const mod = await import(\"../components/button/button.js\");\n      return mod.DsButton;\n    },\n  });\n\n  registry.set(\"ds-input\", {\n    loader: async () => {\n      const mod = await import(\"../components/input/input.js\");\n      return mod.DsInput;\n    },\n  });\n\n  registry.set(\"ds-link\", {\n    loader: async () => {\n      const mod = await import(\"../components/link/link.js\");\n      return mod.DsLink;\n    },\n  });\n\n  registry.set(\"ds-text\", {\n    loader: async () => {\n      const mod = await import(\"../components/text/text.js\");\n      return mod.DsText;\n    },\n  });\n\n  registry.set(\"ds-icon\", {\n    loader: async () => {\n      const mod = await import(\"../components/icon/icon.js\");\n      return mod.DsIcon;\n    },\n  });\n\n  registry.set(\"ds-spinner\", {\n    loader: async () => {\n      const mod = await import(\"../components/spinner/spinner.js\");\n      return mod.DsSpinner;\n    },\n  });\n\n  registry.set(\"ds-visually-hidden\", {\n    loader: async () => {\n      const mod = await import(\"../components/visually-hidden/visually-hidden.js\");\n      return mod.DsVisuallyHidden;\n    },\n  });\n}\n\n// Initialize on module load\ninitializeRegistry();\n\n/**\n * Get all registered tag names.\n *\n * @returns Array of all tag names in the registry\n */\nexport function getRegisteredTags(): ComponentTag[] {\n  return Array.from(registry.keys()) as ComponentTag[];\n}\n\n/**\n * Get component class by tag name.\n * If the component uses lazy loading, this will trigger the load.\n *\n * @param tagName - The custom element tag name\n * @returns Promise resolving to the component class or undefined if not found\n */\nexport async function getComponentClass(\n  tagName: string\n): Promise<CustomElementConstructor | undefined> {\n  const entry = registry.get(tagName);\n  if (!entry) return undefined;\n\n  // Return cached class if already loaded\n  if (entry.class) return entry.class;\n\n  // Load class if loader exists\n  if (entry.loader) {\n    const result = await entry.loader();\n    const componentClass = \"default\" in result ? result.default : result;\n    entry.class = componentClass as CustomElementConstructor;\n    return entry.class;\n  }\n\n  return undefined;\n}\n\n/**\n * Get component class synchronously (only works for already-loaded components).\n *\n * @param tagName - The custom element tag name\n * @returns The component class or undefined if not loaded/found\n */\nexport function getComponentClassSync(tagName: string): CustomElementConstructor | undefined {\n  const entry = registry.get(tagName);\n  return entry?.class;\n}\n\n/**\n * Register a component class directly (for pre-loaded components).\n *\n * @param tagName - The custom element tag name\n * @param componentClass - The component class constructor\n */\nexport function registerComponent(tagName: string, componentClass: CustomElementConstructor): void {\n  registry.set(tagName, { class: componentClass });\n}\n\n/**\n * Check if a tag name is in the registry.\n *\n * @param tagName - The custom element tag name\n * @returns True if the tag is registered\n */\nexport function hasComponent(tagName: string): boolean {\n  return registry.has(tagName);\n}\n\n/**\n * Load all components in the registry.\n * This is useful for eager loading all components at once.\n *\n * @returns Promise that resolves when all components are loaded\n */\nexport async function loadAllComponents(): Promise<void> {\n  const tags = getRegisteredTags();\n  await Promise.all(tags.map((tag) => getComponentClass(tag)));\n}\n\n// Type declarations for components\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ds-button\": DsButton;\n    \"ds-input\": DsInput;\n    \"ds-link\": DsLink;\n    \"ds-text\": DsText;\n    \"ds-icon\": DsIcon;\n    \"ds-spinner\": DsSpinner;\n    \"ds-visually-hidden\": DsVisuallyHidden;\n  }\n}\n"],"mappings":";AA0DA,IAAM,WAAW,oBAAI,IAA2B;AAMhD,SAAS,qBAA2B;AAElC,WAAS,IAAI,aAAa;AAAA,IACxB,QAAQ,YAAY;AAClB,YAAM,MAAM,MAAM,OAAO,sBAAgC;AACzD,aAAO,IAAI;AAAA,IACb;AAAA,EACF,CAAC;AAED,WAAS,IAAI,YAAY;AAAA,IACvB,QAAQ,YAAY;AAClB,YAAM,MAAM,MAAM,OAAO,qBAA8B;AACvD,aAAO,IAAI;AAAA,IACb;AAAA,EACF,CAAC;AAED,WAAS,IAAI,WAAW;AAAA,IACtB,QAAQ,YAAY;AAClB,YAAM,MAAM,MAAM,OAAO,oBAA4B;AACrD,aAAO,IAAI;AAAA,IACb;AAAA,EACF,CAAC;AAED,WAAS,IAAI,WAAW;AAAA,IACtB,QAAQ,YAAY;AAClB,YAAM,MAAM,MAAM,OAAO,oBAA4B;AACrD,aAAO,IAAI;AAAA,IACb;AAAA,EACF,CAAC;AAED,WAAS,IAAI,WAAW;AAAA,IACtB,QAAQ,YAAY;AAClB,YAAM,MAAM,MAAM,OAAO,oBAA4B;AACrD,aAAO,IAAI;AAAA,IACb;AAAA,EACF,CAAC;AAED,WAAS,IAAI,cAAc;AAAA,IACzB,QAAQ,YAAY;AAClB,YAAM,MAAM,MAAM,OAAO,uBAAkC;AAC3D,aAAO,IAAI;AAAA,IACb;AAAA,EACF,CAAC;AAED,WAAS,IAAI,sBAAsB;AAAA,IACjC,QAAQ,YAAY;AAClB,YAAM,MAAM,MAAM,OAAO,+BAAkD;AAC3E,aAAO,IAAI;AAAA,IACb;AAAA,EACF,CAAC;AACH;AAGA,mBAAmB;AAOZ,SAAS,oBAAoC;AAClD,SAAO,MAAM,KAAK,SAAS,KAAK,CAAC;AACnC;AASA,eAAsB,kBACpB,SAC+C;AAC/C,QAAM,QAAQ,SAAS,IAAI,OAAO;AAClC,MAAI,CAAC,MAAO,QAAO;AAGnB,MAAI,MAAM,MAAO,QAAO,MAAM;AAG9B,MAAI,MAAM,QAAQ;AAChB,UAAM,SAAS,MAAM,MAAM,OAAO;AAClC,UAAM,iBAAiB,aAAa,SAAS,OAAO,UAAU;AAC9D,UAAM,QAAQ;AACd,WAAO,MAAM;AAAA,EACf;AAEA,SAAO;AACT;AAQO,SAAS,sBAAsB,SAAuD;AAC3F,QAAM,QAAQ,SAAS,IAAI,OAAO;AAClC,SAAO,OAAO;AAChB;AAQO,SAAS,kBAAkB,SAAiB,gBAAgD;AACjG,WAAS,IAAI,SAAS,EAAE,OAAO,eAAe,CAAC;AACjD;AAQO,SAAS,aAAa,SAA0B;AACrD,SAAO,SAAS,IAAI,OAAO;AAC7B;AAQA,eAAsB,oBAAmC;AACvD,QAAM,OAAO,kBAAkB;AAC/B,QAAM,QAAQ,IAAI,KAAK,IAAI,CAAC,QAAQ,kBAAkB,GAAG,CAAC,CAAC;AAC7D;","names":[]}

package/dist/chunk-CZOXIJVS.js

@@ -0,0 +1,70 @@
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/text/text.ts
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
+var VALID_AS_VALUES = /* @__PURE__ */ new Set(["span", "p", "h1", "h2", "h3", "h4", "h5", "h6"]);
+var DsText = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.weight = "normal";
+    this.variant = "default";
+    this.as = "span";
+    this.truncate = false;
+  }
+  static {
+    this.styles = [];
+  }
+  getValidAs() {
+    if (VALID_AS_VALUES.has(this.as)) {
+      return this.as;
+    }
+    console.warn(
+      `[ds-text] Invalid "as" value "${this.as}". Expected one of: ${Array.from(VALID_AS_VALUES).join(", ")}. Falling back to "span".`
+    );
+    return "span";
+  }
+  render() {
+    const validAs = this.getValidAs();
+    const tag = unsafeStatic(validAs);
+    const classes = {
+      "ds-text": true,
+      [`ds-text--${this.size}`]: true,
+      [`ds-text--${this.weight}`]: true,
+      [`ds-text--${this.variant}`]: true,
+      "ds-text--truncate": this.truncate
+    };
+    return staticHtml`
+      <${tag} class=${classMap(classes)}>
+        <slot></slot>
+      </${tag}>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsText.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsText.prototype, "weight", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsText.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsText.prototype, "as", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsText.prototype, "truncate", 2);
+define("ds-text", DsText);
+
+export {
+  DsText
+};
+//# sourceMappingURL=chunk-CZOXIJVS.js.map

package/dist/chunk-CZOXIJVS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/text/text.ts"],"sourcesContent":["import type { TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html as staticHtml, unsafeStatic } from \"lit/static-html.js\";\nimport { DSElement } from \"../../base/ds-element.js\";\nimport { define } from \"../../registry/define.js\";\n\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type TextWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\nexport type TextVariant = \"default\" | \"muted\" | \"success\" | \"warning\" | \"error\";\nexport type TextAs = \"span\" | \"p\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nconst VALID_AS_VALUES = new Set<string>([\"span\", \"p\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]);\n\n/**\n * A typography component for consistent text styling.\n *\n * @element ds-text\n * @slot - Default slot for text content\n */\nexport class DsText extends DSElement {\n  static override styles = [];\n\n  /**\n   * The text size.\n   */\n  @property({ type: String, reflect: true })\n  size: TextSize = \"md\";\n\n  /**\n   * The font weight.\n   */\n  @property({ type: String, reflect: true })\n  weight: TextWeight = \"normal\";\n\n  /**\n   * The color variant.\n   */\n  @property({ type: String, reflect: true })\n  variant: TextVariant = \"default\";\n\n  /**\n   * The semantic element to render as.\n   * Supports: span, p, h1-h6\n   */\n  @property({ type: String, reflect: true })\n  as: TextAs = \"span\";\n\n  /**\n   * Whether to truncate text with ellipsis.\n   */\n  @property({ type: Boolean, reflect: true })\n  truncate = false;\n\n  private getValidAs(): TextAs {\n    if (VALID_AS_VALUES.has(this.as)) {\n      return this.as;\n    }\n\n    console.warn(\n      `[ds-text] Invalid \"as\" value \"${this.as}\". Expected one of: ${Array.from(VALID_AS_VALUES).join(\", \")}. Falling back to \"span\".`\n    );\n    return \"span\";\n  }\n\n  override render(): TemplateResult {\n    const validAs = this.getValidAs();\n    const tag = unsafeStatic(validAs);\n\n    const classes = {\n      \"ds-text\": true,\n      [`ds-text--${this.size}`]: true,\n      [`ds-text--${this.weight}`]: true,\n      [`ds-text--${this.variant}`]: true,\n      \"ds-text--truncate\": this.truncate,\n    };\n\n    return staticHtml`\n      <${tag} class=${classMap(classes)}>\n        <slot></slot>\n      </${tag}>\n    `;\n  }\n}\n\n// Register the component\ndefine(\"ds-text\", DsText);\n\n// TypeScript declaration for HTML\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ds-text\": DsText;\n  }\n}\n"],"mappings":";;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,YAAY,oBAAoB;AASjD,IAAM,kBAAkB,oBAAI,IAAY,CAAC,QAAQ,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI,CAAC;AAQlF,IAAM,SAAN,cAAqB,UAAU;AAAA,EAA/B;AAAA;AAOL,gBAAiB;AAMjB,kBAAqB;AAMrB,mBAAuB;AAOvB,cAAa;AAMb,oBAAW;AAAA;AAAA,EA/BX;AAAA,SAAgB,SAAS,CAAC;AAAA;AAAA,EAiClB,aAAqB;AAC3B,QAAI,gBAAgB,IAAI,KAAK,EAAE,GAAG;AAChC,aAAO,KAAK;AAAA,IACd;AAEA,YAAQ;AAAA,MACN,iCAAiC,KAAK,EAAE,uBAAuB,MAAM,KAAK,eAAe,EAAE,KAAK,IAAI,CAAC;AAAA,IACvG;AACA,WAAO;AAAA,EACT;AAAA,EAES,SAAyB;AAChC,UAAM,UAAU,KAAK,WAAW;AAChC,UAAM,MAAM,aAAa,OAAO;AAEhC,UAAM,UAAU;AAAA,MACd,WAAW;AAAA,MACX,CAAC,YAAY,KAAK,IAAI,EAAE,GAAG;AAAA,MAC3B,CAAC,YAAY,KAAK,MAAM,EAAE,GAAG;AAAA,MAC7B,CAAC,YAAY,KAAK,OAAO,EAAE,GAAG;AAAA,MAC9B,qBAAqB,KAAK;AAAA,IAC5B;AAEA,WAAO;AAAA,SACF,GAAG,UAAU,SAAS,OAAO,CAAC;AAAA;AAAA,UAE7B,GAAG;AAAA;AAAA,EAEX;AACF;AAxDE;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAN9B,OAOX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZ9B,OAaX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlB9B,OAmBX;AAOA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAzB9B,OA0BX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA/B/B,OAgCX;AAkCF,OAAO,WAAW,MAAM;","names":[]}

package/dist/chunk-DHUM4Q5Y.js

@@ -0,0 +1,495 @@
+import {
+  emitEvent
+} from "./chunk-YDQ434UH.js";
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/alert/alert.ts
+import { html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var VARIANT_ICONS = {
+  info: html`<svg class="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+  </svg>`,
+  success: html`<svg class="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+  </svg>`,
+  warning: html`<svg class="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+  </svg>`,
+  error: html`<svg class="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+  </svg>`
+};
+var CLOSE_ICON = html`<svg class="ds-alert__close-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+</svg>`;
+var DsAlert = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "info";
+    this.alertTitle = "";
+    this.closable = false;
+    this.hideIcon = false;
+  }
+  static {
+    this.styles = [];
+  }
+  handleClose() {
+    emitEvent(this, "ds:close", {});
+  }
+  handleKeyDown(event) {
+    if (event.key === "Escape" && this.closable) {
+      this.handleClose();
+    }
+  }
+  /**
+   * Get the ARIA role based on variant.
+   * Error and warning use 'alert' for immediate announcement.
+   * Info and success use 'status' for polite announcement.
+   */
+  getRole() {
+    return this.variant === "error" || this.variant === "warning" ? "alert" : "status";
+  }
+  render() {
+    const classes = {
+      "ds-alert": true
+    };
+    return html`
+      <div
+        part="alert"
+        class=${classMap(classes)}
+        role=${this.getRole()}
+        aria-live=${this.getRole() === "alert" ? "assertive" : "polite"}
+        data-variant=${this.variant}
+        ?data-closable=${this.closable}
+        @keydown=${this.handleKeyDown}
+      >
+        ${!this.hideIcon ? html`
+              <slot name="icon">
+                ${VARIANT_ICONS[this.variant]}
+              </slot>
+            ` : nothing}
+
+        <div part="content" class="ds-alert__content">
+          ${this.alertTitle ? html`<p part="title" class="ds-alert__title">${this.alertTitle}</p>` : nothing}
+
+          <div part="description" class="ds-alert__description">
+            <slot></slot>
+          </div>
+
+          <slot name="action" class="ds-alert__action"></slot>
+        </div>
+
+        ${this.closable ? html`
+              <button
+                part="close"
+                class="ds-alert__close"
+                type="button"
+                aria-label="Dismiss alert"
+                @click=${this.handleClose}
+              >
+                ${CLOSE_ICON}
+              </button>
+            ` : nothing}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsAlert.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], DsAlert.prototype, "alertTitle", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-icon" })
+], DsAlert.prototype, "hideIcon", 2);
+define("ds-alert", DsAlert);
+
+// src/components/toast/toast.ts
+import { html as html2, nothing as nothing2 } from "lit";
+import { property as property2, state } from "lit/decorators.js";
+import { classMap as classMap2 } from "lit/directives/class-map.js";
+var VARIANT_ICONS2 = {
+  info: html2`<svg class="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+  </svg>`,
+  success: html2`<svg class="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+  </svg>`,
+  warning: html2`<svg class="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+  </svg>`,
+  error: html2`<svg class="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+  </svg>`
+};
+var CLOSE_ICON2 = html2`<svg class="ds-toast__close-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+</svg>`;
+var DsToast = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.toastId = "";
+    this.toastTitle = "";
+    this.description = "";
+    this.variant = "info";
+    this.toastState = "entering";
+    this.duration = 5e3;
+    this.hideIcon = false;
+    this.isPaused = false;
+  }
+  static {
+    this.styles = [];
+  }
+  handleDismiss() {
+    emitEvent(this, "dismiss", { detail: { id: this.toastId } });
+  }
+  handleMouseEnter() {
+    this.isPaused = true;
+    emitEvent(this, "pause", { detail: { id: this.toastId } });
+  }
+  handleMouseLeave() {
+    this.isPaused = false;
+    emitEvent(this, "resume", { detail: { id: this.toastId } });
+  }
+  render() {
+    const classes = {
+      "ds-toast": true
+    };
+    return html2`
+      <div
+        class=${classMap2(classes)}
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        data-variant=${this.variant}
+        data-state=${this.toastState}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        ${!this.hideIcon ? VARIANT_ICONS2[this.variant] : nothing2}
+
+        <div class="ds-toast__content">
+          <p class="ds-toast__title">${this.toastTitle}</p>
+          ${this.description ? html2`<p class="ds-toast__description">${this.description}</p>` : nothing2}
+          <slot name="action" class="ds-toast__action"></slot>
+        </div>
+
+        <button
+          class="ds-toast__close"
+          type="button"
+          aria-label="Dismiss notification"
+          @click=${this.handleDismiss}
+        >
+          ${CLOSE_ICON2}
+        </button>
+
+        ${this.duration > 0 ? html2`
+              <div class="ds-toast__progress">
+                <div
+                  class="ds-toast__progress-bar"
+                  style="animation: ds-toast-progress ${this.duration}ms linear forwards; animation-play-state: ${this.isPaused ? "paused" : "running"}"
+                ></div>
+              </div>
+            ` : nothing2}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property2({ type: String, reflect: true })
+], DsToast.prototype, "toastId", 2);
+__decorateClass([
+  property2({ type: String })
+], DsToast.prototype, "toastTitle", 2);
+__decorateClass([
+  property2({ type: String })
+], DsToast.prototype, "description", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], DsToast.prototype, "variant", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], DsToast.prototype, "toastState", 2);
+__decorateClass([
+  property2({ type: Number })
+], DsToast.prototype, "duration", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "hide-icon" })
+], DsToast.prototype, "hideIcon", 2);
+__decorateClass([
+  state()
+], DsToast.prototype, "isPaused", 2);
+define("ds-toast", DsToast);
+
+// src/components/toast/toast-controller.ts
+var toastIdCounter = 0;
+function generateId() {
+  return `toast-${++toastIdCounter}-${Date.now()}`;
+}
+var ToastController = class {
+  constructor(options = {}) {
+    this.toasts = [];
+    this.options = {
+      maxToasts: options.maxToasts ?? 5,
+      defaultDuration: options.defaultDuration ?? 5e3,
+      position: options.position ?? "top-right",
+      onUpdate: options.onUpdate ?? (() => {
+      })
+    };
+  }
+  /**
+   * Show a new toast
+   */
+  show(options) {
+    const id = generateId();
+    const duration = options.duration ?? this.options.defaultDuration;
+    const toast = {
+      id,
+      title: options.title,
+      description: options.description,
+      variant: options.variant ?? "info",
+      duration,
+      action: options.action,
+      state: "entering",
+      createdAt: Date.now()
+    };
+    this.toasts = [toast, ...this.toasts];
+    if (this.toasts.length > this.options.maxToasts) {
+      const toRemove = this.toasts.slice(this.options.maxToasts);
+      for (const t of toRemove) {
+        this.dismiss(t.id);
+      }
+      this.toasts = this.toasts.slice(0, this.options.maxToasts);
+    }
+    setTimeout(() => {
+      this.updateState(id, "visible");
+    }, 200);
+    if (duration > 0) {
+      toast.timerId = setTimeout(() => {
+        this.dismiss(id);
+      }, duration);
+    }
+    this.notify();
+    return id;
+  }
+  /**
+   * Dismiss a toast by ID
+   */
+  dismiss(id) {
+    const toast = this.toasts.find((t) => t.id === id);
+    if (!toast || toast.state === "exiting" || toast.state === "dismissed") {
+      return;
+    }
+    if (toast.timerId) {
+      clearTimeout(toast.timerId);
+    }
+    this.updateState(id, "exiting");
+    setTimeout(() => {
+      this.toasts = this.toasts.filter((t) => t.id !== id);
+      this.notify();
+    }, 150);
+  }
+  /**
+   * Dismiss all toasts
+   */
+  dismissAll() {
+    const ids = this.toasts.map((t) => t.id);
+    for (const id of ids) {
+      this.dismiss(id);
+    }
+  }
+  /**
+   * Pause auto-dismiss for a toast (e.g., on hover)
+   */
+  pause(id) {
+    const toast = this.toasts.find((t) => t.id === id);
+    if (toast?.timerId) {
+      clearTimeout(toast.timerId);
+      toast.timerId = void 0;
+    }
+  }
+  /**
+   * Resume auto-dismiss for a toast
+   */
+  resume(id) {
+    const toast = this.toasts.find((t) => t.id === id);
+    if (toast?.duration && toast.duration > 0 && toast.state === "visible") {
+      const elapsed = Date.now() - toast.createdAt;
+      const remaining = Math.max(toast.duration - elapsed, 1e3);
+      toast.timerId = setTimeout(() => {
+        this.dismiss(id);
+      }, remaining);
+    }
+  }
+  /**
+   * Get current toasts
+   */
+  getToasts() {
+    return [...this.toasts];
+  }
+  /**
+   * Get controller options
+   */
+  getOptions() {
+    return { ...this.options };
+  }
+  /**
+   * Update controller options
+   */
+  setOptions(options) {
+    this.options = { ...this.options, ...options };
+  }
+  updateState(id, state3) {
+    const toast = this.toasts.find((t) => t.id === id);
+    if (toast) {
+      toast.state = state3;
+      this.notify();
+    }
+  }
+  notify() {
+    this.options.onUpdate(this.getToasts());
+  }
+};
+var globalController = null;
+function getGlobalToastController() {
+  if (!globalController) {
+    globalController = new ToastController();
+  }
+  return globalController;
+}
+function setGlobalToastController(controller) {
+  globalController = controller;
+}
+function dsToast(options) {
+  return getGlobalToastController().show(options);
+}
+if (typeof window !== "undefined") {
+  window.dsToast = dsToast;
+}
+
+// src/components/toast/toast-provider.ts
+import { html as html3 } from "lit";
+import { property as property3, state as state2 } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+var DsToastProvider = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.position = "top-right";
+    this.max = 5;
+    this.duration = 5e3;
+    this.toasts = [];
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.controller = new ToastController({
+      maxToasts: this.max,
+      defaultDuration: this.duration,
+      position: this.position,
+      onUpdate: (toasts) => {
+        this.toasts = toasts;
+      }
+    });
+    setGlobalToastController(this.controller);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("max") || changedProperties.has("duration") || changedProperties.has("position")) {
+      this.controller.setOptions({
+        maxToasts: this.max,
+        defaultDuration: this.duration,
+        position: this.position
+      });
+    }
+  }
+  handleDismiss(event) {
+    this.controller.dismiss(event.detail.id);
+  }
+  handlePause(event) {
+    this.controller.pause(event.detail.id);
+  }
+  handleResume(event) {
+    this.controller.resume(event.detail.id);
+  }
+  handleActionClick(toast) {
+    toast.action?.onClick();
+    this.controller.dismiss(toast.id);
+  }
+  render() {
+    return html3`
+      <slot></slot>
+
+      <div
+        class="ds-toast-viewport"
+        data-position=${this.position}
+        role="region"
+        aria-label="Notifications"
+        aria-live="polite"
+      >
+        ${repeat(
+      this.toasts,
+      (toast) => toast.id,
+      (toast) => html3`
+            <ds-toast
+              .toastId=${toast.id}
+              .toastTitle=${toast.title}
+              .description=${toast.description ?? ""}
+              .variant=${toast.variant ?? "info"}
+              .toastState=${toast.state}
+              .duration=${toast.duration ?? 0}
+              @ds:dismiss=${this.handleDismiss}
+              @ds:pause=${this.handlePause}
+              @ds:resume=${this.handleResume}
+            >
+              ${toast.action ? html3`
+                    <button
+                      slot="action"
+                      class="ds-button ds-button--sm ds-button--ghost"
+                      @click=${() => this.handleActionClick(toast)}
+                    >
+                      ${toast.action.label}
+                    </button>
+                  ` : null}
+            </ds-toast>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property3({ type: String, reflect: true })
+], DsToastProvider.prototype, "position", 2);
+__decorateClass([
+  property3({ type: Number })
+], DsToastProvider.prototype, "max", 2);
+__decorateClass([
+  property3({ type: Number })
+], DsToastProvider.prototype, "duration", 2);
+__decorateClass([
+  state2()
+], DsToastProvider.prototype, "toasts", 2);
+define("ds-toast-provider", DsToastProvider);
+
+export {
+  DsAlert,
+  DsToast,
+  ToastController,
+  getGlobalToastController,
+  setGlobalToastController,
+  dsToast,
+  DsToastProvider
+};
+//# sourceMappingURL=chunk-DHUM4Q5Y.js.map