@vielzeug/buildit 2.0.0

package/dist/textarea.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/states.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`),r=require(`./styles/index.cjs`),i=require(`./craftit/dist/directives/attr.cjs`);require(`./craftit/dist/directives/index.cjs`);const a=require(`./inputs/shared/utils/field-values.cjs`),o=require(`./inputs/shared/dom-sync/field-sync.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const s=require(`./inputs/shared/composables/use-text-field.cjs`);require(`./inputs/shared/composables/index.cjs`);const c=require(`./inputs/shared/design-presets.cjs`),l=require(`./inputs/textarea/textarea.css?inline.cjs`);let u=require(`@vielzeug/craftit`);var d=(0,u.defineComponent)({formAssociated:!0,props:{"auto-resize":{default:!1},color:{default:void 0},disabled:{default:!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}},setup({emit:e,props:t}){let n=s.useTextField(t,`textarea`),{fieldId:r,helperId:c,labelInsetId:l,labelInsetRef:d,labelOutsideId:f,labelOutsideRef:p,valueSignal:m}=n,h=(0,u.computed)(()=>t.maxlength.value),g=(0,u.ref)(),_=(0,u.ref)(),v=(0,u.ref)();return(0,u.onMount)(()=>{let r=g.value;if(!r)return;let i=()=>{!t[`auto-resize`].value||!r||(r.style.height=`auto`,r.style.height=`${r.scrollHeight}px`)};n.mountLabelSync(),(0,u.effect)(()=>{let e=a.parsePositiveNumber(t.rows.value);e==null?r.removeAttribute(`rows`):r.rows=e;let n=a.parsePositiveNumber(h.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`}),o.syncMergedAssistive({error:()=>t.error.value,helper:()=>t.helper.value,ref:_}),o.syncCounter({count:(0,u.computed)(()=>m.value.length),format:`merged`,maxLength:h,ref:v}),import(`@vielzeug/craftit`).then(({aria:e})=>{e(r,{describedby:()=>t.error.value?n.errorId:c,invalid:()=>!!t.error.value,labelledby:()=>t[`label-placement`].value===`outside`?f:l})}),o.setupFieldEvents(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)}),u.html`
+      <div class="textarea-wrapper">
+        <label class="label-outside" for="${r}" id="${f}" ref=${p} hidden></label>
+        <div class="field">
+          <label class="label-inset" for="${r}" id="${l}" ref=${d} hidden></label>
+          <textarea
+            ref=${g}
+            id="${r}"
+            ${i.t({disabled:t.disabled,name:t.name,placeholder:t.placeholder,readOnly:t.readonly,required:t.required,value:m})}
+            aria-describedby="${c}"></textarea>
+        </div>
+        <span class="counter" aria-live="polite" ref=${v} hidden></span>
+        <div id="${c}" class="helper-text" aria-live="polite" ref=${_} hidden></div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[...r.formFieldMixins,e.sizeVariantMixin(c.TEXTAREA_SIZE_PRESET),t.disabledLoadingMixin(),n.forcedColorsFocusMixin(`textarea`),l.default],tag:`bit-textarea`});exports.TEXTAREA_TAG=d;
+//# sourceMappingURL=textarea.cjs.map

package/dist/textarea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.cjs","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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"}

package/dist/textarea.js

@@ -0,0 +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 "./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({
+	formAssociated: !0,
+	props: {
+		"auto-resize": { default: !1 },
+		color: { default: void 0 },
+		disabled: { default: !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 }
+	},
+	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
+				});
+			}), 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`
+      <div class="textarea-wrapper">
+        <label class="label-outside" for="${r}" id="${v}" ref=${y} hidden></label>
+        <div class="field">
+          <label class="label-inset" for="${r}" id="${d}" ref=${p} 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>
+        </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"
+});
+//#endregion
+export { v as TEXTAREA_TAG };
+
+//# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -0,0 +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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"}

package/dist/toast.cjs

@@ -0,0 +1,63 @@
+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`
+    <div slot="actions" class="toast-actions">
+      ${e.actions.map(n=>a.html`
+          <bit-button
+            size="sm"
+            color=${n.color||e.color||`primary`}
+            variant=${n.variant||`solid`}
+            @click=${()=>{n.onClick?.(),t()}}
+            >${n.label}</bit-button
+          >
+        `)}
+    </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`
+      <div
+        class=${t.n({exiting:()=>l.value.has(e.id),"toast-wrapper":!0})}
+        data-toast-id=${e.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))}
+        </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()}}
+        part="container">
+        <!-- Polite live region: normal informational toasts -->
+        <div
+          role="region"
+          aria-live="polite"
+          aria-relevant="additions removals"
+          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})}
+        </div>
+        <!-- Assertive live region: critical errors that interrupt immediately -->
+        <div
+          role="region"
+          aria-live="assertive"
+          aria-relevant="additions removals"
+          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})}
+        </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;
+//# sourceMappingURL=toast.cjs.map

package/dist/toast.cjs.map

@@ -0,0 +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":"ibAoGA,SAAS,EAAmB,EAAwB,EAAuB,CAGzE,OAFK,EAAM,SAAS,OAEb,EAAA,IAAI;;QAEL,EAAM,QAAQ,IACb,GAAW,EAAA,IAAI;;;oBAGJ,EAAO,OAAS,EAAM,OAAS,UAAU;sBACvC,EAAO,SAAW,QAAQ;yBACrB,CACb,EAAO,WAAW,CAClB,GAAW,EACX;eACC,EAAO,MAAM;;UAGrB,CAAC;;IAjB6B,GAsBrC,IAAa,GAAA,EAAA,EAAA,iBAA2D,CACtE,MAAO,CACL,IAAK,CAAE,QAAS,EAAG,CACnB,SAAU,CAAE,QAAS,eAAgB,CACtC,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,QAAmC,EAAE,CAAC,CACtC,GAAA,EAAA,EAAA,QAAiC,IAAI,IAAM,CAC3C,GAAA,EAAA,EAAA,MAAoC,CACpC,EAAS,IAAI,IASb,EAAyB,EAAE,CAC7B,EAAe,GACb,GAAc,EAAY,IAAmB,CACjD,IAAM,EAAO,IAAI,IAAI,EAAW,MAAM,CAElC,EAAO,EAAK,IAAI,EAAG,CAClB,EAAK,OAAO,EAAG,CAEpB,EAAW,MAAQ,GAEf,GAAmB,EAAY,IAAqB,CACxD,IAAM,EAAY,OAAO,eAAiB,CACxC,EAAY,EAAG,CACf,EAAO,OAAO,EAAG,EAChB,EAAS,CAEZ,EAAO,IAAI,EAAI,CAAE,UAAW,EAAU,UAAW,KAAK,KAAK,CAAE,YAAW,CAAC,EAEvE,EAAW,GACT,MAAoB,CACpB,MAEJ,GAAW,GACX,IAAK,GAAM,CAAC,EAAI,KAAM,EACpB,aAAa,EAAE,UAAU,CACzB,EAAO,IAAI,EAAI,CAAE,GAAG,EAAG,UAAW,KAAK,IAAI,EAAG,EAAE,WAAa,KAAK,KAAK,CAAG,EAAE,WAAW,CAAE,CAAC,GAGxF,MAAqB,CACpB,KAEL,GAAW,GACX,IAAK,GAAM,CAAC,EAAI,KAAM,EAChB,EAAE,WAAa,GAEnB,EAAgB,EAAI,EAAE,UAAU,GAG9B,EAAY,GAA6B,CAC7C,IAAM,EAAK,EAAM,IAAM,OAAO,YAAY,CACpC,EAAwB,CAAE,YAAa,GAAM,SAAU,IAAM,GAAG,EAAO,KAAI,CAOjF,MALA,GAAO,MAAQ,CAAC,GAAG,EAAO,MAAO,EAAK,CAAC,MAAM,EAAE,EAAM,IAAI,OAAS,GAAG,CACrE,EAAK,MAAO,CAAE,KAAI,CAAC,CAEf,EAAK,SAAY,GAAG,EAAgB,EAAI,EAAK,SAAU,CAEpD,GAEH,EAAe,GAAe,CAElC,IAAM,EAAQ,EAAO,IAAI,EAAG,CAE5B,GAAI,IACF,aAAa,EAAM,UAAU,CAC7B,EAAO,OAAO,EAAG,EAIf,IAAW,MAAM,IAAI,EAAG,EAAI,EAAa,SAAS,EAAG,EAEzD,IAAI,EAAc,CAChB,EAAa,KAAK,EAAG,CAErB,OAGF,EAAe,GACf,EAAe,EAAG,GAId,EAAkB,GAAe,CAErC,GAAI,EAAW,MAAM,IAAI,EAAG,CAAE,CAC5B,GAAoB,CAEpB,OAGF,IAAM,EAAO,EAAO,MAAM,KAAM,GAAM,EAAE,KAAO,EAAG,CAC5C,EAAU,EAAa,OAAO,cAA2B,mBAAmB,EAAG,IAAI,CACnF,MAAiB,CACrB,EAAW,EAAI,GAAM,CACrB,EAAO,MAAQ,EAAO,MAAM,OAAQ,GAAM,EAAE,KAAO,EAAG,CACtD,GAAM,aAAa,CACnB,EAAK,UAAW,CAAE,KAAI,CAAC,CACvB,GAAoB,EAGlB,GACF,EAAW,EAAI,GAAK,CACpB,EAAA,UAAU,EAAS,EAAS,EAE5B,GAAU,EAGR,MAA2B,CAC/B,GAAI,EAAa,SAAW,EAAG,CAC7B,EAAe,GAEf,OAKF,EAFe,EAAa,OAAO,CAEb,EAElB,GAAe,EAAY,IAAgC,CAG/D,GAFA,EAAO,MAAQ,EAAO,MAAM,IAAK,GAAO,EAAE,KAAO,EAAK,CAAE,GAAG,EAAG,GAAG,EAAS,KAAI,CAAG,EAAG,CAEhF,EAAQ,WAAa,IAAA,GAAW,OAEpC,IAAM,EAAQ,EAAO,IAAI,EAAG,CAExB,GAAO,aAAa,EAAM,UAAU,CAExC,EAAO,OAAO,EAAG,CAEb,EAAQ,SAAW,GAAG,EAAgB,EAAI,EAAQ,SAAS,EAE3D,MAAiB,CACrB,IAAK,GAAM,EAAG,KAAM,EAAQ,aAAa,EAAE,UAAU,CACrD,EAAO,OAAO,CAGd,EAAa,OAAS,EAEtB,IAAM,EAAM,EAAO,MAAM,IAAK,GAAM,EAAE,GAAG,CAAC,OAAQ,GAAO,CAAC,EAAW,MAAM,IAAI,EAAG,CAAC,CAE9E,EAAI,SAET,EAAa,KAAK,GAAG,EAAI,CAEpB,GAAc,GAAoB,IAGzC,EAAA,EAAA,aAAc,CACZ,IAAM,EAAK,EAEX,EAAG,IAAM,EACT,EAAG,OAAS,EACZ,EAAG,QAAU,EACb,EAAG,MAAQ,GACX,CAEF,IAAM,EAAa,GAAuB,EAAE,UAAY,EAAE,QAAU,QAAU,YAAc,UACxF,EAAc,GACd,EAAc,GACZ,MAAmB,GAAa,CAChC,MAAoB,CACpB,CAAC,GAAe,CAAC,GAAa,GAAc,EAE5C,EAAc,GAAqB,CACvC,EAAc,EACd,EAAK,UAAU,OAAO,UAAW,EAAQ,CAErC,EAAS,GAAY,CACpB,GAAa,EAEd,EAAmB,GAA2B,EAAA,IAAI;;gBAE5C,EAAA,EAAQ,CAAE,YAAe,EAAW,MAAM,IAAI,EAAM,GAAG,CAAE,gBAAiB,GAAM,CAAC,CAAC;wBAC1E,EAAM,GAAG;;;kBAGf,EAAM,QAAU,EAAM,UAAY,YAAc,QAAU,WAAW;oBACnE,EAAM,SAAW,QAAQ;iBAC5B,EAAM,MAAQ,KAAK;oBAChB,EAAM,SAAW,KAAK;yBACjB,EAAM,YAAY;wBACnB,EAAM,WAAW;oBACrB,EAAM,SAAW,GAAG;yBACb,EAAY,EAAM,GAAG,CAAC;YACrC,EAAM,KAAO,EAAA,IAAI,qBAAqB,EAAM,KAAK,SAAW,GAAG,GAAG,EAAM,QAAQ;YAChF,EAAmB,MAAa,EAAY,EAAM,GAAG,CAAC,CAAC;;;MAK/D,MAAO,GAAA,IAAI;;;cAGD,EAAa;4BACG,EAAW,GAAK,CAAC;4BACjB,EAAW,GAAM,CAAC;uBACvB,CACf,EAAc,GACd,GAAY,EACZ;wBACgB,CAChB,EAAc,GACd,GAAa,EACb;;;;;;;;;;YAUE,EAAA,MAAW,EAAO,MAAM,OAAQ,GAAM,EAAU,EAAE,GAAK,SAAS,CAAE,EAAiB,IAAA,GAAW,CAC9F,IAAM,GAAU,EAAM,GACvB,CAAC,CAAC;;;;;;;;;;YAUD,EAAA,MAAW,EAAO,MAAM,OAAQ,GAAM,EAAU,EAAE,GAAK,YAAY,CAAE,EAAiB,IAAA,GAAW,CACjG,IAAM,GAAU,EAAM,GACvB,CAAC,CAAC;;;;OAMX,OAAQ,CAAC,EAAA,mBAAoB,EAAA,QAAgB,CAC7C,IAAK,YACN,CAAC,CAII,MAA8B,CAClC,IAAI,EAAK,SAAS,cAA4B,YAAY,CAO1D,OALK,IACH,EAAK,SAAS,cAAc,YAAY,CACxC,SAAS,KAAK,YAAY,EAAG,EAGxB,GAsBI,EAAQ,CAEnB,IAAI,EAAyB,CAC3B,OAAO,GAAS,CAAC,IAAI,EAAK,EAI5B,OAAc,CACZ,GAAS,CAAC,OAAO,EAGnB,UAAU,EAA6B,CACrC,IAAM,EAAK,GAAS,CAEhB,EAAO,UAAU,EAAG,aAAa,WAAY,EAAO,SAAS,CAE7D,EAAO,KAAO,MAAM,EAAG,aAAa,MAAO,OAAO,EAAO,IAAI,CAAC,EAOpE,MAAM,QACJ,EACA,EAKY,CACZ,IAAM,EAAK,EAAM,IAAI,CAAE,MAAO,UAAW,YAAa,GAAO,SAAU,EAAG,QAAS,EAAS,QAAS,CAAC,CAEtG,GAAI,CACF,IAAM,EAAO,MAAM,EASnB,OAPA,EAAM,OAAO,EAAI,CACf,MAAO,UACP,YAAa,GACb,SAAU,IACV,QAAS,OAAO,EAAS,SAAY,WAAa,EAAS,QAAQ,EAAK,CAAG,EAAS,QACrF,CAAC,CAEK,QACA,EAAK,CAOZ,MANA,EAAM,OAAO,EAAI,CACf,MAAO,QACP,YAAa,GACb,SAAU,IACV,QAAS,OAAO,EAAS,OAAU,WAAa,EAAS,MAAM,EAAI,CAAG,EAAS,MAChF,CAAC,CACI,IAKV,OAAO,EAAkB,CACvB,GAAS,CAAC,QAAQ,EAAG,EAIvB,OAAO,EAAY,EAAmC,CACpD,GAAS,CAAC,OAAO,EAAI,EAAQ,EAEhC"}

package/dist/toast.js

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

package/dist/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","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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"}

package/dist/tooltip.cjs

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const t=require(`./overlay/tooltip/tooltip.css?inline.cjs`);let n=require(`@vielzeug/craftit`),r=require(`@vielzeug/floatit`);var i=8,a=4,o=(0,n.defineComponent)({props:{"close-delay":{default:0},content:{default:``},delay:{default:0},disabled:{default:!1},open:{default:void 0},placement:{default:`top`},size:{default:void 0},trigger:{default:`hover,focus`},variant:{default:void 0}},setup({host:e,props:t}){let o=(0,n.signal)(!1),s=(0,n.signal)(`top`),c=null,l=null,u=null,d=null,f=(0,n.createId)(`tooltip`),p=(0,n.computed)(()=>String(t.trigger.value).split(`,`).map(e=>e.trim()).filter(Boolean));function m(){return(e.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({flatten:!0})?.[0]??null}function h(){if(!d)return;let e=m();e&&(0,r.computePosition)(e,d,{middleware:[(0,r.offset)(i),(0,r.flip)(),(0,r.shift)({padding:6})],placement:t.placement.value}).then(({placement:e,x:t,y:n})=>{if(!d)return;let r=e.split(`-`)[0],i=r===`left`?t-a:t;d.style.left=`${i}px`,d.style.top=`${n}px`,s.value=r})}function g(){t.open.value!==void 0||t.disabled.value||!t.content.value&&!(((e.shadowRoot?.querySelector(`slot[name="content"]`))?.assignedNodes({flatten:!0}).length??0)>0)||(u&&=(clearTimeout(u),null),l&&clearTimeout(l),l=setTimeout(()=>{o.value=!0,d&&!d.matches(`:popover-open`)&&d.showPopover();let e=m();e&&d?(c?.(),c=(0,r.autoUpdate)(e,d,h)):requestAnimationFrame(()=>h())},Number(t.delay.value)||0))}function _(){if(t.open.value!==void 0)return;l&&=(clearTimeout(l),null);let e=Number(t[`close-delay`].value)||0;e>0?(u&&clearTimeout(u),u=setTimeout(()=>{u=null,v()},e)):v()}function v(){c?.(),c=null,o.value=!1,d?.matches(`:popover-open`)&&d.hidePopover()}function y(){o.value?_():g()}(0,n.onMount)(()=>{let i=e.shadowRoot?.querySelector(`slot:not([name])`);if(!i)return;let a=()=>{s();let e=i.assignedElements({flatten:!0})[0];if(!e)return;e.setAttribute(`aria-describedby`,f);let t=p.value;t.includes(`hover`)&&(e.addEventListener(`pointerenter`,g),e.addEventListener(`pointerleave`,_)),t.includes(`focus`)&&(e.addEventListener(`focusin`,g),e.addEventListener(`focusout`,_)),t.includes(`click`)&&e.addEventListener(`click`,y),document.addEventListener(`keydown`,b)},s=()=>{let e=i.assignedElements({flatten:!0})[0];e&&(e.removeAttribute(`aria-describedby`),e.removeEventListener(`pointerenter`,g),e.removeEventListener(`pointerleave`,_),e.removeEventListener(`focusin`,g),e.removeEventListener(`focusout`,_),e.removeEventListener(`click`,y),document.removeEventListener(`keydown`,b))};return(0,n.onSlotChange)(`default`,a),(0,n.watch)(t.open,e=>{if(e!=null)if(e){o.value=!0,d&&!d.matches(`:popover-open`)&&d.showPopover();let e=m();e&&d?(c?.(),c=(0,r.autoUpdate)(e,d,h)):requestAnimationFrame(()=>h())}else v()}),()=>{s(),l&&clearTimeout(l),u&&clearTimeout(u),c?.(),c=null,d?.matches(`:popover-open`)&&d.hidePopover()}});function b(e){e.key===`Escape`&&_()}return n.html`
+      <slot></slot>
+      <div
+        class="tooltip"
+        part="tooltip"
+        id="${f}"
+        role="tooltip"
+        popover="manual"
+        ref=${e=>{d=e}}
+        :data-placement="${s}"
+        :aria-hidden="${()=>String(!o.value)}">
+        <slot name="content">${()=>t.content.value}</slot>
+      </div>
+    `},styles:[e.forcedColorsMixin,t.default],tag:`bit-tooltip`});exports.TOOLTIP_TAG=o;
+//# sourceMappingURL=tooltip.cjs.map

package/dist/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/floatit';\n\nimport { computed, createId, defineComponent, html, onMount, onSlotChange, signal, watch } from '@vielzeug/craftit';\nimport { autoUpdate, computePosition, flip, offset, shift } from '@vielzeug/floatit';\n\nimport type { ComponentSize } from '../../types';\n\nimport { forcedColorsMixin } from '../../styles';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'hover' | 'focus' | 'click';\n\nconst TOOLTIP_OFFSET = 8; // gap from trigger to tooltip edge\nconst LEFT_GAP_COMPENSATION = 4; // left placement looks visually tighter in practice\n\nimport styles from './tooltip.css?inline';\n\n/** Tooltip component properties */\nexport type BitTooltipProps = {\n  /** Hide delay in ms (useful to keep tooltip open when moving focus between trigger and tooltip) */\n  'close-delay'?: number;\n  /** Tooltip text content */\n  content?: string;\n  /** Show delay in ms */\n  delay?: number;\n  /** Disable the tooltip */\n  disabled?: boolean;\n  /** Controlled open state. When provided, the tooltip acts as a controlled component and ignores trigger events for open/close. */\n  open?: boolean;\n  /** Preferred placement relative to trigger */\n  placement?: TooltipPlacement;\n  /** Tooltip size */\n  size?: ComponentSize;\n  /** Which trigger(s) show/hide the tooltip — comma-separated if multiple, e.g. \"hover,focus\" */\n  trigger?: string;\n  /** Visual variant: 'dark' (default) or 'light' */\n  variant?: 'dark' | 'light';\n};\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element bit-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')\n * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination\n * @attr {number} delay - Show delay in milliseconds (default: 0)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - 'dark' (default) | 'light'\n * @attr {boolean} disabled - Disable the tooltip\n *\n * @slot - Trigger element that the tooltip is anchored to\n * @slot content - Complex tooltip content (overrides the `content` attribute)\n *\n * @cssprop --tooltip-max-width - Max width of the tooltip bubble\n *\n * @example\n * ```html\n * <bit-tooltip content=\"Copy to clipboard\">\n *   <button>Copy</button>\n * </bit-tooltip>\n *\n * <bit-tooltip placement=\"right\" trigger=\"focus,hover\" content=\"Required field\">\n *   <input type=\"text\" />\n * </bit-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = defineComponent<BitTooltipProps>({\n  props: {\n    'close-delay': { default: 0 },\n    content: { default: '' },\n    delay: { default: 0 },\n    disabled: { default: false },\n    open: { default: undefined },\n    placement: { default: 'top' },\n    size: { default: undefined },\n    trigger: { default: 'hover,focus' },\n    variant: { default: undefined },\n  },\n  setup({ host, props }) {\n    const visible = signal(false);\n    const activePlacement = signal<TooltipPlacement>('top');\n    let autoUpdateCleanup: (() => void) | null = null;\n    let showTimer: ReturnType<typeof setTimeout> | null = null;\n    let hideTimer: ReturnType<typeof setTimeout> | null = null;\n    let tooltipEl: HTMLElement | null = null;\n    const tooltipId = createId('tooltip');\n    const triggers = computed<TooltipTrigger[]>(() =>\n      String(props.trigger.value)\n        .split(',')\n        .map((t: string) => t.trim() as TooltipTrigger)\n        .filter(Boolean),\n    );\n\n    function getTriggerEl(): Element | null {\n      // First slotted element is the trigger\n      const slot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      const assigned = slot?.assignedElements({ flatten: true });\n\n      return assigned?.[0] ?? null;\n    }\n    function updatePosition() {\n      if (!tooltipEl) return;\n\n      const triggerEl = getTriggerEl();\n\n      if (!triggerEl) return;\n\n      computePosition(triggerEl, tooltipEl, {\n        middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 6 })],\n        placement: props.placement.value as Placement,\n      }).then(({ placement, x, y }) => {\n        if (!tooltipEl) return;\n\n        const side = placement.split('-')[0] as TooltipPlacement;\n        const adjustedX = side === 'left' ? x - LEFT_GAP_COMPENSATION : x;\n\n        tooltipEl.style.left = `${adjustedX}px`;\n        tooltipEl.style.top = `${y}px`;\n\n        activePlacement.value = side;\n      });\n    }\n    function show() {\n      if (props.open.value !== undefined) return; // controlled mode\n\n      const hasSlottedContent = () => {\n        const contentSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"content\"]');\n\n        return (contentSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n      };\n\n      if (props.disabled.value || (!props.content.value && !hasSlottedContent())) return;\n\n      if (hideTimer) {\n        clearTimeout(hideTimer);\n        hideTimer = null;\n      }\n\n      if (showTimer) clearTimeout(showTimer);\n\n      showTimer = setTimeout(\n        () => {\n          visible.value = true;\n\n          if (tooltipEl && !tooltipEl.matches(':popover-open')) {\n            tooltipEl.showPopover();\n          }\n\n          // Start autoUpdate: repositions on scroll, resize, and reference size change\n          const triggerEl = getTriggerEl();\n\n          if (triggerEl && tooltipEl) {\n            autoUpdateCleanup?.();\n            autoUpdateCleanup = autoUpdate(triggerEl, tooltipEl, updatePosition);\n          } else {\n            requestAnimationFrame(() => updatePosition());\n          }\n        },\n        Number(props.delay.value) || 0,\n      );\n    }\n    function hide() {\n      if (props.open.value !== undefined) return; // controlled mode\n\n      if (showTimer) {\n        clearTimeout(showTimer);\n        showTimer = null;\n      }\n\n      const closeDelay = Number(props['close-delay'].value) || 0;\n\n      if (closeDelay > 0) {\n        if (hideTimer) clearTimeout(hideTimer);\n\n        hideTimer = setTimeout(() => {\n          hideTimer = null;\n          _doHide();\n        }, closeDelay);\n      } else {\n        _doHide();\n      }\n    }\n    function _doHide() {\n      autoUpdateCleanup?.();\n      autoUpdateCleanup = null;\n      visible.value = false;\n\n      if (tooltipEl?.matches(':popover-open')) {\n        tooltipEl.hidePopover();\n      }\n    }\n    function toggleClick() {\n      if (visible.value) hide();\n      else show();\n    }\n    onMount(() => {\n      const slot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n      if (!slot) return;\n\n      const bindTriggerEvents = () => {\n        unbindTriggerEvents(); // clean up previous bindings\n\n        const triggerEl = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        triggerEl.setAttribute('aria-describedby', tooltipId);\n\n        const t = triggers.value;\n\n        if (t.includes('hover')) {\n          triggerEl.addEventListener('pointerenter', show);\n          triggerEl.addEventListener('pointerleave', hide);\n        }\n\n        if (t.includes('focus')) {\n          triggerEl.addEventListener('focusin', show);\n          triggerEl.addEventListener('focusout', hide);\n        }\n\n        if (t.includes('click')) {\n          triggerEl.addEventListener('click', toggleClick);\n        }\n\n        // Keyboard escape to dismiss\n        document.addEventListener('keydown', handleKeydown);\n      };\n      const unbindTriggerEvents = () => {\n        const triggerEl = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        triggerEl.removeAttribute('aria-describedby');\n        triggerEl.removeEventListener('pointerenter', show);\n        triggerEl.removeEventListener('pointerleave', hide);\n        triggerEl.removeEventListener('focusin', show);\n        triggerEl.removeEventListener('focusout', hide);\n        triggerEl.removeEventListener('click', toggleClick);\n        document.removeEventListener('keydown', handleKeydown);\n      };\n\n      onSlotChange('default', bindTriggerEvents);\n      // Controlled mode: watch the `open` prop and show/hide accordingly\n      watch(props.open, (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          visible.value = true;\n\n          if (tooltipEl && !tooltipEl.matches(':popover-open')) tooltipEl.showPopover();\n\n          const triggerEl = getTriggerEl();\n\n          if (triggerEl && tooltipEl) {\n            autoUpdateCleanup?.();\n            autoUpdateCleanup = autoUpdate(triggerEl, tooltipEl, updatePosition);\n          } else {\n            requestAnimationFrame(() => updatePosition());\n          }\n        } else {\n          _doHide();\n        }\n      });\n\n      return () => {\n        unbindTriggerEvents();\n\n        if (showTimer) clearTimeout(showTimer);\n\n        if (hideTimer) clearTimeout(hideTimer);\n\n        autoUpdateCleanup?.();\n        autoUpdateCleanup = null;\n\n        if (tooltipEl?.matches(':popover-open')) {\n          tooltipEl.hidePopover();\n        }\n      };\n    });\n    function handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape') hide();\n    }\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"tooltip\"\n        part=\"tooltip\"\n        id=\"${tooltipId}\"\n        role=\"tooltip\"\n        popover=\"manual\"\n        ref=${(el: HTMLElement) => {\n          tooltipEl = el;\n        }}\n        :data-placement=\"${activePlacement}\"\n        :aria-hidden=\"${() => String(!visible.value)}\">\n        <slot name=\"content\">${() => props.content.value}</slot>\n      </div>\n    `;\n  },\n  styles: [forcedColorsMixin, styles],\n  tag: 'bit-tooltip',\n});\n"],"mappings":"gRAYA,IAAM,EAAiB,EACjB,EAAwB,EAuDjB,GAAA,EAAA,EAAA,iBAA+C,CAC1D,MAAO,CACL,cAAe,CAAE,QAAS,EAAG,CAC7B,QAAS,CAAE,QAAS,GAAI,CACxB,MAAO,CAAE,QAAS,EAAG,CACrB,SAAU,CAAE,QAAS,GAAO,CAC5B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,UAAW,CAAE,QAAS,MAAO,CAC7B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,QAAS,CAAE,QAAS,cAAe,CACnC,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAA,EAAA,EAAA,QAAiB,GAAM,CACvB,GAAA,EAAA,EAAA,QAA2C,MAAM,CACnD,EAAyC,KACzC,EAAkD,KAClD,EAAkD,KAClD,EAAgC,KAC9B,GAAA,EAAA,EAAA,UAAqB,UAAU,CAC/B,GAAA,EAAA,EAAA,cACJ,OAAO,EAAM,QAAQ,MAAM,CACxB,MAAM,IAAI,CACV,IAAK,GAAc,EAAE,MAAM,CAAmB,CAC9C,OAAO,QAAQ,CACnB,CAED,SAAS,GAA+B,CAKtC,OAHa,EAAK,YAAY,cAA+B,mBAAmB,GACzD,iBAAiB,CAAE,QAAS,GAAM,CAAC,GAExC,IAAM,KAE1B,SAAS,GAAiB,CACxB,GAAI,CAAC,EAAW,OAEhB,IAAM,EAAY,GAAc,CAE3B,IAEL,EAAA,EAAA,iBAAgB,EAAW,EAAW,CACpC,WAAY,cAAQ,EAAe,aAAQ,aAAQ,CAAE,QAAS,EAAG,CAAC,CAAC,CACnE,UAAW,EAAM,UAAU,MAC5B,CAAC,CAAC,MAAM,CAAE,YAAW,IAAG,OAAQ,CAC/B,GAAI,CAAC,EAAW,OAEhB,IAAM,EAAO,EAAU,MAAM,IAAI,CAAC,GAC5B,EAAY,IAAS,OAAS,EAAI,EAAwB,EAEhE,EAAU,MAAM,KAAO,GAAG,EAAU,IACpC,EAAU,MAAM,IAAM,GAAG,EAAE,IAE3B,EAAgB,MAAQ,GACxB,CAEJ,SAAS,GAAO,CACV,EAAM,KAAK,QAAU,IAAA,IAQrB,EAAM,SAAS,OAAU,CAAC,EAAM,QAAQ,OAAS,IAL/B,EAAK,YAAY,cAA+B,uBAAuB,GAEtE,cAAc,CAAE,QAAS,GAAM,CAAC,CAAC,QAAU,GAAK,KAKvE,AAEE,KADA,aAAa,EAAU,CACX,MAGV,GAAW,aAAa,EAAU,CAEtC,EAAY,eACJ,CACJ,EAAQ,MAAQ,GAEZ,GAAa,CAAC,EAAU,QAAQ,gBAAgB,EAClD,EAAU,aAAa,CAIzB,IAAM,EAAY,GAAc,CAE5B,GAAa,GACf,KAAqB,CACrB,GAAA,EAAA,EAAA,YAA+B,EAAW,EAAW,EAAe,EAEpE,0BAA4B,GAAgB,CAAC,EAGjD,OAAO,EAAM,MAAM,MAAM,EAAI,EAC9B,EAEH,SAAS,GAAO,CACd,GAAI,EAAM,KAAK,QAAU,IAAA,GAAW,OAEpC,AAEE,KADA,aAAa,EAAU,CACX,MAGd,IAAM,EAAa,OAAO,EAAM,eAAe,MAAM,EAAI,EAErD,EAAa,GACX,GAAW,aAAa,EAAU,CAEtC,EAAY,eAAiB,CAC3B,EAAY,KACZ,GAAS,EACR,EAAW,EAEd,GAAS,CAGb,SAAS,GAAU,CACjB,KAAqB,CACrB,EAAoB,KACpB,EAAQ,MAAQ,GAEZ,GAAW,QAAQ,gBAAgB,EACrC,EAAU,aAAa,CAG3B,SAAS,GAAc,CACjB,EAAQ,MAAO,GAAM,CACpB,GAAM,EAEb,EAAA,EAAA,aAAc,CACZ,IAAM,EAAO,EAAK,YAAY,cAA+B,mBAAmB,CAEhF,GAAI,CAAC,EAAM,OAEX,IAAM,MAA0B,CAC9B,GAAqB,CAErB,IAAM,EAAY,EAAK,iBAAiB,CAAE,QAAS,GAAM,CAAC,CAAC,GAE3D,GAAI,CAAC,EAAW,OAEhB,EAAU,aAAa,mBAAoB,EAAU,CAErD,IAAM,EAAI,EAAS,MAEf,EAAE,SAAS,QAAQ,GACrB,EAAU,iBAAiB,eAAgB,EAAK,CAChD,EAAU,iBAAiB,eAAgB,EAAK,EAG9C,EAAE,SAAS,QAAQ,GACrB,EAAU,iBAAiB,UAAW,EAAK,CAC3C,EAAU,iBAAiB,WAAY,EAAK,EAG1C,EAAE,SAAS,QAAQ,EACrB,EAAU,iBAAiB,QAAS,EAAY,CAIlD,SAAS,iBAAiB,UAAW,EAAc,EAE/C,MAA4B,CAChC,IAAM,EAAY,EAAK,iBAAiB,CAAE,QAAS,GAAM,CAAC,CAAC,GAEtD,IAEL,EAAU,gBAAgB,mBAAmB,CAC7C,EAAU,oBAAoB,eAAgB,EAAK,CACnD,EAAU,oBAAoB,eAAgB,EAAK,CACnD,EAAU,oBAAoB,UAAW,EAAK,CAC9C,EAAU,oBAAoB,WAAY,EAAK,CAC/C,EAAU,oBAAoB,QAAS,EAAY,CACnD,SAAS,oBAAoB,UAAW,EAAc,GA0BxD,OAvBA,EAAA,EAAA,cAAa,UAAW,EAAkB,EAE1C,EAAA,EAAA,OAAM,EAAM,KAAO,GAAY,CACzB,MAAqC,KAEzC,GAAI,EAAS,CACX,EAAQ,MAAQ,GAEZ,GAAa,CAAC,EAAU,QAAQ,gBAAgB,EAAE,EAAU,aAAa,CAE7E,IAAM,EAAY,GAAc,CAE5B,GAAa,GACf,KAAqB,CACrB,GAAA,EAAA,EAAA,YAA+B,EAAW,EAAW,EAAe,EAEpE,0BAA4B,GAAgB,CAAC,MAG/C,GAAS,EAEX,KAEW,CACX,GAAqB,CAEjB,GAAW,aAAa,EAAU,CAElC,GAAW,aAAa,EAAU,CAEtC,KAAqB,CACrB,EAAoB,KAEhB,GAAW,QAAQ,gBAAgB,EACrC,EAAU,aAAa,GAG3B,CACF,SAAS,EAAc,EAAkB,CACnC,EAAE,MAAQ,UAAU,GAAM,CAGhC,MAAO,GAAA,IAAI;;;;;cAKD,EAAU;;;cAGT,GAAoB,CACzB,EAAY,GACZ;2BACiB,EAAgB;4BACb,OAAO,CAAC,EAAQ,MAAM,CAAC;mCAChB,EAAM,QAAQ,MAAM;;OAIvD,OAAQ,CAAC,EAAA,kBAAmB,EAAA,QAAO,CACnC,IAAK,cACN,CAAC"}