@ds-gn/ui 0.9.0 → 0.11.0

package/dist/components/Toaster/src/Toaster.js

@@ -0,0 +1,1489 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+// components/Toaster/src/Toaster.ts
+import"../../Button/src/Button.js";
+import { MotionController } from "@ds-gn/motion/lit";
+import {
+  adoptStyles,
+  html as html2,
+  nothing,
+  render
+} from "lit";
+import { property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/surface/surface.props.ts
+var surfaceValues = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
+
+// components/Toaster/src/Toaster.ts
+import {
+  buttonAppearanceValues,
+  buttonIconPositionValues,
+  buttonSizeValues
+} from "../../Button/src/Button.props.js";
+import { Icon } from "../../Icon/src/Icon.js";
+// components/Icon/src/icons/circle-check.ts
+import { svg } from "lit";
+var circleCheck = svg`<circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />`;
+// components/Icon/src/icons/circle-x.ts
+import { svg as svg2 } from "lit";
+var circleX = svg2`<circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />`;
+// components/Icon/src/icons/info.ts
+import { svg as svg3 } from "lit";
+var info = svg3`<circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />`;
+// components/Icon/src/icons/triangle-alert.ts
+import { svg as svg4 } from "lit";
+var triangleAlert = svg4`<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />`;
+// components/Icon/src/icons/x.ts
+import { svg as svg5 } from "lit";
+var x = svg5`<path d="M18 6 6 18" /><path d="m6 6 12 12" />`;
+// components/Toaster/src/toast.ts
+var toastVariantValues = {
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error"
+};
+var toastDismissReasonValues = {
+  TIMEOUT: "timeout",
+  CLOSE: "close",
+  ACTION: "action",
+  PROGRAMMATIC: "programmatic"
+};
+var toastActionAppearanceValues = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary"
+};
+var TOAST_EVENT = "dsgn-toast";
+var TOAST_PENDING_LIMIT = 20;
+var TOAST_PENDING_KEY = Symbol.for("dsgn.toast.pending");
+var TOAST_ID_KEY = Symbol.for("dsgn.toast.counter");
+var nextToastId = () => {
+  const store = globalThis;
+  const id = (store[TOAST_ID_KEY] ?? 0) + 1;
+  store[TOAST_ID_KEY] = id;
+  return `dsgn-toast-${id}`;
+};
+var takePendingToasts = () => {
+  const store = globalThis;
+  const pending = store[TOAST_PENDING_KEY] ?? [];
+  store[TOAST_PENDING_KEY] = [];
+  return pending;
+};
+var hold = (request) => {
+  const store = globalThis;
+  const pending = store[TOAST_PENDING_KEY] ?? [];
+  if (request.type === "dismiss") {
+    store[TOAST_PENDING_KEY] = request.id === undefined ? [] : pending.filter((held) => held.type !== "show" || held.id !== request.id);
+    return;
+  }
+  pending.push(request);
+  store[TOAST_PENDING_KEY] = pending.slice(-TOAST_PENDING_LIMIT);
+};
+var send = (request) => {
+  if (typeof document === "undefined")
+    return;
+  const handled = !document.dispatchEvent(new CustomEvent(TOAST_EVENT, { detail: request, cancelable: true }));
+  if (!handled)
+    hold(request);
+};
+var show = (options) => {
+  const id = nextToastId();
+  send({ type: "show", id, options });
+  return id;
+};
+var shortcut = (variant) => (title, options = {}) => show({ ...options, title, variant });
+var toast = Object.assign(show, {
+  info: shortcut(toastVariantValues.INFO),
+  success: shortcut(toastVariantValues.SUCCESS),
+  warning: shortcut(toastVariantValues.WARNING),
+  error: shortcut(toastVariantValues.ERROR),
+  dismiss: (id) => send({ type: "dismiss", id })
+});
+
+// components/Toaster/src/Toaster.css
+import { css as css2 } from "lit";
+var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --font-weight-semibold: 600;
+    --radius-lg: 0.5rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --duration-quick: var(--dsgn-src-duration-quick, 180ms);
+    --ease-standard: var(--dsgn-src-ease-standard, cubic-bezier(0.2, 0, 0, 1));
+    --color-error: inherit;
+    --color-error-strong: inherit;
+    --color-info: inherit;
+    --color-outline-strong: inherit;
+    --color-popover-bg: inherit;
+    --color-popover-border: inherit;
+    --color-success: inherit;
+    --color-success-strong: inherit;
+    --color-text-primary: inherit;
+    --color-text-secondary: inherit;
+    --color-warning: inherit;
+    --color-warning-strong: inherit;
+    --shadow-popover: inherit;
+  }
+}
+@layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .inset-auto {
+    inset: auto;
+  }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
+  .right-6 {
+    right: calc(var(--spacing) * 6);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .z-50 {
+    z-index: 50;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .-mt-1\\.5 {
+    margin-top: calc(var(--spacing) * -1.5);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-2\\.5 {
+    margin-top: calc(var(--spacing) * 2.5);
+  }
+  .mt-px {
+    margin-top: 1px;
+  }
+  .box-border {
+    box-sizing: border-box;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline {
+    display: inline;
+  }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .h-0\\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
+  .max-h-\\[calc\\(100dvh-48px\\)\\] {
+    max-height: calc(100dvh - 48px);
+  }
+  .w-\\[380px\\] {
+    width: 380px;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .origin-bottom {
+    transform-origin: bottom;
+  }
+  .origin-left {
+    transform-origin: 0;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .list-none {
+    list-style-type: none;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-end {
+    align-items: flex-end;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .gap-0\\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-visible {
+    overflow: visible;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .border-popover-border {
+    border-color: var(--color-popover-border);
+  }
+  .bg-error {
+    background-color: var(--color-error);
+  }
+  .bg-info {
+    background-color: var(--color-info);
+  }
+  .bg-outline-strong {
+    background-color: var(--color-outline-strong);
+  }
+  .bg-popover-bg {
+    background-color: var(--color-popover-bg);
+  }
+  .bg-success {
+    background-color: var(--color-success);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .bg-warning {
+    background-color: var(--color-warning);
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke-current {
+    stroke: currentcolor;
+  }
+  .stroke-\\[1\\.75\\] {
+    stroke-width: 1.75;
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .px-2\\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+  .py-2\\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+  .py-3\\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
+  .py-\\[3px\\] {
+    padding-block: 3px;
+  }
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-\\[11px\\] {
+    font-size: 11px;
+  }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-\\[0\\.02em\\] {
+    --tw-tracking: 0.02em;
+    letter-spacing: 0.02em;
+  }
+  .text-error-strong {
+    color: var(--color-error-strong);
+  }
+  .text-info {
+    color: var(--color-info);
+  }
+  .text-success-strong {
+    color: var(--color-success-strong);
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .text-text-secondary {
+    color: var(--color-text-secondary);
+  }
+  .text-warning-strong {
+    color: var(--color-warning-strong);
+  }
+  .shadow-popover {
+    --tw-shadow: inherit;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .\\[box-shadow\\:var\\(--shadow-popover\\)\\] {
+    box-shadow: var(--shadow-popover);
+  }
+  .transition-\\[scale\\,opacity\\] {
+    transition-property: scale,opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-\\[var\\(--duration-quick\\)\\] {
+    --tw-duration: var(--duration-quick);
+    transition-duration: var(--duration-quick);
+  }
+  .ease-\\[var\\(--ease-standard\\)\\] {
+    --tw-ease: var(--ease-standard);
+    transition-timing-function: var(--ease-standard);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .group-data-\\[behind\\]\\:opacity-0 {
+    &:is(:where(.group)[data-behind] *) {
+      opacity: 0%;
+    }
+  }
+  .data-\\[behind\\]\\:overflow-hidden {
+    &[data-behind] {
+      overflow: hidden;
+    }
+  }
+  .data-\\[buried\\]\\:pointer-events-none {
+    &[data-buried] {
+      pointer-events: none;
+    }
+  }
+  .data-\\[buried\\]\\:opacity-0 {
+    &[data-buried] {
+      opacity: 0%;
+    }
+  }
+  .motion-reduce\\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: none;
+    }
+  }
+  .max-sm\\:right-4 {
+    @media (width < 40rem) {
+      right: calc(var(--spacing) * 4);
+    }
+  }
+  .max-sm\\:bottom-4 {
+    @media (width < 40rem) {
+      bottom: calc(var(--spacing) * 4);
+    }
+  }
+  .max-sm\\:max-h-\\[calc\\(100dvh-32px\\)\\] {
+    @media (width < 40rem) {
+      max-height: calc(100dvh - 32px);
+    }
+  }
+  .max-sm\\:w-\\[calc\\(100vw-32px\\)\\] {
+    @media (width < 40rem) {
+      width: calc(100vw - 32px);
+    }
+  }
+  .pointer-coarse\\:after\\:absolute {
+    @media (pointer: coarse) {
+      &::after {
+        content: var(--tw-content);
+        position: absolute;
+      }
+    }
+  }
+  .pointer-coarse\\:after\\:-inset-1\\.5 {
+    @media (pointer: coarse) {
+      &::after {
+        content: var(--tw-content);
+        inset: calc(var(--spacing) * -1.5);
+      }
+    }
+  }
+  .pointer-coarse\\:after\\:content-\\[\\'\\'\\] {
+    @media (pointer: coarse) {
+      &::after {
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-content: "";
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Toaster_default = styles2;
+
+// components/Toaster/src/Toaster.props.ts
+var TOASTER_MAX_VISIBLE = 3;
+var toastDurations = {
+  [toastVariantValues.INFO]: 5000,
+  [toastVariantValues.SUCCESS]: 5000,
+  [toastVariantValues.WARNING]: 7000,
+  [toastVariantValues.ERROR]: 0
+};
+var TOAST_GAP = 8;
+var TOAST_PEEK = 10;
+var toastStackScales = [1, 0.94, 0.88];
+var QUEUED_COUNT_TOKEN = "{count}";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// components/Toaster/src/Toaster.styles.ts
+import { css as css3 } from "lit";
+var hostStyles = css3`
+  :host {
+    display: contents;
+  }
+`;
+var regionClasses = (expanded) => clsx_default("fixed", "inset-auto", "z-50", "m-0", "p-0", "border-0", "bg-transparent", "overflow-visible", "bottom-6", "right-6", "w-[380px]", "max-sm:bottom-4", "max-sm:right-4", "max-sm:w-[calc(100vw-32px)]", "flex", "flex-col", "items-end", "gap-2", "font-sans", "text-text-primary", "pointer-events-none", "outline-none", expanded && [
+  "max-h-[calc(100dvh-48px)]",
+  "max-sm:max-h-[calc(100dvh-32px)]",
+  "overflow-y-auto"
+]);
+var liveRegionClasses = () => clsx_default("sr-only");
+var queueClasses = () => clsx_default("shrink-0", "px-2.5", "py-[3px]", "rounded-full", "border", "border-popover-border", "bg-popover-bg", "font-mono", "text-[11px]", "leading-4", "tracking-[0.02em]", "text-text-secondary", "pointer-events-auto");
+var listClasses = () => clsx_default("relative", "w-full", "shrink-0", "m-0", "p-0", "list-none", "pointer-events-auto");
+var itemClasses = () => clsx_default("group", "absolute", "inset-x-0", "bottom-0", "origin-bottom", "rounded-lg", "transition-[scale,opacity]", "duration-[var(--duration-quick)]", "ease-[var(--ease-standard)]", "motion-reduce:transition-none", "data-[behind]:overflow-hidden", "data-[buried]:opacity-0", "data-[buried]:pointer-events-none");
+var toastClasses = (compact) => clsx_default("relative", "overflow-hidden", "box-border", "flex", "gap-3", "pl-4", "pr-2", "border", "border-popover-border", "bg-popover-bg", "rounded-lg", "[box-shadow:var(--shadow-popover)]", "text-text-primary", compact ? ["items-center", "py-2.5"] : ["items-start", "py-3.5"]);
+var behindHidden = [
+  "transition-opacity",
+  "duration-[var(--duration-quick)]",
+  "motion-reduce:transition-none",
+  "group-data-[behind]:opacity-0"
+];
+var iconColorClasses = {
+  [toastVariantValues.INFO]: "text-info",
+  [toastVariantValues.SUCCESS]: "text-success-strong",
+  [toastVariantValues.WARNING]: "text-warning-strong",
+  [toastVariantValues.ERROR]: "text-error-strong"
+};
+var iconClasses = (variant, compact) => clsx_default("size-5", "shrink-0", "fill-none", "stroke-current", "stroke-[1.75]", !compact && "mt-px", iconColorClasses[variant], behindHidden);
+var bodyClasses = () => clsx_default("flex-1", "min-w-0", "flex", "flex-col", "gap-0.5", behindHidden);
+var titleClasses = () => clsx_default("text-sm", "leading-5", "font-semibold", "text-text-primary");
+var descriptionClasses = () => clsx_default("text-sm", "leading-5", "text-text-secondary");
+var linksClasses = () => clsx_default("flex", "flex-wrap", "gap-x-4", "gap-y-1", "mt-1");
+var actionsClasses = (inline) => clsx_default("flex", "flex-wrap", "gap-2", inline ? ["shrink-0", behindHidden] : "mt-2.5");
+var touchTargetClasses = () => clsx_default("relative", "pointer-coarse:after:content-['']", "pointer-coarse:after:absolute", "pointer-coarse:after:-inset-1.5");
+var dismissClasses = (compact) => clsx_default(touchTargetClasses(), "shrink-0", !compact && "-mt-1.5", behindHidden);
+var barColorClasses = {
+  [toastVariantValues.INFO]: "bg-info",
+  [toastVariantValues.SUCCESS]: "bg-success",
+  [toastVariantValues.WARNING]: "bg-warning",
+  [toastVariantValues.ERROR]: "bg-error"
+};
+var progressClasses = (variant, paused) => clsx_default("absolute", "left-0", "bottom-0", "h-0.5", "w-full", "origin-left", paused ? "bg-outline-strong" : barColorClasses[variant]);
+
+// components/Toaster/src/Toaster.ts
+var variantIcons = {
+  [toastVariantValues.INFO]: info,
+  [toastVariantValues.SUCCESS]: circleCheck,
+  [toastVariantValues.WARNING]: triangleAlert,
+  [toastVariantValues.ERROR]: circleX
+};
+var supportsPopover = () => typeof HTMLElement !== "undefined" && ("popover" in HTMLElement.prototype);
+var MAX_ANNOUNCEMENTS = 5;
+var announcementText = ({ title, description }) => {
+  if (!description)
+    return title;
+  const stop = /[.!?…]$/.test(title.trim()) ? "" : ".";
+  return `${title.trim()}${stop} ${description}`;
+};
+
+class Toaster extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.maxVisible = TOASTER_MAX_VISIBLE;
+    this.label = "";
+    this.dismissLabel = "";
+    this.queuedLabel = "";
+    this.pausedLabel = "";
+    this._toasts = [];
+    this._hovered = false;
+    this._focused = false;
+    this._polite = [];
+    this._assertive = [];
+    this._motion = new MotionController(this);
+    this._topLayer = supportsPopover();
+    this._modals = [];
+    this._held = [];
+    this._settling = false;
+    this._settleRun = 0;
+    this._reraise = false;
+    this._entering = new Set;
+    this._handleToastEvent = (event) => {
+      if (event.defaultPrevented)
+        return;
+      const request = event.detail;
+      if (!request)
+        return;
+      event.preventDefault();
+      this._handle(request);
+    };
+    this._handleModalOpen = (event) => {
+      const modal = event.composedPath()[0];
+      this._modals = [...this._modals.filter((open) => open !== modal), modal];
+      this._reraise = true;
+      this.requestUpdate();
+    };
+    this._handleModalClose = (event) => {
+      const modal = event.composedPath()[0];
+      this._modals = this._modals.filter((open) => open !== modal);
+      this.requestUpdate();
+    };
+  }
+  static styles = [Base.styles, Toaster_default, hostStyles];
+  get _paused() {
+    return this._hovered || this._focused;
+  }
+  show(options) {
+    const id = nextToastId();
+    this._add(id, options);
+    return id;
+  }
+  dismiss(id) {
+    const records = (id === undefined ? [...this._toasts] : this._toasts.filter((record) => record.id === id)).sort((a, b) => Number(a.phase !== "queued") - Number(b.phase !== "queued"));
+    records.forEach((record) => this._dismiss(record, toastDismissReasonValues.PROGRAMMATIC));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof document === "undefined")
+      return;
+    document.addEventListener(TOAST_EVENT, this._handleToastEvent);
+    document.addEventListener("dsgn-modal-open", this._handleModalOpen);
+    document.addEventListener("dsgn-modal-close", this._handleModalClose);
+    this._modals = [
+      ...document.querySelectorAll("dsgn-modal[open]")
+    ];
+    if (typeof ResizeObserver !== "undefined") {
+      this._resize ??= new ResizeObserver(() => this._layout());
+    }
+    this._settle();
+    this._hovered = false;
+    this._focused = false;
+    this._syncTimers();
+    this.requestUpdate();
+    takePendingToasts().forEach((request) => this._handle(request));
+  }
+  disconnectedCallback() {
+    this._settleRun++;
+    document.removeEventListener(TOAST_EVENT, this._handleToastEvent);
+    document.removeEventListener("dsgn-modal-open", this._handleModalOpen);
+    document.removeEventListener("dsgn-modal-close", this._handleModalClose);
+    this._resize?.disconnect();
+    this._toasts.forEach((record) => this._stopTimer(record));
+    this._container?.remove();
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("maxVisible"))
+      this._promote();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    this._renderRegion();
+  }
+  render() {
+    return html2``;
+  }
+  _handle(request) {
+    if (request.type === "show") {
+      this._add(request.id, request.options);
+    } else {
+      this.dismiss(request.id);
+    }
+  }
+  _add(id, options) {
+    const variant = options.variant ?? toastVariantValues.INFO;
+    const duration = Math.max(0, options.duration ?? toastDurations[variant]);
+    this._toasts = [
+      ...this._toasts,
+      {
+        id,
+        options,
+        variant,
+        duration,
+        phase: "queued",
+        remaining: duration,
+        startedAt: 0
+      }
+    ];
+    this._promote();
+  }
+  _promote() {
+    let timedShowing = this._toasts.filter((record) => record.phase === "shown" && record.duration > 0).length;
+    const limit = Math.max(1, this.maxVisible || TOASTER_MAX_VISIBLE);
+    for (const record of this._toasts) {
+      if (record.phase !== "queued")
+        continue;
+      if (record.duration > 0) {
+        if (timedShowing >= limit)
+          continue;
+        timedShowing += 1;
+      }
+      this._reveal(record);
+    }
+    this.requestUpdate();
+  }
+  _reveal(record) {
+    record.phase = "shown";
+    this._entering.add(record.id);
+    this._announce(record);
+    this._startTimer(record);
+  }
+  _dismiss(record, reason) {
+    if (record.phase === "leaving")
+      return;
+    const wasQueued = record.phase === "queued";
+    this._stopTimer(record);
+    record.phase = "leaving";
+    this._withdraw(record.id);
+    if (!wasQueued)
+      this._moveFocusFrom(record);
+    this.emit("dsgn-dismiss", { id: record.id, reason });
+    record.options.onDismiss?.(reason);
+    if (wasQueued) {
+      this._remove(record);
+      return;
+    }
+    this.requestUpdate();
+    this.updateComplete.then(() => this._exit(record));
+  }
+  async _exit(record) {
+    const card = this._cardFor(record.id);
+    if (card)
+      await this._motion.exit(card, "fade");
+    this._remove(record);
+  }
+  _remove(record) {
+    this._entering.delete(record.id);
+    this._toasts = this._toasts.filter((other) => other !== record);
+    this._promote();
+  }
+  _startTimer(record) {
+    if (record.phase !== "shown" || record.duration <= 0)
+      return;
+    if (this._paused || record.timer)
+      return;
+    record.startedAt = Date.now();
+    record.timer = setTimeout(() => {
+      record.timer = undefined;
+      this._dismiss(record, toastDismissReasonValues.TIMEOUT);
+    }, record.remaining);
+    record.bar?.play();
+  }
+  _stopTimer(record) {
+    if (!record.timer)
+      return;
+    clearTimeout(record.timer);
+    record.timer = undefined;
+    record.remaining = Math.max(0, record.remaining - (Date.now() - record.startedAt));
+    record.bar?.pause();
+  }
+  _syncTimers() {
+    for (const record of this._toasts) {
+      if (this._paused)
+        this._stopTimer(record);
+      else
+        this._startTimer(record);
+    }
+  }
+  _startBar(record, bar) {
+    if (record.bar || record.duration <= 0)
+      return;
+    if (typeof bar.animate !== "function")
+      return;
+    const from = record.remaining / record.duration;
+    record.bar = bar.animate([{ transform: `scaleX(${from})` }, { transform: "scaleX(0)" }], { duration: record.remaining, easing: "linear", fill: "forwards" });
+    if (!record.timer)
+      record.bar.pause();
+  }
+  _handlePointerEnter() {
+    this._hovered = true;
+    this._syncTimers();
+  }
+  _handlePointerLeave() {
+    this._hovered = false;
+    this._syncTimers();
+  }
+  _handleFocusIn() {
+    this._focused = true;
+    this._syncTimers();
+  }
+  _handleFocusOut(event) {
+    const region = event.currentTarget;
+    const next = event.relatedTarget;
+    if (next && region.contains(next))
+      return;
+    this._focused = false;
+    this._syncTimers();
+  }
+  _moveFocusFrom(record) {
+    const item = this._itemFor(record.id);
+    const active = this._containerRoot?.activeElement;
+    if (!item || !active || !item.contains(active))
+      return;
+    const others = this._stack().filter((other) => other !== record && other.phase === "shown");
+    const index = this._stack().indexOf(record);
+    const next = others.find((other) => this._stack().indexOf(other) > index) ?? [...others].reverse().find((other) => this._stack().indexOf(other) < index);
+    const target = next ? this._itemFor(next.id)?.querySelector("[data-dismiss]") : this._region();
+    (target ?? this._region())?.focus();
+  }
+  _announce(record) {
+    const polite = record.variant !== toastVariantValues.ERROR;
+    const announcement = {
+      id: record.id,
+      text: announcementText(record.options)
+    };
+    if (this._settling) {
+      this._held.push({ polite, announcement });
+      return;
+    }
+    this._write(polite, announcement);
+  }
+  _write(polite, announcement) {
+    if (polite) {
+      this._polite = [...this._polite, announcement].slice(-MAX_ANNOUNCEMENTS);
+    } else {
+      this._assertive = [...this._assertive, announcement].slice(-MAX_ANNOUNCEMENTS);
+    }
+  }
+  _withdraw(id) {
+    this._held = this._held.filter(({ announcement }) => announcement.id !== id);
+    this._polite = this._polite.filter((entry) => entry.id !== id);
+    this._assertive = this._assertive.filter((entry) => entry.id !== id);
+  }
+  _settle() {
+    this._settling = true;
+    const run = ++this._settleRun;
+    const release = () => {
+      if (run !== this._settleRun || !this.isConnected)
+        return;
+      this._settling = false;
+      const held = this._held;
+      this._held = [];
+      held.forEach(({ polite, announcement }) => this._write(polite, announcement));
+    };
+    this.updateComplete.then(() => setTimeout(release, 0));
+  }
+  _modalHome() {
+    this._modals = this._modals.filter((modal) => modal.isConnected && modal.hasAttribute("open"));
+    return this._modals.at(-1);
+  }
+  _place() {
+    if (!this._container || !this._containerRoot) {
+      const container2 = document.createElement("div");
+      container2.setAttribute("data-dsgn-toaster", "");
+      const root = container2.attachShadow({ mode: "open" });
+      adoptStyles(root, this.constructor.elementStyles);
+      this._container = container2;
+      this._containerRoot = root;
+    }
+    const container = this._container;
+    container.setAttribute("data-theme", this.surface);
+    const home = this._modalHome();
+    const parent = home ?? document.body;
+    if (container.parentNode !== parent) {
+      const hadRegion = container.isConnected;
+      if (home)
+        container.slot = "toaster";
+      else
+        container.removeAttribute("slot");
+      parent.append(container);
+      if (hadRegion)
+        this._settle();
+    }
+    return this._containerRoot;
+  }
+  _raise() {
+    const region = this._region();
+    if (!this._topLayer || !region?.isConnected)
+      return;
+    try {
+      if (region.matches(":popover-open")) {
+        if (!this._reraise)
+          return;
+        region.hidePopover();
+      }
+      region.showPopover();
+    } catch {} finally {
+      this._reraise = false;
+    }
+  }
+  _stack() {
+    return this._toasts.filter((record) => record.phase !== "queued").reverse();
+  }
+  _region() {
+    return this._containerRoot?.querySelector('[part="region"]') ?? null;
+  }
+  _itemFor(id) {
+    return this._containerRoot?.querySelector(`li[data-id="${id}"]`) ?? null;
+  }
+  _cardFor(id) {
+    return this._itemFor(id)?.querySelector('[part="toast"]') ?? null;
+  }
+  _layout() {
+    const list = this._containerRoot?.querySelector('[part="list"]');
+    if (!list)
+      return;
+    const stack = this._stack();
+    const items = stack.map((record) => this._itemFor(record.id));
+    const heights = items.map((item) => item?.querySelector('[part="toast"]')?.offsetHeight ?? 0);
+    const expanded = this._paused;
+    const frontHeight = heights[0] ?? 0;
+    const before = items.map((item) => item?.getBoundingClientRect().bottom);
+    let offset = 0;
+    items.forEach((item, index) => {
+      if (!item)
+        return;
+      const depth = Math.min(index, toastStackScales.length - 1);
+      const y = expanded ? -offset : -depth * TOAST_PEEK;
+      const scale = expanded ? 1 : toastStackScales[depth];
+      offset += heights[index] + TOAST_GAP;
+      item.style.setProperty("translate", `0 ${y}px`);
+      item.style.setProperty("scale", String(scale));
+      item.style.setProperty("z-index", String(stack.length - index));
+      const behind = !expanded && index > 0;
+      item.toggleAttribute("data-behind", behind);
+      item.toggleAttribute("data-buried", !expanded && index >= toastStackScales.length);
+      if (behind)
+        item.style.setProperty("height", `${frontHeight}px`);
+      else
+        item.style.removeProperty("height");
+    });
+    const peeks = Math.min(stack.length, toastStackScales.length) - 1;
+    const height = expanded ? Math.max(0, offset - TOAST_GAP) : frontHeight + Math.max(0, peeks) * TOAST_PEEK;
+    list.style.setProperty("height", `${height}px`);
+    items.forEach((item, index) => {
+      const record = stack[index];
+      const was = before[index];
+      if (!item || was === undefined || this._entering.has(record.id))
+        return;
+      const delta = was - item.getBoundingClientRect().bottom;
+      if (Math.abs(delta) < 0.5)
+        return;
+      this._motion.enter(item, "slideInBottom", {
+        y: delta,
+        duration: "quick",
+        easing: "standard",
+        reducedMotion: "jump"
+      });
+    });
+  }
+  _renderRegion() {
+    if (typeof document === "undefined" || !this.isConnected)
+      return;
+    const root = this._place();
+    render(this._regionTemplate(), root, { host: this });
+    this._raise();
+    this._observeCards(root);
+    this._layout();
+    this._startEntrances();
+  }
+  _observeCards(root) {
+    if (!this._resize)
+      return;
+    this._resize.disconnect();
+    root.querySelectorAll('[part="toast"]').forEach((card) => this._resize.observe(card));
+  }
+  _startEntrances() {
+    for (const id of this._entering) {
+      const card = this._cardFor(id);
+      if (!card)
+        continue;
+      this._entering.delete(id);
+      this._motion.enter(card, "slideUp", { y: 8 });
+    }
+    for (const record of this._toasts) {
+      const bar = this._itemFor(record.id)?.querySelector('[part="progress"]');
+      if (bar)
+        this._startBar(record, bar);
+    }
+  }
+  _queueText(queued) {
+    const parts = [];
+    if (queued > 0) {
+      parts.push(this.queuedLabel ? this.queuedLabel.replaceAll(QUEUED_COUNT_TOKEN, String(queued)) : `+${queued}`);
+    }
+    if (this._paused && this.pausedLabel && this._stack().length > 0) {
+      parts.push(this.pausedLabel);
+    }
+    return parts.join(" · ");
+  }
+  _regionTemplate() {
+    const stack = this._stack();
+    const queued = this._toasts.filter((record) => record.phase === "queued").length;
+    const queueText = this._queueText(queued);
+    return html2`
+      <section
+        part="region"
+        class=${regionClasses(this._paused)}
+        aria-label=${this.label || nothing}
+        tabindex="-1"
+        popover=${this._topLayer ? "manual" : nothing}
+        @pointerenter=${this._handlePointerEnter}
+        @pointerleave=${this._handlePointerLeave}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}
+      >
+        <div
+          role="status"
+          aria-live="polite"
+          aria-atomic="false"
+          class=${liveRegionClasses()}
+        >
+          ${repeat(this._polite, ({ id }) => id, ({ text }) => html2`<p>${text}</p>`)}
+        </div>
+        <div
+          role="alert"
+          aria-live="assertive"
+          aria-atomic="false"
+          class=${liveRegionClasses()}
+        >
+          ${repeat(this._assertive, ({ id }) => id, ({ text }) => html2`<p>${text}</p>`)}
+        </div>
+        ${queueText ? html2`<div part="queue" class=${queueClasses()} aria-hidden="true">
+              ${queueText}
+            </div>` : nothing}
+        ${stack.length ? html2`<ol part="list" class=${listClasses()}>
+              ${repeat([...stack].reverse(), (record) => record.id, (record) => this._toastTemplate(record))}
+            </ol>` : nothing}
+      </section>
+    `;
+  }
+  _toastTemplate(record) {
+    const { options, variant } = record;
+    const actions = (options.actions ?? []).slice(0, 2);
+    const links = options.links ?? [];
+    const compact = !options.description && links.length === 0;
+    const custom = options.icon ? Icon.resolve(options.icon) : undefined;
+    const icon = custom ?? variantIcons[variant];
+    const iconName = custom ? options.icon : variant;
+    const leaving = record.phase === "leaving";
+    return html2`
+      <li
+        class=${itemClasses()}
+        data-id=${record.id}
+        data-variant=${variant}
+        ?inert=${leaving}
+      >
+        <div part="toast" class=${toastClasses(compact)}>
+          ${this._iconTemplate(icon, iconName, variant, compact)}
+          ${this._bodyTemplate(record, actions, links, compact)}
+          ${actions.length && compact ? this._actionsTemplate(record, actions, true) : nothing}
+          <dsgn-button
+            part="dismiss"
+            data-dismiss
+            class=${dismissClasses(compact)}
+            .surface=${this.surface}
+            .appearance=${buttonAppearanceValues.GHOST}
+            .size=${buttonSizeValues.SM}
+            .icon=${x}
+            .iconPosition=${buttonIconPositionValues.ONLY}
+            aria-label=${this.dismissLabel || nothing}
+            @click=${() => this._dismiss(record, toastDismissReasonValues.CLOSE)}
+          ></dsgn-button>
+          ${record.duration > 0 ? html2`<div
+                part="progress"
+                class=${progressClasses(variant, this._paused)}
+                aria-hidden="true"
+              ></div>` : nothing}
+        </div>
+      </li>
+    `;
+  }
+  _bodyTemplate(record, actions, links, compact) {
+    const { options } = record;
+    return html2`
+      <div class=${bodyClasses()}>
+        <p part="title" class=${titleClasses()}>${options.title}</p>
+        ${options.description ? html2`<p part="description" class=${descriptionClasses()}>
+              ${options.description}
+            </p>` : nothing}
+        ${links.length ? html2`<div part="links" class=${linksClasses()}>
+              ${links.map((link) => this._linkTemplate(link))}
+            </div>` : nothing}
+        ${actions.length && !compact ? this._actionsTemplate(record, actions, false) : nothing}
+      </div>
+    `;
+  }
+  _iconTemplate(icon, name, variant, compact) {
+    return html2`<svg
+      part="icon"
+      data-icon=${name}
+      class="${iconClasses(variant, compact)}"
+      viewBox="0 0 24 24"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      ${icon}
+    </svg>`;
+  }
+  _actionsTemplate(record, actions, inline) {
+    return html2`<div part="actions" class=${actionsClasses(inline)}>
+      ${actions.map((action, index) => {
+      const appearance = action.appearance ?? (actions.length > 1 && index === 0 ? toastActionAppearanceValues.PRIMARY : toastActionAppearanceValues.SECONDARY);
+      return html2`<dsgn-button
+          part="action"
+          class=${touchTargetClasses()}
+          .surface=${this.surface}
+          .size=${buttonSizeValues.SM}
+          .appearance=${appearance === toastActionAppearanceValues.PRIMARY ? buttonAppearanceValues.SOLID : buttonAppearanceValues.OUTLINE}
+          @click=${() => {
+        action.onClick?.();
+        this._dismiss(record, toastDismissReasonValues.ACTION);
+      }}
+          >${action.label}</dsgn-button
+        >`;
+    })}
+    </div>`;
+  }
+  _linkTemplate(link) {
+    return html2`<dsgn-button
+      class=${touchTargetClasses()}
+      .surface=${this.surface}
+      .size=${buttonSizeValues.SM}
+      .appearance=${buttonAppearanceValues.INLINE}
+      .href=${link.href ?? ""}
+      @click=${() => link.onClick?.()}
+      >${link.label}</dsgn-button
+    >`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Toaster.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ type: Number, attribute: "max-visible" })
+], Toaster.prototype, "maxVisible", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Toaster.prototype, "label", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "dismiss-label" })
+], Toaster.prototype, "dismissLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "queued-label" })
+], Toaster.prototype, "queuedLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "paused-label" })
+], Toaster.prototype, "pausedLabel", undefined);
+__legacyDecorateClassTS([
+  state()
+], Toaster.prototype, "_toasts", undefined);
+__legacyDecorateClassTS([
+  state()
+], Toaster.prototype, "_hovered", undefined);
+__legacyDecorateClassTS([
+  state()
+], Toaster.prototype, "_focused", undefined);
+__legacyDecorateClassTS([
+  state()
+], Toaster.prototype, "_polite", undefined);
+__legacyDecorateClassTS([
+  state()
+], Toaster.prototype, "_assertive", undefined);
+defineElement("dsgn-toaster", Toaster);
+export {
+  Toaster
+};