@vielzeug/buildit 2.0.0

package/dist/otp-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.cjs","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { computed, defineComponent, html, onMount, typed } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport styles from './otp-input.css?inline';\n\nexport type BitOtpInputEvents = {\n  change: { complete: boolean; originalEvent?: Event; value: string };\n  complete: { originalEvent?: Event; value: string };\n};\n\n/** OTP Input props */\nexport type BitOtpInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Make inputs disabled */\n  disabled?: boolean;\n  /** Accessible label */\n  label?: string;\n  /** Number of input cells */\n  length?: number;\n  /** Mask input (show dots instead of characters) */\n  masked?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Show a separator in the middle (e.g. \"–\") */\n  separator?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Input type: 'numeric' (digits only) or 'alphanumeric' */\n  type?: 'numeric' | 'alphanumeric';\n  /** Current value */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost' | 'glass'>;\n};\n\n/**\n * A segmented OTP (One-Time Password) input with N individual cells.\n * Auto-advances focus on input, auto-backs on Backspace, handles paste.\n *\n * @element bit-otp-input\n *\n * @attr {number} length - Number of cells (default: 6)\n * @attr {string} type - 'numeric' (default) | 'alphanumeric'\n * @attr {string} value - Current code value\n * @attr {boolean} disabled - Disable all cells\n * @attr {boolean} masked - Show as password\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color\n * @attr {string} name - Form field name\n * @attr {string} label - Group aria-label\n * @attr {string} separator - Optional separator character shown in the middle\n *\n * @fires change - Emitted whenever a cell changes. detail: { value: string, complete: boolean, originalEvent?: Event }\n * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }\n *\n * @cssprop --otp-cell-size - Width and height of each cell\n * @cssprop --otp-cell-gap - Gap between cells\n * @cssprop --otp-cell-font-size - Font size inside cells\n * @cssprop --otp-cell-radius - Border radius of cells\n * @cssprop --otp-cell-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border color\n *\n * @example\n * ```html\n * <bit-otp-input length=\"6\" color=\"primary\"></bit-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = defineComponent<BitOtpInputProps, BitOtpInputEvents>({\n  props: {\n    color: typed<BitOtpInputProps['color']>(undefined),\n    disabled: typed<boolean>(false),\n    label: typed<string>('One-time password'),\n    length: typed<number>(6),\n    masked: typed<boolean>(false),\n    name: typed<string | undefined>(undefined),\n    separator: typed<string | undefined>(undefined),\n    size: typed<BitOtpInputProps['size']>(undefined),\n    type: typed<BitOtpInputProps['type']>('numeric'),\n    value: typed<string>(''),\n    variant: typed<BitOtpInputProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const cells = computed(() => Array.from({ length: Number(props.length.value) || 6 }, (_, i) => i));\n\n    function getInputs(): HTMLInputElement[] {\n      return [...(host.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n    }\n    function getValue(): string {\n      return getInputs()\n        .map((i) => i.value)\n        .join('');\n    }\n    function isAllowed(char: string): boolean {\n      if (props.type.value === 'numeric') return /^\\d$/.test(char);\n\n      return /^[a-z\\d]$/i.test(char);\n    }\n    function handleInput(e: Event, index: number) {\n      const input = e.target as HTMLInputElement;\n      let val = input.value;\n\n      // Keep only last character if multiple were typed somehow\n      if (val.length > 1) val = val.slice(-1);\n\n      // Validate character\n      if (val && !isAllowed(val)) {\n        input.value = '';\n\n        return;\n      }\n\n      input.value = val;\n\n      const allInputs = getInputs();\n      const full = getValue();\n      const complete = full.length === allInputs.length && full.split('').every(Boolean);\n\n      host.setAttribute('value', full);\n      emit('change', { complete, originalEvent: e, value: full });\n\n      if (complete) emit('complete', { originalEvent: e, value: full });\n\n      // Auto-advance\n      if (val && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        allInputs[index + 1].select();\n      }\n    }\n    function handleKeydown(e: KeyboardEvent, index: number) {\n      const input = e.target as HTMLInputElement;\n      const allInputs = getInputs();\n\n      if (e.key === 'Backspace') {\n        if (input.value) {\n          input.value = '';\n        } else if (index > 0) {\n          allInputs[index - 1].focus();\n          allInputs[index - 1].select();\n          allInputs[index - 1].value = '';\n        }\n\n        const full = getValue();\n\n        host.setAttribute('value', full);\n        emit('change', { complete: false, originalEvent: e, value: full });\n        e.preventDefault();\n      } else if (e.key === 'ArrowLeft' && index > 0) {\n        allInputs[index - 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'ArrowRight' && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'Home') {\n        allInputs[0].focus();\n        e.preventDefault();\n      } else if (e.key === 'End') {\n        allInputs[allInputs.length - 1].focus();\n        e.preventDefault();\n      }\n    }\n    function handlePaste(e: ClipboardEvent) {\n      e.preventDefault();\n\n      const pasted = e.clipboardData?.getData('text') ?? '';\n      const chars = pasted\n        .split('')\n        .filter((c) => isAllowed(c))\n        .slice(0, Number(props.length.value) || 6);\n      const allInputs = getInputs();\n\n      chars.forEach((char, i) => {\n        if (allInputs[i]) allInputs[i].value = char;\n      });\n\n      const full = getValue();\n      const complete = full.length === allInputs.length && full.split('').every(Boolean);\n\n      host.setAttribute('value', full);\n      emit('change', { complete, originalEvent: e, value: full });\n\n      if (complete) emit('complete', { originalEvent: e, value: full });\n\n      // Focus the cell after last pasted char\n      const focusIdx = Math.min(chars.length, allInputs.length - 1);\n\n      allInputs[focusIdx]?.focus();\n    }\n    onMount(() => {\n      // Populate cells from value prop on mount\n      const initialVal = String(props.value.value || '');\n      const allInputs = getInputs();\n\n      initialVal.split('').forEach((c, i) => {\n        if (allInputs[i]) allInputs[i].value = c;\n      });\n    });\n\n    const separatorIdx = computed(() => {\n      const len = Number(props.length.value) || 6;\n\n      return props.separator.value != null ? Math.floor(len / 2) : -1;\n    });\n\n    return html`\n      <div class=\"otp-group\" part=\"group\" role=\"group\" :aria-label=\"${() => props.label.value}\">\n        ${() =>\n          cells.value.map(\n            (i) => html`\n              ${() =>\n                separatorIdx.value > 0 && i === separatorIdx.value\n                  ? html`<span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>`\n                  : ''}\n              <input\n                class=\"cell\"\n                part=\"cell\"\n                :type=\"${() => (props.masked.value ? 'password' : 'text')}\"\n                :inputmode=\"${() => (props.type.value === 'numeric' ? 'numeric' : 'text')}\"\n                maxlength=\"1\"\n                :autocomplete=\"${() => (i === 0 ? 'one-time-code' : 'off')}\"\n                :aria-label=\"${() => `Digit ${i + 1} of ${props.length.value}`}\"\n                :disabled=\"${() => props.disabled.value || null}\"\n                :name=\"${() => (props.name.value ? `${props.name.value}[${i}]` : null)}\"\n                @input=\"${(e: Event) => handleInput(e, i)}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, i)}\"\n                @paste=\"${(e: ClipboardEvent) => (i === 0 ? handlePaste(e) : e.preventDefault())}\"\n                @focus=\"${(e: FocusEvent) => (e.target as HTMLInputElement).select()}\" />\n            `,\n          )}\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), forcedColorsFocusMixin('.cell'), styles],\n  tag: 'bit-otp-input',\n});\n"],"mappings":"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"}

package/dist/otp-input.js

@@ -0,0 +1,120 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as t, forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
+import "./styles/index.js";
+import r from "./inputs/otp-input/otp-input.css?inline.js";
+import { computed as i, defineComponent as a, html as o, onMount as s, typed as c } from "@vielzeug/craftit";
+//#region src/inputs/otp-input/otp-input.ts
+var l = a({
+	props: {
+		color: c(void 0),
+		disabled: c(!1),
+		label: c("One-time password"),
+		length: c(6),
+		masked: c(!1),
+		name: c(void 0),
+		separator: c(void 0),
+		size: c(void 0),
+		type: c("numeric"),
+		value: c(""),
+		variant: c(void 0)
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let r = i(() => Array.from({ length: Number(n.length.value) || 6 }, (e, t) => t));
+		function a() {
+			return [...t.shadowRoot?.querySelectorAll("input.cell") ?? []];
+		}
+		function c() {
+			return a().map((e) => e.value).join("");
+		}
+		function l(e) {
+			return n.type.value === "numeric" ? /^\d$/.test(e) : /^[a-z\d]$/i.test(e);
+		}
+		function u(n, r) {
+			let i = n.target, o = i.value;
+			if (o.length > 1 && (o = o.slice(-1)), o && !l(o)) {
+				i.value = "";
+				return;
+			}
+			i.value = o;
+			let s = a(), u = c(), d = u.length === s.length && u.split("").every(Boolean);
+			t.setAttribute("value", u), e("change", {
+				complete: d,
+				originalEvent: n,
+				value: u
+			}), d && e("complete", {
+				originalEvent: n,
+				value: u
+			}), o && r < s.length - 1 && (s[r + 1].focus(), s[r + 1].select());
+		}
+		function d(n, r) {
+			let i = n.target, o = a();
+			if (n.key === "Backspace") {
+				i.value ? i.value = "" : r > 0 && (o[r - 1].focus(), o[r - 1].select(), o[r - 1].value = "");
+				let a = c();
+				t.setAttribute("value", a), e("change", {
+					complete: !1,
+					originalEvent: n,
+					value: a
+				}), n.preventDefault();
+			} else n.key === "ArrowLeft" && r > 0 ? (o[r - 1].focus(), n.preventDefault()) : n.key === "ArrowRight" && r < o.length - 1 ? (o[r + 1].focus(), n.preventDefault()) : n.key === "Home" ? (o[0].focus(), n.preventDefault()) : n.key === "End" && (o[o.length - 1].focus(), n.preventDefault());
+		}
+		function f(r) {
+			r.preventDefault();
+			let i = (r.clipboardData?.getData("text") ?? "").split("").filter((e) => l(e)).slice(0, Number(n.length.value) || 6), o = a();
+			i.forEach((e, t) => {
+				o[t] && (o[t].value = e);
+			});
+			let s = c(), u = s.length === o.length && s.split("").every(Boolean);
+			t.setAttribute("value", s), e("change", {
+				complete: u,
+				originalEvent: r,
+				value: s
+			}), u && e("complete", {
+				originalEvent: r,
+				value: s
+			}), o[Math.min(i.length, o.length - 1)]?.focus();
+		}
+		s(() => {
+			let e = String(n.value.value || ""), t = a();
+			e.split("").forEach((e, n) => {
+				t[n] && (t[n].value = e);
+			});
+		});
+		let p = i(() => {
+			let e = Number(n.length.value) || 6;
+			return n.separator.value == null ? -1 : Math.floor(e / 2);
+		});
+		return o`
+      <div class="otp-group" part="group" role="group" :aria-label="${() => n.label.value}">
+        ${() => r.value.map((e) => o`
+              ${() => p.value > 0 && e === p.value ? o`<span class="separator" aria-hidden="true">${() => n.separator.value || "-"}</span>` : ""}
+              <input
+                class="cell"
+                part="cell"
+                :type="${() => n.masked.value ? "password" : "text"}"
+                :inputmode="${() => n.type.value === "numeric" ? "numeric" : "text"}"
+                maxlength="1"
+                :autocomplete="${() => e === 0 ? "one-time-code" : "off"}"
+                :aria-label="${() => `Digit ${e + 1} of ${n.length.value}`}"
+                :disabled="${() => n.disabled.value || null}"
+                :name="${() => n.name.value ? `${n.name.value}[${e}]` : null}"
+                @input="${(t) => u(t, e)}"
+                @keydown="${(t) => d(t, e)}"
+                @paste="${(t) => e === 0 ? f(t) : t.preventDefault()}"
+                @focus="${(e) => e.target.select()}" />
+            `)}
+      </div>
+    `;
+	},
+	styles: [
+		t,
+		e({}),
+		n(".cell"),
+		r
+	],
+	tag: "bit-otp-input"
+});
+//#endregion
+export { l as OTP_INPUT_TAG };
+
+//# sourceMappingURL=otp-input.js.map

package/dist/otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.js","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { computed, defineComponent, html, onMount, typed } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport styles from './otp-input.css?inline';\n\nexport type BitOtpInputEvents = {\n  change: { complete: boolean; originalEvent?: Event; value: string };\n  complete: { originalEvent?: Event; value: string };\n};\n\n/** OTP Input props */\nexport type BitOtpInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Make inputs disabled */\n  disabled?: boolean;\n  /** Accessible label */\n  label?: string;\n  /** Number of input cells */\n  length?: number;\n  /** Mask input (show dots instead of characters) */\n  masked?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Show a separator in the middle (e.g. \"–\") */\n  separator?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Input type: 'numeric' (digits only) or 'alphanumeric' */\n  type?: 'numeric' | 'alphanumeric';\n  /** Current value */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost' | 'glass'>;\n};\n\n/**\n * A segmented OTP (One-Time Password) input with N individual cells.\n * Auto-advances focus on input, auto-backs on Backspace, handles paste.\n *\n * @element bit-otp-input\n *\n * @attr {number} length - Number of cells (default: 6)\n * @attr {string} type - 'numeric' (default) | 'alphanumeric'\n * @attr {string} value - Current code value\n * @attr {boolean} disabled - Disable all cells\n * @attr {boolean} masked - Show as password\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color\n * @attr {string} name - Form field name\n * @attr {string} label - Group aria-label\n * @attr {string} separator - Optional separator character shown in the middle\n *\n * @fires change - Emitted whenever a cell changes. detail: { value: string, complete: boolean, originalEvent?: Event }\n * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }\n *\n * @cssprop --otp-cell-size - Width and height of each cell\n * @cssprop --otp-cell-gap - Gap between cells\n * @cssprop --otp-cell-font-size - Font size inside cells\n * @cssprop --otp-cell-radius - Border radius of cells\n * @cssprop --otp-cell-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border color\n *\n * @example\n * ```html\n * <bit-otp-input length=\"6\" color=\"primary\"></bit-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = defineComponent<BitOtpInputProps, BitOtpInputEvents>({\n  props: {\n    color: typed<BitOtpInputProps['color']>(undefined),\n    disabled: typed<boolean>(false),\n    label: typed<string>('One-time password'),\n    length: typed<number>(6),\n    masked: typed<boolean>(false),\n    name: typed<string | undefined>(undefined),\n    separator: typed<string | undefined>(undefined),\n    size: typed<BitOtpInputProps['size']>(undefined),\n    type: typed<BitOtpInputProps['type']>('numeric'),\n    value: typed<string>(''),\n    variant: typed<BitOtpInputProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const cells = computed(() => Array.from({ length: Number(props.length.value) || 6 }, (_, i) => i));\n\n    function getInputs(): HTMLInputElement[] {\n      return [...(host.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n    }\n    function getValue(): string {\n      return getInputs()\n        .map((i) => i.value)\n        .join('');\n    }\n    function isAllowed(char: string): boolean {\n      if (props.type.value === 'numeric') return /^\\d$/.test(char);\n\n      return /^[a-z\\d]$/i.test(char);\n    }\n    function handleInput(e: Event, index: number) {\n      const input = e.target as HTMLInputElement;\n      let val = input.value;\n\n      // Keep only last character if multiple were typed somehow\n      if (val.length > 1) val = val.slice(-1);\n\n      // Validate character\n      if (val && !isAllowed(val)) {\n        input.value = '';\n\n        return;\n      }\n\n      input.value = val;\n\n      const allInputs = getInputs();\n      const full = getValue();\n      const complete = full.length === allInputs.length && full.split('').every(Boolean);\n\n      host.setAttribute('value', full);\n      emit('change', { complete, originalEvent: e, value: full });\n\n      if (complete) emit('complete', { originalEvent: e, value: full });\n\n      // Auto-advance\n      if (val && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        allInputs[index + 1].select();\n      }\n    }\n    function handleKeydown(e: KeyboardEvent, index: number) {\n      const input = e.target as HTMLInputElement;\n      const allInputs = getInputs();\n\n      if (e.key === 'Backspace') {\n        if (input.value) {\n          input.value = '';\n        } else if (index > 0) {\n          allInputs[index - 1].focus();\n          allInputs[index - 1].select();\n          allInputs[index - 1].value = '';\n        }\n\n        const full = getValue();\n\n        host.setAttribute('value', full);\n        emit('change', { complete: false, originalEvent: e, value: full });\n        e.preventDefault();\n      } else if (e.key === 'ArrowLeft' && index > 0) {\n        allInputs[index - 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'ArrowRight' && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'Home') {\n        allInputs[0].focus();\n        e.preventDefault();\n      } else if (e.key === 'End') {\n        allInputs[allInputs.length - 1].focus();\n        e.preventDefault();\n      }\n    }\n    function handlePaste(e: ClipboardEvent) {\n      e.preventDefault();\n\n      const pasted = e.clipboardData?.getData('text') ?? '';\n      const chars = pasted\n        .split('')\n        .filter((c) => isAllowed(c))\n        .slice(0, Number(props.length.value) || 6);\n      const allInputs = getInputs();\n\n      chars.forEach((char, i) => {\n        if (allInputs[i]) allInputs[i].value = char;\n      });\n\n      const full = getValue();\n      const complete = full.length === allInputs.length && full.split('').every(Boolean);\n\n      host.setAttribute('value', full);\n      emit('change', { complete, originalEvent: e, value: full });\n\n      if (complete) emit('complete', { originalEvent: e, value: full });\n\n      // Focus the cell after last pasted char\n      const focusIdx = Math.min(chars.length, allInputs.length - 1);\n\n      allInputs[focusIdx]?.focus();\n    }\n    onMount(() => {\n      // Populate cells from value prop on mount\n      const initialVal = String(props.value.value || '');\n      const allInputs = getInputs();\n\n      initialVal.split('').forEach((c, i) => {\n        if (allInputs[i]) allInputs[i].value = c;\n      });\n    });\n\n    const separatorIdx = computed(() => {\n      const len = Number(props.length.value) || 6;\n\n      return props.separator.value != null ? Math.floor(len / 2) : -1;\n    });\n\n    return html`\n      <div class=\"otp-group\" part=\"group\" role=\"group\" :aria-label=\"${() => props.label.value}\">\n        ${() =>\n          cells.value.map(\n            (i) => html`\n              ${() =>\n                separatorIdx.value > 0 && i === separatorIdx.value\n                  ? html`<span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>`\n                  : ''}\n              <input\n                class=\"cell\"\n                part=\"cell\"\n                :type=\"${() => (props.masked.value ? 'password' : 'text')}\"\n                :inputmode=\"${() => (props.type.value === 'numeric' ? 'numeric' : 'text')}\"\n                maxlength=\"1\"\n                :autocomplete=\"${() => (i === 0 ? 'one-time-code' : 'off')}\"\n                :aria-label=\"${() => `Digit ${i + 1} of ${props.length.value}`}\"\n                :disabled=\"${() => props.disabled.value || null}\"\n                :name=\"${() => (props.name.value ? `${props.name.value}[${i}]` : null)}\"\n                @input=\"${(e: Event) => handleInput(e, i)}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, i)}\"\n                @paste=\"${(e: ClipboardEvent) => (i === 0 ? handlePaste(e) : e.preventDefault())}\"\n                @focus=\"${(e: FocusEvent) => (e.target as HTMLInputElement).select()}\" />\n            `,\n          )}\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), forcedColorsFocusMixin('.cell'), styles],\n  tag: 'bit-otp-input',\n});\n"],"mappings":";;;;;;AAsEA,IAAa,IAAgB,EAAqD;CAChF,OAAO;EACL,OAAO,EAAiC,KAAA,EAAU;EAClD,UAAU,EAAe,GAAM;EAC/B,OAAO,EAAc,oBAAoB;EACzC,QAAQ,EAAc,EAAE;EACxB,QAAQ,EAAe,GAAM;EAC7B,MAAM,EAA0B,KAAA,EAAU;EAC1C,WAAW,EAA0B,KAAA,EAAU;EAC/C,MAAM,EAAgC,KAAA,EAAU;EAChD,MAAM,EAAgC,UAAU;EAChD,OAAO,EAAc,GAAG;EACxB,SAAS,EAAmC,KAAA,EAAU;EACvD;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,IAAQ,QAAe,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAM,OAAO,MAAM,IAAI,GAAG,GAAG,GAAG,MAAM,EAAE,CAAC;EAElG,SAAS,IAAgC;AACvC,UAAO,CAAC,GAAI,EAAK,YAAY,iBAAmC,aAAa,IAAI,EAAE,CAAE;;EAEvF,SAAS,IAAmB;AAC1B,UAAO,GAAW,CACf,KAAK,MAAM,EAAE,MAAM,CACnB,KAAK,GAAG;;EAEb,SAAS,EAAU,GAAuB;AAGxC,UAFI,EAAM,KAAK,UAAU,YAAkB,OAAO,KAAK,EAAK,GAErD,aAAa,KAAK,EAAK;;EAEhC,SAAS,EAAY,GAAU,GAAe;GAC5C,IAAM,IAAQ,EAAE,QACZ,IAAM,EAAM;AAMhB,OAHI,EAAI,SAAS,MAAG,IAAM,EAAI,MAAM,GAAG,GAGnC,KAAO,CAAC,EAAU,EAAI,EAAE;AAC1B,MAAM,QAAQ;AAEd;;AAGF,KAAM,QAAQ;GAEd,IAAM,IAAY,GAAW,EACvB,IAAO,GAAU,EACjB,IAAW,EAAK,WAAW,EAAU,UAAU,EAAK,MAAM,GAAG,CAAC,MAAM,QAAQ;AAQlF,GANA,EAAK,aAAa,SAAS,EAAK,EAChC,EAAK,UAAU;IAAE;IAAU,eAAe;IAAG,OAAO;IAAM,CAAC,EAEvD,KAAU,EAAK,YAAY;IAAE,eAAe;IAAG,OAAO;IAAM,CAAC,EAG7D,KAAO,IAAQ,EAAU,SAAS,MACpC,EAAU,IAAQ,GAAG,OAAO,EAC5B,EAAU,IAAQ,GAAG,QAAQ;;EAGjC,SAAS,EAAc,GAAkB,GAAe;GACtD,IAAM,IAAQ,EAAE,QACV,IAAY,GAAW;AAE7B,OAAI,EAAE,QAAQ,aAAa;AACzB,IAAI,EAAM,QACR,EAAM,QAAQ,KACL,IAAQ,MACjB,EAAU,IAAQ,GAAG,OAAO,EAC5B,EAAU,IAAQ,GAAG,QAAQ,EAC7B,EAAU,IAAQ,GAAG,QAAQ;IAG/B,IAAM,IAAO,GAAU;AAIvB,IAFA,EAAK,aAAa,SAAS,EAAK,EAChC,EAAK,UAAU;KAAE,UAAU;KAAO,eAAe;KAAG,OAAO;KAAM,CAAC,EAClE,EAAE,gBAAgB;UACT,EAAE,QAAQ,eAAe,IAAQ,KAC1C,EAAU,IAAQ,GAAG,OAAO,EAC5B,EAAE,gBAAgB,IACT,EAAE,QAAQ,gBAAgB,IAAQ,EAAU,SAAS,KAC9D,EAAU,IAAQ,GAAG,OAAO,EAC5B,EAAE,gBAAgB,IACT,EAAE,QAAQ,UACnB,EAAU,GAAG,OAAO,EACpB,EAAE,gBAAgB,IACT,EAAE,QAAQ,UACnB,EAAU,EAAU,SAAS,GAAG,OAAO,EACvC,EAAE,gBAAgB;;EAGtB,SAAS,EAAY,GAAmB;AACtC,KAAE,gBAAgB;GAGlB,IAAM,KADS,EAAE,eAAe,QAAQ,OAAO,IAAI,IAEhD,MAAM,GAAG,CACT,QAAQ,MAAM,EAAU,EAAE,CAAC,CAC3B,MAAM,GAAG,OAAO,EAAM,OAAO,MAAM,IAAI,EAAE,EACtC,IAAY,GAAW;AAE7B,KAAM,SAAS,GAAM,MAAM;AACzB,IAAI,EAAU,OAAI,EAAU,GAAG,QAAQ;KACvC;GAEF,IAAM,IAAO,GAAU,EACjB,IAAW,EAAK,WAAW,EAAU,UAAU,EAAK,MAAM,GAAG,CAAC,MAAM,QAAQ;AAUlF,GARA,EAAK,aAAa,SAAS,EAAK,EAChC,EAAK,UAAU;IAAE;IAAU,eAAe;IAAG,OAAO;IAAM,CAAC,EAEvD,KAAU,EAAK,YAAY;IAAE,eAAe;IAAG,OAAO;IAAM,CAAC,EAKjE,EAFiB,KAAK,IAAI,EAAM,QAAQ,EAAU,SAAS,EAAE,GAExC,OAAO;;AAE9B,UAAc;GAEZ,IAAM,IAAa,OAAO,EAAM,MAAM,SAAS,GAAG,EAC5C,IAAY,GAAW;AAE7B,KAAW,MAAM,GAAG,CAAC,SAAS,GAAG,MAAM;AACrC,IAAI,EAAU,OAAI,EAAU,GAAG,QAAQ;KACvC;IACF;EAEF,IAAM,IAAe,QAAe;GAClC,IAAM,IAAM,OAAO,EAAM,OAAO,MAAM,IAAI;AAE1C,UAAO,EAAM,UAAU,SAAS,OAA6B,KAAtB,KAAK,MAAM,IAAM,EAAE;IAC1D;AAEF,SAAO,CAAI;4EAC6D,EAAM,MAAM,MAAM;gBAEpF,EAAM,MAAM,KACT,MAAM,CAAI;sBAEP,EAAa,QAAQ,KAAK,MAAM,EAAa,QACzC,CAAI,oDAAoD,EAAM,UAAU,SAAS,IAAI,WACrF,GAAG;;;;+BAIS,EAAM,OAAO,QAAQ,aAAa,OAAQ;oCACrC,EAAM,KAAK,UAAU,YAAY,YAAY,OAAQ;;uCAElD,MAAM,IAAI,kBAAkB,MAAO;qCACtC,SAAS,IAAI,EAAE,MAAM,EAAM,OAAO,QAAQ;mCAC5C,EAAM,SAAS,SAAS,KAAK;+BAChC,EAAM,KAAK,QAAQ,GAAG,EAAM,KAAK,MAAM,GAAG,EAAE,KAAK,KAAM;2BAC5D,MAAa,EAAY,GAAG,EAAE,CAAC;6BAC7B,MAAqB,EAAc,GAAG,EAAE,CAAC;2BAC3C,MAAuB,MAAM,IAAI,EAAY,EAAE,GAAG,EAAE,gBAAgB,CAAE;2BACtE,MAAmB,EAAE,OAA4B,QAAQ,CAAC;cAE1E,CAAC;;;;CAIV,QAAQ;EAAC;EAAiB,EAAiB,EAAE,CAAC;EAAE,EAAuB,QAAQ;EAAE;EAAO;CACxF,KAAK;CACN,CAAC"}

package/dist/overlay/dialog/dialog.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_radius:var(--dialog-radius,var(--rounded-lg));--_padding:var(--dialog-padding,var(--size-4));--_gap:var(--dialog-gap,var(--size-4));--_max-width:var(--dialog-max-width,32rem);--_elevation:var(--shadow-xl);--_backdrop-filter:none;--_backdrop-bg:var(--dialog-backdrop,color-mix(in srgb, var(--color-canvas) 40%, transparent));--_panel-bg:var(--dialog-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_panel-blur:var(--dialog-panel-blur,var(--blur-md));--_panel-border-color:var(--dialog-border-color,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent)));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;background:0 0;border:none;justify-content:center;align-items:center;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]){display:none}dialog[open]{pointer-events:auto}dialog::-ms-backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:var(--_motion-transition,opacity var(--transition-normal) ease, overlay var(--transition-normal) ease allow-discrete, display var(--transition-normal) ease allow-discrete)}@starting-style{dialog::-ms-backdrop{opacity:0}}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:var(--_motion-transition,opacity var(--transition-normal) ease, overlay var(--transition-normal) ease allow-discrete, display var(--transition-normal) ease allow-discrete)}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::-ms-backdrop{opacity:0}dialog.closing::backdrop{opacity:0}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--dialog-shadow,var(--_elevation));opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:var(--_motion-transition,opacity var(--transition-normal) cubic-bezier(.16, 1, .3, 1), transform var(--transition-normal) cubic-bezier(.16, 1, .3, 1));flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(.96) translateY(var(--size-2))}}dialog.closing .panel{opacity:0;transform:scale(.96) translateY(var(--size-2))}.panel[data-size=sm]{--_max-width:var(--dialog-max-width,22rem)}.panel[data-size=md]{--_max-width:var(--dialog-max-width,32rem)}.panel[data-size=lg]{--_max-width:var(--dialog-max-width,48rem)}.panel[data-size=xl]{--_max-width:var(--dialog-max-width,64rem)}.panel[data-size=full]{width:calc(100vw - var(--size-8));max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8))}.header{gap:var(--size-2);padding:var(--_padding);flex-shrink:0;align-items:center;padding-bottom:0;display:flex}.header[hidden]{display:none}.title{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--color-contrast-900);flex:1}.close{width:var(--size-8);min-width:var(--_touch-target);height:var(--size-8);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-md);transition:var(--_motion-transition,background var(--transition-fast), color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.close:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.close:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close:hover{color:var(--color-contrast-900);background:var(--color-contrast-200)}.close:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.close[hidden]{display:none}.body{padding:var(--_padding);overscroll-behavior:contain;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-contrast-700);flex:1;overflow-y:auto}.footer{gap:var(--_gap);padding:var(--_padding);flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;padding-top:0;display:flex}.footer[hidden]{display:none}.header:not([hidden])+.body{padding-top:var(--size-4)}.body+.footer:not([hidden]){padding-top:var(--size-4);border-top:var(--border) solid var(--color-contrast-100)}@media (width<=640px){.panel,.panel[data-size=sm],.panel[data-size=md],.panel[data-size=lg],.panel[data-size=xl]{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4));max-height:calc(100dvh - var(--size-4))}.header,.body,.footer{padding-inline:var(--size-3)}}}@layer buildit.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}:host([elevation=none]){--_elevation:var(--shadow-none)}:host([elevation=sm]){--_elevation:var(--shadow-sm)}:host([elevation=md]){--_elevation:var(--shadow-md)}:host([elevation=lg]){--_elevation:var(--shadow-lg)}:host([elevation=xl]){--_elevation:var(--shadow-xl)}:host([elevation="2xl"]){--_elevation:var(--shadow-2xl)}:host([padding=none]){--_padding:var(--size-0)}:host([padding=sm]){--_padding:var(--size-3)}:host([padding=md]){--_padding:var(--size-4)}:host([padding=lg]){--_padding:var(--size-6)}:host([padding=xl]){--_padding:var(--size-8)}}`;exports.default=e;
+//# sourceMappingURL=dialog.css?inline.cjs.map

package/dist/overlay/dialog/dialog.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.css?inline.cjs","names":[],"sources":["../../../src/overlay/dialog/dialog.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_radius: var(--dialog-radius, var(--rounded-lg));\n    --_padding: var(--dialog-padding, var(--size-4));\n    --_gap: var(--dialog-gap, var(--size-4));\n    --_max-width: var(--dialog-max-width, 32rem);\n    --_elevation: var(--shadow-xl);\n    --_backdrop-filter: none;\n    --_backdrop-bg: var(--dialog-backdrop, color-mix(in srgb, var(--color-canvas) 40%, transparent));\n    --_panel-bg: var(\n      --dialog-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_panel-blur: var(--dialog-panel-blur, var(--blur-md));\n    --_panel-border-color: var(\n      --dialog-border-color,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n      )\n    );\n\n    display: contents;\n  }\n\n  /* =====================\n       Native <dialog> resets\n       ===================== */\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    pointer-events: none;\n    background: transparent;\n    border: none;\n  }\n\n  /* all:unset removes the UA stylesheet's dialog:not([open]){display:none} — restore it */\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog[open] {\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: var(--_backdrop-filter);\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-normal) ease,\n      overlay var(--transition-normal) ease allow-discrete,\n      display var(--transition-normal) ease allow-discrete\n    );\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  dialog.closing::backdrop {\n    opacity: 0;\n  }\n\n  /* =====================\n       Panel (the visible dialog box)\n       ===================== */\n\n  .panel {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--_max-width);\n    max-width: calc(100vw - var(--size-8));\n    max-height: calc(100dvh - var(--size-8));\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--dialog-shadow, var(--_elevation));\n    opacity: 1;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: scale(1) translateY(0);\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1),\n      transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1)\n    );\n\n    @starting-style {\n      opacity: 0;\n      transform: scale(0.96) translateY(var(--size-2));\n    }\n  }\n\n  dialog.closing .panel {\n    opacity: 0;\n    transform: scale(0.96) translateY(var(--size-2));\n  }\n\n  /* =====================\n       Sizes\n       ===================== */\n\n  .panel[data-size='sm'] {\n    --_max-width: var(--dialog-max-width, 22rem);\n  }\n\n  .panel[data-size='md'] {\n    --_max-width: var(--dialog-max-width, 32rem);\n  }\n\n  .panel[data-size='lg'] {\n    --_max-width: var(--dialog-max-width, 48rem);\n  }\n\n  .panel[data-size='xl'] {\n    --_max-width: var(--dialog-max-width, 64rem);\n  }\n\n  .panel[data-size='full'] {\n    width: calc(100vw - var(--size-8));\n    max-width: calc(100vw - var(--size-8));\n    max-height: calc(100dvh - var(--size-8));\n  }\n\n  /* =====================\n       Header\n       ===================== */\n\n  .header {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--_padding);\n    padding-bottom: 0;\n  }\n\n  .header[hidden] {\n    display: none;\n  }\n\n  .title {\n    flex: 1;\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-900);\n  }\n\n  .close {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    min-width: var(--_touch-target);\n    height: var(--size-8);\n    min-height: var(--_touch-target);\n    padding: 0;\n    margin-inline-start: auto;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: var(--_motion-transition, background var(--transition-fast), color var(--transition-fast));\n  }\n\n  .close:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-200);\n  }\n\n  .close:focus-visible {\n    outline: var(--border-2) solid var(--color-focus);\n    outline-offset: var(--border-2);\n  }\n\n  .close[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Body\n       ===================== */\n\n  .body {\n    flex: 1;\n    padding: var(--_padding);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    color: var(--color-contrast-700);\n  }\n\n  /* =====================\n       Footer\n       ===================== */\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    flex-wrap: wrap;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: flex-end;\n    padding: var(--_padding);\n    padding-top: 0;\n  }\n\n  .footer[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Dividers when header/footer present\n       ===================== */\n\n  .header:not([hidden]) + .body {\n    padding-top: var(--size-4);\n  }\n\n  .body + .footer:not([hidden]) {\n    padding-top: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-100);\n  }\n\n  @media (width <= 640px) {\n    .panel,\n    .panel[data-size='sm'],\n    .panel[data-size='md'],\n    .panel[data-size='lg'],\n    .panel[data-size='xl'] {\n      width: calc(100vw - var(--size-4));\n      max-width: calc(100vw - var(--size-4));\n      max-height: calc(100dvh - var(--size-4));\n    }\n\n    .header,\n    .body,\n    .footer {\n      padding-inline: var(--size-3);\n    }\n  }\n}\n\n@layer buildit.config {\n  :host([backdrop='blur']) {\n    --_backdrop-filter: blur(var(--blur-xs));\n  }\n\n  :host([backdrop='transparent']) {\n    --_backdrop-bg: transparent;\n  }\n\n  /* Panel elevation / shadow scale */\n  :host([elevation='none']) {\n    --_elevation: var(--shadow-none);\n  }\n\n  :host([elevation='sm']) {\n    --_elevation: var(--shadow-sm);\n  }\n\n  :host([elevation='md']) {\n    --_elevation: var(--shadow-md);\n  }\n\n  :host([elevation='lg']) {\n    --_elevation: var(--shadow-lg);\n  }\n\n  :host([elevation='xl']) {\n    --_elevation: var(--shadow-xl);\n  }\n\n  :host([elevation='2xl']) {\n    --_elevation: var(--shadow-2xl);\n  }\n\n  /* Padding scale */\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n}\n"],"mappings":""}

package/dist/overlay/dialog/dialog.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/overlay/dialog/dialog.css?inline
+var e = "@layer buildit.base{:host{--_radius:var(--dialog-radius,var(--rounded-lg));--_padding:var(--dialog-padding,var(--size-4));--_gap:var(--dialog-gap,var(--size-4));--_max-width:var(--dialog-max-width,32rem);--_elevation:var(--shadow-xl);--_backdrop-filter:none;--_backdrop-bg:var(--dialog-backdrop,color-mix(in srgb, var(--color-canvas) 40%, transparent));--_panel-bg:var(--dialog-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_panel-blur:var(--dialog-panel-blur,var(--blur-md));--_panel-border-color:var(--dialog-border-color,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent)));display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;background:0 0;border:none;justify-content:center;align-items:center;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;display:flex;position:fixed;inset:0;overflow:hidden}dialog:not([open]){display:none}dialog[open]{pointer-events:auto}dialog::-ms-backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:var(--_motion-transition,opacity var(--transition-normal) ease, overlay var(--transition-normal) ease allow-discrete, display var(--transition-normal) ease allow-discrete)}@starting-style{dialog::-ms-backdrop{opacity:0}}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:var(--_motion-transition,opacity var(--transition-normal) ease, overlay var(--transition-normal) ease allow-discrete, display var(--transition-normal) ease allow-discrete)}@starting-style{dialog::backdrop{opacity:0}}dialog.closing::-ms-backdrop{opacity:0}dialog.closing::backdrop{opacity:0}.panel{box-sizing:border-box;width:var(--_max-width);max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8));background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--_radius);box-shadow:var(--dialog-shadow,var(--_elevation));opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:var(--_motion-transition,opacity var(--transition-normal) cubic-bezier(.16, 1, .3, 1), transform var(--transition-normal) cubic-bezier(.16, 1, .3, 1));flex-direction:column;display:flex;position:relative;overflow:hidden;transform:scale(1)translateY(0)}@starting-style{.panel{opacity:0;transform:scale(.96) translateY(var(--size-2))}}dialog.closing .panel{opacity:0;transform:scale(.96) translateY(var(--size-2))}.panel[data-size=sm]{--_max-width:var(--dialog-max-width,22rem)}.panel[data-size=md]{--_max-width:var(--dialog-max-width,32rem)}.panel[data-size=lg]{--_max-width:var(--dialog-max-width,48rem)}.panel[data-size=xl]{--_max-width:var(--dialog-max-width,64rem)}.panel[data-size=full]{width:calc(100vw - var(--size-8));max-width:calc(100vw - var(--size-8));max-height:calc(100dvh - var(--size-8))}.header{gap:var(--size-2);padding:var(--_padding);flex-shrink:0;align-items:center;padding-bottom:0;display:flex}.header[hidden]{display:none}.title{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--color-contrast-900);flex:1}.close{width:var(--size-8);min-width:var(--_touch-target);height:var(--size-8);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-md);transition:var(--_motion-transition,background var(--transition-fast), color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.close:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.close:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close:hover{color:var(--color-contrast-900);background:var(--color-contrast-200)}.close:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.close[hidden]{display:none}.body{padding:var(--_padding);overscroll-behavior:contain;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-contrast-700);flex:1;overflow-y:auto}.footer{gap:var(--_gap);padding:var(--_padding);flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;padding-top:0;display:flex}.footer[hidden]{display:none}.header:not([hidden])+.body{padding-top:var(--size-4)}.body+.footer:not([hidden]){padding-top:var(--size-4);border-top:var(--border) solid var(--color-contrast-100)}@media (width<=640px){.panel,.panel[data-size=sm],.panel[data-size=md],.panel[data-size=lg],.panel[data-size=xl]{width:calc(100vw - var(--size-4));max-width:calc(100vw - var(--size-4));max-height:calc(100dvh - var(--size-4))}.header,.body,.footer{padding-inline:var(--size-3)}}}@layer buildit.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}:host([elevation=none]){--_elevation:var(--shadow-none)}:host([elevation=sm]){--_elevation:var(--shadow-sm)}:host([elevation=md]){--_elevation:var(--shadow-md)}:host([elevation=lg]){--_elevation:var(--shadow-lg)}:host([elevation=xl]){--_elevation:var(--shadow-xl)}:host([elevation=\"2xl\"]){--_elevation:var(--shadow-2xl)}:host([padding=none]){--_padding:var(--size-0)}:host([padding=sm]){--_padding:var(--size-3)}:host([padding=md]){--_padding:var(--size-4)}:host([padding=lg]){--_padding:var(--size-6)}:host([padding=xl]){--_padding:var(--size-8)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=dialog.css?inline.js.map

package/dist/overlay/dialog/dialog.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.css?inline.js","names":[],"sources":["../../../src/overlay/dialog/dialog.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_radius: var(--dialog-radius, var(--rounded-lg));\n    --_padding: var(--dialog-padding, var(--size-4));\n    --_gap: var(--dialog-gap, var(--size-4));\n    --_max-width: var(--dialog-max-width, 32rem);\n    --_elevation: var(--shadow-xl);\n    --_backdrop-filter: none;\n    --_backdrop-bg: var(--dialog-backdrop, color-mix(in srgb, var(--color-canvas) 40%, transparent));\n    --_panel-bg: var(\n      --dialog-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_panel-blur: var(--dialog-panel-blur, var(--blur-md));\n    --_panel-border-color: var(\n      --dialog-border-color,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n      )\n    );\n\n    display: contents;\n  }\n\n  /* =====================\n       Native <dialog> resets\n       ===================== */\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    pointer-events: none;\n    background: transparent;\n    border: none;\n  }\n\n  /* all:unset removes the UA stylesheet's dialog:not([open]){display:none} — restore it */\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog[open] {\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: var(--_backdrop-filter);\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-normal) ease,\n      overlay var(--transition-normal) ease allow-discrete,\n      display var(--transition-normal) ease allow-discrete\n    );\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  dialog.closing::backdrop {\n    opacity: 0;\n  }\n\n  /* =====================\n       Panel (the visible dialog box)\n       ===================== */\n\n  .panel {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--_max-width);\n    max-width: calc(100vw - var(--size-8));\n    max-height: calc(100dvh - var(--size-8));\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--dialog-shadow, var(--_elevation));\n    opacity: 1;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: scale(1) translateY(0);\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1),\n      transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1)\n    );\n\n    @starting-style {\n      opacity: 0;\n      transform: scale(0.96) translateY(var(--size-2));\n    }\n  }\n\n  dialog.closing .panel {\n    opacity: 0;\n    transform: scale(0.96) translateY(var(--size-2));\n  }\n\n  /* =====================\n       Sizes\n       ===================== */\n\n  .panel[data-size='sm'] {\n    --_max-width: var(--dialog-max-width, 22rem);\n  }\n\n  .panel[data-size='md'] {\n    --_max-width: var(--dialog-max-width, 32rem);\n  }\n\n  .panel[data-size='lg'] {\n    --_max-width: var(--dialog-max-width, 48rem);\n  }\n\n  .panel[data-size='xl'] {\n    --_max-width: var(--dialog-max-width, 64rem);\n  }\n\n  .panel[data-size='full'] {\n    width: calc(100vw - var(--size-8));\n    max-width: calc(100vw - var(--size-8));\n    max-height: calc(100dvh - var(--size-8));\n  }\n\n  /* =====================\n       Header\n       ===================== */\n\n  .header {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--_padding);\n    padding-bottom: 0;\n  }\n\n  .header[hidden] {\n    display: none;\n  }\n\n  .title {\n    flex: 1;\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-900);\n  }\n\n  .close {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    min-width: var(--_touch-target);\n    height: var(--size-8);\n    min-height: var(--_touch-target);\n    padding: 0;\n    margin-inline-start: auto;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: var(--_motion-transition, background var(--transition-fast), color var(--transition-fast));\n  }\n\n  .close:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-200);\n  }\n\n  .close:focus-visible {\n    outline: var(--border-2) solid var(--color-focus);\n    outline-offset: var(--border-2);\n  }\n\n  .close[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Body\n       ===================== */\n\n  .body {\n    flex: 1;\n    padding: var(--_padding);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    color: var(--color-contrast-700);\n  }\n\n  /* =====================\n       Footer\n       ===================== */\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    flex-wrap: wrap;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: flex-end;\n    padding: var(--_padding);\n    padding-top: 0;\n  }\n\n  .footer[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Dividers when header/footer present\n       ===================== */\n\n  .header:not([hidden]) + .body {\n    padding-top: var(--size-4);\n  }\n\n  .body + .footer:not([hidden]) {\n    padding-top: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-100);\n  }\n\n  @media (width <= 640px) {\n    .panel,\n    .panel[data-size='sm'],\n    .panel[data-size='md'],\n    .panel[data-size='lg'],\n    .panel[data-size='xl'] {\n      width: calc(100vw - var(--size-4));\n      max-width: calc(100vw - var(--size-4));\n      max-height: calc(100dvh - var(--size-4));\n    }\n\n    .header,\n    .body,\n    .footer {\n      padding-inline: var(--size-3);\n    }\n  }\n}\n\n@layer buildit.config {\n  :host([backdrop='blur']) {\n    --_backdrop-filter: blur(var(--blur-xs));\n  }\n\n  :host([backdrop='transparent']) {\n    --_backdrop-bg: transparent;\n  }\n\n  /* Panel elevation / shadow scale */\n  :host([elevation='none']) {\n    --_elevation: var(--shadow-none);\n  }\n\n  :host([elevation='sm']) {\n    --_elevation: var(--shadow-sm);\n  }\n\n  :host([elevation='md']) {\n    --_elevation: var(--shadow-md);\n  }\n\n  :host([elevation='lg']) {\n    --_elevation: var(--shadow-lg);\n  }\n\n  :host([elevation='xl']) {\n    --_elevation: var(--shadow-xl);\n  }\n\n  :host([elevation='2xl']) {\n    --_elevation: var(--shadow-2xl);\n  }\n\n  /* Padding scale */\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n}\n"],"mappings":""}

package/dist/overlay/dialog/dialog.d.ts

@@ -0,0 +1,98 @@
+import type { PaddingSize, RoundedSize } from '../../types';
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type DialogBackdrop = 'opaque' | 'blur' | 'transparent';
+type DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Dialog component properties */
+export type BitDialogEvents = {
+    close: undefined;
+    open: undefined;
+};
+export type BitDialogProps = {
+    /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */
+    backdrop?: DialogBackdrop;
+    /** Show a close (×) button in the header */
+    dismissible?: boolean;
+    /** Panel shadow elevation — defaults to 'xl' */
+    elevation?: DialogElevation;
+    /**
+     * CSS selector for the element inside the dialog that should receive focus when the dialog opens.
+     * Defaults to the first focusable element (browser default).
+     * @example 'input[name="email"]' | '#confirm-btn'
+     */
+    'initial-focus'?: string;
+    /** Dialog title shown in the header (used as aria-label when no header slot) */
+    label?: string;
+    /** Controls the open state of the dialog */
+    open?: boolean;
+    /** Internal padding size */
+    padding?: PaddingSize;
+    /** When true, clicking the backdrop does not close the dialog */
+    persistent?: boolean;
+    /**
+     * When true (default), focus returns to the element that triggered the dialog after it closes.
+     * Set to false if you want to manage focus manually.
+     */
+    'return-focus'?: boolean;
+    /** Border radius */
+    rounded?: RoundedSize | '';
+    /** Dialog size */
+    size?: DialogSize;
+};
+/**
+ * A modal dialog that traps focus, blocks page interaction, and dismisses on
+ * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking
+ * and browser-managed accessibility.
+ *
+ * @element bit-dialog
+ *
+ * @attr {boolean} open - Open/close the dialog
+ * @attr {string} label - Dialog title (also used as aria-label)
+ * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+ * @attr {boolean} dismissible - Show a close (×) button in the header
+ * @attr {boolean} persistent - Prevent backdrop-click from closing
+ * @attr {string} rounded - Border radius size
+ * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'
+ * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+ * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+ *
+ * @fires open - Fired when the dialog opens
+ * @fires close - Fired when the dialog closes (any trigger)
+ *
+ * @slot - Dialog body content
+ * @slot header - Custom header content (replaces the default title + close layout)
+ * @slot footer - Action buttons or additional content at the bottom
+ *
+ * @cssprop --dialog-bg - Panel background color
+ * @cssprop --dialog-border-color - Panel border color
+ * @cssprop --dialog-radius - Panel border radius
+ * @cssprop --dialog-shadow - Panel drop shadow
+ * @cssprop --dialog-padding - Padding for header, body, and footer sections
+ * @cssprop --dialog-gap - Gap between footer action buttons
+ * @cssprop --dialog-backdrop - Backdrop overlay color
+ * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)
+ *
+ * @example
+ * ```html
+ * <bit-dialog label="Confirm action" dismissible>
+ *   <p>Are you sure you want to delete this item?</p>
+ *   <div slot="footer">
+ *     <bit-button variant="ghost" id="cancel">Cancel</bit-button>
+ *     <bit-button color="error" id="confirm">Delete</bit-button>
+ *   </div>
+ * </bit-dialog>
+ *
+ * <script type="module">
+ *   import '@vielzeug/buildit/dialog';
+ *   const dialog = document.querySelector('bit-dialog');
+ *   document.querySelector('#open-btn').addEventListener('click', () => {
+ *     dialog.setAttribute('open', '');
+ *   });
+ *   document.querySelector('#cancel').addEventListener('click', () => {
+ *     dialog.removeAttribute('open');
+ *   });
+ * </script>
+ * ```
+ */
+export declare const DIALOG_TAG: string;
+export {};
+//# sourceMappingURL=dialog.d.ts.map

package/dist/overlay/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/overlay/dialog/dialog.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAS5D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACrD,KAAK,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,CAAC;AACxD,KAAK,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAElE,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,qHAAqH;IACrH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,UAAU,QAmJrB,CAAC"}

package/dist/overlay/drawer/drawer.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_backdrop-bg:var(--drawer-backdrop,color-mix(in srgb, var(--color-canvas) 40%, transparent));--_backdrop-filter:none;--_panel-bg:var(--drawer-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_panel-blur:var(--drawer-panel-blur,var(--blur-md));--_panel-shadow:var(--drawer-shadow,var(--shadow-xl));--_panel-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent));--_panel-bleed:var(--size-8);display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;display:flex;position:fixed;inset:0}dialog:not([open]){display:none}dialog[open]{pointer-events:auto;display:flex}dialog::-ms-backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete, opacity var(--transition-normal), backdrop-filter var(--transition-normal)}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete, opacity var(--transition-normal), backdrop-filter var(--transition-normal)}@starting-style{dialog[open]::-ms-backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}dialog[open]::backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}.panel{box-sizing:border-box;background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);box-shadow:var(--_panel-shadow);opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--transition-normal), transform var(--transition-normal), display var(--transition-normal) allow-discrete;flex-direction:column;display:flex;position:absolute;overflow:hidden;transform:translate(0)}@starting-style{dialog[open] .panel{opacity:0;transform:var(--_panel-exit-transform,translate3d(0, 0, 0))}}:host([placement=left]) .panel{--_panel-exit-transform:translateX(calc(-100% - var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host([placement=left]) .panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=left]) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host(:not([placement])) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host(:not([placement])) .panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host(:not([placement])) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=right]) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host([placement=right]) .panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host([placement=right]) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=top]) .panel{--_panel-exit-transform:translateY(calc(-100% - var(--_panel-bleed)));height:calc(var(--drawer-size,16rem) + var(--_panel-bleed));max-height:calc(100dvh + var(--_panel-bleed));margin-top:calc(var(--_panel-bleed) * -1);padding-top:var(--_panel-bleed);border-top:none;border-left:none;border-right:none;top:0;left:0;right:0}:host([placement=bottom]) .panel{--_panel-exit-transform:translateY(calc(100% + var(--_panel-bleed)));height:calc(var(--drawer-size,16rem) + var(--_panel-bleed));max-height:calc(100dvh + var(--_panel-bleed));margin-bottom:calc(var(--_panel-bleed) * -1);padding-bottom:var(--_panel-bleed);border-bottom:none;border-left:none;border-right:none;bottom:0;left:0;right:0}:host(:dir(rtl)[placement=left]) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)))}:host(:dir(rtl)[placement=right]) .panel,:host(:dir(rtl):not([placement])) .panel{--_panel-exit-transform:translateX(calc(-100% - var(--_panel-bleed)))}:host([size=sm]){--drawer-size:14rem}:host([size=lg]){--drawer-size:32rem}:host([size=full]){--drawer-size:100%}:host([size=full]) .panel{width:calc(100% + var(--_panel-bleed));max-width:none;height:calc(100% + var(--_panel-bleed));border:none;max-height:none}.header{gap:var(--size-2);padding:var(--size-4);border-bottom:var(--border) solid var(--color-contrast-200);flex-shrink:0;align-items:center;display:flex}.header-title{text-overflow:ellipsis;min-width:0;font-size:var(--text-lg);font-weight:var(--font-semibold);white-space:nowrap;flex:1;overflow:hidden}.body{padding:var(--size-4);flex:1;overflow-y:auto}.footer{gap:var(--size-2);padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0;justify-content:flex-end;display:flex}.header[hidden],.footer[hidden],.close-btn[hidden]{display:none}.close-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.close-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.close-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.close-btn:focus-visible{outline:var(--focus-ring)}@media (width<=640px){:host([placement=left]) .panel,:host(:not([placement])) .panel,:host([placement=right]) .panel{width:calc(min(var(--drawer-size,20rem), calc(100vw - var(--size-2))) + var(--_panel-bleed));max-width:calc(100vw - var(--size-2) + var(--_panel-bleed))}:host([placement=top]) .panel,:host([placement=bottom]) .panel{height:calc(min(var(--drawer-size,16rem), calc(100dvh - var(--size-2))) + var(--_panel-bleed));max-height:calc(100dvh - var(--size-2) + var(--_panel-bleed))}.header,.body,.footer{padding:var(--size-3)}}}@layer buildit.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}}`;exports.default=e;
+//# sourceMappingURL=drawer.css?inline.cjs.map

package/dist/overlay/drawer/drawer.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.css?inline.cjs","names":[],"sources":["../../../src/overlay/drawer/drawer.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_backdrop-bg: var(--drawer-backdrop, color-mix(in srgb, var(--color-canvas) 40%, transparent));\n    --_backdrop-filter: none;\n    --_panel-bg: var(\n      --drawer-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_panel-blur: var(--drawer-panel-blur, var(--blur-md));\n    --_panel-shadow: var(--drawer-shadow, var(--shadow-xl));\n    --_panel-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n    );\n    --_panel-bleed: var(--size-8);\n\n    display: contents;\n  }\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    pointer-events: none;\n    transition:\n      display var(--transition-normal) allow-discrete,\n      overlay var(--transition-normal) allow-discrete;\n  }\n\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog[open] {\n    display: flex;\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: var(--_backdrop-filter);\n    transition:\n      display var(--transition-normal) allow-discrete,\n      overlay var(--transition-normal) allow-discrete,\n      opacity var(--transition-normal),\n      backdrop-filter var(--transition-normal);\n  }\n\n  @starting-style {\n    dialog[open]::backdrop {\n      opacity: 0;\n      backdrop-filter: blur(0);\n    }\n  }\n\n  .panel {\n    position: absolute;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    box-shadow: var(--_panel-shadow);\n    opacity: 1;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: translate3d(0, 0, 0);\n    transition:\n      opacity var(--transition-normal),\n      transform var(--transition-normal),\n      display var(--transition-normal) allow-discrete;\n  }\n\n  @starting-style {\n    dialog[open] .panel {\n      opacity: 0;\n      transform: var(--_panel-exit-transform, translate3d(0, 0, 0));\n    }\n  }\n\n  /* left */\n  :host([placement='left']) .panel {\n    --_panel-exit-transform: translateX(calc(-100% - var(--_panel-bleed)));\n\n    inset-block: 0;\n    inset-inline-start: 0;\n    width: calc(var(--drawer-size, 20rem) + var(--_panel-bleed));\n    max-width: calc(100dvw + var(--_panel-bleed));\n    padding-inline-start: var(--_panel-bleed);\n    margin-inline-start: calc(var(--_panel-bleed) * -1);\n    border-block: none;\n    border-inline-start: none;\n  }\n\n  /* right (default) */\n  :host(:not([placement])) .panel,\n  :host([placement='right']) .panel {\n    --_panel-exit-transform: translateX(calc(100% + var(--_panel-bleed)));\n\n    inset-block: 0;\n    inset-inline-end: 0;\n    width: calc(var(--drawer-size, 20rem) + var(--_panel-bleed));\n    max-width: calc(100dvw + var(--_panel-bleed));\n    padding-inline-end: var(--_panel-bleed);\n    margin-inline-end: calc(var(--_panel-bleed) * -1);\n    border-block: none;\n    border-inline-end: none;\n  }\n\n  /* top */\n  :host([placement='top']) .panel {\n    --_panel-exit-transform: translateY(calc(-100% - var(--_panel-bleed)));\n\n    inset-block-start: 0;\n    inset-inline: 0;\n    height: calc(var(--drawer-size, 16rem) + var(--_panel-bleed));\n    max-height: calc(100dvh + var(--_panel-bleed));\n    padding-block-start: var(--_panel-bleed);\n    margin-block-start: calc(var(--_panel-bleed) * -1);\n    border-block-start: none;\n    border-inline: none;\n  }\n\n  /* bottom */\n  :host([placement='bottom']) .panel {\n    --_panel-exit-transform: translateY(calc(100% + var(--_panel-bleed)));\n\n    inset-block-end: 0;\n    inset-inline: 0;\n    height: calc(var(--drawer-size, 16rem) + var(--_panel-bleed));\n    max-height: calc(100dvh + var(--_panel-bleed));\n    padding-block-end: var(--_panel-bleed);\n    margin-block-end: calc(var(--_panel-bleed) * -1);\n    border-block-end: none;\n    border-inline: none;\n  }\n\n  /* RTL overrides */\n  :host(:dir(rtl)[placement='left']) .panel {\n    --_panel-exit-transform: translateX(calc(100% + var(--_panel-bleed)));\n  }\n\n  :host(:dir(rtl)[placement='right']) .panel,\n  :host(:dir(rtl):not([placement])) .panel {\n    --_panel-exit-transform: translateX(calc(-100% - var(--_panel-bleed)));\n  }\n\n  /* Size utilities */\n  :host([size='sm']) {\n    --drawer-size: 14rem;\n  }\n\n  :host([size='lg']) {\n    --drawer-size: 32rem;\n  }\n\n  :host([size='full']) {\n    --drawer-size: 100%;\n  }\n\n  :host([size='full']) .panel {\n    width: calc(100% + var(--_panel-bleed));\n    max-width: none;\n    height: calc(100% + var(--_panel-bleed));\n    max-height: none;\n    border: none;\n  }\n\n  /* Header / Body / Footer */\n  .header {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-4);\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .header-title {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    white-space: nowrap;\n  }\n\n  .body {\n    flex: 1;\n    padding: var(--size-4);\n    overflow-y: auto;\n  }\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    justify-content: flex-end;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .header[hidden],\n  .footer[hidden],\n  .close-btn[hidden] {\n    display: none;\n  }\n\n  .close-btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    margin-inline-start: auto;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition: var(--transition-fast);\n  }\n\n  .close-btn:hover {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-200);\n  }\n\n  .close-btn:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  @media (width <= 640px) {\n    :host([placement='left']) .panel,\n    :host(:not([placement])) .panel,\n    :host([placement='right']) .panel {\n      width: calc(min(var(--drawer-size, 20rem), calc(100vw - var(--size-2))) + var(--_panel-bleed));\n      max-width: calc(100vw - var(--size-2) + var(--_panel-bleed));\n    }\n\n    :host([placement='top']) .panel,\n    :host([placement='bottom']) .panel {\n      height: calc(min(var(--drawer-size, 16rem), calc(100dvh - var(--size-2))) + var(--_panel-bleed));\n      max-height: calc(100dvh - var(--size-2) + var(--_panel-bleed));\n    }\n\n    .header,\n    .body,\n    .footer {\n      padding: var(--size-3);\n    }\n  }\n}\n\n@layer buildit.config {\n  :host([backdrop='blur']) {\n    --_backdrop-filter: blur(var(--blur-xs));\n  }\n\n  :host([backdrop='transparent']) {\n    --_backdrop-bg: transparent;\n  }\n}\n"],"mappings":""}

package/dist/overlay/drawer/drawer.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/overlay/drawer/drawer.css?inline
+var e = "@layer buildit.base{:host{--_backdrop-bg:var(--drawer-backdrop,color-mix(in srgb, var(--color-canvas) 40%, transparent));--_backdrop-filter:none;--_panel-bg:var(--drawer-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_panel-blur:var(--drawer-panel-blur,var(--blur-md));--_panel-shadow:var(--drawer-shadow,var(--shadow-xl));--_panel-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent));--_panel-bleed:var(--size-8);display:contents}dialog{all:unset;box-sizing:border-box;pointer-events:none;width:100%;max-width:100%;height:100%;max-height:100%;transition:display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;display:flex;position:fixed;inset:0}dialog:not([open]){display:none}dialog[open]{pointer-events:auto;display:flex}dialog::-ms-backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete, opacity var(--transition-normal), backdrop-filter var(--transition-normal)}dialog::backdrop{background:var(--_backdrop-bg);opacity:1;-webkit-backdrop-filter:var(--_backdrop-filter);backdrop-filter:var(--_backdrop-filter);transition:display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete, opacity var(--transition-normal), backdrop-filter var(--transition-normal)}@starting-style{dialog[open]::-ms-backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}dialog[open]::backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}.panel{box-sizing:border-box;background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);box-shadow:var(--_panel-shadow);opacity:1;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--transition-normal), transform var(--transition-normal), display var(--transition-normal) allow-discrete;flex-direction:column;display:flex;position:absolute;overflow:hidden;transform:translate(0)}@starting-style{dialog[open] .panel{opacity:0;transform:var(--_panel-exit-transform,translate3d(0, 0, 0))}}:host([placement=left]) .panel{--_panel-exit-transform:translateX(calc(-100% - var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host([placement=left]) .panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=left]) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host(:not([placement])) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host(:not([placement])) .panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host(:not([placement])) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=right]) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)));width:calc(var(--drawer-size,20rem) + var(--_panel-bleed));max-width:calc(100dvw + var(--_panel-bleed));border-top:none;border-bottom:none;top:0;bottom:0}:host([placement=right]) .panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:calc(var(--_panel-bleed) * -1);padding-right:var(--_panel-bleed);border-right:none;right:0}:host([placement=right]) .panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:calc(var(--_panel-bleed) * -1);padding-left:var(--_panel-bleed);border-left:none;left:0}:host([placement=top]) .panel{--_panel-exit-transform:translateY(calc(-100% - var(--_panel-bleed)));height:calc(var(--drawer-size,16rem) + var(--_panel-bleed));max-height:calc(100dvh + var(--_panel-bleed));margin-top:calc(var(--_panel-bleed) * -1);padding-top:var(--_panel-bleed);border-top:none;border-left:none;border-right:none;top:0;left:0;right:0}:host([placement=bottom]) .panel{--_panel-exit-transform:translateY(calc(100% + var(--_panel-bleed)));height:calc(var(--drawer-size,16rem) + var(--_panel-bleed));max-height:calc(100dvh + var(--_panel-bleed));margin-bottom:calc(var(--_panel-bleed) * -1);padding-bottom:var(--_panel-bleed);border-bottom:none;border-left:none;border-right:none;bottom:0;left:0;right:0}:host(:dir(rtl)[placement=left]) .panel{--_panel-exit-transform:translateX(calc(100% + var(--_panel-bleed)))}:host(:dir(rtl)[placement=right]) .panel,:host(:dir(rtl):not([placement])) .panel{--_panel-exit-transform:translateX(calc(-100% - var(--_panel-bleed)))}:host([size=sm]){--drawer-size:14rem}:host([size=lg]){--drawer-size:32rem}:host([size=full]){--drawer-size:100%}:host([size=full]) .panel{width:calc(100% + var(--_panel-bleed));max-width:none;height:calc(100% + var(--_panel-bleed));border:none;max-height:none}.header{gap:var(--size-2);padding:var(--size-4);border-bottom:var(--border) solid var(--color-contrast-200);flex-shrink:0;align-items:center;display:flex}.header-title{text-overflow:ellipsis;min-width:0;font-size:var(--text-lg);font-weight:var(--font-semibold);white-space:nowrap;flex:1;overflow:hidden}.body{padding:var(--size-4);flex:1;overflow-y:auto}.footer{gap:var(--size-2);padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0;justify-content:flex-end;display:flex}.header[hidden],.footer[hidden],.close-btn[hidden]{display:none}.close-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.close-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.close-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.close-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.close-btn:focus-visible{outline:var(--focus-ring)}@media (width<=640px){:host([placement=left]) .panel,:host(:not([placement])) .panel,:host([placement=right]) .panel{width:calc(min(var(--drawer-size,20rem), calc(100vw - var(--size-2))) + var(--_panel-bleed));max-width:calc(100vw - var(--size-2) + var(--_panel-bleed))}:host([placement=top]) .panel,:host([placement=bottom]) .panel{height:calc(min(var(--drawer-size,16rem), calc(100dvh - var(--size-2))) + var(--_panel-bleed));max-height:calc(100dvh - var(--size-2) + var(--_panel-bleed))}.header,.body,.footer{padding:var(--size-3)}}}@layer buildit.config{:host([backdrop=blur]){--_backdrop-filter:blur(var(--blur-xs))}:host([backdrop=transparent]){--_backdrop-bg:transparent}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=drawer.css?inline.js.map

package/dist/overlay/drawer/drawer.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.css?inline.js","names":[],"sources":["../../../src/overlay/drawer/drawer.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_backdrop-bg: var(--drawer-backdrop, color-mix(in srgb, var(--color-canvas) 40%, transparent));\n    --_backdrop-filter: none;\n    --_panel-bg: var(\n      --drawer-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_panel-blur: var(--drawer-panel-blur, var(--blur-md));\n    --_panel-shadow: var(--drawer-shadow, var(--shadow-xl));\n    --_panel-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n    );\n    --_panel-bleed: var(--size-8);\n\n    display: contents;\n  }\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    pointer-events: none;\n    transition:\n      display var(--transition-normal) allow-discrete,\n      overlay var(--transition-normal) allow-discrete;\n  }\n\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog[open] {\n    display: flex;\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: var(--_backdrop-filter);\n    transition:\n      display var(--transition-normal) allow-discrete,\n      overlay var(--transition-normal) allow-discrete,\n      opacity var(--transition-normal),\n      backdrop-filter var(--transition-normal);\n  }\n\n  @starting-style {\n    dialog[open]::backdrop {\n      opacity: 0;\n      backdrop-filter: blur(0);\n    }\n  }\n\n  .panel {\n    position: absolute;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    box-shadow: var(--_panel-shadow);\n    opacity: 1;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: translate3d(0, 0, 0);\n    transition:\n      opacity var(--transition-normal),\n      transform var(--transition-normal),\n      display var(--transition-normal) allow-discrete;\n  }\n\n  @starting-style {\n    dialog[open] .panel {\n      opacity: 0;\n      transform: var(--_panel-exit-transform, translate3d(0, 0, 0));\n    }\n  }\n\n  /* left */\n  :host([placement='left']) .panel {\n    --_panel-exit-transform: translateX(calc(-100% - var(--_panel-bleed)));\n\n    inset-block: 0;\n    inset-inline-start: 0;\n    width: calc(var(--drawer-size, 20rem) + var(--_panel-bleed));\n    max-width: calc(100dvw + var(--_panel-bleed));\n    padding-inline-start: var(--_panel-bleed);\n    margin-inline-start: calc(var(--_panel-bleed) * -1);\n    border-block: none;\n    border-inline-start: none;\n  }\n\n  /* right (default) */\n  :host(:not([placement])) .panel,\n  :host([placement='right']) .panel {\n    --_panel-exit-transform: translateX(calc(100% + var(--_panel-bleed)));\n\n    inset-block: 0;\n    inset-inline-end: 0;\n    width: calc(var(--drawer-size, 20rem) + var(--_panel-bleed));\n    max-width: calc(100dvw + var(--_panel-bleed));\n    padding-inline-end: var(--_panel-bleed);\n    margin-inline-end: calc(var(--_panel-bleed) * -1);\n    border-block: none;\n    border-inline-end: none;\n  }\n\n  /* top */\n  :host([placement='top']) .panel {\n    --_panel-exit-transform: translateY(calc(-100% - var(--_panel-bleed)));\n\n    inset-block-start: 0;\n    inset-inline: 0;\n    height: calc(var(--drawer-size, 16rem) + var(--_panel-bleed));\n    max-height: calc(100dvh + var(--_panel-bleed));\n    padding-block-start: var(--_panel-bleed);\n    margin-block-start: calc(var(--_panel-bleed) * -1);\n    border-block-start: none;\n    border-inline: none;\n  }\n\n  /* bottom */\n  :host([placement='bottom']) .panel {\n    --_panel-exit-transform: translateY(calc(100% + var(--_panel-bleed)));\n\n    inset-block-end: 0;\n    inset-inline: 0;\n    height: calc(var(--drawer-size, 16rem) + var(--_panel-bleed));\n    max-height: calc(100dvh + var(--_panel-bleed));\n    padding-block-end: var(--_panel-bleed);\n    margin-block-end: calc(var(--_panel-bleed) * -1);\n    border-block-end: none;\n    border-inline: none;\n  }\n\n  /* RTL overrides */\n  :host(:dir(rtl)[placement='left']) .panel {\n    --_panel-exit-transform: translateX(calc(100% + var(--_panel-bleed)));\n  }\n\n  :host(:dir(rtl)[placement='right']) .panel,\n  :host(:dir(rtl):not([placement])) .panel {\n    --_panel-exit-transform: translateX(calc(-100% - var(--_panel-bleed)));\n  }\n\n  /* Size utilities */\n  :host([size='sm']) {\n    --drawer-size: 14rem;\n  }\n\n  :host([size='lg']) {\n    --drawer-size: 32rem;\n  }\n\n  :host([size='full']) {\n    --drawer-size: 100%;\n  }\n\n  :host([size='full']) .panel {\n    width: calc(100% + var(--_panel-bleed));\n    max-width: none;\n    height: calc(100% + var(--_panel-bleed));\n    max-height: none;\n    border: none;\n  }\n\n  /* Header / Body / Footer */\n  .header {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-4);\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .header-title {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    white-space: nowrap;\n  }\n\n  .body {\n    flex: 1;\n    padding: var(--size-4);\n    overflow-y: auto;\n  }\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    justify-content: flex-end;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .header[hidden],\n  .footer[hidden],\n  .close-btn[hidden] {\n    display: none;\n  }\n\n  .close-btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    margin-inline-start: auto;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition: var(--transition-fast);\n  }\n\n  .close-btn:hover {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-200);\n  }\n\n  .close-btn:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  @media (width <= 640px) {\n    :host([placement='left']) .panel,\n    :host(:not([placement])) .panel,\n    :host([placement='right']) .panel {\n      width: calc(min(var(--drawer-size, 20rem), calc(100vw - var(--size-2))) + var(--_panel-bleed));\n      max-width: calc(100vw - var(--size-2) + var(--_panel-bleed));\n    }\n\n    :host([placement='top']) .panel,\n    :host([placement='bottom']) .panel {\n      height: calc(min(var(--drawer-size, 16rem), calc(100dvh - var(--size-2))) + var(--_panel-bleed));\n      max-height: calc(100dvh - var(--size-2) + var(--_panel-bleed));\n    }\n\n    .header,\n    .body,\n    .footer {\n      padding: var(--size-3);\n    }\n  }\n}\n\n@layer buildit.config {\n  :host([backdrop='blur']) {\n    --_backdrop-filter: blur(var(--blur-xs));\n  }\n\n  :host([backdrop='transparent']) {\n    --_backdrop-bg: transparent;\n  }\n}\n"],"mappings":""}

package/dist/overlay/drawer/drawer.d.ts

@@ -0,0 +1,98 @@
+type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+type DrawerSize = 'sm' | 'lg' | 'full';
+type DrawerBackdrop = 'opaque' | 'blur' | 'transparent';
+/** Element interface exposing the imperative API for `bit-drawer`. */
+export interface DrawerElement extends HTMLElement, Omit<BitDrawerProps, 'title'> {
+    /** Programmatically open the drawer. Equivalent to setting `open`. */
+    show(): void;
+    /** Programmatically close the drawer with the exit animation. */
+    hide(): void;
+}
+/** Drawer component properties */
+export type BitDrawerEvents = {
+    close: {
+        placement: DrawerPlacement;
+    };
+    open: {
+        placement: DrawerPlacement;
+    };
+};
+export type BitDrawerProps = {
+    /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */
+    backdrop?: DrawerBackdrop;
+    /** Show the close (×) button in the header (default: true) */
+    dismissable?: boolean;
+    /**
+     * CSS selector for the element inside the drawer that should receive focus on open.
+     * Defaults to native dialog focus management (first focusable element).
+     * @example '#submit-btn' | 'input[name="email"]'
+     */
+    'initial-focus'?: string;
+    /**
+     * Invisible accessible label for the dialog (`aria-label`).
+     * Use when the drawer has no visible title (e.g. image-only content).
+     * When omitted, `aria-labelledby` points to the visible header title instead.
+     */
+    label?: string;
+    /** Controlled open state */
+    open?: boolean;
+    /** When true, backdrop clicks do not close the drawer (default: false) */
+    persistent?: boolean;
+    /** Side from which the drawer slides in */
+    placement?: DrawerPlacement;
+    /**
+     * When true (default), focus returns to the triggering element after the drawer closes.
+     * Set to false to manage focus manually.
+     */
+    'return-focus'?: boolean;
+    /** Drawer width/height preset */
+    size?: DrawerSize;
+    /**
+     * Visible title text rendered inside the header.
+     * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.
+     */
+    title?: string;
+};
+/**
+ * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.
+ *
+ * @element bit-drawer
+ *
+ * @attr {boolean} open - Controlled open/close state
+ * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'
+ * @attr {string} size - 'sm' | 'lg' | 'full'
+ * @attr {string} title - Visible header title text
+ * @attr {string} label - Invisible aria-label (for drawers without a visible title)
+ * @attr {boolean} dismissable - Show the close (×) button (default: true)
+ * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'
+ * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)
+ *
+ * @slot header - Drawer header content
+ * @slot - Main body content
+ * @slot footer - Drawer footer content
+ *
+ * @fires open - When the drawer opens
+ * @fires close - When the drawer closes
+ *
+ * @cssprop --drawer-backdrop - Backdrop background
+ * @cssprop --drawer-bg - Panel background color
+ * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)
+ * @cssprop --drawer-shadow - Panel box-shadow
+ *
+ * @example
+ * ```html
+ * <!-- With visible title -->
+ * <bit-drawer open title="Settings" placement="right">
+ *   <p>Settings content here.</p>
+ * </bit-drawer>
+ *
+ * <!-- With custom header slot -->
+ * <bit-drawer open placement="right">
+ *   <span slot="header">Settings</span>
+ *   <p>Settings content here.</p>
+ * </bit-drawer>
+ * ```
+ */
+export declare const DRAWER_TAG: string;
+export {};
+//# sourceMappingURL=drawer.d.ts.map

package/dist/overlay/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/overlay/drawer/drawer.ts"],"names":[],"mappings":"AAOA,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC3D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACvC,KAAK,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,CAAC;AAExD,sEAAsE;AACtE,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/E,sEAAsE;IACtE,IAAI,IAAI,IAAI,CAAC;IACb,iEAAiE;IACjE,IAAI,IAAI,IAAI,CAAC;CACd;AAED,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE;QAAE,SAAS,EAAE,eAAe,CAAA;KAAE,CAAC;IACtC,IAAI,EAAE;QAAE,SAAS,EAAE,eAAe,CAAA;KAAE,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,UAAU,QA6IrB,CAAC"}

package/dist/overlay/index.cjs

@@ -0,0 +1 @@
+require(`../dialog.cjs`),require(`../drawer.cjs`),require(`../menu.cjs`),require(`../popover.cjs`),require(`../tooltip.cjs`);

package/dist/overlay/index.d.ts

@@ -0,0 +1,11 @@
+export { DIALOG_TAG } from './dialog/dialog';
+export type { BitDialogEvents, BitDialogProps } from './dialog/dialog';
+export { DRAWER_TAG } from './drawer/drawer';
+export type { BitDrawerEvents, BitDrawerProps } from './drawer/drawer';
+export { MENU_ITEM_TAG, MENU_TAG } from './menu/menu';
+export type { BitMenuEvents, BitMenuItemProps, BitMenuItemType, BitMenuProps, MenuSelectDetail } from './menu/menu';
+export { POPOVER_TAG } from './popover/popover';
+export type { BitPopoverEvents, BitPopoverProps } from './popover/popover';
+export { TOOLTIP_TAG } from './tooltip/tooltip';
+export type { BitTooltipProps } from './tooltip/tooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/overlay/index.js

@@ -0,0 +1,5 @@
+import "../dialog.js";
+import "../drawer.js";
+import "../menu.js";
+import "../popover.js";
+import "../tooltip.js";

package/dist/overlay/menu/menu.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_menu-panel-bg:var(--menu-panel-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_menu-panel-border-color:var(--menu-panel-border-color,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent)));--_menu-panel-blur:var(--menu-panel-blur,var(--blur-md));--_menu-panel-shadow:var(--menu-panel-shadow,var(--shadow-xl));display:inline-block;position:relative}.menu-panel{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;visibility:hidden;min-width:var(--menu-panel-min-width,10rem);padding:var(--size-1);pointer-events:none;background:var(--_menu-panel-bg);border:var(--border) solid var(--_menu-panel-border-color);border-radius:var(--menu-panel-radius,var(--rounded-lg));box-shadow:var(--_menu-panel-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--_menu-panel-blur));backdrop-filter:blur(var(--_menu-panel-blur));transform-origin:top;transition:opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);margin:0;position:fixed;top:0;transform:translateY(-4px)scale(.97)}.menu-panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.menu-panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.menu-panel[data-open]{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0)scale(1)}::slotted(bit-menu-item),::slotted(bit-menu-separator){display:block}}`;exports.default=e;
+//# sourceMappingURL=menu.css?inline.cjs.map

package/dist/overlay/menu/menu.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.css?inline.cjs","names":[],"sources":["../../../src/overlay/menu/menu.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_menu-panel-bg: var(\n      --menu-panel-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_menu-panel-border-color: var(\n      --menu-panel-border-color,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n      )\n    );\n    --_menu-panel-blur: var(--menu-panel-blur, var(--blur-md));\n    --_menu-panel-shadow: var(--menu-panel-shadow, var(--shadow-xl));\n\n    position: relative;\n    display: inline-block;\n  }\n\n  /* ========================================\n       Menu Panel\n       ======================================== */\n\n  .menu-panel {\n    position: fixed;\n    inset-inline-start: 0;\n    top: 0;\n    z-index: calc(var(--z-popover, 1000) + 1);\n    box-sizing: border-box;\n    visibility: hidden;\n    min-width: var(--menu-panel-min-width, 10rem);\n    padding: var(--size-1);\n    margin: 0;\n    pointer-events: none;\n    background: var(--_menu-panel-bg);\n    border: var(--border) solid var(--_menu-panel-border-color);\n    border-radius: var(--menu-panel-radius, var(--rounded-lg));\n    box-shadow: var(--_menu-panel-shadow);\n    opacity: 0;\n    backdrop-filter: blur(var(--_menu-panel-blur));\n    transform: translateY(-4px) scale(0.97);\n    transform-origin: top;\n    transition:\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      visibility var(--transition-fast);\n  }\n\n  .menu-panel[data-open] {\n    visibility: visible;\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  /* ========================================\n       Menu Items (slotted bit-menu-item)\n       ======================================== */\n\n  ::slotted(bit-menu-item) {\n    display: block;\n  }\n\n  ::slotted(bit-menu-separator) {\n    display: block;\n  }\n}\n"],"mappings":""}

package/dist/overlay/menu/menu.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/overlay/menu/menu.css?inline
+var e = "@layer buildit.base{:host{--_menu-panel-bg:var(--menu-panel-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_menu-panel-border-color:var(--menu-panel-border-color,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent)));--_menu-panel-blur:var(--menu-panel-blur,var(--blur-md));--_menu-panel-shadow:var(--menu-panel-shadow,var(--shadow-xl));display:inline-block;position:relative}.menu-panel{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;visibility:hidden;min-width:var(--menu-panel-min-width,10rem);padding:var(--size-1);pointer-events:none;background:var(--_menu-panel-bg);border:var(--border) solid var(--_menu-panel-border-color);border-radius:var(--menu-panel-radius,var(--rounded-lg));box-shadow:var(--_menu-panel-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--_menu-panel-blur));backdrop-filter:blur(var(--_menu-panel-blur));transform-origin:top;transition:opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);margin:0;position:fixed;top:0;transform:translateY(-4px)scale(.97)}.menu-panel:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.menu-panel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.menu-panel[data-open]{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0)scale(1)}::slotted(bit-menu-item),::slotted(bit-menu-separator){display:block}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=menu.css?inline.js.map