sonner-wc 0.1.0

package/dist/sonner-wc.js

@@ -0,0 +1,1962 @@
+// src/constants.ts
+var VISIBLE_TOASTS_AMOUNT = 3;
+var TOAST_LIFETIME = 4000;
+var TOAST_WIDTH = 356;
+var GAP = 14;
+var SWIPE_THRESHOLD = 45;
+var SWIPE_VELOCITY_THRESHOLD = 0.11;
+var TIME_BEFORE_UNMOUNT = 200;
+var DEFAULT_HOTKEY = ["altKey", "KeyT"];
+
+// src/icons.ts
+var SUCCESS_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><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>';
+var WARNING_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"/></svg>';
+var INFO_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><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>';
+var ERROR_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>';
+var CLOSE_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
+var SPINNER_BARS = Array.from({ length: 12 }, () => '<div class="sonner-loading-bar"></div>').join("");
+var LOADING_SPINNER = '<div class="sonner-loading-wrapper" data-visible="true"><div class="sonner-spinner">' + SPINNER_BARS + "</div></div>";
+function getTypeIcon(type) {
+  switch (type) {
+    case "success":
+      return SUCCESS_ICON;
+    case "info":
+      return INFO_ICON;
+    case "warning":
+      return WARNING_ICON;
+    case "error":
+      return ERROR_ICON;
+    case "loading":
+      return null;
+    default:
+      return null;
+  }
+}
+
+// src/registry.ts
+var toastsById = new Map;
+var toasters = new Set;
+var counter = 1;
+function nextToastId() {
+  return counter++;
+}
+function registerToast(el) {
+  toastsById.set(el.toastId, el);
+}
+function unregisterToast(el) {
+  const current = toastsById.get(el.toastId);
+  if (current === el)
+    toastsById.delete(el.toastId);
+}
+function getToast(id) {
+  return toastsById.get(id);
+}
+function registerToaster(el) {
+  toasters.add(el);
+}
+function unregisterToaster(el) {
+  toasters.delete(el);
+}
+function defaultToaster() {
+  let last;
+  for (const t of toasters)
+    last = t;
+  return last;
+}
+function dismissAllToasts() {
+  for (const t of toasters)
+    t.dismissAll();
+}
+
+// src/styles/toaster.css
+var toaster_default = `:host {
+  position: fixed;
+  width: var(--width);
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Helvetica Neue,
+    Arial,
+    Noto Sans,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol,
+    Noto Color Emoji;
+  --gray1: hsl(0, 0%, 99%);
+  --gray2: hsl(0, 0%, 97.3%);
+  --gray3: hsl(0, 0%, 95.1%);
+  --gray4: hsl(0, 0%, 93%);
+  --gray5: hsl(0, 0%, 90.9%);
+  --gray6: hsl(0, 0%, 88.7%);
+  --gray7: hsl(0, 0%, 85.8%);
+  --gray8: hsl(0, 0%, 78%);
+  --gray9: hsl(0, 0%, 56.1%);
+  --gray10: hsl(0, 0%, 52.3%);
+  --gray11: hsl(0, 0%, 43.5%);
+  --gray12: hsl(0, 0%, 9%);
+  --border-radius: 8px;
+  --width: 356px;
+  --gap: 14px;
+  --offset-top: 24px;
+  --offset-right: 24px;
+  --offset-bottom: 24px;
+  --offset-left: 24px;
+  --mobile-offset-top: 16px;
+  --mobile-offset-right: 16px;
+  --mobile-offset-bottom: 16px;
+  --mobile-offset-left: 16px;
+  --toast-icon-margin-start: -3px;
+  --toast-icon-margin-end: 4px;
+  --toast-svg-margin-start: -1px;
+  --toast-svg-margin-end: 0px;
+  --toast-button-margin-start: auto;
+  --toast-button-margin-end: 0;
+  --toast-close-button-start: 0;
+  --toast-close-button-end: unset;
+  --toast-close-button-transform: translate(-35%, -35%);
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  z-index: 999999999;
+  transition: transform 400ms ease;
+  display: block;
+}
+
+[data-frame] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+:host([dir='rtl']) {
+  --toast-icon-margin-start: 4px;
+  --toast-icon-margin-end: -3px;
+  --toast-svg-margin-start: 0px;
+  --toast-svg-margin-end: -1px;
+  --toast-button-margin-start: 0;
+  --toast-button-margin-end: auto;
+  --toast-close-button-start: unset;
+  --toast-close-button-end: 0;
+  --toast-close-button-transform: translate(35%, -35%);
+}
+
+:host([data-x-position='right']) {
+  right: var(--offset-right);
+}
+:host([data-x-position='left']) {
+  left: var(--offset-left);
+}
+:host([data-x-position='center']) {
+  left: 50%;
+  transform: translateX(-50%);
+}
+:host([data-y-position='top']) {
+  top: var(--offset-top);
+}
+:host([data-y-position='bottom']) {
+  bottom: var(--offset-bottom);
+}
+
+@media (hover: none) and (pointer: coarse) {
+  :host([data-lifted='true']) {
+    transform: none;
+  }
+}
+
+/* Theme palette via light-dark(). The \`theme\` attribute on <sonner-toaster>
+ * (light / dark, or resolved from \`system\`) drives \`color-scheme\` on the host,
+ * which determines which side of each light-dark() pair wins. */
+:host([data-sonner-theme='light']) { color-scheme: light; }
+:host([data-sonner-theme='dark']) { color-scheme: dark; }
+
+:host {
+  --normal-bg: light-dark(#fff, #000);
+  --normal-bg-hover: light-dark(var(--gray2), hsl(0, 0%, 12%));
+  --normal-border: light-dark(var(--gray4), hsl(0, 0%, 20%));
+  --normal-border-hover: light-dark(var(--gray5), hsl(0, 0%, 25%));
+  --normal-text: light-dark(var(--gray12), var(--gray1));
+  --invert-bg: light-dark(#000, #fff);
+  --invert-border: light-dark(hsl(0, 0%, 20%), var(--gray3));
+  --invert-text: light-dark(var(--gray1), var(--gray12));
+  --description-color: light-dark(#3f3f3f, hsl(0, 0%, 91%));
+  --cancel-bg: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.3));
+  --success-bg: light-dark(hsl(143, 85%, 96%), hsl(150, 100%, 6%));
+  --success-border: light-dark(hsl(145, 92%, 87%), hsl(147, 100%, 12%));
+  --success-text: light-dark(hsl(140, 100%, 27%), hsl(150, 86%, 65%));
+  --info-bg: light-dark(hsl(208, 100%, 97%), hsl(215, 100%, 6%));
+  --info-border: light-dark(hsl(221, 91%, 93%), hsl(223, 43%, 17%));
+  --info-text: light-dark(hsl(210, 92%, 45%), hsl(216, 87%, 65%));
+  --warning-bg: light-dark(hsl(49, 100%, 97%), hsl(64, 100%, 6%));
+  --warning-border: light-dark(hsl(49, 91%, 84%), hsl(60, 100%, 9%));
+  --warning-text: light-dark(hsl(31, 92%, 45%), hsl(46, 87%, 65%));
+  --error-bg: light-dark(hsl(359, 100%, 97%), hsl(358, 76%, 10%));
+  --error-border: light-dark(hsl(359, 100%, 94%), hsl(357, 89%, 16%));
+  --error-text: light-dark(hsl(360, 100%, 45%), hsl(358, 100%, 81%));
+}
+
+@media (max-width: 600px) {
+  /* width is intentionally \`auto\` so that the toaster respects BOTH offsets
+   * and fits between them. Sonner's reference CSS uses width: 100% here, but
+   * that's over-constrained with both left and right set — the right offset
+   * gets ignored and the element extends past the viewport's right edge by
+   * --mobile-offset-right (visible unless body has overflow-x: hidden). */
+  :host {
+    position: fixed;
+    right: var(--mobile-offset-right);
+    left: var(--mobile-offset-left);
+    width: auto;
+  }
+  :host([dir='rtl']) {
+    left: calc(var(--mobile-offset-left) * -1);
+  }
+  :host([data-x-position='left']) {
+    left: var(--mobile-offset-left);
+  }
+  :host([data-x-position='right']) {
+    right: var(--mobile-offset-right);
+  }
+  :host([data-y-position='bottom']) {
+    bottom: var(--mobile-offset-bottom);
+  }
+  :host([data-y-position='top']) {
+    top: var(--mobile-offset-top);
+  }
+  :host([data-x-position='center']) {
+    left: var(--mobile-offset-left);
+    right: var(--mobile-offset-right);
+    transform: none;
+  }
+}
+`;
+
+// src/styles/toast.css
+var toast_default = `:host {
+  --y: translateY(100%);
+  --lift-amount: calc(var(--lift) * var(--gap, 14px));
+  z-index: var(--z-index);
+  position: absolute;
+  opacity: 0;
+  transform: var(--y);
+  touch-action: none;
+  transition:
+    transform 400ms,
+    opacity 400ms,
+    height 400ms,
+    box-shadow 200ms;
+  /* Enables the height transition to interpolate to/from auto (intrinsic size).
+   * Supported in Chromium ≥129; in other engines the transition gracefully falls
+   * back to snapping, same as the React Sonner reference. */
+  interpolate-size: allow-keywords;
+  box-sizing: border-box;
+  width: var(--width);
+}
+
+[data-frame] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: start;
+  text-transform: none;
+  color: var(--normal-text);
+  outline: none;
+  overflow-wrap: anywhere;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+:host([data-styled='true']) [data-frame] {
+  padding: 16px;
+  background: var(--normal-bg);
+  border: 1px solid var(--normal-border);
+  color: var(--normal-text);
+  border-radius: var(--border-radius);
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Unstyled (toast.custom): hide built-in chrome, let the slotted content fill the host. */
+:host([data-styled='false']) [data-frame] {
+  display: block;
+}
+:host([data-styled='false']) [data-icon],
+:host([data-styled='false']) [data-content],
+:host([data-styled='false']) [data-close-button] {
+  display: none;
+}
+
+/* Hide the icon container when no icon has been slotted AND no built-in spinner is
+ * showing (default-type toasts have no built-in icon, so otherwise its fixed 16x16 +
+ * side margins reserve a phantom gap).
+ * The element toggles data-has-icon / data-has-description on slotchange. */
+:host(:not([data-has-icon]):not([data-type='loading'])) [data-icon] {
+  display: none;
+}
+:host(:not([data-has-description])) [data-description] {
+  display: none;
+}
+
+/* Spinner lives in the shadow DOM so its CSS can match its descendants (slotted
+ * elements can't be styled past their host from a shadow stylesheet). It is hidden
+ * by default and only revealed when type='loading' AND no user icon was slotted. */
+:host([data-type='loading']:not([data-has-icon])) .sonner-loading-wrapper {
+  display: block;
+}
+:host(:not([data-type='loading']):not([data-has-icon])) .sonner-loading-wrapper,
+:host([data-has-icon]) .sonner-loading-wrapper {
+  display: none;
+}
+
+:host(:focus-visible) [data-frame] {
+  box-shadow:
+    0px 4px 12px rgba(0, 0, 0, 0.1),
+    0 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+:host([data-y-position='top']) {
+  top: 0;
+  --y: translateY(-100%);
+  --lift: 1;
+  --lift-amount: calc(1 * var(--gap, 14px));
+}
+
+:host([data-y-position='bottom']) {
+  bottom: 0;
+  --y: translateY(100%);
+  --lift: -1;
+  --lift-amount: calc(var(--lift) * var(--gap, 14px));
+}
+
+:host([data-x-position='right']) {
+  right: 0;
+}
+:host([data-x-position='left']) {
+  left: 0;
+}
+
+[data-content] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+[data-title],
+::slotted([slot='title']) {
+  font-weight: 500;
+  line-height: 1.5;
+  color: inherit;
+}
+
+[data-description] {
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--description-color, #3f3f3f);
+}
+:host([data-rich-colors='true']) [data-description] {
+  color: inherit;
+}
+::slotted([slot='description']) {
+  color: inherit;
+}
+
+[data-icon] {
+  display: flex;
+  height: 16px;
+  width: 16px;
+  position: relative;
+  justify-content: flex-start;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: var(--toast-icon-margin-start);
+  margin-right: var(--toast-icon-margin-end);
+}
+[data-icon] > * {
+  flex-shrink: 0;
+}
+[data-icon] svg {
+  margin-left: var(--toast-svg-margin-start);
+  margin-right: var(--toast-svg-margin-end);
+}
+:host([data-promise='true']) [data-icon] > svg {
+  opacity: 0;
+  transform: scale(0.8);
+  transform-origin: center;
+  animation: sonner-fade-in 300ms ease forwards;
+}
+
+[data-button],
+::slotted(button[slot='action']),
+::slotted(button[slot='cancel']) {
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  height: 24px;
+  font-size: 12px;
+  background: var(--normal-text);
+  color: contrast-color(var(--normal-text));
+  margin-left: var(--toast-button-margin-start);
+  margin-right: var(--toast-button-margin-end);
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  transition:
+    opacity 400ms,
+    box-shadow 200ms;
+  font-family: inherit;
+}
+[data-button]:focus-visible {
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
+}
+[data-cancel],
+::slotted(button[slot='cancel']) {
+  color: var(--normal-text);
+  background: var(--cancel-bg, rgba(0, 0, 0, 0.08));
+}
+
+[data-close-button] {
+  position: absolute;
+  left: var(--toast-close-button-start);
+  right: var(--toast-close-button-end);
+  top: 0;
+  height: 20px;
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  color: var(--normal-text);
+  background: var(--normal-bg);
+  border: 1px solid var(--normal-border);
+  transform: var(--toast-close-button-transform);
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1;
+  transition:
+    opacity 100ms,
+    background 200ms,
+    border-color 200ms;
+  font: inherit;
+}
+[data-close-button][hidden] {
+  display: none;
+}
+[data-close-button]:focus-visible {
+  box-shadow:
+    0px 4px 12px rgba(0, 0, 0, 0.1),
+    0 0 0 2px rgba(0, 0, 0, 0.2);
+}
+:host(:hover) [data-close-button]:hover {
+  background: var(--normal-bg-hover, var(--gray2));
+  border-color: var(--normal-border-hover, var(--gray5));
+}
+
+:host([data-swiping='true'])::before {
+  content: '';
+  position: absolute;
+  left: -100%;
+  right: -100%;
+  height: 100%;
+  z-index: -1;
+}
+:host([data-y-position='top'][data-swiping='true'])::before {
+  bottom: 50%;
+  transform: scaleY(3) translateY(50%);
+}
+:host([data-y-position='bottom'][data-swiping='true'])::before {
+  top: 50%;
+  transform: scaleY(3) translateY(-50%);
+}
+:host([data-swiping='false'][data-removed='true'])::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: scaleY(2);
+}
+:host([data-expanded='true'])::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  height: calc(var(--gap, 14px) + 1px);
+  bottom: 100%;
+  width: 100%;
+}
+
+:host([data-mounted='true']) {
+  --y: translateY(0);
+  opacity: 1;
+}
+
+/* Heights, driven entirely by CSS. With interpolate-size:allow-keywords on :host,
+ * transitions between auto (front collapsed) and the pixel var()s animate smoothly. */
+:host([data-mounted='true'][data-front='true'][data-expanded='false']) {
+  height: auto;
+}
+
+:host([data-expanded='false'][data-front='false']) {
+  --scale: var(--toasts-before) * 0.05 + 1;
+  --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
+  height: var(--front-toast-height);
+}
+
+[data-frame] > * {
+  transition: opacity 400ms;
+}
+:host([data-expanded='false'][data-front='false'][data-styled='true']) [data-frame] > * {
+  opacity: 0;
+}
+:host([data-visible='false']) {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host([data-mounted='true'][data-expanded='true']) {
+  --y: translateY(calc(var(--lift) * var(--offset)));
+  height: var(--initial-height);
+}
+
+:host([data-removed='true'][data-front='true'][data-swipe-out='false']) {
+  --y: translateY(calc(var(--lift) * -100%));
+  opacity: 0;
+}
+:host([data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true']) {
+  --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
+  opacity: 0;
+}
+:host([data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false']) {
+  --y: translateY(40%);
+  opacity: 0;
+  transition:
+    transform 500ms,
+    opacity 200ms;
+}
+:host([data-removed='true'][data-front='false'])::before {
+  height: calc(var(--initial-height) + 20%);
+}
+
+:host([data-swiping='true']) {
+  transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
+  transition: none;
+}
+:host([data-swiped='true']) {
+  user-select: none;
+  -webkit-user-select: none;
+}
+:host([data-swipe-out='true'][data-y-position='bottom']),
+:host([data-swipe-out='true'][data-y-position='top']) {
+  animation-duration: 200ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+:host([data-swipe-out='true'][data-swipe-direction='left']) {
+  animation-name: swipe-out-left;
+}
+:host([data-swipe-out='true'][data-swipe-direction='right']) {
+  animation-name: swipe-out-right;
+}
+:host([data-swipe-out='true'][data-swipe-direction='up']) {
+  animation-name: swipe-out-up;
+}
+:host([data-swipe-out='true'][data-swipe-direction='down']) {
+  animation-name: swipe-out-down;
+}
+
+:host([data-invert='true']) {
+  --normal-bg: var(--invert-bg);
+  --normal-border: var(--invert-border);
+  --normal-text: var(--invert-text);
+}
+
+:host([data-rich-colors='true'][data-type='success']) [data-frame] {
+  background: var(--success-bg);
+  border-color: var(--success-border);
+  color: var(--success-text);
+}
+:host([data-rich-colors='true'][data-type='success']) [data-close-button] {
+  background: var(--success-bg);
+  border-color: var(--success-border);
+  color: var(--success-text);
+}
+:host([data-rich-colors='true'][data-type='info']) [data-frame] {
+  background: var(--info-bg);
+  border-color: var(--info-border);
+  color: var(--info-text);
+}
+:host([data-rich-colors='true'][data-type='info']) [data-close-button] {
+  background: var(--info-bg);
+  border-color: var(--info-border);
+  color: var(--info-text);
+}
+:host([data-rich-colors='true'][data-type='warning']) [data-frame] {
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
+  color: var(--warning-text);
+}
+:host([data-rich-colors='true'][data-type='warning']) [data-close-button] {
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
+  color: var(--warning-text);
+}
+:host([data-rich-colors='true'][data-type='error']) [data-frame] {
+  background: var(--error-bg);
+  border-color: var(--error-border);
+  color: var(--error-text);
+}
+:host([data-rich-colors='true'][data-type='error']) [data-close-button] {
+  background: var(--error-bg);
+  border-color: var(--error-border);
+  color: var(--error-text);
+}
+
+@keyframes swipe-out-left {
+  from {
+    transform: var(--y) translateX(var(--swipe-amount-x));
+    opacity: 1;
+  }
+  to {
+    transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
+    opacity: 0;
+  }
+}
+@keyframes swipe-out-right {
+  from {
+    transform: var(--y) translateX(var(--swipe-amount-x));
+    opacity: 1;
+  }
+  to {
+    transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
+    opacity: 0;
+  }
+}
+@keyframes swipe-out-up {
+  from {
+    transform: var(--y) translateY(var(--swipe-amount-y));
+    opacity: 1;
+  }
+  to {
+    transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
+    opacity: 0;
+  }
+}
+@keyframes swipe-out-down {
+  from {
+    transform: var(--y) translateY(var(--swipe-amount-y));
+    opacity: 1;
+  }
+  to {
+    transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
+    opacity: 0;
+  }
+}
+
+.sonner-loading-wrapper {
+  --size: 16px;
+  height: var(--size);
+  width: var(--size);
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+}
+/* The wrapper is shown/hidden by the :host([data-type='loading']…) rules above; no
+ * data-visible attribute needed here. */
+.sonner-spinner {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  height: var(--size);
+  width: var(--size);
+}
+.sonner-loading-bar {
+  animation: sonner-spin 1.2s linear infinite;
+  background: var(--gray11, hsl(0, 0%, 43.5%));
+  border-radius: 6px;
+  height: 8%;
+  left: -10%;
+  position: absolute;
+  top: -3.9%;
+  width: 24%;
+}
+.sonner-loading-bar:nth-child(1) {
+  animation-delay: -1.2s;
+  transform: rotate(0.0001deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(2) {
+  animation-delay: -1.1s;
+  transform: rotate(30deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(3) {
+  animation-delay: -1s;
+  transform: rotate(60deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(4) {
+  animation-delay: -0.9s;
+  transform: rotate(90deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(5) {
+  animation-delay: -0.8s;
+  transform: rotate(120deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(6) {
+  animation-delay: -0.7s;
+  transform: rotate(150deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(7) {
+  animation-delay: -0.6s;
+  transform: rotate(180deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(8) {
+  animation-delay: -0.5s;
+  transform: rotate(210deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(9) {
+  animation-delay: -0.4s;
+  transform: rotate(240deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(10) {
+  animation-delay: -0.3s;
+  transform: rotate(270deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(11) {
+  animation-delay: -0.2s;
+  transform: rotate(300deg) translate(146%);
+}
+.sonner-loading-bar:nth-child(12) {
+  animation-delay: -0.1s;
+  transform: rotate(330deg) translate(146%);
+}
+
+@keyframes sonner-fade-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes sonner-fade-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+@keyframes sonner-spin {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  :host,
+  [data-frame],
+  [data-frame] > *,
+  .sonner-loading-bar {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* Mobile: toasts fill the toaster's full width instead of staying pinned to
+ * --width (356px). Mirrors Sonner's mobile rule on [data-sonner-toast].
+ * Breakpoint matches the toaster's own mobile threshold. */
+@media (max-width: 600px) {
+  :host([data-styled='true']),
+  :host([data-styled='false']) {
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
+}
+`;
+
+// src/styles.ts
+var toasterSheet = null;
+var toastSheet = null;
+function getToasterSheet() {
+  if (!toasterSheet) {
+    toasterSheet = new CSSStyleSheet;
+    toasterSheet.replaceSync(toaster_default);
+  }
+  return toasterSheet;
+}
+function getToastSheet() {
+  if (!toastSheet) {
+    toastSheet = new CSSStyleSheet;
+    toastSheet.replaceSync(toast_default);
+  }
+  return toastSheet;
+}
+
+// src/sonner-toast.ts
+var HTMLElementCtor = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+function isUrgentType(type) {
+  return type === "error" || type === "warning";
+}
+function setContent(host, slotName, value) {
+  for (const child of Array.from(host.children)) {
+    if (child.getAttribute("slot") === slotName)
+      host.removeChild(child);
+  }
+  if (value == null || value === "")
+    return;
+  const resolved = typeof value === "function" ? value() : value;
+  if (resolved instanceof Node) {
+    if (resolved instanceof Element)
+      resolved.setAttribute("slot", slotName);
+    host.appendChild(resolved);
+  } else {
+    const span = document.createElement("span");
+    span.setAttribute("slot", slotName);
+    span.textContent = String(resolved);
+    host.appendChild(span);
+  }
+}
+function setButtonSlot(host, slotName, value, defaultCloseHandler) {
+  for (const child of Array.from(host.children)) {
+    if (child.getAttribute("slot") === slotName)
+      host.removeChild(child);
+  }
+  if (!value)
+    return;
+  if (value instanceof HTMLElement) {
+    value.setAttribute("slot", slotName);
+    host.appendChild(value);
+    return;
+  }
+  const btn = document.createElement("button");
+  btn.setAttribute("slot", slotName);
+  btn.setAttribute("type", "button");
+  if (slotName === "cancel")
+    btn.setAttribute("data-cancel", "");
+  else
+    btn.setAttribute("data-action", "");
+  btn.textContent = value.label;
+  btn.addEventListener("click", (e) => {
+    value.onClick?.(e);
+    if (e.defaultPrevented && slotName === "action")
+      return;
+    defaultCloseHandler();
+  });
+  host.appendChild(btn);
+}
+var SPINNER_BARS_HTML = Array.from({ length: 12 }, () => '<div class="sonner-loading-bar"></div>').join("");
+var SHADOW_TEMPLATE = `
+  <div data-frame part="frame">
+    <button type="button" data-close-button part="close-button" hidden aria-label="Close toast"></button>
+    <div data-icon part="icon">
+      <slot name="icon"></slot>
+      <div class="sonner-loading-wrapper" aria-hidden="true">
+        <div class="sonner-spinner">${SPINNER_BARS_HTML}</div>
+      </div>
+    </div>
+    <div data-content part="content">
+      <div data-title part="title"><slot name="title"></slot></div>
+      <div data-description part="description"><slot name="description"></slot></div>
+    </div>
+    <slot name="cancel"></slot>
+    <slot name="action"></slot>
+    <slot part="custom"></slot>
+  </div>
+`;
+
+class SonnerToast extends HTMLElementCtor {
+  static get observedAttributes() {
+    return ["type", "duration", "dismissible", "position", "close-button", "rich-colors", "invert"];
+  }
+  toastId = 0;
+  #shadow;
+  #closeBtn;
+  #iconWrap;
+  #titleWrap;
+  #descWrap;
+  #duration = null;
+  #remainingTime = TOAST_LIFETIME;
+  #timeoutId = null;
+  #timerStartedAt = 0;
+  #pauseReasons = new Set;
+  #pointerStart = null;
+  #dragStartTime = 0;
+  #swipeDirection = null;
+  #swipeDirections = null;
+  #mounted = false;
+  #removed = false;
+  #pendingRemoval = false;
+  #onDismiss;
+  #onAutoClose;
+  #closeButtonAriaLabel = null;
+  #prevFocus = null;
+  constructor() {
+    super();
+    this.#shadow = this.attachShadow({ mode: "open" });
+    this.#shadow.adoptedStyleSheets = [getToastSheet()];
+    const tpl = document.createElement("template");
+    tpl.innerHTML = SHADOW_TEMPLATE;
+    this.#shadow.appendChild(tpl.content.cloneNode(true));
+    this.#closeBtn = this.#shadow.querySelector("[data-close-button]");
+    this.#iconWrap = this.#shadow.querySelector("[data-icon]");
+    this.#titleWrap = this.#shadow.querySelector("[data-title]");
+    this.#descWrap = this.#shadow.querySelector("[data-description]");
+    this.#closeBtn.innerHTML = CLOSE_ICON;
+    this.#closeBtn.addEventListener("click", () => this.dismiss());
+    const iconSlot = this.#shadow.querySelector('slot[name="icon"]');
+    const descSlot = this.#shadow.querySelector('slot[name="description"]');
+    iconSlot.addEventListener("slotchange", () => this.#reflectSlot("icon", iconSlot));
+    descSlot.addEventListener("slotchange", () => this.#reflectSlot("description", descSlot));
+    this.addEventListener("pointerdown", this.#onPointerDown);
+    this.addEventListener("pointermove", this.#onPointerMove);
+    this.addEventListener("pointerup", this.#onPointerUp);
+    this.addEventListener("pointercancel", this.#onPointerUp);
+    this.addEventListener("mouseenter", () => this.#pauseFor("hover-self"));
+    this.addEventListener("mouseleave", () => this.#resumeFrom("hover-self"));
+    this.addEventListener("focusin", (e) => {
+      this.#pauseFor("focus-self");
+      if (this.#prevFocus)
+        return;
+      const from = e.relatedTarget;
+      if (from && !this.contains(from))
+        this.#prevFocus = from;
+    });
+    this.addEventListener("focusout", () => this.#resumeFrom("focus-self"));
+    this.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this.#isDismissible()) {
+        e.stopPropagation();
+        this.dismiss();
+      }
+    });
+  }
+  connectedCallback() {
+    if (!this.toastId)
+      this.toastId = this.getAttribute("id") || 0;
+    if (!this.hasAttribute("tabindex"))
+      this.tabIndex = 0;
+    this.#applyType();
+    this.#applyDismissible();
+    this.#applyPosition();
+    this.#applyRichColors();
+    this.#applyInvert();
+    this.#applyCloseButton();
+    this.setAttribute("data-sonner-toast", "");
+    if (!this.hasAttribute("aria-atomic"))
+      this.setAttribute("aria-atomic", "true");
+    this.setAttribute("data-mounted", "false");
+    this.setAttribute("data-removed", "false");
+    this.setAttribute("data-swiping", "false");
+    this.setAttribute("data-swiped", "false");
+    this.setAttribute("data-swipe-out", "false");
+    if (!this.hasAttribute("data-styled"))
+      this.setAttribute("data-styled", "true");
+    registerToast(this);
+    document.addEventListener("visibilitychange", this.#onVisibilityChange);
+    requestAnimationFrame(() => {
+      this.#mounted = true;
+      this.setAttribute("data-mounted", "true");
+      this.dispatchEvent(new CustomEvent("sonner-toast-mounted", { bubbles: true, composed: true }));
+      this.#startTimer();
+    });
+  }
+  disconnectedCallback() {
+    if (this.#timeoutId)
+      clearTimeout(this.#timeoutId);
+    document.removeEventListener("visibilitychange", this.#onVisibilityChange);
+    unregisterToast(this);
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (!this.isConnected)
+      return;
+    switch (name) {
+      case "type":
+        this.#applyType();
+        break;
+      case "duration":
+        this.#duration = this.#readDuration();
+        this.#remainingTime = this.#duration ?? TOAST_LIFETIME;
+        break;
+      case "dismissible":
+        this.#applyDismissible();
+        break;
+      case "position":
+        this.#applyPosition();
+        break;
+      case "close-button":
+        this.#applyCloseButton();
+        break;
+      case "rich-colors":
+        this.#applyRichColors();
+        break;
+      case "invert":
+        this.#applyInvert();
+        break;
+    }
+  }
+  get toastType() {
+    return this.getAttribute("type") || "default";
+  }
+  dismiss() {
+    if (this.#removed || this.#pendingRemoval)
+      return;
+    this.#pendingRemoval = true;
+    this.#removed = true;
+    this.setAttribute("data-removed", "true");
+    if (this.#timeoutId)
+      clearTimeout(this.#timeoutId);
+    this.dispatchEvent(new CustomEvent("sonner-toast-dismissed", { bubbles: true, composed: true }));
+    setTimeout(() => {
+      this.#restoreFocusIfInside();
+      this.#onDismiss?.(this);
+      this.remove();
+    }, TIME_BEFORE_UNMOUNT);
+  }
+  #restoreFocusIfInside() {
+    if (!this.#prevFocus)
+      return;
+    const active = document.activeElement;
+    if (!active || !this.contains(active))
+      return;
+    const target = this.#prevFocus;
+    if (!target.isConnected || typeof target.focus !== "function")
+      return;
+    target.focus();
+  }
+  update(options) {
+    const typeChanged = options.type !== undefined && options.type !== this.toastType;
+    const wasUrgent = isUrgentType(this.toastType);
+    if (options.type !== undefined)
+      this.setAttribute("type", options.type);
+    let timerNeedsReset = false;
+    if (options.duration !== undefined) {
+      this.setAttribute("duration", String(options.duration));
+      this.#duration = options.duration;
+      this.#remainingTime = options.duration;
+      timerNeedsReset = true;
+    } else if (typeChanged) {
+      this.#duration = null;
+      this.removeAttribute("duration");
+      this.#remainingTime = 0;
+      timerNeedsReset = true;
+    }
+    if (options.dismissible !== undefined) {
+      if (options.dismissible)
+        this.setAttribute("dismissible", "");
+      else
+        this.removeAttribute("dismissible");
+    }
+    if (options.position !== undefined)
+      this.setAttribute("position", options.position);
+    if (options.closeButton !== undefined) {
+      if (options.closeButton)
+        this.setAttribute("close-button", "");
+      else
+        this.removeAttribute("close-button");
+    }
+    if (options.richColors !== undefined) {
+      if (options.richColors)
+        this.setAttribute("rich-colors", "");
+      else
+        this.removeAttribute("rich-colors");
+    }
+    if (options.invert !== undefined) {
+      if (options.invert)
+        this.setAttribute("invert", "");
+      else
+        this.removeAttribute("invert");
+    }
+    if (options.icon !== undefined)
+      this.setIcon(options.icon);
+    if (options.title !== undefined)
+      this.setTitle(options.title);
+    if (options.description !== undefined)
+      this.setDescription(options.description);
+    if (options.action !== undefined) {
+      setButtonSlot(this, "action", options.action, () => this.dismiss());
+    }
+    if (options.cancel !== undefined) {
+      setButtonSlot(this, "cancel", options.cancel, () => this.dismiss());
+    }
+    if (options.className)
+      this.className = options.className;
+    if (options.testId !== undefined)
+      this.setAttribute("data-testid", options.testId);
+    if (options.closeButtonAriaLabel !== undefined) {
+      this.#closeButtonAriaLabel = options.closeButtonAriaLabel || null;
+      this.#applyCloseButtonAriaLabel();
+    }
+    if (options.onDismiss)
+      this.#onDismiss = options.onDismiss;
+    if (options.onAutoClose)
+      this.#onAutoClose = options.onAutoClose;
+    if (timerNeedsReset)
+      this.#resetTimer();
+    if (this.#mounted && typeChanged && !wasUrgent && isUrgentType(this.toastType)) {
+      const titleEl = Array.from(this.children).find((c) => c.getAttribute("slot") === "title");
+      const text = titleEl?.textContent?.trim();
+      if (text) {
+        const toaster = this.closest("sonner-toaster");
+        toaster?.announceUrgent(text);
+      }
+    }
+    this.dispatchEvent(new CustomEvent("sonner-toast-updated", { bubbles: true, composed: true }));
+  }
+  setTitle(value) {
+    setContent(this, "title", value);
+    this.#applyCloseButtonAriaLabel();
+  }
+  #applyCloseButtonAriaLabel() {
+    if (this.#closeButtonAriaLabel) {
+      this.#closeBtn.setAttribute("aria-label", this.#closeButtonAriaLabel);
+      return;
+    }
+    const titleEl = Array.from(this.children).find((c) => c.getAttribute("slot") === "title");
+    const text = titleEl?.textContent?.trim();
+    this.#closeBtn.setAttribute("aria-label", text ? `Close: ${text}` : "Close toast");
+  }
+  setDescription(value) {
+    setContent(this, "description", value);
+  }
+  setIcon(value) {
+    for (const child of Array.from(this.children)) {
+      if (child.getAttribute("slot") === "icon")
+        this.removeChild(child);
+    }
+    if (value == null)
+      return;
+    if (value instanceof Node) {
+      if (value instanceof Element)
+        value.setAttribute("slot", "icon");
+      this.appendChild(value);
+    } else {
+      const tpl = document.createElement("template");
+      tpl.innerHTML = value;
+      const el = tpl.content.firstElementChild;
+      if (el) {
+        el.setAttribute("slot", "icon");
+        this.appendChild(el);
+      }
+    }
+  }
+  setHandlers(handlers) {
+    this.#onDismiss = handlers.onDismiss;
+    this.#onAutoClose = handlers.onAutoClose;
+  }
+  setPaused(paused) {
+    if (paused)
+      this.#pauseFor("toaster");
+    else
+      this.#resumeFrom("toaster");
+  }
+  #reflectSlot(name, slot) {
+    const has = slot.assignedNodes().length > 0;
+    if (has)
+      this.setAttribute(`data-has-${name}`, "");
+    else
+      this.removeAttribute(`data-has-${name}`);
+  }
+  #applyType() {
+    const type = this.toastType;
+    this.setAttribute("data-type", type);
+    const urgent = isUrgentType(type);
+    this.setAttribute("role", urgent ? "alert" : "status");
+    this.setAttribute("aria-live", urgent ? "assertive" : "polite");
+    if (type === "loading") {
+      this.setAttribute("data-promise", "true");
+      for (const c of Array.from(this.children)) {
+        if (c.getAttribute("slot") === "icon" && c.hasAttribute("data-sonner-default-icon"))
+          this.removeChild(c);
+      }
+    } else {
+      this.removeAttribute("data-promise");
+      const hasUserIcon = Array.from(this.children).some((c) => {
+        if (c.getAttribute("slot") !== "icon")
+          return false;
+        return !c.hasAttribute("data-sonner-default-icon");
+      });
+      if (!hasUserIcon) {
+        for (const c of Array.from(this.children)) {
+          if (c.getAttribute("slot") === "icon" && c.hasAttribute("data-sonner-default-icon"))
+            this.removeChild(c);
+        }
+        const builtin = getTypeIcon(type);
+        if (builtin) {
+          const tpl = document.createElement("template");
+          tpl.innerHTML = builtin;
+          const el = tpl.content.firstElementChild;
+          if (el) {
+            el.setAttribute("slot", "icon");
+            el.setAttribute("data-sonner-default-icon", "");
+            this.appendChild(el);
+          }
+        }
+      }
+    }
+  }
+  #applyDismissible() {
+    const dismissible = this.getAttribute("dismissible") !== "false";
+    this.setAttribute("data-dismissible", String(dismissible));
+  }
+  #applyPosition() {
+    const pos = this.getAttribute("position");
+    if (!pos)
+      return;
+    const [y, x] = pos.split("-");
+    if (y)
+      this.setAttribute("data-y-position", y);
+    if (x)
+      this.setAttribute("data-x-position", x);
+  }
+  #applyCloseButton() {
+    const show = this.hasAttribute("close-button") && this.getAttribute("close-button") !== "false";
+    this.#closeBtn.hidden = !show;
+  }
+  #applyRichColors() {
+    const rich = this.hasAttribute("rich-colors") && this.getAttribute("rich-colors") !== "false";
+    this.setAttribute("data-rich-colors", String(rich));
+  }
+  #applyInvert() {
+    const invert = this.hasAttribute("invert") && this.getAttribute("invert") !== "false";
+    this.setAttribute("data-invert", String(invert));
+  }
+  #readDuration() {
+    const raw = this.getAttribute("duration");
+    if (raw == null)
+      return null;
+    if (raw === "Infinity")
+      return Infinity;
+    const n = Number(raw);
+    return Number.isFinite(n) || n === Infinity ? n : null;
+  }
+  #effectiveDuration() {
+    const explicit = this.#duration ?? this.#readDuration();
+    if (explicit !== null)
+      return explicit;
+    if (this.toastType === "loading")
+      return Infinity;
+    return TOAST_LIFETIME;
+  }
+  #startTimer() {
+    if (!this.#mounted || this.#removed)
+      return;
+    if (this.#pauseReasons.size > 0)
+      return;
+    if (this.#timeoutId !== null)
+      return;
+    const dur = this.#effectiveDuration();
+    if (dur === Infinity)
+      return;
+    this.#remainingTime = this.#remainingTime > 0 ? this.#remainingTime : dur;
+    this.#timerStartedAt = Date.now();
+    this.#timeoutId = setTimeout(() => {
+      this.#timeoutId = null;
+      this.#onAutoClose?.(this);
+      this.dispatchEvent(new CustomEvent("sonner-toast-autoclosed", { bubbles: true, composed: true }));
+      this.dismiss();
+    }, this.#remainingTime);
+  }
+  #pauseFor(reason) {
+    const wasUnpaused = this.#pauseReasons.size === 0;
+    this.#pauseReasons.add(reason);
+    if (wasUnpaused && this.#timeoutId !== null) {
+      clearTimeout(this.#timeoutId);
+      this.#timeoutId = null;
+      const elapsed = Date.now() - this.#timerStartedAt;
+      this.#remainingTime = Math.max(0, this.#remainingTime - elapsed);
+    }
+  }
+  #resumeFrom(reason) {
+    if (!this.#pauseReasons.delete(reason))
+      return;
+    if (this.#pauseReasons.size === 0 && !this.#removed)
+      this.#startTimer();
+  }
+  #resetTimer() {
+    if (this.#timeoutId) {
+      clearTimeout(this.#timeoutId);
+      this.#timeoutId = null;
+    }
+    this.#remainingTime = this.#effectiveDuration();
+    this.#startTimer();
+  }
+  #onVisibilityChange = () => {
+    if (document.visibilityState === "hidden")
+      this.#pauseFor("doc-hidden");
+    else
+      this.#resumeFrom("doc-hidden");
+  };
+  #isDismissible() {
+    return this.getAttribute("dismissible") !== "false";
+  }
+  #onPointerDown = (event) => {
+    if (event.button === 2)
+      return;
+    if (this.toastType === "loading" || !this.#isDismissible())
+      return;
+    const realTarget = event.composedPath()[0];
+    if (realTarget) {
+      const inButton = realTarget.tagName === "BUTTON" || typeof realTarget.closest === "function" && realTarget.closest("button");
+      if (inButton)
+        return;
+    }
+    this.#dragStartTime = Date.now();
+    try {
+      this.setPointerCapture(event.pointerId);
+    } catch {}
+    this.setAttribute("data-swiping", "true");
+    this.#pointerStart = { x: event.clientX, y: event.clientY };
+    if (!this.#swipeDirections) {
+      const y = this.getAttribute("data-y-position");
+      const x = this.getAttribute("data-x-position");
+      const dirs = [];
+      if (y === "top" || y === "bottom")
+        dirs.push(y);
+      if (x === "left" || x === "right")
+        dirs.push(x);
+      this.#swipeDirections = dirs.length > 0 ? dirs : ["bottom", "right"];
+    }
+  };
+  #onPointerMove = (event) => {
+    if (!this.#pointerStart || !this.#isDismissible())
+      return;
+    if ((window.getSelection()?.toString().length ?? 0) > 0)
+      return;
+    const yDelta = event.clientY - this.#pointerStart.y;
+    const xDelta = event.clientX - this.#pointerStart.x;
+    const dirs = this.#swipeDirections;
+    if (!this.#swipeDirection && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) {
+      this.#swipeDirection = Math.abs(xDelta) > Math.abs(yDelta) ? "x" : "y";
+    }
+    const dampen = (delta) => 1 / (1.5 + Math.abs(delta) / 20);
+    let sx = 0;
+    let sy = 0;
+    if (this.#swipeDirection === "y") {
+      if (dirs.includes("top") || dirs.includes("bottom")) {
+        if (dirs.includes("top") && yDelta < 0 || dirs.includes("bottom") && yDelta > 0) {
+          sy = yDelta;
+        } else {
+          const d = yDelta * dampen(yDelta);
+          sy = Math.abs(d) < Math.abs(yDelta) ? d : yDelta;
+        }
+      }
+    } else if (this.#swipeDirection === "x") {
+      if (dirs.includes("left") || dirs.includes("right")) {
+        if (dirs.includes("left") && xDelta < 0 || dirs.includes("right") && xDelta > 0) {
+          sx = xDelta;
+        } else {
+          const d = xDelta * dampen(xDelta);
+          sx = Math.abs(d) < Math.abs(xDelta) ? d : xDelta;
+        }
+      }
+    }
+    if (Math.abs(sx) > 0 || Math.abs(sy) > 0)
+      this.setAttribute("data-swiped", "true");
+    this.style.setProperty("--swipe-amount-x", `${sx}px`);
+    this.style.setProperty("--swipe-amount-y", `${sy}px`);
+  };
+  #onPointerUp = () => {
+    if (this.getAttribute("data-swipe-out") === "true" || !this.#isDismissible()) {
+      this.#pointerStart = null;
+      this.#swipeDirection = null;
+      this.setAttribute("data-swiping", "false");
+      return;
+    }
+    const sx = parseFloat(this.style.getPropertyValue("--swipe-amount-x")) || 0;
+    const sy = parseFloat(this.style.getPropertyValue("--swipe-amount-y")) || 0;
+    const time = Math.max(1, Date.now() - this.#dragStartTime);
+    const amount = this.#swipeDirection === "x" ? sx : sy;
+    const velocity = Math.abs(amount) / time;
+    if (Math.abs(amount) >= SWIPE_THRESHOLD || velocity > SWIPE_VELOCITY_THRESHOLD) {
+      if (this.#swipeDirection === "x") {
+        this.setAttribute("data-swipe-direction", sx > 0 ? "right" : "left");
+      } else {
+        this.setAttribute("data-swipe-direction", sy > 0 ? "down" : "up");
+      }
+      this.setAttribute("data-swipe-out", "true");
+      this.dismiss();
+    } else {
+      this.style.setProperty("--swipe-amount-x", "0px");
+      this.style.setProperty("--swipe-amount-y", "0px");
+      this.setAttribute("data-swiped", "false");
+    }
+    this.setAttribute("data-swiping", "false");
+    this.#pointerStart = null;
+    this.#swipeDirection = null;
+  };
+}
+if (typeof customElements !== "undefined" && !customElements.get("sonner-toast")) {
+  customElements.define("sonner-toast", SonnerToast);
+}
+// src/sonner-toaster.ts
+var HTMLElementCtor2 = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+function parseOffsetValue(v, fallback) {
+  if (v == null)
+    return fallback;
+  if (typeof v === "number")
+    return `${v}px`;
+  return v;
+}
+function applyOffsetVars(host, opts, prefix, fallback) {
+  const sides = ["top", "right", "bottom", "left"];
+  if (opts == null || typeof opts === "string" || typeof opts === "number") {
+    const v = parseOffsetValue(opts, fallback);
+    for (const side of sides)
+      host.style.setProperty(`${prefix}-${side}`, v);
+  } else {
+    for (const side of sides) {
+      host.style.setProperty(`${prefix}-${side}`, parseOffsetValue(opts[side], fallback));
+    }
+  }
+}
+
+class SonnerToaster extends HTMLElementCtor2 {
+  static get observedAttributes() {
+    return [
+      "position",
+      "theme",
+      "rich-colors",
+      "expand",
+      "duration",
+      "gap",
+      "visible-toasts",
+      "close-button",
+      "invert",
+      "dir",
+      "offset",
+      "mobile-offset",
+      "hotkey",
+      "container-aria-label"
+    ];
+  }
+  #shadow;
+  #alertAnnouncer;
+  #childObserver;
+  #resizeObserver;
+  #toasts = [];
+  #heights = new Map;
+  #measuring = false;
+  #expanded = false;
+  #interacting = false;
+  #themeMql = null;
+  #themeMqlHandler = null;
+  constructor() {
+    super();
+    this.#shadow = this.attachShadow({ mode: "open" });
+    this.#shadow.adoptedStyleSheets = [getToasterSheet()];
+    this.#shadow.innerHTML = '<div data-frame part="frame"><slot></slot></div>' + '<div data-alert-announcer role="alert" aria-live="assertive" aria-atomic="true" ' + 'style="position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;' + "overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;" + 'pointer-events:none"></div>';
+    this.#alertAnnouncer = this.#shadow.querySelector("[data-alert-announcer]");
+    this.#childObserver = new MutationObserver((records) => {
+      let changed = false;
+      for (const r of records) {
+        for (const node of Array.from(r.addedNodes)) {
+          if (node instanceof SonnerToast) {
+            this.#toasts.unshift(node);
+            this.#resizeObserver.observe(node);
+            this.#decorateToast(node);
+            changed = true;
+          }
+        }
+        for (const node of Array.from(r.removedNodes)) {
+          if (node instanceof SonnerToast) {
+            this.#toasts = this.#toasts.filter((t) => t !== node);
+            this.#heights.delete(node);
+            this.#resizeObserver.unobserve(node);
+            changed = true;
+          }
+        }
+      }
+      if (changed)
+        this.#reflow({ remeasure: true });
+    });
+    this.#resizeObserver = new ResizeObserver(() => this.#reflow({ remeasure: false }));
+    this.addEventListener("mouseenter", this.#onPointerEnter);
+    this.addEventListener("mouseleave", this.#onPointerLeave);
+    this.addEventListener("focusin", this.#onFocusIn);
+    this.addEventListener("focusout", this.#onFocusOut);
+    this.addEventListener("sonner-toast-dismissed", () => this.#reflow({ remeasure: false }));
+    this.addEventListener("sonner-toast-updated", () => this.#reflow({ remeasure: true }));
+    this.addEventListener("sonner-toast-mounted", () => this.#reflow({ remeasure: true }));
+  }
+  connectedCallback() {
+    if (!this.hasAttribute("tabindex"))
+      this.tabIndex = -1;
+    if (!this.hasAttribute("role"))
+      this.setAttribute("role", "region");
+    if (!this.hasAttribute("aria-label"))
+      this.setAttribute("aria-label", this.getAttribute("container-aria-label") ?? "Notifications");
+    this.setAttribute("data-sonner-toaster", "");
+    this.#applyPosition();
+    this.#applyTheme();
+    this.#applyDir();
+    this.#applyGap();
+    this.#applyWidth();
+    this.#applyOffsets();
+    this.#childObserver.observe(this, { childList: true });
+    for (const child of Array.from(this.children)) {
+      if (child instanceof SonnerToast) {
+        this.#toasts.unshift(child);
+        this.#resizeObserver.observe(child);
+        this.#decorateToast(child);
+      }
+    }
+    document.addEventListener("keydown", this.#onKeyDown);
+    window.addEventListener("resize", this.#onWindowResize);
+    registerToaster(this);
+    this.#reflow({ remeasure: true });
+  }
+  disconnectedCallback() {
+    this.#childObserver.disconnect();
+    this.#resizeObserver.disconnect();
+    document.removeEventListener("keydown", this.#onKeyDown);
+    window.removeEventListener("resize", this.#onWindowResize);
+    if (this.#themeMql && this.#themeMqlHandler) {
+      this.#themeMql.removeEventListener("change", this.#themeMqlHandler);
+    }
+    unregisterToaster(this);
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (!this.isConnected)
+      return;
+    switch (name) {
+      case "position":
+        this.#applyPosition();
+        this.#applyToastPositions();
+        this.#reflow();
+        break;
+      case "theme":
+        this.#applyTheme();
+        break;
+      case "dir":
+        this.#applyDir();
+        break;
+      case "gap":
+        this.#applyGap();
+        this.#reflow();
+        break;
+      case "visible-toasts":
+        this.#reflow();
+        break;
+      case "expand":
+        this.#expanded = this.hasAttribute("expand");
+        for (const t of this.#toasts)
+          t.setPaused(this.#expanded || this.#interacting);
+        this.#reflow();
+        break;
+      case "close-button":
+      case "rich-colors":
+      case "invert":
+        this.#propagateBoolean(name);
+        break;
+      case "offset":
+      case "mobile-offset":
+        this.#applyOffsets();
+        break;
+      case "container-aria-label":
+        this.setAttribute("aria-label", this.getAttribute("container-aria-label") ?? "Notifications");
+        break;
+    }
+  }
+  addToast(el) {
+    this.appendChild(el);
+    return el;
+  }
+  announceUrgent(text) {
+    this.#alertAnnouncer.textContent = "";
+    requestAnimationFrame(() => {
+      this.#alertAnnouncer.textContent = text;
+    });
+  }
+  dismissAll() {
+    for (const child of Array.from(this.children)) {
+      if (child instanceof SonnerToast)
+        child.dismiss();
+    }
+  }
+  #getPosition() {
+    return this.getAttribute("position") || "bottom-right";
+  }
+  #applyPosition() {
+    const [y, x] = this.#getPosition().split("-");
+    if (y)
+      this.setAttribute("data-y-position", y);
+    if (x)
+      this.setAttribute("data-x-position", x);
+  }
+  #applyTheme() {
+    if (this.#themeMql && this.#themeMqlHandler) {
+      this.#themeMql.removeEventListener("change", this.#themeMqlHandler);
+      this.#themeMql = null;
+      this.#themeMqlHandler = null;
+    }
+    const theme = this.getAttribute("theme") || "light";
+    if (theme === "system") {
+      this.#themeMql = window.matchMedia("(prefers-color-scheme: dark)");
+      const apply = (mql) => {
+        this.setAttribute("data-sonner-theme", mql.matches ? "dark" : "light");
+      };
+      this.#themeMqlHandler = apply;
+      this.#themeMql.addEventListener("change", apply);
+      apply(this.#themeMql);
+    } else {
+      this.setAttribute("data-sonner-theme", theme);
+    }
+  }
+  #applyDir() {
+    const dir = this.getAttribute("dir");
+    if (dir === "auto" || !dir) {
+      const computed = window.getComputedStyle(document.documentElement).direction || "ltr";
+      this.setAttribute("dir", computed);
+    }
+  }
+  #applyGap() {
+    const raw = this.getAttribute("gap");
+    const gap = raw ? Number(raw) : GAP;
+    this.style.setProperty("--gap", `${Number.isFinite(gap) ? gap : GAP}px`);
+  }
+  #applyWidth() {
+    this.style.setProperty("--width", `${TOAST_WIDTH}px`);
+  }
+  #applyOffsets() {
+    const off = this.getAttribute("offset");
+    const mobileOff = this.getAttribute("mobile-offset");
+    applyOffsetVars(this, off ?? undefined, "--offset", "24px");
+    applyOffsetVars(this, mobileOff ?? undefined, "--mobile-offset", "16px");
+  }
+  #applyToastPositions() {
+    for (const t of this.#toasts) {
+      if (!t.hasAttribute("position")) {
+        const [y, x] = this.#getPosition().split("-");
+        if (y)
+          t.setAttribute("data-y-position", y);
+        if (x)
+          t.setAttribute("data-x-position", x);
+      }
+    }
+  }
+  #propagateBoolean(attr) {
+    const on = this.hasAttribute(attr);
+    for (const t of this.#toasts) {
+      if (t.getAttribute(attr) === "false")
+        continue;
+      if (on)
+        t.setAttribute(attr, "");
+      else
+        t.removeAttribute(attr);
+    }
+  }
+  #decorateToast(toast) {
+    if (!toast.hasAttribute("position")) {
+      const [y, x] = this.#getPosition().split("-");
+      if (y)
+        toast.setAttribute("data-y-position", y);
+      if (x)
+        toast.setAttribute("data-x-position", x);
+    }
+    if (!toast.hasAttribute("duration")) {
+      const inherit = this.getAttribute("duration");
+      if (inherit)
+        toast.setAttribute("duration", inherit);
+    }
+    if (!toast.hasAttribute("close-button") && this.hasAttribute("close-button")) {
+      toast.setAttribute("close-button", "");
+    }
+    if (!toast.hasAttribute("rich-colors") && this.hasAttribute("rich-colors")) {
+      toast.setAttribute("rich-colors", "");
+    }
+    if (!toast.hasAttribute("invert") && this.hasAttribute("invert")) {
+      toast.setAttribute("invert", "");
+    }
+  }
+  #reflow(opts = { remeasure: false }) {
+    const visibleAmount = Number(this.getAttribute("visible-toasts") ?? VISIBLE_TOASTS_AMOUNT);
+    if (opts.remeasure) {
+      this.#measuring = true;
+      for (const t of this.#toasts) {
+        if (t.getAttribute("data-removed") === "true")
+          continue;
+        const prior = t.style.height;
+        t.style.height = "auto";
+        this.#heights.set(t, t.getBoundingClientRect().height);
+        t.style.height = prior;
+      }
+      this.#measuring = false;
+    }
+    const active = this.#toasts.filter((t) => t.getAttribute("data-removed") !== "true");
+    const frontHeight = active.length > 0 ? this.#heights.get(active[0]) ?? 0 : 0;
+    const gap = this.#gapPx();
+    const expanded = this.#expanded || this.#interacting;
+    let cumulative = 0;
+    this.style.setProperty("--front-toast-height", `${frontHeight}px`);
+    for (let i = 0;i < active.length; i++) {
+      const toast = active[i];
+      const h = this.#heights.get(toast) ?? 0;
+      const isFront = i === 0;
+      const offset = i === 0 ? 0 : cumulative + i * gap;
+      cumulative += h;
+      toast.style.setProperty("--index", String(i));
+      toast.style.setProperty("--toasts-before", String(i));
+      toast.style.setProperty("--z-index", String(active.length - i));
+      toast.style.setProperty("--offset", `${offset}px`);
+      toast.style.setProperty("--initial-height", `${h}px`);
+      toast.setAttribute("data-index", String(i));
+      toast.setAttribute("data-front", String(isFront));
+      toast.setAttribute("data-visible", String(i + 1 <= visibleAmount));
+      toast.setAttribute("data-expanded", String(expanded));
+      if (expanded || isFront)
+        toast.removeAttribute("aria-hidden");
+      else
+        toast.setAttribute("aria-hidden", "true");
+    }
+  }
+  #gapPx() {
+    const raw = this.getAttribute("gap");
+    const n = raw ? Number(raw) : GAP;
+    return Number.isFinite(n) ? n : GAP;
+  }
+  #onPointerEnter = () => {
+    this.#interacting = true;
+    for (const t of this.#toasts)
+      t.setPaused(true);
+    this.#reflow();
+  };
+  #onPointerLeave = () => {
+    this.#interacting = false;
+    for (const t of this.#toasts)
+      t.setPaused(false);
+    this.#reflow();
+  };
+  #onFocusIn = () => {
+    this.#interacting = true;
+    for (const t of this.#toasts)
+      t.setPaused(true);
+    this.#reflow();
+  };
+  #onFocusOut = (e) => {
+    const next = e.relatedTarget;
+    if (next && this.contains(next))
+      return;
+    this.#interacting = false;
+    for (const t of this.#toasts)
+      t.setPaused(false);
+    this.#reflow();
+  };
+  #onWindowResize = () => this.#reflow({ remeasure: true });
+  #onKeyDown = (event) => {
+    const target = event.target;
+    if (target) {
+      const tag = target.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable) {
+        return;
+      }
+    }
+    const hotkey = this.#hotkey();
+    const matches = hotkey.every((key) => {
+      if (key === "altKey" || key === "ctrlKey" || key === "shiftKey" || key === "metaKey") {
+        return event[key];
+      }
+      return event.code === key;
+    });
+    if (matches) {
+      this.#expanded = true;
+      for (const t of this.#toasts)
+        t.setPaused(true);
+      this.focus();
+      this.#reflow();
+      return;
+    }
+    if (event.key === "Escape" && this.#expanded && this.contains(document.activeElement)) {
+      this.#expanded = false;
+      for (const t of this.#toasts)
+        t.setPaused(false);
+      this.#reflow();
+    }
+  };
+  #hotkey() {
+    const raw = this.getAttribute("hotkey");
+    if (!raw)
+      return DEFAULT_HOTKEY;
+    return raw.split("+").map((s) => s.trim());
+  }
+}
+if (typeof customElements !== "undefined" && !customElements.get("sonner-toaster")) {
+  customElements.define("sonner-toaster", SonnerToaster);
+}
+// src/toast.ts
+function ensureToaster(toasterId) {
+  if (toasterId) {
+    const byId = document.getElementById(toasterId);
+    if (byId instanceof SonnerToaster)
+      return byId;
+  }
+  let host = defaultToaster();
+  if (!host) {
+    host = document.createElement("sonner-toaster");
+    document.body.appendChild(host);
+  }
+  return host;
+}
+function buildOrUpdate(options) {
+  const id = options.id ?? nextToastId();
+  const existing = getToast(id);
+  if (existing) {
+    existing.update(options);
+    return existing;
+  }
+  const el = document.createElement("sonner-toast");
+  el.toastId = id;
+  el.update(options);
+  el.setHandlers({ onDismiss: options.onDismiss, onAutoClose: options.onAutoClose });
+  ensureToaster(options.toasterId).addToast(el);
+  return el;
+}
+function variant(type) {
+  return (message, opts) => buildOrUpdate({ ...opts, type, title: message });
+}
+function basic(message, opts) {
+  return buildOrUpdate({ ...opts, type: "default", title: message });
+}
+function dismiss(id) {
+  if (id !== undefined) {
+    getToast(id)?.dismiss();
+    return;
+  }
+  dismissAllToasts();
+}
+function custom(builder, opts) {
+  const id = opts?.id ?? nextToastId();
+  const el = document.createElement("sonner-toast");
+  el.toastId = id;
+  el.setAttribute("data-styled", "false");
+  if (opts?.duration !== undefined)
+    el.setAttribute("duration", String(opts.duration));
+  if (opts?.dismissible === false)
+    el.setAttribute("dismissible", "false");
+  if (opts?.position)
+    el.setAttribute("position", opts.position);
+  if (opts?.testId !== undefined)
+    el.setAttribute("data-testid", opts.testId);
+  const content = builder(id);
+  el.appendChild(content);
+  el.setHandlers({ onDismiss: opts?.onDismiss, onAutoClose: opts?.onAutoClose });
+  ensureToaster(opts?.toasterId).addToast(el);
+  return el;
+}
+async function resolveContent(value, arg) {
+  if (value === undefined)
+    return;
+  if (typeof value === "function") {
+    return value.length === 0 ? value() : value(arg);
+  }
+  return value;
+}
+function promise(promiseOrFn, options) {
+  const id = options.id ?? nextToastId();
+  const { loading: _l, success: _s, error: _e, description: _d, finally: _f, ...rest } = options;
+  const loadingEl = buildOrUpdate({
+    ...rest,
+    id,
+    type: "loading",
+    title: options.loading,
+    duration: Infinity,
+    dismissible: options.dismissible ?? false
+  });
+  const work = Promise.resolve(typeof promiseOrFn === "function" ? promiseOrFn() : promiseOrFn);
+  let result = null;
+  const settled = work.then(async (value) => {
+    result = ["resolve", value];
+    const title = await resolveContent(options.success, value);
+    const desc = await resolveContent(options.description, value);
+    if (title !== undefined) {
+      loadingEl.update({
+        ...rest,
+        id,
+        type: "success",
+        title,
+        description: desc,
+        duration: options.duration,
+        dismissible: options.dismissible ?? true
+      });
+    } else {
+      loadingEl.dismiss();
+    }
+  }).catch(async (err) => {
+    result = ["reject", err];
+    const title = await resolveContent(options.error, err);
+    const desc = await resolveContent(options.description, err);
+    if (title !== undefined) {
+      loadingEl.update({
+        ...rest,
+        id,
+        type: "error",
+        title,
+        description: desc,
+        duration: options.duration,
+        dismissible: options.dismissible ?? true
+      });
+    } else {
+      loadingEl.dismiss();
+    }
+  }).finally(() => options.finally?.());
+  const unwrap = () => new Promise((resolve, reject) => {
+    settled.then(() => {
+      if (!result)
+        return reject(new Error("promise toast settled without a result"));
+      if (result[0] === "resolve")
+        resolve(result[1]);
+      else
+        reject(result[1]);
+    });
+  });
+  return Object.assign(loadingEl, { unwrap });
+}
+var toast = Object.assign(basic, {
+  success: variant("success"),
+  error: variant("error"),
+  info: variant("info"),
+  warning: variant("warning"),
+  loading: (message, opts) => buildOrUpdate({
+    ...opts,
+    type: "loading",
+    title: message,
+    duration: opts?.duration ?? Infinity
+  }),
+  message: basic,
+  promise,
+  custom,
+  dismiss,
+  getToast
+});
+// src/index.ts
+if (typeof window !== "undefined")
+  window.toast = toast;
+export {
+  toast,
+  SonnerToaster,
+  SonnerToast
+};
+
+//# debugId=038A38E1BC01A40B64756E2164756E21
+//# sourceMappingURL=sonner-wc.js.map