@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/textarea.js

@@ -1,122 +1,122 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { disabledLoadingMixin as t } from "./styles/mixins/states.css.js";
-import { forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
-import { formFieldMixins as r } from "./styles/index.js";
-import { t as i } from "./craftit/dist/directives/attr.js";
-import "./craftit/dist/directives/index.js";
-import { parsePositiveNumber as a } from "./inputs/shared/utils/field-values.js";
-import { setupFieldEvents as o, syncCounter as s, syncMergedAssistive as c } from "./inputs/shared/dom-sync/field-sync.js";
+import { disablableBundle as e, roundableBundle as t, sizableBundle as n, themableBundle as r } from "./inputs/shared/bundles.js";
+import { sizeVariantMixin as i } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as a } from "./styles/mixins/states.css.js";
+import { forcedColorsFocusMixin as o } from "./styles/mixins/theme.css.js";
+import { formFieldMixins as s } from "./styles/index.js";
+import { y as c } from "./packages/craftit/dist/controls/field-control.js";
+import "./packages/craftit/dist/controls.js";
+import { FORM_CTX as l } from "./inputs/shared/form-context.js";
+import { mountFormContextSync as u } from "./inputs/shared/dom-sync/form-context.js";
 import "./inputs/shared/dom-sync/index.js";
-import { useTextField as l } from "./inputs/shared/composables/use-text-field.js";
-import "./inputs/shared/composables/index.js";
-import { TEXTAREA_SIZE_PRESET as u } from "./inputs/shared/design-presets.js";
-import d from "./inputs/textarea/textarea.css?inline.js";
-import { computed as f, defineComponent as p, effect as m, html as h, onMount as g, ref as _ } from "@vielzeug/craftit";
-//#region src/inputs/textarea/textarea.ts
-var v = p({
+import { TEXTAREA_SIZE_PRESET as d } from "./inputs/shared/design-presets.js";
+import f from "./inputs/textarea/textarea.css?inline.js";
+import { define as p, effect as m, html as h, inject as g, onElement as _, ref as v } from "@vielzeug/craftit";
+var y = p("bit-textarea", {
 	formAssociated: !0,
 	props: {
-		"auto-resize": { default: !1 },
-		color: { default: void 0 },
-		disabled: { default: !1 },
+		...r,
+		...n,
+		...e,
+		...t,
+		"auto-resize": !1,
 		error: {
 			default: "",
 			omit: !0
 		},
-		fullwidth: { default: !1 },
-		helper: { default: "" },
-		label: { default: "" },
-		"label-placement": { default: "inset" },
-		maxlength: { default: void 0 },
-		name: { default: "" },
-		"no-resize": { default: !1 },
-		placeholder: { default: "" },
-		readonly: { default: !1 },
-		required: { default: !1 },
-		resize: { default: void 0 },
-		rounded: { default: void 0 },
-		rows: { default: void 0 },
-		size: { default: void 0 },
-		value: { default: "" },
-		variant: { default: void 0 }
+		fullwidth: !1,
+		helper: "",
+		label: "",
+		"label-placement": "inset",
+		maxlength: void 0,
+		name: "",
+		"no-resize": !1,
+		placeholder: "",
+		readonly: !1,
+		required: !1,
+		resize: void 0,
+		rows: void 0,
+		value: "",
+		variant: void 0
 	},
-	setup({ emit: e, props: t }) {
-		let n = l(t, "textarea"), { fieldId: r, helperId: u, labelInsetId: d, labelInsetRef: p, labelOutsideId: v, labelOutsideRef: y, valueSignal: b } = n, x = f(() => t.maxlength.value), S = _(), C = _(), w = _();
-		return g(() => {
-			let r = S.value;
-			if (!r) return;
-			let i = () => {
-				!t["auto-resize"].value || !r || (r.style.height = "auto", r.style.height = `${r.scrollHeight}px`);
-			};
-			n.mountLabelSync(), m(() => {
-				let e = a(t.rows.value);
-				e == null ? r.removeAttribute("rows") : r.rows = e;
-				let n = a(x.value);
-				n == null ? r.removeAttribute("maxlength") : r.maxLength = n, r.style.resize = t["auto-resize"].value || t["no-resize"].value ? "none" : t.resize.value || "vertical";
-			}), c({
-				error: () => t.error.value,
-				helper: () => t.helper.value,
-				ref: C
-			}), s({
-				count: f(() => b.value.length),
-				format: "merged",
-				maxLength: x,
-				ref: w
-			}), import("@vielzeug/craftit").then(({ aria: e }) => {
-				e(r, {
-					describedby: () => t.error.value ? n.errorId : u,
-					invalid: () => !!t.error.value,
-					labelledby: () => t["label-placement"].value === "outside" ? v : d
+	setup({ emit: e, host: t, props: n }) {
+		let r = g(l, void 0);
+		u(t.el, r, n);
+		let i = v(), a = () => {
+			if (!n["auto-resize"].value || !i.value) return;
+			let e = i.value;
+			e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
+		}, { assistive: o, attrs: s, errorId: d, fieldId: f, helperId: p, labelInsetId: y, labelInsetRef: b, labelOutsideId: x, labelOutsideRef: S } = c({
+			context: r,
+			disabled: n.disabled,
+			elementRef: i,
+			error: n.error,
+			helper: n.helper,
+			label: n.label,
+			labelPlacement: n["label-placement"],
+			maxLength: n.maxlength,
+			name: n.name,
+			onChange: (t, n) => {
+				e("change", {
+					originalEvent: t,
+					value: n
+				});
+			},
+			onInput: (t, n) => {
+				e("input", {
+					originalEvent: t,
+					value: n
 				});
-			}), o(r, {
-				onBlur: () => n.triggerValidation("blur"),
-				onChange: (t, r) => {
-					e("change", {
-						originalEvent: t,
-						value: r
-					}), n.triggerValidation("change");
-				},
-				onInput: (t, n) => {
-					i(), e("input", {
-						originalEvent: t,
-						value: n
-					});
-				}
-			}), t["auto-resize"].value && requestAnimationFrame(i);
-		}), h`
+			},
+			onInputExtra: a,
+			placeholder: n.placeholder,
+			prefix: "textarea",
+			readOnly: n.readonly,
+			required: n.required,
+			rows: n.rows,
+			value: n.value
+		});
+		return _(i, (e) => m(() => {
+			e.style.resize = n["auto-resize"].value || n["no-resize"].value ? "none" : n.resize.value || "vertical", n["auto-resize"].value && requestAnimationFrame(a);
+		})), h`
       <div class="textarea-wrapper">
-        <label class="label-outside" for="${r}" id="${v}" ref=${y} hidden></label>
+        <label class="label-outside" for="${f}" id="${x}" ref=${S} hidden></label>
         <div class="field">
-          <label class="label-inset" for="${r}" id="${d}" ref=${p} hidden></label>
+          <label class="label-inset" for="${f}" id="${y}" ref=${b} hidden></label>
           <textarea
-            ref=${S}
-            id="${r}"
-            ${i({
-			disabled: t.disabled,
-			name: t.name,
-			placeholder: t.placeholder,
-			readOnly: t.readonly,
-			required: t.required,
-			value: b
-		})}
-            aria-describedby="${u}"></textarea>
+            ref=${i}
+            id="${f}"
+            ${s}
+            :aria-describedby="${() => o.value.hasError ? d : p}"
+            :aria-errormessage="${() => o.value.hasError ? d : null}"
+            :aria-invalid="${() => String(o.value.hasError)}"
+            :aria-labelledby="${() => n["label-placement"].value === "outside" ? x : y}"></textarea>
+        </div>
+        <span
+          class="${() => o.value.counterAtLimit ? "counter at-limit" : o.value.counterNearLimit ? "counter near-limit" : "counter"}"
+          aria-live="polite"
+          ?hidden=${() => !o.value.hasCounter}
+          >${() => o.value.counterText.replace(" / ", "/")}</span
+        >
+        <div
+          id="${p}"
+          class="helper-text"
+          aria-live="polite"
+          ?hidden=${() => !(o.value.hasError || o.value.showHelper)}>
+          ${() => o.value.hasError ? o.value.errorText : o.value.helperText}
         </div>
-        <span class="counter" aria-live="polite" ref=${w} hidden></span>
-        <div id="${u}" class="helper-text" aria-live="polite" ref=${C} hidden></div>
       </div>
     `;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		...r,
-		e(u),
-		t(),
-		n("textarea"),
-		d
-	],
-	tag: "bit-textarea"
+		...s,
+		i(d),
+		a(),
+		o("textarea"),
+		f
+	]
 });
 //#endregion
-export { v as TEXTAREA_TAG };
+export { y as TEXTAREA_TAG };
 
 //# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { computed, defineComponent, effect, html, onMount, ref } from '@vielzeug/craftit';\nimport { attr } from '@vielzeug/craftit/directives';\n\nimport type { VisualVariant } from '../../types';\nimport type { TextFieldProps } from '../shared/base-props';\n\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { useTextField } from '../shared/composables';\nimport { TEXTAREA_SIZE_PRESET } from '../shared/design-presets';\nimport { setupFieldEvents, syncCounter, syncMergedAssistive } from '../shared/dom-sync';\nimport { parsePositiveNumber } from '../shared/utils';\nimport componentStyles from './textarea.css?inline';\n\n/** Textarea component properties */\n\nexport type BitTextareaEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type BitTextareaProps = TextFieldProps<Exclude<VisualVariant, 'glass' | 'frost' | 'text'>> & {\n  /** Allow auto-grow with content */\n  'auto-resize'?: boolean;\n  /** Maximum character count; shows a counter when set */\n  maxlength?: number;\n  /** Disable manual resize handle */\n  'no-resize'?: boolean;\n  /** Resize direction override */\n  resize?: 'none' | 'horizontal' | 'both' | 'vertical';\n  /** Number of visible text rows */\n  rows?: number;\n};\n\n/**\n * A multi-line text input with label, helper text, character counter, and auto-resize.\n *\n * @element bit-textarea\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {number} rows - Visible row count\n * @attr {number} maxlength - Max character count (shows counter)\n * @attr {string} helper - Helper text below the textarea\n * @attr {string} error - Error message\n * @attr {boolean} disabled - Disable interaction\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Required field\n * @attr {boolean} no-resize - Disable manual resize\n * @attr {boolean} auto-resize - Grow with content\n * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'\n * @attr {string} color - Theme color\n * @attr {string} variant - Visual variant\n * @attr {string} size - Component size\n * @attr {string} rounded - Border radius\n *\n * @fires input - Fired on every keystroke with current value\n * @fires change - Fired on blur with changed value\n *\n * @slot helper - Complex helper content\n */\nexport const TEXTAREA_TAG = defineComponent<BitTextareaProps, BitTextareaEvents>({\n  formAssociated: true,\n  props: {\n    'auto-resize': { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    label: { default: '' },\n    'label-placement': { default: 'inset' },\n    maxlength: { default: undefined },\n    name: { default: '' },\n    'no-resize': { default: false },\n    placeholder: { default: '' },\n    readonly: { default: false },\n    required: { default: false },\n    resize: { default: undefined },\n    rounded: { default: undefined },\n    rows: { default: undefined },\n    size: { default: undefined },\n    value: { default: '' },\n    variant: { default: undefined },\n  },\n  setup({ emit, props }) {\n    const tf = useTextField(props, 'textarea');\n    const {\n      fieldId: textareaId,\n      helperId,\n      labelInsetId,\n      labelInsetRef,\n      labelOutsideId,\n      labelOutsideRef,\n      valueSignal,\n    } = tf;\n    const maxLen = computed<number | undefined>(() => props.maxlength.value);\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n    const helperRef = ref<HTMLDivElement>();\n    const counterRef = ref<HTMLSpanElement>();\n\n    onMount(() => {\n      const ta = textareaRef.value;\n\n      if (!ta) return;\n\n      const autoGrow = () => {\n        if (!props['auto-resize'].value || !ta) return;\n\n        ta.style.height = 'auto';\n        ta.style.height = `${ta.scrollHeight}px`;\n      };\n\n      tf.mountLabelSync();\n\n      effect(() => {\n        const rows = parsePositiveNumber(props.rows.value);\n\n        if (rows != null) ta.rows = rows;\n        else ta.removeAttribute('rows');\n\n        const max = parsePositiveNumber(maxLen.value);\n\n        if (max != null) ta.maxLength = max;\n        else ta.removeAttribute('maxlength');\n\n        ta.style.resize =\n          props['auto-resize'].value || props['no-resize'].value ? 'none' : props.resize.value || 'vertical';\n      });\n\n      syncMergedAssistive({\n        error: () => props.error.value,\n        helper: () => props.helper.value,\n        ref: helperRef,\n      });\n\n      syncCounter({\n        count: computed(() => valueSignal.value.length),\n        format: 'merged',\n        maxLength: maxLen,\n        ref: counterRef,\n      });\n\n      // TODO: migrate aria() on inner elements to a future useA11yField() composable\n      import('@vielzeug/craftit').then(({ aria }) => {\n        aria(ta, {\n          describedby: () => (props.error.value ? tf.errorId : helperId),\n          invalid: () => !!props.error.value,\n          labelledby: () => (props['label-placement'].value === 'outside' ? labelOutsideId : labelInsetId),\n        });\n      });\n\n      setupFieldEvents(ta, {\n        onBlur: () => tf.triggerValidation('blur'),\n        onChange: (e, value) => {\n          emit('change', { originalEvent: e, value });\n          tf.triggerValidation('change');\n        },\n        onInput: (e, value) => {\n          autoGrow();\n          emit('input', { originalEvent: e, value });\n        },\n      });\n\n      if (props['auto-resize'].value) requestAnimationFrame(autoGrow);\n    });\n\n    return html`\n      <div class=\"textarea-wrapper\">\n        <label class=\"label-outside\" for=\"${textareaId}\" id=\"${labelOutsideId}\" ref=${labelOutsideRef} hidden></label>\n        <div class=\"field\">\n          <label class=\"label-inset\" for=\"${textareaId}\" id=\"${labelInsetId}\" ref=${labelInsetRef} hidden></label>\n          <textarea\n            ref=${textareaRef}\n            id=\"${textareaId}\"\n            ${attr({\n              disabled: props.disabled,\n              name: props.name,\n              placeholder: props.placeholder,\n              readOnly: props.readonly,\n              required: props.required,\n              value: valueSignal,\n            })}\n            aria-describedby=\"${helperId}\"></textarea>\n        </div>\n        <span class=\"counter\" aria-live=\"polite\" ref=${counterRef} hidden></span>\n        <div id=\"${helperId}\" class=\"helper-text\" aria-live=\"polite\" ref=${helperRef} hidden></div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...formFieldMixins,\n    sizeVariantMixin(TEXTAREA_SIZE_PRESET),\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('textarea'),\n    componentStyles,\n  ],\n  tag: 'bit-textarea',\n});\n"],"mappings":"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"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { define, effect, html, inject, onElement, ref } from '@vielzeug/craftit';\nimport { createTextFieldControl } from '@vielzeug/craftit/controls';\n\nimport type { VisualVariant } from '../../types';\nimport type { TextFieldProps } from '../shared/base-props';\n\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\nimport { TEXTAREA_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './textarea.css?inline';\n\n/** Textarea component properties */\n\nexport type BitTextareaEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type BitTextareaProps = TextFieldProps<Exclude<VisualVariant, 'glass' | 'frost' | 'text'>> & {\n  /** Allow auto-grow with content */\n  'auto-resize'?: boolean;\n  /** Maximum character count; shows a counter when set */\n  maxlength?: number;\n  /** Disable manual resize handle */\n  'no-resize'?: boolean;\n  /** Resize direction override */\n  resize?: 'none' | 'horizontal' | 'both' | 'vertical';\n  /** Number of visible text rows */\n  rows?: number;\n};\n\nconst textareaProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  ...roundableBundle,\n  'auto-resize': false,\n  error: { default: '' as string, omit: true },\n  fullwidth: false,\n  helper: '',\n  label: '',\n  'label-placement': 'inset',\n  maxlength: undefined,\n  name: '',\n  'no-resize': false,\n  placeholder: '',\n  readonly: false,\n  required: false,\n  resize: undefined,\n  rows: undefined,\n  value: '',\n  variant: undefined,\n} satisfies PropBundle<BitTextareaProps>;\n\n/**\n * A multi-line text input with label, helper text, character counter, and auto-resize.\n *\n * @element bit-textarea\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {number} rows - Visible row count\n * @attr {number} maxlength - Max character count (shows counter)\n * @attr {string} helper - Helper text below the textarea\n * @attr {string} error - Error message\n * @attr {boolean} disabled - Disable interaction\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Required field\n * @attr {boolean} no-resize - Disable manual resize\n * @attr {boolean} auto-resize - Grow with content\n * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'\n * @attr {string} color - Theme color\n * @attr {string} variant - Visual variant\n * @attr {string} size - Component size\n * @attr {string} rounded - Border radius\n *\n * @fires input - Fired on every keystroke with current value\n * @fires change - Fired on blur with changed value\n *\n * @slot helper - Complex helper content\n */\nexport const TEXTAREA_TAG = define<BitTextareaProps, BitTextareaEvents>('bit-textarea', {\n  formAssociated: true,\n  props: textareaProps,\n  setup({ emit, host, props }) {\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n\n    const autoGrow = () => {\n      if (!props['auto-resize'].value || !textareaRef.value) return;\n\n      const textareaEl = textareaRef.value;\n\n      textareaEl.style.height = 'auto';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n    };\n\n    const tf = createTextFieldControl({\n      context: formCtx,\n      disabled: props.disabled,\n      elementRef: textareaRef,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      name: props.name,\n      onChange: (event, value) => {\n        emit('change', { originalEvent: event, value });\n      },\n      onInput: (event, value) => {\n        emit('input', { originalEvent: event, value });\n      },\n      onInputExtra: autoGrow,\n      placeholder: props.placeholder,\n      prefix: 'textarea',\n      readOnly: props.readonly,\n      required: props.required,\n      rows: props.rows,\n      value: props.value,\n    });\n    const {\n      assistive,\n      attrs: textareaAttrs,\n      errorId,\n      fieldId: textareaId,\n      helperId,\n      labelInsetId,\n      labelInsetRef,\n      labelOutsideId,\n      labelOutsideRef,\n    } = tf;\n\n    onElement(textareaRef, (textareaEl) => {\n      const syncLayout = effect(() => {\n        textareaEl.style.resize =\n          props['auto-resize'].value || props['no-resize'].value ? 'none' : props.resize.value || 'vertical';\n\n        if (props['auto-resize'].value) {\n          requestAnimationFrame(autoGrow);\n        }\n      });\n\n      return syncLayout;\n    });\n\n    return html`\n      <div class=\"textarea-wrapper\">\n        <label class=\"label-outside\" for=\"${textareaId}\" id=\"${labelOutsideId}\" ref=${labelOutsideRef} hidden></label>\n        <div class=\"field\">\n          <label class=\"label-inset\" for=\"${textareaId}\" id=\"${labelInsetId}\" ref=${labelInsetRef} hidden></label>\n          <textarea\n            ref=${textareaRef}\n            id=\"${textareaId}\"\n            ${textareaAttrs}\n            :aria-describedby=\"${() => (assistive.value.hasError ? errorId : helperId)}\"\n            :aria-errormessage=\"${() => (assistive.value.hasError ? errorId : null)}\"\n            :aria-invalid=\"${() => String(assistive.value.hasError)}\"\n            :aria-labelledby=\"${() =>\n              props['label-placement'].value === 'outside' ? labelOutsideId : labelInsetId}\"></textarea>\n        </div>\n        <span\n          class=\"${() =>\n            assistive.value.counterAtLimit\n              ? 'counter at-limit'\n              : assistive.value.counterNearLimit\n                ? 'counter near-limit'\n                : 'counter'}\"\n          aria-live=\"polite\"\n          ?hidden=${() => !assistive.value.hasCounter}\n          >${() => assistive.value.counterText.replace(' / ', '/')}</span\n        >\n        <div\n          id=\"${helperId}\"\n          class=\"helper-text\"\n          aria-live=\"polite\"\n          ?hidden=${() => !(assistive.value.hasError || assistive.value.showHelper)}>\n          ${() => (assistive.value.hasError ? assistive.value.errorText : assistive.value.helperText)}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...formFieldMixins,\n    sizeVariantMixin(TEXTAREA_SIZE_PRESET),\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('textarea'),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;AAsFA,IAAa,IAAe,EAA4C,gBAAgB;CACtF,gBAAgB;CAChB,OAvDoB;EACpB,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,eAAe;EACf,OAAO;GAAE,SAAS;GAAc,MAAM;GAAM;EAC5C,WAAW;EACX,QAAQ;EACR,OAAO;EACP,mBAAmB;EACnB,WAAW,KAAA;EACX,MAAM;EACN,aAAa;EACb,aAAa;EACb,UAAU;EACV,UAAU;EACV,QAAQ,KAAA;EACR,MAAM,KAAA;EACN,OAAO;EACP,SAAS,KAAA;EACV;CAmCC,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,IAAU,EAAO,GAAU,KAAA,EAAU;AAE3C,IAAqB,EAAK,IAAI,GAAS,EAAM;EAE7C,IAAM,IAAc,GAA0B,EAExC,UAAiB;AACrB,OAAI,CAAC,EAAM,eAAe,SAAS,CAAC,EAAY,MAAO;GAEvD,IAAM,IAAa,EAAY;AAG/B,GADA,EAAW,MAAM,SAAS,QAC1B,EAAW,MAAM,SAAS,GAAG,EAAW,aAAa;KA2BjD,EACJ,cACA,OAAO,GACP,YACA,SAAS,GACT,aACA,iBACA,kBACA,mBACA,uBAjCS,EAAuB;GAChC,SAAS;GACT,UAAU,EAAM;GAChB,YAAY;GACZ,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,OAAO,EAAM;GACb,gBAAgB,EAAM;GACtB,WAAW,EAAM;GACjB,MAAM,EAAM;GACZ,WAAW,GAAO,MAAU;AAC1B,MAAK,UAAU;KAAE,eAAe;KAAO;KAAO,CAAC;;GAEjD,UAAU,GAAO,MAAU;AACzB,MAAK,SAAS;KAAE,eAAe;KAAO;KAAO,CAAC;;GAEhD,cAAc;GACd,aAAa,EAAM;GACnB,QAAQ;GACR,UAAU,EAAM;GAChB,UAAU,EAAM;GAChB,MAAM,EAAM;GACZ,OAAO,EAAM;GACd,CAAC;AA0BF,SAbA,EAAU,IAAc,MACH,QAAa;AAI9B,GAHA,EAAW,MAAM,SACf,EAAM,eAAe,SAAS,EAAM,aAAa,QAAQ,SAAS,EAAM,OAAO,SAAS,YAEtF,EAAM,eAAe,SACvB,sBAAsB,EAAS;IAEjC,CAGF,EAEK,CAAI;;4CAE6B,EAAW,QAAQ,EAAe,QAAQ,EAAgB;;4CAE1D,EAAW,QAAQ,EAAa,QAAQ,EAAc;;kBAEhF,EAAY;kBACZ,EAAW;cACf,EAAc;uCACY,EAAU,MAAM,WAAW,IAAU,EAAU;wCAC9C,EAAU,MAAM,WAAW,IAAU,KAAM;mCACjD,OAAO,EAAU,MAAM,SAAS,CAAC;sCAEtD,EAAM,mBAAmB,UAAU,YAAY,IAAiB,EAAa;;;yBAI/E,EAAU,MAAM,iBACZ,qBACA,EAAU,MAAM,mBACd,uBACA,UAAU;;0BAEF,CAAC,EAAU,MAAM,WAAW;mBACnC,EAAU,MAAM,YAAY,QAAQ,OAAO,IAAI,CAAC;;;gBAGnD,EAAS;;;0BAGC,EAAE,EAAU,MAAM,YAAY,EAAU,MAAM,YAAY;kBACjE,EAAU,MAAM,WAAW,EAAU,MAAM,YAAY,EAAU,MAAM,WAAY;;;;;CAKpG,QAAQ,EAAE,gBAAgB,IAAM;CAChC,QAAQ;EACN,GAAG;EACH,EAAiB,EAAqB;EACtC,GAAsB;EACtB,EAAuB,WAAW;EAClC;EACD;CACF,CAAC"}

package/dist/toast.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./craftit/dist/directives/classes.cjs`),n=require(`./craftit/dist/directives/each.cjs`);require(`./craftit/dist/directives/index.cjs`);const r=require(`./utils/animation.cjs`),i=require(`./feedback/toast/toast.css?inline.cjs`);let a=require(`@vielzeug/craftit`);function o(e,t){return e.actions?.length?a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./packages/craftit/src/directives/classes.cjs`),t=require(`./packages/craftit/src/directives/each.cjs`);require(`./packages/craftit/src/directives/index.cjs`);const n=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const r=require(`./utils/animation.cjs`),i=require(`./feedback/toast/toast.css?inline.cjs`);let a=require(`@vielzeug/craftit`);function o(e,t){return e.actions?.length?a.html`
     <div slot="actions" class="toast-actions">
       ${e.actions.map(n=>a.html`
           <bit-button
@@ -10,32 +10,32 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           >
         `)}
     </div>
-  `:``}var s=(0,a.defineComponent)({props:{max:{default:5},position:{default:`bottom-right`}},setup({emit:e,host:i,props:s}){let c=(0,a.signal)([]),l=(0,a.signal)(new Set),u=(0,a.ref)(),d=new Map,f=[],p=!1,m=(e,t)=>{let n=new Set(l.value);t?n.add(e):n.delete(e),l.value=n},h=(e,t)=>{let n=window.setTimeout(()=>{b(e),d.delete(e)},t);d.set(e,{remaining:t,startedAt:Date.now(),timeoutId:n})},g=!1,_=()=>{if(!g){g=!0;for(let[e,t]of d)clearTimeout(t.timeoutId),d.set(e,{...t,remaining:Math.max(0,t.remaining-(Date.now()-t.startedAt))})}},v=()=>{if(g){g=!1;for(let[e,t]of d)t.remaining<=0||h(e,t.remaining)}},y=t=>{let n=t.id||crypto.randomUUID(),r={dismissible:!0,duration:5e3,...t,id:n};return c.value=[...c.value,r].slice(-(s.max.value??5)),e(`add`,{id:n}),r.duration>0&&h(n,r.duration),n},b=e=>{let t=d.get(e);if(t&&(clearTimeout(t.timeoutId),d.delete(e)),!(l.value.has(e)||f.includes(e))){if(p){f.push(e);return}p=!0,x(e)}},x=t=>{if(l.value.has(t)){S();return}let n=c.value.find(e=>e.id===t),i=u.value?.querySelector(`[data-toast-id="${t}"]`),a=()=>{m(t,!1),c.value=c.value.filter(e=>e.id!==t),n?.onDismiss?.(),e(`dismiss`,{id:t}),S()};i?(m(t,!0),r.awaitExit(i,a)):a()},S=()=>{if(f.length===0){p=!1;return}x(f.shift())},C=(e,t)=>{if(c.value=c.value.map(n=>n.id===e?{...n,...t,id:e}:n),t.duration===void 0)return;let n=d.get(e);n&&clearTimeout(n.timeoutId),d.delete(e),t.duration>0&&h(e,t.duration)},w=()=>{for(let[,e]of d)clearTimeout(e.timeoutId);d.clear(),f.length=0;let e=c.value.map(e=>e.id).filter(e=>!l.value.has(e));e.length&&(f.push(...e),p||S())};(0,a.onMount)(()=>{let e=i;e.add=y,e.update=C,e.dismiss=b,e.clear=w});let T=e=>e.urgency??(e.color===`error`?`assertive`:`polite`),E=!1,D=!1,O=()=>_(),k=()=>{!E&&!D&&v()},A=e=>{D=e,i.classList.toggle(`hovered`,e),e?O():k()},j=e=>a.html`
+  `:``}var s=(0,a.define)(`bit-toast`,{props:{max:5,position:`bottom-right`},setup({emit:n,host:i,props:s}){let c=(0,a.signal)([]),l=(0,a.signal)(new Set),u=(0,a.ref)(),d=new Map,f=[],p=!1,m=!1,h=!1,g=(e,t)=>{let n=new Set(l.value);t?n.add(e):n.delete(e),l.value=n},_=()=>{for(let[e,t]of d)clearTimeout(t.timeoutId),d.set(e,{...t,remaining:Math.max(0,t.remaining-(Date.now()-t.startedAt))})},v=()=>{for(let[e,t]of d){if(t.remaining<=0)continue;let n=window.setTimeout(()=>S(e),t.remaining);d.set(e,{...t,remaining:t.remaining,timeoutId:n})}},y=()=>{m||h?_():v()},b=(e,t)=>{if(t<=0)return;let n=window.setTimeout(()=>S(e),t);d.set(e,{remaining:t,startedAt:Date.now(),timeoutId:n})},x=e=>{let t=e.id||crypto.randomUUID(),r={dismissible:!0,duration:5e3,...e,id:t};return c.value=[...c.value,r].slice(-(s.max??5)),n(`add`,{id:t}),r.duration>0&&b(t,r.duration),t},S=e=>{if(!(l.value.has(e)||f.includes(e))){if(p){f.push(e);return}p=!0,C(e)}},C=e=>{if(l.value.has(e)){w();return}let t=c.value.find(t=>t.id===e),i=u.value?.querySelector(`[data-toast-id="${e}"]`),a=()=>{g(e,!1),c.value=c.value.filter(t=>t.id!==e);let r=d.get(e);r&&clearTimeout(r.timeoutId),d.delete(e),t?.onDismiss?.(),n(`dismiss`,{id:e}),w()};i?(g(e,!0),r.awaitExit(i,a)):a()},w=()=>{if(f.length===0){p=!1;return}C(f.shift())},T=(e,t)=>{if(c.value=c.value.map(n=>n.id===e?{...n,...t,id:e}:n),t.duration===void 0)return;let n=d.get(e);n&&clearTimeout(n.timeoutId),d.delete(e),t.duration>0&&b(e,t.duration)},E=()=>{for(let[,e]of d)clearTimeout(e.timeoutId);d.clear(),f.length=0;let e=c.value.map(e=>e.id).filter(e=>!l.value.has(e));e.length&&(f.push(...e),p||w())};(0,a.onMount)(()=>{let e=i.el;e.add=x,e.update=T,e.dismiss=S,e.clear=E});let D=e=>e.urgency??(e.color===`error`?`assertive`:`polite`),O=e=>{h=e,i.el.classList.toggle(`hovered`,e),y()},k=t=>a.html`
       <div
-        class=${t.n({exiting:()=>l.value.has(e.id),"toast-wrapper":!0})}
-        data-toast-id=${e.id}
+        class=${e.classes({exiting:()=>l.value.has(t.id),"toast-wrapper":!0})}
+        data-toast-id=${t.id}
         part="toast-wrapper">
         <bit-alert
-          color=${e.color||(e.urgency===`assertive`?`error`:`primary`)}
-          variant=${e.variant||`solid`}
-          size=${e.size||`md`}
-          rounded=${e.rounded||`md`}
-          ?dismissible=${e.dismissible}
-          ?horizontal=${e.horizontal}
-          heading=${e.heading||``}
-          @dismiss=${()=>b(e.id)}>
-          ${e.meta?a.html`<span slot="meta">${e.meta}</span>`:``} ${e.message}
-          ${o(e,()=>b(e.id))}
+          color=${t.color||(t.urgency===`assertive`?`error`:`primary`)}
+          variant=${t.variant||`solid`}
+          size=${t.size||`md`}
+          rounded=${t.rounded||`md`}
+          ?dismissible=${t.dismissible}
+          ?horizontal=${t.horizontal}
+          heading=${t.heading||``}
+          @dismiss=${()=>S(t.id)}>
+          ${t.meta?a.html`<span slot="meta">${t.meta}</span>`:``} ${t.message}
+          ${o(t,()=>S(t.id))}
         </bit-alert>
       </div>
     `;return a.html`
       <div
         class="toast-container"
         ref=${u}
-        @pointerenter=${()=>A(!0)}
-        @pointerleave=${()=>A(!1)}
-        @focusin=${()=>{E=!0,O()}}
-        @focusout=${()=>{E=!1,k()}}
+        @pointerenter=${()=>O(!0)}
+        @pointerleave=${()=>O(!1)}
+        @focusin=${()=>{m=!0,y()}}
+        @focusout=${()=>{m=!1,y()}}
         part="container">
         <!-- Polite live region: normal informational toasts -->
         <div
@@ -45,7 +45,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           aria-atomic="false"
           aria-label="Notifications"
           class="toast-live-region">
-          ${n.d(()=>c.value.filter(e=>T(e)===`polite`),j,void 0,{key:e=>e.id})}
+          ${t.each(()=>c.value.filter(e=>D(e)===`polite`),{key:e=>e.id,render:k})}
         </div>
         <!-- Assertive live region: critical errors that interrupt immediately -->
         <div
@@ -55,9 +55,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           aria-atomic="false"
           aria-label="Critical notifications"
           class="toast-live-region">
-          ${n.d(()=>c.value.filter(e=>T(e)===`assertive`),j,void 0,{key:e=>e.id})}
+          ${t.each(()=>c.value.filter(e=>D(e)===`assertive`),{key:e=>e.id,render:k})}
         </div>
         <slot></slot>
       </div>
-    `},styles:[e.reducedMotionMixin,i.default],tag:`bit-toast`}),c=()=>{let e=document.querySelector(`bit-toast`);return e||(e=document.createElement(`bit-toast`),document.body.appendChild(e)),e},l={add(e){return c().add(e)},clear(){c().clear()},configure(e){let t=c();e.position&&t.setAttribute(`position`,e.position),e.max!=null&&t.setAttribute(`max`,String(e.max))},async promise(e,t){let n=l.add({color:`primary`,dismissible:!1,duration:0,message:t.loading});try{let r=await e;return l.update(n,{color:`success`,dismissible:!0,duration:5e3,message:typeof t.success==`function`?t.success(r):t.success}),r}catch(e){throw l.update(n,{color:`error`,dismissible:!0,duration:5e3,message:typeof t.error==`function`?t.error(e):t.error}),e}},remove(e){c().dismiss(e)},update(e,t){c().update(e,t)}};exports.TOAST_TAG=s,exports.toast=l;
+    `},styles:[n.reducedMotionMixin,i.default]}),c=()=>{let e=document.querySelector(`bit-toast`);return e||(e=document.createElement(`bit-toast`),document.body.appendChild(e)),e},l={add(e){return c().add(e)},clear(){c().clear()},configure(e){let t=c();e.position&&t.setAttribute(`position`,e.position),e.max!=null&&t.setAttribute(`max`,String(e.max))},async promise(e,t){let n=l.add({color:`primary`,dismissible:!1,duration:0,message:t.loading});try{let r=await e;return l.update(n,{color:`success`,dismissible:!0,duration:5e3,message:typeof t.success==`function`?t.success(r):t.success}),r}catch(e){throw l.update(n,{color:`error`,dismissible:!0,duration:5e3,message:typeof t.error==`function`?t.error(e):t.error}),e}},remove(e){c().dismiss(e)},update(e,t){c().update(e,t)}};exports.TOAST_TAG=s,exports.toast=l;
 //# sourceMappingURL=toast.cjs.map

package/dist/toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.cjs","names":[],"sources":["../src/feedback/toast/toast.ts"],"sourcesContent":["import { defineComponent, html, onMount, ref, signal } from '@vielzeug/craftit';\nimport { classes, each } from '@vielzeug/craftit/directives';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport componentStyles from './toast.css?inline';\n\n/** Toast container properties */\n\nexport type BitToastEvents = {\n  add: { id: string };\n  dismiss: { id: string };\n};\n\nexport type BitToastProps = {\n  max?: number;\n  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n};\n\n/** Individual toast notification */\nexport type ToastItem = {\n  actions?: Array<{\n    color?: ThemeColor;\n    label: string;\n    onClick?: () => void;\n    variant?: VisualVariant;\n  }>;\n  color?: ThemeColor;\n  dismissible?: boolean;\n  /** Auto-dismiss delay in ms. Set to 0 for persistent toasts (default: 5000) */\n  duration?: number;\n  heading?: string;\n  /** Show message and actions side-by-side (horizontal layout) */\n  horizontal?: boolean;\n  /** Auto-generated via crypto.randomUUID() if omitted */\n  id?: string;\n  message: string;\n  /** Metadata text (e.g. timestamp) shown in the alert meta slot */\n  meta?: string;\n  /** Called after the toast is fully dismissed and removed */\n  onDismiss?: () => void;\n  rounded?: RoundedSize | '';\n  size?: ComponentSize;\n  /**\n   * Urgency level for screen readers.\n   * - `'polite'` (default): uses `aria-live=\"polite\"` — announced after the user finishes their current action.\n   * - `'assertive'`: uses `aria-live=\"assertive\"` — interrupts the user immediately. Use only for critical errors.\n   */\n  urgency?: 'polite' | 'assertive';\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\ntype NormalizedToast = ToastItem & { id: string };\n\n/** Public API of the bit-toast element */\nexport interface ToastElement extends HTMLElement {\n  add: (toast: ToastItem) => string;\n  update: (id: string, updates: Partial<ToastItem>) => void;\n  dismiss: (id: string) => void;\n  clear: () => void;\n}\n\n/**\n * A toast notification container with Time Machine-style stacking animation.\n * Stacks up to 3 notifications with a 3D effect. Hover to expand all toasts.\n *\n * @element bit-toast\n *\n * @attr {string} position - 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n * @attr {number} max - Max toasts in DOM at once (default: 5)\n *\n * @fires add - When a toast is added `{ id }`\n * @fires dismiss - When a toast is dismissed `{ id }`\n *\n * @slot - Manually placed bit-alert elements\n *\n * @cssprop --toast-position - Position type (default: fixed)\n * @cssprop --toast-inset-top - Top inset\n * @cssprop --toast-inset-bottom - Bottom inset\n * @cssprop --toast-inset-left - Left inset\n * @cssprop --toast-inset-right - Right inset\n * @cssprop --toast-z-index - Z-index (default: 9999)\n * @cssprop --toast-max-width - Max width (default: 400px)\n * @cssprop --toast-gap - Gap between expanded toasts (default: 0.5rem)\n *\n * @example\n * ```html\n * <!-- Declarative: place once in HTML -->\n * <bit-toast position=\"bottom-right\"></bit-toast>\n *\n * <!-- Programmatic: use the singleton service -->\n * <script type=\"module\">\n *   import { toast } from '@vielzeug/buildit';\n *   toast.add({ message: 'Changes saved!', color: 'success' });\n * </script>\n * ```\n */\n/** Renders the actions slot for a toast item */\nfunction renderToastActions(toast: NormalizedToast, onDismiss: () => void) {\n  if (!toast.actions?.length) return '';\n\n  return html`\n    <div slot=\"actions\" class=\"toast-actions\">\n      ${toast.actions.map(\n        (action) => html`\n          <bit-button\n            size=\"sm\"\n            color=${action.color || toast.color || 'primary'}\n            variant=${action.variant || 'solid'}\n            @click=${() => {\n              action.onClick?.();\n              onDismiss();\n            }}\n            >${action.label}</bit-button\n          >\n        `,\n      )}\n    </div>\n  `;\n}\n\nexport const TOAST_TAG = defineComponent<BitToastProps, BitToastEvents>({\n  props: {\n    max: { default: 5 },\n    position: { default: 'bottom-right' },\n  },\n  setup({ emit, host, props }) {\n    const toasts = signal<NormalizedToast[]>([]);\n    const exitingIds = signal<Set<string>>(new Set());\n    const containerRef = ref<HTMLDivElement>();\n    const timers = new Map<\n      string,\n      {\n        remaining: number;\n        startedAt: number;\n        timeoutId: number;\n      }\n    >();\n    // Sequential dismiss queue — only one toast exits at a time so animations never overlap.\n    const dismissQueue: string[] = [];\n    let isDismissing = false;\n    const setExiting = (id: string, value: boolean) => {\n      const next = new Set(exitingIds.value);\n\n      if (value) next.add(id);\n      else next.delete(id);\n\n      exitingIds.value = next;\n    };\n    const scheduleRemoval = (id: string, duration: number) => {\n      const timeoutId = window.setTimeout(() => {\n        removeToast(id);\n        timers.delete(id);\n      }, duration);\n\n      timers.set(id, { remaining: duration, startedAt: Date.now(), timeoutId });\n    };\n    let isPaused = false;\n    const pauseTimers = () => {\n      if (isPaused) return;\n\n      isPaused = true;\n      for (const [id, t] of timers) {\n        clearTimeout(t.timeoutId);\n        timers.set(id, { ...t, remaining: Math.max(0, t.remaining - (Date.now() - t.startedAt)) });\n      }\n    };\n    const resumeTimers = () => {\n      if (!isPaused) return;\n\n      isPaused = false;\n      for (const [id, t] of timers) {\n        if (t.remaining <= 0) continue;\n\n        scheduleRemoval(id, t.remaining);\n      }\n    };\n    const addToast = (toast: ToastItem): string => {\n      const id = toast.id || crypto.randomUUID();\n      const item: NormalizedToast = { dismissible: true, duration: 5000, ...toast, id };\n\n      toasts.value = [...toasts.value, item].slice(-(props.max.value ?? 5));\n      emit('add', { id });\n\n      if (item.duration! > 0) scheduleRemoval(id, item.duration!);\n\n      return id;\n    };\n    const removeToast = (id: string) => {\n      // Cancel the auto-dismiss timer if one is running.\n      const timer = timers.get(id);\n\n      if (timer) {\n        clearTimeout(timer.timeoutId);\n        timers.delete(id);\n      }\n\n      // Skip if already exiting or already queued.\n      if (exitingIds.value.has(id) || dismissQueue.includes(id)) return;\n\n      if (isDismissing) {\n        dismissQueue.push(id);\n\n        return;\n      }\n\n      isDismissing = true;\n      executeRemoval(id);\n    };\n    // Internal: actually animate and remove. Always called from processNextInQueue or directly\n    // when the queue is empty.\n    const executeRemoval = (id: string) => {\n      // Guard: could have been removed by clearAll between queue entry and execution.\n      if (exitingIds.value.has(id)) {\n        processNextInQueue();\n\n        return;\n      }\n\n      const item = toasts.value.find((t) => t.id === id);\n      const wrapper = containerRef.value?.querySelector<HTMLElement>(`[data-toast-id=\"${id}\"]`);\n      const finalize = () => {\n        setExiting(id, false);\n        toasts.value = toasts.value.filter((t) => t.id !== id);\n        item?.onDismiss?.();\n        emit('dismiss', { id });\n        processNextInQueue();\n      };\n\n      if (wrapper) {\n        setExiting(id, true);\n        awaitExit(wrapper, finalize);\n      } else {\n        finalize();\n      }\n    };\n    const processNextInQueue = () => {\n      if (dismissQueue.length === 0) {\n        isDismissing = false;\n\n        return;\n      }\n\n      const nextId = dismissQueue.shift()!;\n\n      executeRemoval(nextId);\n    };\n    const updateToast = (id: string, updates: Partial<ToastItem>) => {\n      toasts.value = toasts.value.map((t) => (t.id === id ? { ...t, ...updates, id } : t));\n\n      if (updates.duration === undefined) return;\n\n      const timer = timers.get(id);\n\n      if (timer) clearTimeout(timer.timeoutId);\n\n      timers.delete(id);\n\n      if (updates.duration > 0) scheduleRemoval(id, updates.duration);\n    };\n    const clearAll = () => {\n      for (const [, t] of timers) clearTimeout(t.timeoutId);\n      timers.clear();\n      // Drain any pending queue entries and replace with the full current list so\n      // they exit one-by-one in order.\n      dismissQueue.length = 0;\n\n      const ids = toasts.value.map((t) => t.id).filter((id) => !exitingIds.value.has(id));\n\n      if (!ids.length) return;\n\n      dismissQueue.push(...ids);\n\n      if (!isDismissing) processNextInQueue();\n    };\n\n    onMount(() => {\n      const el = host as ToastElement;\n\n      el.add = addToast;\n      el.update = updateToast;\n      el.dismiss = removeToast;\n      el.clear = clearAll;\n    });\n\n    const urgencyOf = (t: NormalizedToast) => t.urgency ?? (t.color === 'error' ? 'assertive' : 'polite');\n    let focusPaused = false;\n    let hoverPaused = false;\n    const maybePause = () => pauseTimers();\n    const maybeResume = () => {\n      if (!focusPaused && !hoverPaused) resumeTimers();\n    };\n    const setHovered = (hovered: boolean) => {\n      hoverPaused = hovered;\n      host.classList.toggle('hovered', hovered);\n\n      if (hovered) maybePause();\n      else maybeResume();\n    };\n    const renderToastItem = (toast: NormalizedToast) => html`\n      <div\n        class=${classes({ exiting: () => exitingIds.value.has(toast.id), 'toast-wrapper': true })}\n        data-toast-id=${toast.id}\n        part=\"toast-wrapper\">\n        <bit-alert\n          color=${toast.color || (toast.urgency === 'assertive' ? 'error' : 'primary')}\n          variant=${toast.variant || 'solid'}\n          size=${toast.size || 'md'}\n          rounded=${toast.rounded || 'md'}\n          ?dismissible=${toast.dismissible}\n          ?horizontal=${toast.horizontal}\n          heading=${toast.heading || ''}\n          @dismiss=${() => removeToast(toast.id)}>\n          ${toast.meta ? html`<span slot=\"meta\">${toast.meta}</span>` : ''} ${toast.message}\n          ${renderToastActions(toast, () => removeToast(toast.id))}\n        </bit-alert>\n      </div>\n    `;\n\n    return html`\n      <div\n        class=\"toast-container\"\n        ref=${containerRef}\n        @pointerenter=${() => setHovered(true)}\n        @pointerleave=${() => setHovered(false)}\n        @focusin=${() => {\n          focusPaused = true;\n          maybePause();\n        }}\n        @focusout=${() => {\n          focusPaused = false;\n          maybeResume();\n        }}\n        part=\"container\">\n        <!-- Polite live region: normal informational toasts -->\n        <div\n          role=\"region\"\n          aria-live=\"polite\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Notifications\"\n          class=\"toast-live-region\">\n          ${each(() => toasts.value.filter((t) => urgencyOf(t) === 'polite'), renderToastItem, undefined, {\n            key: (toast) => toast.id,\n          })}\n        </div>\n        <!-- Assertive live region: critical errors that interrupt immediately -->\n        <div\n          role=\"region\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Critical notifications\"\n          class=\"toast-live-region\">\n          ${each(() => toasts.value.filter((t) => urgencyOf(t) === 'assertive'), renderToastItem, undefined, {\n            key: (toast) => toast.id,\n          })}\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n  tag: 'bit-toast',\n});\n\n// ─── Singleton toast service ─────────────────────────────────────────────────\n\nconst getHost = (): ToastElement => {\n  let el = document.querySelector<ToastElement>('bit-toast');\n\n  if (!el) {\n    el = document.createElement('bit-toast') as ToastElement;\n    document.body.appendChild(el);\n  }\n\n  return el;\n};\n\n/**\n * Singleton service for triggering toasts without direct DOM references.\n *\n * @example\n * ```ts\n * import { toast } from '@vielzeug/buildit';\n *\n * toast.add({ message: 'Saved!', color: 'success' });\n *\n * const id = toast.add({ message: 'Uploading…', duration: 0, dismissible: false });\n * toast.update(id, { message: 'Done!', color: 'success', duration: 3000, dismissible: true });\n *\n * await toast.promise(uploadFile(), {\n *   loading: 'Uploading…',\n *   success: (url) => `Uploaded to ${url}`,\n *   error: 'Upload failed',\n * });\n * ```\n */\nexport const toast = {\n  /** Add a toast and return its id */\n  add(item: ToastItem): string {\n    return getHost().add(item);\n  },\n\n  /** Dismiss all toasts (animated) */\n  clear(): void {\n    getHost().clear();\n  },\n  /** Configure the auto-created container. Call before the first `add()` if the defaults need to change. */\n  configure(config: BitToastProps): void {\n    const el = getHost();\n\n    if (config.position) el.setAttribute('position', config.position);\n\n    if (config.max != null) el.setAttribute('max', String(config.max));\n  },\n\n  /**\n   * Shows a loading toast tied to a promise.\n   * Updates to success/error when the promise settles.\n   */\n  async promise<T>(\n    promise: Promise<T>,\n    messages: {\n      error: string | ((err: unknown) => string);\n      loading: string;\n      success: string | ((data: T) => string);\n    },\n  ): Promise<T> {\n    const id = toast.add({ color: 'primary', dismissible: false, duration: 0, message: messages.loading });\n\n    try {\n      const data = await promise;\n\n      toast.update(id, {\n        color: 'success',\n        dismissible: true,\n        duration: 5000,\n        message: typeof messages.success === 'function' ? messages.success(data) : messages.success,\n      });\n\n      return data;\n    } catch (err) {\n      toast.update(id, {\n        color: 'error',\n        dismissible: true,\n        duration: 5000,\n        message: typeof messages.error === 'function' ? messages.error(err) : messages.error,\n      });\n      throw err;\n    }\n  },\n\n  /** Dismiss a toast by id */\n  remove(id: string): void {\n    getHost().dismiss(id);\n  },\n\n  /** Update an existing toast in-place */\n  update(id: string, updates: Partial<ToastItem>): void {\n    getHost().update(id, updates);\n  },\n};\n"],"mappings":"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"}
+{"version":3,"file":"toast.cjs","names":[],"sources":["../src/feedback/toast/toast.ts"],"sourcesContent":["import { define, html, onMount, ref, signal } from '@vielzeug/craftit';\nimport { classes, each } from '@vielzeug/craftit/directives';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport componentStyles from './toast.css?inline';\n\n/** Toast container properties */\n\nexport type BitToastEvents = {\n  add: { id: string };\n  dismiss: { id: string };\n};\n\nexport type BitToastProps = {\n  max?: number;\n  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n};\n\n/** Individual toast notification */\nexport type ToastItem = {\n  actions?: Array<{\n    color?: ThemeColor;\n    label: string;\n    onClick?: () => void;\n    variant?: VisualVariant;\n  }>;\n  color?: ThemeColor;\n  dismissible?: boolean;\n  /** Auto-dismiss delay in ms. Set to 0 for persistent toasts (default: 5000) */\n  duration?: number;\n  heading?: string;\n  /** Show message and actions side-by-side (horizontal layout) */\n  horizontal?: boolean;\n  /** Auto-generated via crypto.randomUUID() if omitted */\n  id?: string;\n  message: string;\n  /** Metadata text (e.g. timestamp) shown in the alert meta slot */\n  meta?: string;\n  /** Called after the toast is fully dismissed and removed */\n  onDismiss?: () => void;\n  rounded?: RoundedSize | '';\n  size?: ComponentSize;\n  /**\n   * Urgency level for screen readers.\n   * - `'polite'` (default): uses `aria-live=\"polite\"` — announced after the user finishes their current action.\n   * - `'assertive'`: uses `aria-live=\"assertive\"` — interrupts the user immediately. Use only for critical errors.\n   */\n  urgency?: 'polite' | 'assertive';\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\ntype NormalizedToast = ToastItem & { id: string };\n\n/** Public API of the bit-toast element */\nexport interface ToastElement extends HTMLElement {\n  add: (toast: ToastItem) => string;\n  update: (id: string, updates: Partial<ToastItem>) => void;\n  dismiss: (id: string) => void;\n  clear: () => void;\n}\n\n/**\n * A toast notification container with Time Machine-style stacking animation.\n * Stacks up to 3 notifications with a 3D effect. Hover to expand all toasts.\n *\n * @element bit-toast\n *\n * @attr {string} position - 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n * @attr {number} max - Max toasts in DOM at once (default: 5)\n *\n * @fires add - When a toast is added `{ id }`\n * @fires dismiss - When a toast is dismissed `{ id }`\n *\n * @slot - Manually placed bit-alert elements\n *\n * @cssprop --toast-position - Position type (default: fixed)\n * @cssprop --toast-inset-top - Top inset\n * @cssprop --toast-inset-bottom - Bottom inset\n * @cssprop --toast-inset-left - Left inset\n * @cssprop --toast-inset-right - Right inset\n * @cssprop --toast-z-index - Z-index (default: 9999)\n * @cssprop --toast-max-width - Max width (default: 400px)\n * @cssprop --toast-gap - Gap between expanded toasts (default: 0.5rem)\n *\n * @example\n * ```html\n * <!-- Declarative: place once in HTML -->\n * <bit-toast position=\"bottom-right\"></bit-toast>\n *\n * <!-- Programmatic: use the singleton service -->\n * <script type=\"module\">\n *   import { toast } from '@vielzeug/buildit';\n *   toast.add({ message: 'Changes saved!', color: 'success' });\n * </script>\n * ```\n */\n/** Renders the actions slot for a toast item */\nfunction renderToastActions(toast: NormalizedToast, onDismiss: () => void) {\n  if (!toast.actions?.length) return '';\n\n  return html`\n    <div slot=\"actions\" class=\"toast-actions\">\n      ${toast.actions.map(\n        (action) => html`\n          <bit-button\n            size=\"sm\"\n            color=${action.color || toast.color || 'primary'}\n            variant=${action.variant || 'solid'}\n            @click=${() => {\n              action.onClick?.();\n              onDismiss();\n            }}\n            >${action.label}</bit-button\n          >\n        `,\n      )}\n    </div>\n  `;\n}\n\nexport const TOAST_TAG = define<BitToastProps, BitToastEvents>('bit-toast', {\n  props: {\n    max: 5,\n    position: 'bottom-right',\n  },\n  setup({ emit, host, props }) {\n    const toasts = signal<NormalizedToast[]>([]);\n    const exitingIds = signal<Set<string>>(new Set());\n    const containerRef = ref<HTMLDivElement>();\n\n    // Timer tracking: maps id → { remaining, startedAt, timeoutId }\n    const timers = new Map<string, { remaining: number; startedAt: number; timeoutId: number }>();\n\n    // Sequentially dismiss queue — only one toast exits at a time so animations never overlap.\n    const dismissQueue: string[] = [];\n    let isDismissing = false;\n\n    // Pause state: track focus and hover separately to resume only when both are clear\n    let focusPaused = false;\n    let hoverPaused = false;\n\n    // ────────────────────────────────────────────────────────────────────────────────\n    // Core State Mutations\n    // ────────────────────────────────────────────────────────────────────────────────\n\n    const setExiting = (id: string, value: boolean) => {\n      const next = new Set(exitingIds.value);\n\n      if (value) next.add(id);\n      else next.delete(id);\n\n      exitingIds.value = next;\n    };\n\n    // ────────────────────────────────────────────────────────────────────────────────\n    // Timer Management (pause/resume for hover/focus)\n    // ────────────────────────────────────────────────────────────────────────────────\n\n    const pauseTimers = () => {\n      for (const [id, t] of timers) {\n        clearTimeout(t.timeoutId);\n        timers.set(id, { ...t, remaining: Math.max(0, t.remaining - (Date.now() - t.startedAt)) });\n      }\n    };\n\n    const resumeTimers = () => {\n      for (const [id, t] of timers) {\n        if (t.remaining <= 0) continue;\n\n        const timeoutId = window.setTimeout(() => removeToast(id), t.remaining);\n\n        timers.set(id, { ...t, remaining: t.remaining, timeoutId });\n      }\n    };\n\n    const maybeUpdatePauseState = () => {\n      if (focusPaused || hoverPaused) pauseTimers();\n      else resumeTimers();\n    };\n\n    // ────────────────────────────────────────────────────────────────────────────────\n    // Toast Lifecycle\n    // ────────────────────────────────────────────────────────────────────────────────\n\n    const scheduleRemoval = (id: string, duration: number) => {\n      if (duration <= 0) return;\n\n      const timeoutId = window.setTimeout(() => removeToast(id), duration);\n\n      timers.set(id, { remaining: duration, startedAt: Date.now(), timeoutId });\n    };\n\n    const addToast = (toast: ToastItem): string => {\n      const id = toast.id || crypto.randomUUID();\n      const item: NormalizedToast = { dismissible: true, duration: 5000, ...toast, id };\n\n      toasts.value = [...toasts.value, item].slice(-(props.max ?? 5));\n      emit('add', { id });\n\n      if (item.duration! > 0) scheduleRemoval(id, item.duration!);\n\n      return id;\n    };\n\n    const removeToast = (id: string) => {\n      // Already exiting or queued; skip to avoid double-processing\n      if (exitingIds.value.has(id) || dismissQueue.includes(id)) return;\n\n      if (isDismissing) {\n        dismissQueue.push(id);\n\n        return;\n      }\n\n      isDismissing = true;\n\n      executeRemoval(id);\n    };\n\n    const executeRemoval = (id: string) => {\n      // Guard: could have been removed since queue entry\n      if (exitingIds.value.has(id)) {\n        processNextInQueue();\n\n        return;\n      }\n\n      const item = toasts.value.find((t) => t.id === id);\n      const wrapper = containerRef.value?.querySelector<HTMLElement>(`[data-toast-id=\"${id}\"]`);\n\n      const finalize = () => {\n        setExiting(id, false);\n        toasts.value = toasts.value.filter((t) => t.id !== id);\n\n        // Clean up timer\n        const timer = timers.get(id);\n\n        if (timer) clearTimeout(timer.timeoutId);\n\n        timers.delete(id);\n        item?.onDismiss?.();\n        emit('dismiss', { id });\n        processNextInQueue();\n      };\n\n      if (wrapper) {\n        setExiting(id, true);\n        awaitExit(wrapper, finalize);\n      } else {\n        finalize();\n      }\n    };\n\n    const processNextInQueue = () => {\n      if (dismissQueue.length === 0) {\n        isDismissing = false;\n\n        return;\n      }\n\n      const nextId = dismissQueue.shift()!;\n\n      executeRemoval(nextId);\n    };\n    const updateToast = (id: string, updates: Partial<ToastItem>) => {\n      toasts.value = toasts.value.map((t) => (t.id === id ? { ...t, ...updates, id } : t));\n\n      if (updates.duration === undefined) return;\n\n      const timer = timers.get(id);\n\n      if (timer) clearTimeout(timer.timeoutId);\n\n      timers.delete(id);\n\n      if (updates.duration > 0) scheduleRemoval(id, updates.duration);\n    };\n    const clearAll = () => {\n      for (const [, t] of timers) clearTimeout(t.timeoutId);\n      timers.clear();\n      // Drain any pending queue entries and replace with the full current list so\n      // they exit one-by-one in order.\n      dismissQueue.length = 0;\n\n      const ids = toasts.value.map((t) => t.id).filter((id) => !exitingIds.value.has(id));\n\n      if (!ids.length) return;\n\n      dismissQueue.push(...ids);\n\n      if (!isDismissing) processNextInQueue();\n    };\n\n    onMount(() => {\n      const el = host.el as ToastElement;\n\n      el.add = addToast;\n      el.update = updateToast;\n      el.dismiss = removeToast;\n      el.clear = clearAll;\n    });\n\n    const urgencyOf = (t: NormalizedToast) => t.urgency ?? (t.color === 'error' ? 'assertive' : 'polite');\n\n    const setHovered = (hovered: boolean) => {\n      hoverPaused = hovered;\n      host.el.classList.toggle('hovered', hovered);\n      maybeUpdatePauseState();\n    };\n    const renderToastItem = (toast: NormalizedToast) => html`\n      <div\n        class=${classes({ exiting: () => exitingIds.value.has(toast.id), 'toast-wrapper': true })}\n        data-toast-id=${toast.id}\n        part=\"toast-wrapper\">\n        <bit-alert\n          color=${toast.color || (toast.urgency === 'assertive' ? 'error' : 'primary')}\n          variant=${toast.variant || 'solid'}\n          size=${toast.size || 'md'}\n          rounded=${toast.rounded || 'md'}\n          ?dismissible=${toast.dismissible}\n          ?horizontal=${toast.horizontal}\n          heading=${toast.heading || ''}\n          @dismiss=${() => removeToast(toast.id)}>\n          ${toast.meta ? html`<span slot=\"meta\">${toast.meta}</span>` : ''} ${toast.message}\n          ${renderToastActions(toast, () => removeToast(toast.id))}\n        </bit-alert>\n      </div>\n    `;\n\n    return html`\n      <div\n        class=\"toast-container\"\n        ref=${containerRef}\n        @pointerenter=${() => setHovered(true)}\n        @pointerleave=${() => setHovered(false)}\n        @focusin=${() => {\n          focusPaused = true;\n          maybeUpdatePauseState();\n        }}\n        @focusout=${() => {\n          focusPaused = false;\n          maybeUpdatePauseState();\n        }}\n        part=\"container\">\n        <!-- Polite live region: normal informational toasts -->\n        <div\n          role=\"region\"\n          aria-live=\"polite\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Notifications\"\n          class=\"toast-live-region\">\n          ${each(() => toasts.value.filter((t) => urgencyOf(t) === 'polite'), {\n            key: (toast) => toast.id,\n            render: renderToastItem,\n          })}\n        </div>\n        <!-- Assertive live region: critical errors that interrupt immediately -->\n        <div\n          role=\"region\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Critical notifications\"\n          class=\"toast-live-region\">\n          ${each(() => toasts.value.filter((t) => urgencyOf(t) === 'assertive'), {\n            key: (toast) => toast.id,\n            render: renderToastItem,\n          })}\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n\n// ─── Singleton toast service ─────────────────────────────────────────────────\n\nconst getHost = (): ToastElement => {\n  let el = document.querySelector<ToastElement>('bit-toast');\n\n  if (!el) {\n    el = document.createElement('bit-toast') as ToastElement;\n    document.body.appendChild(el);\n  }\n\n  return el;\n};\n\n/**\n * Singleton service for triggering toasts without direct DOM references.\n *\n * @example\n * ```ts\n * import { toast } from '@vielzeug/buildit';\n *\n * toast.add({ message: 'Saved!', color: 'success' });\n *\n * const id = toast.add({ message: 'Uploading…', duration: 0, dismissible: false });\n * toast.update(id, { message: 'Done!', color: 'success', duration: 3000, dismissible: true });\n *\n * await toast.promise(uploadFile(), {\n *   loading: 'Uploading…',\n *   success: (url) => `Uploaded to ${url}`,\n *   error: 'Upload failed',\n * });\n * ```\n */\nexport const toast = {\n  /** Add a toast and return its id */\n  add(item: ToastItem): string {\n    return getHost().add(item);\n  },\n\n  /** Dismiss all toasts (animated) */\n  clear(): void {\n    getHost().clear();\n  },\n  /** Configure the auto-created container. Call before the first `add()` if the defaults need to change. */\n  configure(config: BitToastProps): void {\n    const el = getHost();\n\n    if (config.position) el.setAttribute('position', config.position);\n\n    if (config.max != null) el.setAttribute('max', String(config.max));\n  },\n\n  /**\n   * Shows a loading toast tied to a promise.\n   * Updates to success/error when the promise settles.\n   */\n  async promise<T>(\n    promise: Promise<T>,\n    messages: {\n      error: string | ((err: unknown) => string);\n      loading: string;\n      success: string | ((data: T) => string);\n    },\n  ): Promise<T> {\n    const id = toast.add({ color: 'primary', dismissible: false, duration: 0, message: messages.loading });\n\n    try {\n      const data = await promise;\n\n      toast.update(id, {\n        color: 'success',\n        dismissible: true,\n        duration: 5000,\n        message: typeof messages.success === 'function' ? messages.success(data) : messages.success,\n      });\n\n      return data;\n    } catch (err) {\n      toast.update(id, {\n        color: 'error',\n        dismissible: true,\n        duration: 5000,\n        message: typeof messages.error === 'function' ? messages.error(err) : messages.error,\n      });\n      throw err;\n    }\n  },\n\n  /** Dismiss a toast by id */\n  remove(id: string): void {\n    getHost().dismiss(id);\n  },\n\n  /** Update an existing toast in-place */\n  update(id: string, updates: Partial<ToastItem>): void {\n    getHost().update(id, updates);\n  },\n};\n"],"mappings":"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"}