vectis-ui 0.11.0 → 0.13.0

package/dist/components/VDialog/VDialog.vue_vue_type_script_setup_true_lang.js

@@ -4,22 +4,23 @@ import n from "../VIcon/VIcon.js";
 import r from "../VTypography/VTypography.js";
 import i from "../VIconButton/VIconButton.js";
 import { close as a } from "../VIcon/icons/close.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, nextTick as _, onBeforeUnmount as v, openBlock as y, ref as b, renderSlot as x, toDisplayString as S, unref as C, useAttrs as w, useId as T, useModel as E, watch as D, withCtx as O } from "vue";
+import { useModalDialog as o } from "../../composables/useModalDialog.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, mergeProps as _, openBlock as v, renderSlot as y, toDisplayString as b, unref as x, useId as S, useModel as C, withCtx as w } from "vue";
 //#region src/components/VDialog/VDialog.vue?vue&type=script&setup=true&lang.ts
-var k = [
+var T = [
 	"aria-labelledby",
 	"aria-describedby",
 	"role"
-], A = { class: "v-dialog-header" }, j = { class: "v-dialog-titles" }, M = {
+], E = { class: "v-dialog-header" }, D = { class: "v-dialog-titles" }, O = {
 	key: 0,
 	class: "v-dialog-header-actions"
-}, N = { class: "v-dialog-scroll" }, P = { class: "v-dialog-body" }, F = {
+}, k = { class: "v-dialog-scroll" }, A = { class: "v-dialog-body" }, j = {
 	key: 0,
 	class: "v-dialog-footer"
-}, I = /*@__PURE__*/ m({
+}, M = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "VDialog",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ g({
 		title: { default: void 0 },
 		subtitle: { default: void 0 },
 		width: { default: void 0 },
@@ -45,111 +46,79 @@ var k = [
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(m, { expose: h }) {
-		let I = m, L = e(), R = s(() => I.closeLabel ?? L.value.common.close), z = E(m, "open"), B = w(), V = b(null), H = T(), U = T(), W = s(() => I.persistentBackdrop ? I.persistentEscape ? "none" : "closerequest" : "any"), G = s(() => ({
-			...B,
-			closedby: W.value
-		}));
-		function K() {
-			return z.value = !0, _();
-		}
-		function q() {
-			V.value?.close();
-		}
-		let J = s(() => ({
-			onClick: K,
+	setup(h, { expose: g }) {
+		let M = h, N = e(), P = c(() => M.closeLabel ?? N.value.common.close), F = C(h, "open"), I = S(), L = S(), { dialogEl: R, rendered: z, rootAttrs: B, show: V, close: H, onClose: U, onCancel: W, onPointerdown: G, onBackdropClick: K } = o(F, {
+			persistentBackdrop: () => M.persistentBackdrop,
+			persistentEscape: () => M.persistentEscape
+		}), q = c(() => ({
+			onClick: V,
 			"aria-haspopup": "dialog"
 		}));
-		D(z, (e) => {
-			e || V.value?.close();
-		}), D(V, (e) => e?.showModal(), { flush: "post" });
-		function Y(e) {
-			e.target === V.value && (z.value = !1);
-		}
-		v(() => {
-			z.value &&= !1;
-		});
-		let X = () => !("closedBy" in HTMLDialogElement.prototype);
-		function Z(e) {
-			X() && W.value === "none" && e.preventDefault();
-		}
-		function Q(e) {
-			let t = V.value?.getBoundingClientRect();
-			return t ? e.clientX < t.left || e.clientX > t.right || e.clientY < t.top || e.clientY > t.bottom : !1;
-		}
-		let $ = !1;
-		function ee(e) {
-			$ = X() && e.target === V.value && Q(e);
-		}
-		function te(e) {
-			let t = $ && e.target === V.value && Q(e);
-			$ = !1, t && X() && W.value === "any" && q();
-		}
-		return h({
-			show: K,
-			close: q,
-			el: V
-		}), (e, s) => (y(), u(o, null, [x(e.$slots, "trigger", { triggerProps: J.value }), z.value ? (y(), u("dialog", g({
+		return g({
+			show: V,
+			close: H,
+			el: R
+		}), (e, o) => (v(), d(s, null, [y(e.$slots, "trigger", { triggerProps: q.value }), x(z) ? (v(), d("dialog", _({
 			key: 0,
 			ref_key: "dialogEl",
-			ref: V,
-			"aria-labelledby": m.title ? C(H) : void 0,
-			"aria-describedby": m.subtitle ? C(U) : void 0
-		}, G.value, {
+			ref: R,
+			"aria-labelledby": h.title ? x(I) : void 0,
+			"aria-describedby": h.subtitle ? x(L) : void 0
+		}, x(B), {
 			class: "v-dialog",
-			style: { "--dialog-width": C(t)(m.width) },
-			role: m.role === "alertdialog" ? "alertdialog" : void 0,
-			onClose: Y,
-			onCancel: Z,
-			onPointerdown: ee,
-			onClick: te
+			style: { "--dialog-width": x(t)(h.width) },
+			role: h.role === "alertdialog" ? "alertdialog" : void 0,
+			onClose: o[0] ||= (...e) => x(U) && x(U)(...e),
+			onCancel: o[1] ||= (...e) => x(W) && x(W)(...e),
+			onPointerdown: o[2] ||= (...e) => x(G) && x(G)(...e),
+			onClick: o[3] ||= (...e) => x(K) && x(K)(...e)
 		}), [
-			d("header", A, [x(e.$slots, "header", {}, () => [d("div", j, [m.title ? (y(), c(r, {
+			f("header", E, [y(e.$slots, "header", {}, () => [f("div", D, [h.title ? (v(), l(r, {
 				key: 0,
-				id: C(H),
+				id: x(I),
 				as: "h2",
 				variant: "heading-3",
 				class: "v-dialog-title"
 			}, {
-				default: O(() => [f(S(m.title), 1)]),
+				default: w(() => [p(b(h.title), 1)]),
 				_: 1
-			}, 8, ["id"])) : l("", !0), m.subtitle ? (y(), c(r, {
+			}, 8, ["id"])) : u("", !0), h.subtitle ? (v(), l(r, {
 				key: 1,
-				id: C(U),
+				id: x(L),
 				variant: "subtitle",
 				tone: "muted",
 				class: "v-dialog-subtitle"
 			}, {
-				default: O(() => [f(S(m.subtitle), 1)]),
+				default: w(() => [p(b(h.subtitle), 1)]),
 				_: 1
-			}, 8, ["id"])) : l("", !0)])]), !m.hideClose || e.$slots["header-actions"] ? (y(), u("div", M, [x(e.$slots, "header-actions"), m.hideClose ? l("", !0) : (y(), c(i, {
+			}, 8, ["id"])) : u("", !0)])]), !h.hideClose || e.$slots["header-actions"] ? (v(), d("div", O, [y(e.$slots, "header-actions"), h.hideClose ? u("", !0) : (v(), l(i, {
 				key: 0,
 				class: "v-dialog-close",
-				label: R.value,
+				label: P.value,
 				variant: "ghost",
 				tone: "neutral",
 				size: "sm",
-				onClick: q
+				onClick: x(H)
 			}, {
-				default: O(() => [p(n, { name: C(a) }, null, 8, ["name"])]),
+				default: w(() => [m(n, { name: x(a) }, null, 8, ["name"])]),
 				_: 1
-			}, 8, ["label"]))])) : l("", !0)]),
-			d("div", N, [
-				s[0] ||= d("span", {
+			}, 8, ["label", "onClick"]))])) : u("", !0)]),
+			f("div", k, [
+				o[4] ||= f("span", {
 					class: "v-dialog-edge v-dialog-edge--top",
 					"aria-hidden": "true"
 				}, null, -1),
-				d("div", P, [x(e.$slots, "default")]),
-				s[1] ||= d("span", {
+				f("div", A, [y(e.$slots, "default")]),
+				o[5] ||= f("span", {
 					class: "v-dialog-edge v-dialog-edge--bottom",
 					"aria-hidden": "true"
 				}, null, -1)
 			]),
-			e.$slots.footer ? (y(), u("footer", F, [x(e.$slots, "footer")])) : l("", !0)
-		], 16, k)) : l("", !0)], 64));
+			e.$slots.footer ? (v(), d("footer", j, [y(e.$slots, "footer")])) : u("", !0)
+		], 16, T)) : u("", !0)], 64));
 	}
 });
 //#endregion
-export { I as default };
+export { M as default };
 
 //# sourceMappingURL=VDialog.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VDialog/VDialog.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDialog.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDialog/VDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native showModal supplies top-layer placement and modal focus. JavaScript bridges v-model to\n * imperative open/close and provides guarded dismissal where closedBy is absent.\n */\n\nimport { computed, nextTick, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** How assistive technology announces the dialog. */\nexport type DialogRole = 'dialog' | 'alertdialog'\n\ninterface DialogProps {\n  /**\n   * The title of the dialog, which also names it for assistive technology. It is\n   * ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, explaining what the dialog is asking. */\n  subtitle?: string\n  /**\n   * How wide the dialog is: a number is read as pixels, a string as any CSS length. Left out,\n   * it takes the `--vectis-control-size-dialog-width` token, 400px by default.\n   */\n  width?: number | string\n  /**\n   * What kind of dialog this is. `alertdialog` is for one that must be answered\n   * explicitly, and it makes screen readers announce it more insistently. VDialogAlert is\n   * exactly that.\n   */\n  role?: DialogRole\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the\n   * backdrop and whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the dialog from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the dialog. Note that refusing Escape while the\n   * backdrop still closes cannot be expressed natively, so both routes are then\n   * allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n  role: 'dialog',\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the dialog is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\n/** What the trigger has to carry: the click that opens the dialog, and the fact that it does. */\nexport type DialogTriggerProps = {\n  onClick: () => void\n  'aria-haspopup': 'dialog'\n}\n\ndefineSlots<{\n  /** The body of the dialog. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross: a menu, a full-screen toggle. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the dialog. */\n  footer?(): unknown\n  /**\n   * The button that opens the dialog. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the dialog itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst dialogEl = ref<HTMLDialogElement | null>(null)\nconst titleId = useId()\nconst subtitleId = useId()\n\n/**\n * Which dismissals the browser itself accepts, declared as an attribute rather than handled in\n * code: everything, Escape alone, or nothing. One combination cannot be expressed that way; a\n * click outside allowed while Escape is not; and it falls back to allowing both.\n */\nconst closedby = computed(() =>\n  props.persistentBackdrop ? (props.persistentEscape ? 'none' : 'closerequest') : 'any',\n)\n\n// @fallback\n// The `closedby` attribute is newer than the type definitions shipped with TypeScript, so\n// writing it directly in the template would be reported as an unknown attribute. Passing it\n// inside a bound object goes through the same path as any forwarded attribute, which is not\n// checked element by element.\nconst rootAttrs = computed(() => ({ ...attrs, closedby: closedby.value }))\n\nfunction show(): Promise<void> {\n  open.value = true\n  return nextTick()\n}\n\nfunction requestClose() {\n  // Closing the element is enough: the browser then fires its own close event, which puts the\n  // model back in step below.\n  dialogEl.value?.close()\n}\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\n// Close before v-if removes the element so the browser restores the invoker's focus.\nwatch(open, (value) => {\n  if (!value) dialogEl.value?.close()\n})\n\n// @ssr\n// Template refs become available after mounting, including when hydrating an open dialog.\nwatch(dialogEl, (dialog) => dialog?.showModal(), { flush: 'post' })\n\n// Ignore close events from replaced elements: the queued event from a quick close-and-reopen\n// must not close the new dialog.\nfunction onClose(event: Event) {\n  if (event.target !== dialogEl.value) return\n  open.value = false\n}\n\n// @core\n// An open dialog removed with its parent (a `v-if`, a route change) runs no close steps,\n// so no close event would come: the model is handed back closed here, or it stayed `true`\n// and the dialog reopened by itself the next time its parent was shown.\nonBeforeUnmount(() => {\n  if (open.value) open.value = false\n})\n\n// @fallback\n/*\n * `closedby` is what applies `persistentBackdrop` and `persistentEscape`, and Safari does not\n * implement it: there Escape always closes and the backdrop never does. The two halves are\n * rebuilt below, and only where the attribute is unknown, so a browser that has it is never\n * second-guessed.\n */\nconst closedbyUnsupported = () => !('closedBy' in HTMLDialogElement.prototype)\n\nfunction onCancel(event: Event) {\n  if (closedbyUnsupported() && closedby.value === 'none') event.preventDefault()\n}\n\n/**\n * Whether a point lies outside the dialog's box, which is where the backdrop is: a click on\n * the `::backdrop` is dispatched to the dialog element itself.\n */\nfunction outsideBox(event: MouseEvent) {\n  const box = dialogEl.value?.getBoundingClientRect()\n  if (!box) return false\n  return (\n    event.clientX < box.left ||\n    event.clientX > box.right ||\n    event.clientY < box.top ||\n    event.clientY > box.bottom\n  )\n}\n\n// A press that STARTED inside and ended on the backdrop (a text selection dragged past the\n// edge) is not a click on the backdrop, so the press is remembered, not only the release.\nlet pressedOnBackdrop = false\nfunction onPointerdown(event: PointerEvent) {\n  pressedOnBackdrop = closedbyUnsupported() && event.target === dialogEl.value && outsideBox(event)\n}\nfunction onBackdropClick(event: MouseEvent) {\n  const onBackdrop = pressedOnBackdrop && event.target === dialogEl.value && outsideBox(event)\n  pressedOnBackdrop = false\n  if (onBackdrop && closedbyUnsupported() && closedby.value === 'any') requestClose()\n}\n\ndefineExpose({\n  /**\n   * Opens the dialog, exactly as setting `open` does. The opening lands on the next tick,\n   * once the element has been rendered: `el` is still null right after the call, and the\n   * promise returned settles once the dialog is showing.\n   */\n  show,\n  /**\n   * Closes the dialog. It closes unconditionally, `persistentEscape` and\n   * `persistentBackdrop` governing only the two routes the reader can take.\n   */\n  close: requestClose,\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"open\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-dialog\"\n    :style=\"{ '--dialog-width': cssSize(width) }\"\n    :role=\"role === 'alertdialog' ? 'alertdialog' : undefined\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      The header and the footer stay put while only the body scrolls, so the scrollbar\n      is confined to the body and never runs along them.\n\n      The lines that appear under the header and above the footer once the body is\n      scrolled are drawn by two sentinels stuck INSIDE the scrolling area, and not by\n      the header and footer themselves: a container query can only style what is inside\n      the container it asks about, never a sibling of it.\n    -->\n    <header class=\"v-dialog-header\">\n      <slot name=\"header\">\n        <div class=\"v-dialog-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-dialog-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-dialog-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-dialog-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-dialog-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"requestClose\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-dialog-scroll\">\n      <span class=\"v-dialog-edge v-dialog-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-dialog-body\">\n        <slot />\n      </div>\n      <span class=\"v-dialog-edge v-dialog-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-dialog-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-dialog {\n    /*\n     * The token is declared on the element rather than written as a `var()` fallback. A custom\n     * property inherits, and a dialog opened from inside another one is its DOM descendant:\n     * with a fallback, an alert confirming something in an 800px dialog would read that\n     * dialog's inline width and open 800px wide itself, with no error anywhere.\n     */\n    --dialog-width: var(--vectis-control-size-dialog-width);\n    inline-size: var(--dialog-width);\n    max-inline-size: calc(100dvi - 2 * var(--vectis-space-4));\n    max-block-size: calc(100dvb - 2 * var(--vectis-space-4));\n    /*\n     * Restore the modal's automatic margins in the component layer because the reset removes\n     * native dialog centring.\n     */\n    margin: auto;\n    /* The header and footer stay put while only the body scrolls, and hiding the\n       overflow is what keeps the content inside the rounded corners. */\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-overlay);\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * An indispensable guard. The browser hides a closed dialog with a rule of its own, but any\n   * display we declare above beats it; so without this, a closed dialog would sit in the page\n   * at the top left, swallowing clicks.\n   */\n  .v-dialog:not([open]) {\n    display: none;\n  }\n\n  /* Opening a modal puts the focus on the dialog itself. No ring is drawn around the\n     whole thing for that: the focus a reader needs to see is the one on the controls\n     inside. */\n  .v-dialog:focus-visible {\n    outline: none;\n  }\n\n  .v-dialog-scroll {\n    /*\n     * The zero minimum is load-bearing: without it a flex item refuses to shrink below its\n     * content, and nothing would ever scroll.\n     */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    /* A wheel reaching the end of the content stops there rather than scrolling the page\n       behind the modal. */\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    /*\n     * This makes the box something its descendants can ask questions about; namely whether\n     * there is content hidden above or below. It adds no containment of size.\n     */\n    container-type: scroll-state;\n  }\n\n  /*\n   * The two sentinels: hairlines stuck to the top and the bottom of the scrolling area, and\n   * descendants of it, which allows them to ask about its scroll state. Their negative margins\n   * mean they occupy no space at all.\n   */\n  .v-dialog-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-dialog-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-dialog-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-dialog-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-dialog-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  /* The title and the subtitle are rendered by VTypography, which carries their type.\n     Their classes remain as hooks, for a consumer's overrides and for the tests. */\n\n  .v-dialog-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* The cross is a button, so it carries invisible padding of its own; pulling the\n       row back by that amount is what makes the glyph line up with the header's edge\n       rather than floating inside it. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-dialog-body {\n    /* Short content is stretched to fill the space, so the footer stays at the bottom\n       of the dialog rather than floating halfway up; long content keeps its natural\n       height, overflows, and is what scrolls. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-dialog-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where it is missing the sentinels simply stay transparent, which is the intended fallback. */\n  @container scroll-state(scrollable: top) {\n    .v-dialog-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-dialog-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  /*\n   * The dialog animates on the way in and not on the way out. Since it is removed from the page\n   * the moment it closes, there is nothing left to animate out; that is the price of the clean\n   * slate the lazy rendering buys, and it also spares the extra declarations an exit animation\n   * would need.\n   */\n  .v-dialog {\n    transition:\n      opacity var(--vectis-duration-base) var(--vectis-ease-default),\n      transform var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open] {\n      opacity: 0;\n      transform: scale(0.97);\n    }\n  }\n\n  .v-dialog::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition: opacity var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-dialog,\n    .v-dialog::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-dialog {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDA,IAAM,IAAQ,GAWR,IAAI,EAAY,GAChB,IAAqB,QAAe,EAAM,cAAc,EAAE,MAAM,OAAO,KAAK,GAG5E,IAAO,EAAoB,GAAC,MAA0B,GA0BtD,IAAQ,EAAS,GACjB,IAAW,EAA8B,IAAI,GAC7C,IAAU,EAAM,GAChB,IAAa,EAAM,GAOnB,IAAW,QACf,EAAM,qBAAsB,EAAM,mBAAmB,SAAS,iBAAkB,KAClF,GAOM,IAAY,SAAgB;GAAE,GAAG;GAAO,UAAU,EAAS;EAAM,EAAE;EAEzE,SAAS,IAAsB;GAE7B,OADA,EAAK,QAAQ,IACN,EAAS;EAClB;EAEA,SAAS,IAAe;GAGtB,EAAS,OAAO,MAAM;EACxB;EAEA,IAAM,IAAe,SAAoC;GACvD,SAAS;GACT,iBAAiB;EACnB,EAAE;EASF,AANA,EAAM,IAAO,MAAU;GACrB,AAAK,KAAO,EAAS,OAAO,MAAM;EACpC,CAAC,GAID,EAAM,IAAW,MAAW,GAAQ,UAAU,GAAG,EAAE,OAAO,OAAO,CAAC;EAIlE,SAAS,EAAQ,GAAc;GACzB,EAAM,WAAW,EAAS,UAC9B,EAAK,QAAQ;EACf;EAMA,QAAsB;GACpB,AAAgB,EAAK,UAAQ;EAC/B,CAAC;EASD,IAAM,UAA4B,EAAE,cAAc,kBAAkB;EAEpE,SAAS,EAAS,GAAc;GAC9B,AAAI,EAAoB,KAAK,EAAS,UAAU,UAAQ,EAAM,eAAe;EAC/E;EAMA,SAAS,EAAW,GAAmB;GACrC,IAAM,IAAM,EAAS,OAAO,sBAAsB;GAElD,OADK,IAEH,EAAM,UAAU,EAAI,QACpB,EAAM,UAAU,EAAI,SACpB,EAAM,UAAU,EAAI,OACpB,EAAM,UAAU,EAAI,SALL;EAOnB;EAIA,IAAI,IAAoB;EACxB,SAAS,GAAc,GAAqB;GAC1C,IAAoB,EAAoB,KAAK,EAAM,WAAW,EAAS,SAAS,EAAW,CAAK;EAClG;EACA,SAAS,GAAgB,GAAmB;GAC1C,IAAM,IAAa,KAAqB,EAAM,WAAW,EAAS,SAAS,EAAW,CAAK;GAE3F,AADA,IAAoB,IAChB,KAAc,EAAoB,KAAK,EAAS,UAAU,SAAO,EAAa;EACpF;SAEA,EAAa;GAMX;GAKA,OAAO;GAEP,IAAI;EACN,CAAC,+BAIC,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GAEzC,EAAA,SAAA,EAAA,GADR,EAuES,UAvET,EAuES;;YArEH;GAAJ,KAAI;GACH,mBAAiB,EAAA,QAAQ,EAAA,CAAA,IAAU,KAAA;GACnC,oBAAkB,EAAA,WAAW,EAAA,CAAA,IAAa,KAAA;KACnC,EAAA,OAAS;GACjB,OAAM;GACL,OAAK,EAAA,kBAAsB,EAAA,CAAA,CAAO,CAAC,EAAA,KAAK,EAAA;GACxC,MAAM,EAAA,SAAI,gBAAA,gBAAqC,KAAA;GACxC;GACC;GACK;GACb,SAAO;;GAWR,EAqCS,UArCT,GAqCS,CApCP,EAqBO,EAAA,QAAA,UAAA,CAAA,SAAA,CApBL,EAmBM,OAnBN,GAmBM,CAjBI,EAAA,SAAA,EAAA,GADR,EAQc,GAAA;;IANX,IAAI,EAAA,CAAA;IACL,IAAG;IACH,SAAQ;IACR,OAAM;;qBAEK,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;+BAGF,EAAA,YAAA,EAAA,GADR,EAQc,GAAA;;IANX,IAAI,EAAA,CAAA;IACL,SAAQ;IACR,MAAK;IACL,OAAM;;qBAEQ,CAAA,EAAA,EAAX,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;oCAIL,EAAA,aAAaA,EAAAA,OAAM,qBAAA,EAAA,GAA/B,EAaM,OAbN,GAaM,CAZJ,EAA8B,EAAA,QAAA,gBAAA,GAErB,EAAA,yBAAA,EAAA,GADT,EAUc,GAAA;;IARZ,OAAM;IACL,OAAO,EAAA;IACR,SAAQ;IACR,MAAK;IACL,MAAK;IACJ,SAAO;;qBAEmB,CAA3B,EAA2B,GAAA,EAAnB,MAAM,EAAA,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;;GAI7B,EAMM,OANN,GAMM;aALJ,EAAoE,QAAA;KAA9D,OAAM;KAAmC,eAAY;;IAC3D,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;aAEV,EAAuE,QAAA;KAAjE,OAAM;KAAsC,eAAY;;;GAElDA,EAAAA,OAAO,UAAA,EAAA,GAArB,EAES,UAFT,GAES,CADP,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"VDialog.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDialog/VDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/** A native modal `<dialog>`, its model bridged by useModalDialog. */\n\nimport { computed, useId } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useModalDialog } from '../../composables/useModalDialog'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** How assistive technology announces the dialog. */\nexport type DialogRole = 'dialog' | 'alertdialog'\n\ninterface DialogProps {\n  /**\n   * The title of the dialog, which also names it for assistive technology. It is\n   * ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, explaining what the dialog is asking. */\n  subtitle?: string\n  /**\n   * How wide the dialog is: a number is read as pixels, a string as any CSS length. Left out,\n   * it takes the `--vectis-control-size-dialog-width` token, 400px by default.\n   */\n  width?: number | string\n  /**\n   * What kind of dialog this is. `alertdialog` is for one that must be answered\n   * explicitly, and it makes screen readers announce it more insistently. VDialogAlert is\n   * exactly that.\n   */\n  role?: DialogRole\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the\n   * backdrop and whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the dialog from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the dialog. Note that refusing Escape while the\n   * backdrop still closes cannot be expressed natively, so both routes are then\n   * allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n  role: 'dialog',\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the dialog is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\n/** What the trigger has to carry: the click that opens the dialog, and the fact that it does. */\nexport type DialogTriggerProps = {\n  onClick: () => void\n  'aria-haspopup': 'dialog'\n}\n\ndefineSlots<{\n  /** The body of the dialog. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross: a menu, a full-screen toggle. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the dialog. */\n  footer?(): unknown\n  /**\n   * The button that opens the dialog. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the dialog itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst titleId = useId()\nconst subtitleId = useId()\n\nconst {\n  dialogEl,\n  rendered,\n  rootAttrs,\n  show,\n  close,\n  onClose,\n  onCancel,\n  onPointerdown,\n  onBackdropClick,\n} = useModalDialog(open, {\n  persistentBackdrop: () => props.persistentBackdrop,\n  persistentEscape: () => props.persistentEscape,\n})\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\ndefineExpose({\n  /**\n   * Opens the dialog, exactly as setting `open` does. The opening lands on the next tick,\n   * once the element has been rendered: `el` is still null right after the call, and the\n   * promise returned settles once the dialog is showing.\n   */\n  show,\n  /**\n   * Closes the dialog. It closes unconditionally, `persistentEscape` and\n   * `persistentBackdrop` governing only the two routes the reader can take.\n   */\n  close,\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-dialog\"\n    :style=\"{ '--dialog-width': cssSize(width) }\"\n    :role=\"role === 'alertdialog' ? 'alertdialog' : undefined\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      The header and the footer stay put while only the body scrolls, so the scrollbar\n      is confined to the body and never runs along them.\n\n      The lines that appear under the header and above the footer once the body is\n      scrolled are drawn by two sentinels stuck INSIDE the scrolling area, and not by\n      the header and footer themselves: a container query can only style what is inside\n      the container it asks about, never a sibling of it.\n    -->\n    <header class=\"v-dialog-header\">\n      <slot name=\"header\">\n        <div class=\"v-dialog-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-dialog-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-dialog-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-dialog-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-dialog-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"close\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-dialog-scroll\">\n      <span class=\"v-dialog-edge v-dialog-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-dialog-body\">\n        <slot />\n      </div>\n      <span class=\"v-dialog-edge v-dialog-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-dialog-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-dialog {\n    /*\n     * The token is declared on the element rather than written as a `var()` fallback. A custom\n     * property inherits, and a dialog opened from inside another one is its DOM descendant:\n     * with a fallback, an alert confirming something in an 800px dialog would read that\n     * dialog's inline width and open 800px wide itself, with no error anywhere.\n     */\n    --dialog-width: var(--vectis-control-size-dialog-width);\n    inline-size: var(--dialog-width);\n    max-inline-size: calc(100dvi - 2 * var(--vectis-space-4));\n    max-block-size: calc(100dvb - 2 * var(--vectis-space-4));\n    /*\n     * Restore the modal's automatic margins in the component layer because the reset removes\n     * native dialog centring.\n     */\n    margin: auto;\n    /* The header and footer stay put while only the body scrolls, and hiding the\n       overflow is what keeps the content inside the rounded corners. */\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-overlay);\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * An indispensable guard. The browser hides a closed dialog with a rule of its own, but any\n   * display we declare above beats it; so without this, a closed dialog would sit in the page\n   * at the top left, swallowing clicks.\n   */\n  .v-dialog:not([open]) {\n    display: none;\n  }\n\n  /* Opening a modal puts the focus on the dialog itself. No ring is drawn around the\n     whole thing for that: the focus a reader needs to see is the one on the controls\n     inside. */\n  .v-dialog:focus-visible {\n    outline: none;\n  }\n\n  .v-dialog-scroll {\n    /*\n     * The zero minimum is load-bearing: without it a flex item refuses to shrink below its\n     * content, and nothing would ever scroll.\n     */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    /* A wheel reaching the end of the content stops there rather than scrolling the page\n       behind the modal. */\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    /*\n     * This makes the box something its descendants can ask questions about; namely whether\n     * there is content hidden above or below. It adds no containment of size.\n     */\n    container-type: scroll-state;\n  }\n\n  /*\n   * The two sentinels: hairlines stuck to the top and the bottom of the scrolling area, and\n   * descendants of it, which allows them to ask about its scroll state. Their negative margins\n   * mean they occupy no space at all.\n   */\n  .v-dialog-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-dialog-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-dialog-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-dialog-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-dialog-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  /* The title and the subtitle are rendered by VTypography, which carries their type.\n     Their classes remain as hooks, for a consumer's overrides and for the tests. */\n\n  .v-dialog-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* The cross is a button, so it carries invisible padding of its own; pulling the\n       row back by that amount is what makes the glyph line up with the header's edge\n       rather than floating inside it. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-dialog-body {\n    /* Short content is stretched to fill the space, so the footer stays at the bottom\n       of the dialog rather than floating halfway up; long content keeps its natural\n       height, overflows, and is what scrolls. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-dialog-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where it is missing the sentinels simply stay transparent, which is the intended fallback. */\n  @container scroll-state(scrollable: top) {\n    .v-dialog-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-dialog-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  /*\n   * The dialog animates on the way in and not on the way out. Since it is removed from the page\n   * the moment it closes, there is nothing left to animate out; that is the price of the clean\n   * slate the lazy rendering buys, and it also spares the extra declarations an exit animation\n   * would need.\n   */\n  .v-dialog {\n    transition:\n      opacity var(--vectis-duration-base) var(--vectis-ease-default),\n      transform var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open] {\n      opacity: 0;\n      transform: scale(0.97);\n    }\n  }\n\n  .v-dialog::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition: opacity var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-dialog,\n    .v-dialog::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-dialog {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAQ,GAWR,IAAI,EAAY,GAChB,IAAqB,QAAe,EAAM,cAAc,EAAE,MAAM,OAAO,KAAK,GAG5E,IAAO,EAAoB,GAAC,MAA0B,GA0BtD,IAAU,EAAM,GAChB,IAAa,EAAM,GAEnB,EACJ,aACA,aACA,cACA,SACA,OAAA,GACA,YACA,aACA,kBACA,uBACE,EAAe,GAAM;GACvB,0BAA0B,EAAM;GAChC,wBAAwB,EAAM;EAChC,CAAC,GAEK,IAAe,SAAoC;GACvD,SAAS;GACT,iBAAiB;EACnB,EAAE;SAEF,EAAa;GAMX;GAKA,OAAA;GAEA,IAAI;EACN,CAAC,+BAIC,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GAEzC,EAAA,CAAA,KAAA,EAAA,GADR,EAuES,UAvET,EAuES;;YArEH;GAAJ,KAAI;GACH,mBAAiB,EAAA,QAAQ,EAAA,CAAA,IAAU,KAAA;GACnC,oBAAkB,EAAA,WAAW,EAAA,CAAA,IAAa,KAAA;KACnC,EAAA,CAAA,GAAS;GACjB,OAAM;GACL,OAAK,EAAA,kBAAsB,EAAA,CAAA,CAAO,CAAC,EAAA,KAAK,EAAA;GACxC,MAAM,EAAA,SAAI,gBAAA,gBAAqC,KAAA;GAC/C,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACP,UAAM,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACR,eAAW,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACb,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;;GAWR,EAqCS,UArCT,GAqCS,CApCP,EAqBO,EAAA,QAAA,UAAA,CAAA,SAAA,CApBL,EAmBM,OAnBN,GAmBM,CAjBI,EAAA,SAAA,EAAA,GADR,EAQc,GAAA;;IANX,IAAI,EAAA,CAAA;IACL,IAAG;IACH,SAAQ;IACR,OAAM;;qBAEK,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;+BAGF,EAAA,YAAA,EAAA,GADR,EAQc,GAAA;;IANX,IAAI,EAAA,CAAA;IACL,SAAQ;IACR,MAAK;IACL,OAAM;;qBAEQ,CAAA,EAAA,EAAX,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;oCAIL,EAAA,aAAaA,EAAAA,OAAM,qBAAA,EAAA,GAA/B,EAaM,OAbN,GAaM,CAZJ,EAA8B,EAAA,QAAA,gBAAA,GAErB,EAAA,yBAAA,EAAA,GADT,EAUc,GAAA;;IARZ,OAAM;IACL,OAAO,EAAA;IACR,SAAQ;IACR,MAAK;IACL,MAAK;IACJ,SAAO,EAAA,CAAA;;qBAEmB,CAA3B,EAA2B,GAAA,EAAnB,MAAM,EAAA,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;;GAI7B,EAMM,OANN,GAMM;aALJ,EAAoE,QAAA;KAA9D,OAAM;KAAmC,eAAY;;IAC3D,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;aAEV,EAAuE,QAAA;KAAjE,OAAM;KAAsC,eAAY;;;GAElDA,EAAAA,OAAO,UAAA,EAAA,GAArB,EAES,UAFT,GAES,CADP,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/VDrawer/VDrawer.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-drawer{--drawer-extent:var(--vectis-control-size-drawer-md);--drawer-offset:100% 0;background:var(--vectis-color-surface-overlay);block-size:auto;max-block-size:none;inline-size:auto;max-inline-size:none;color:var(--vectis-color-text);box-shadow:var(--vectis-shadow-xl);font-family:var(--vectis-text-family);transition:translate var(--vectis-duration-slow) var(--vectis-ease-out), display var(--vectis-duration-slow) allow-discrete, overlay var(--vectis-duration-slow) allow-discrete;border:none;flex-direction:column;margin:0;padding:0;display:flex;position:fixed;inset:0;overflow:hidden}.v-drawer[data-size=sm]{--drawer-extent:var(--vectis-control-size-drawer-sm)}.v-drawer[data-size=lg]{--drawer-extent:var(--vectis-control-size-drawer-lg)}.v-drawer[data-side=start],.v-drawer[data-side=end]{inline-size:var(--drawer-extent);max-inline-size:calc(100dvi - var(--vectis-space-12))}.v-drawer[data-side=top],.v-drawer[data-side=bottom]{block-size:var(--drawer-extent);max-block-size:calc(100dvb - var(--vectis-space-12))}.v-drawer[data-side=start]{--drawer-offset:-100% 0;border-start-end-radius:var(--vectis-radius-overlay);border-end-end-radius:var(--vectis-radius-overlay);inset-inline-end:auto}.v-drawer[data-side=end]{border-start-start-radius:var(--vectis-radius-overlay);border-end-start-radius:var(--vectis-radius-overlay);inset-inline-start:auto}.v-drawer[data-side=start]:dir(rtl){--drawer-offset:100% 0}.v-drawer[data-side=end]:dir(rtl){--drawer-offset:-100% 0}.v-drawer[data-side=top]{--drawer-offset:0 -100%;border-bottom-left-radius:var(--vectis-radius-overlay);border-bottom-right-radius:var(--vectis-radius-overlay);bottom:auto}.v-drawer[data-side=bottom]{--drawer-offset:0 100%;border-top-left-radius:var(--vectis-radius-overlay);border-top-right-radius:var(--vectis-radius-overlay);top:auto}.v-drawer:not([open]){translate:var(--drawer-offset);pointer-events:none;transition-timing-function:var(--vectis-ease-in);display:none}@starting-style{.v-drawer[open]{translate:var(--drawer-offset)}}.v-drawer::backdrop{background:var(--vectis-color-backdrop);transition:opacity var(--vectis-duration-slow) var(--vectis-ease-default), display var(--vectis-duration-slow) allow-discrete, overlay var(--vectis-duration-slow) allow-discrete}.v-drawer:not([open])::backdrop{opacity:0}@starting-style{.v-drawer[open]::backdrop{opacity:0}}.v-drawer:focus-visible{outline:none}.v-drawer-scroll{overscroll-behavior:contain;flex-direction:column;flex:auto;min-block-size:0;display:flex;overflow-y:auto;container-type:scroll-state}.v-drawer-edge{background:0 0;flex:none;block-size:1px;position:sticky}.v-drawer-edge--top{margin-block-end:-1px;inset-block-start:0}.v-drawer-edge--bottom{margin-block-start:-1px;inset-block-end:0}.v-drawer-header{justify-content:space-between;align-items:flex-start;gap:var(--vectis-space-4);padding:var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);flex:none;display:flex}.v-drawer-titles{flex-direction:column;min-inline-size:0;display:flex}.v-drawer-header-actions{align-items:center;gap:var(--vectis-space-1);margin-block-start:calc(-1 * var(--vectis-space-1));margin-inline-end:calc(-1 * var(--vectis-space-2));display:flex}.v-drawer-body{padding:var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);font-size:var(--vectis-text-body-md-size);line-height:var(--vectis-text-body-md-leading);flex:1 0 auto}.v-drawer-footer{justify-content:flex-end;align-items:center;gap:var(--vectis-space-3);padding:var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);flex-wrap:wrap;flex:none;display:flex}@container scroll-state(scrollable:top){.v-drawer-edge--top{background:var(--vectis-color-border)}}@container scroll-state(scrollable:bottom){.v-drawer-edge--bottom{background:var(--vectis-color-border)}}@media (prefers-reduced-motion:reduce){.v-drawer,.v-drawer::backdrop{transition:none}}@media (forced-colors:active){.v-drawer{outline:1px solid canvastext}}}

package/dist/components/VDrawer/VDrawer.d.ts

@@ -0,0 +1,102 @@
+import { DialogTriggerProps } from '../VDialog/VDialog.js';
+/** The edge the drawer comes from. `start` and `end` follow the writing direction. */
+export type DrawerSide = 'start' | 'end' | 'top' | 'bottom';
+/** The width of a drawer on a side, or the height of one at the top or bottom. */
+export type DrawerSize = 'sm' | 'md' | 'lg';
+interface DrawerProps {
+    /**
+     * The title of the drawer, which also names it for assistive technology. It is ignored when
+     * the `#header` slot replaces the whole header.
+     */
+    title?: string;
+    /** A line under the title. */
+    subtitle?: string;
+    /** The edge the drawer comes from. `start` and `end` follow the writing direction. */
+    side?: DrawerSide;
+    /**
+     * How far the drawer reaches into the page: its width on a side, its height at the top or
+     * bottom. Each step reads a `--vectis-control-size-drawer-*` token.
+     */
+    size?: DrawerSize;
+    /**
+     * A length replacing `size`: a number is read as pixels, a string as any CSS length. The
+     * drawer always leaves a strip of the page uncovered, which a click closes it through.
+     */
+    extent?: number | string;
+    /**
+     * Takes the close cross out of the header, leaving the reader with Escape, the backdrop and
+     * whatever the footer offers.
+     */
+    hideClose?: boolean;
+    /** Stops a click outside the drawer from closing it. */
+    persistentBackdrop?: boolean;
+    /**
+     * Stops the Escape key from closing the drawer. Refusing Escape while the backdrop still
+     * closes cannot be expressed natively, so both routes are then allowed.
+     */
+    persistentEscape?: boolean;
+    /** What the close cross does, in words. It falls back to the design system dictionary. */
+    closeLabel?: string;
+}
+type __VLS_Props = DrawerProps;
+type __VLS_Slots = {
+    /** The body of the drawer. This is the part that scrolls when there is too much of it. */
+    default(): unknown;
+    /** Replaces the title and subtitle block with content of your own. */
+    header?(): unknown;
+    /** Extra controls in the header, placed before the close cross. */
+    'header-actions'?(): unknown;
+    /** The buttons at the foot of the drawer. */
+    footer?(): unknown;
+    /**
+     * The button that opens the drawer. Bind the `triggerProps` it receives onto it. It stays
+     * rendered always, unlike the drawer itself.
+     */
+    trigger?(props: {
+        triggerProps: DialogTriggerProps;
+    }): unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the drawer is showing. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /**
+     * Opens the drawer, exactly as setting `open` does. The opening lands on the next tick: the
+     * promise returned settles once the drawer is showing.
+     */
+    show: () => Promise<void>;
+    /**
+     * Closes the drawer. It closes unconditionally, `persistentEscape` and `persistentBackdrop`
+     * governing only the two routes the reader can take.
+     */
+    close: () => void;
+    /**
+     * The `<dialog>` element. It is null while closed, once its exit has played: each opening
+     * from there builds a fresh one.
+     */
+    el: import('vue').Ref<HTMLDialogElement | null, HTMLDialogElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: DrawerSize;
+    title: string;
+    subtitle: string;
+    side: DrawerSide;
+    hideClose: boolean;
+    closeLabel: string;
+    persistentBackdrop: boolean;
+    persistentEscape: boolean;
+    extent: number | string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VDrawer/VDrawer.js

@@ -0,0 +1,9 @@
+import './VDrawer.css';
+import e from "./VDrawer.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                        */
+//#region src/components/VDrawer/VDrawer.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VDrawer.js.map

package/dist/components/VDrawer/VDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDrawer.js","names":[],"sources":["../../../src/components/VDrawer/VDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A native modal `<dialog>` pinned to one edge of the viewport, its model bridged by\n * useModalDialog. It stays rendered through its exit, so it slides out as it slid in.\n */\n\nimport { computed, useId } from 'vue'\n\nimport type { DialogTriggerProps } from '../VDialog/VDialog.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useModalDialog } from '../../composables/useModalDialog'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** The edge the drawer comes from. `start` and `end` follow the writing direction. */\nexport type DrawerSide = 'start' | 'end' | 'top' | 'bottom'\n\n/** The width of a drawer on a side, or the height of one at the top or bottom. */\nexport type DrawerSize = 'sm' | 'md' | 'lg'\n\ninterface DrawerProps {\n  /**\n   * The title of the drawer, which also names it for assistive technology. It is ignored when\n   * the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title. */\n  subtitle?: string\n  /** The edge the drawer comes from. `start` and `end` follow the writing direction. */\n  side?: DrawerSide\n  /**\n   * How far the drawer reaches into the page: its width on a side, its height at the top or\n   * bottom. Each step reads a `--vectis-control-size-drawer-*` token.\n   */\n  size?: DrawerSize\n  /**\n   * A length replacing `size`: a number is read as pixels, a string as any CSS length. The\n   * drawer always leaves a strip of the page uncovered, which a click closes it through.\n   */\n  extent?: number | string\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the backdrop and\n   * whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the drawer from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the drawer. Refusing Escape while the backdrop still\n   * closes cannot be expressed natively, so both routes are then allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DrawerProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  side: 'end',\n  size: 'md',\n  extent: undefined,\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the drawer is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The body of the drawer. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the drawer. */\n  footer?(): unknown\n  /**\n   * The button that opens the drawer. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the drawer itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst titleId = useId()\nconst subtitleId = useId()\n\nconst {\n  dialogEl,\n  rendered,\n  rootAttrs,\n  show,\n  close,\n  onClose,\n  onCancel,\n  onPointerdown,\n  onBackdropClick,\n} = useModalDialog(open, {\n  persistentBackdrop: () => props.persistentBackdrop,\n  persistentEscape: () => props.persistentEscape,\n  exitTransition: true,\n})\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\ndefineExpose({\n  /**\n   * Opens the drawer, exactly as setting `open` does. The opening lands on the next tick: the\n   * promise returned settles once the drawer is showing.\n   */\n  show,\n  /**\n   * Closes the drawer. It closes unconditionally, `persistentEscape` and `persistentBackdrop`\n   * governing only the two routes the reader can take.\n   */\n  close,\n  /**\n   * The `<dialog>` element. It is null while closed, once its exit has played: each opening\n   * from there builds a fresh one.\n   */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-drawer\"\n    :data-side=\"side\"\n    :data-size=\"size\"\n    :style=\"{ '--drawer-extent': cssSize(extent) }\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      As in VDialog, only the body scrolls, and the lines under the header and above the footer\n      are drawn by sentinels stuck inside the scrolling area, which a scroll-state query reaches.\n    -->\n    <header class=\"v-drawer-header\">\n      <slot name=\"header\">\n        <div class=\"v-drawer-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-drawer-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-drawer-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-drawer-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-drawer-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"close\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-drawer-scroll\">\n      <span class=\"v-drawer-edge v-drawer-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-drawer-body\">\n        <slot />\n      </div>\n      <span class=\"v-drawer-edge v-drawer-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-drawer-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-drawer {\n    /*\n     * Declared on the element rather than as a `var()` fallback: a drawer opened from inside\n     * another is its DOM descendant, and would otherwise inherit that drawer's inline extent.\n     */\n    --drawer-extent: var(--vectis-control-size-drawer-md);\n    /* Where the drawer waits off screen, before it enters and after it leaves. */\n    --drawer-offset: 100% 0;\n    /*\n     * Fixed explicitly rather than left to the modal's UA style: an engine without `overlay`\n     * takes the drawer out of the top layer the moment it closes, and it must not fall back\n     * into the page while it slides out.\n     */\n    position: fixed;\n    inset: 0;\n    margin: 0;\n    inline-size: auto;\n    block-size: auto;\n    max-inline-size: none;\n    max-block-size: none;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n    /*\n     * `display` and `overlay` switch at the END of the exit, which keeps the closed drawer\n     * painted, and in the top layer, while it slides out.\n     */\n    transition:\n      translate var(--vectis-duration-slow) var(--vectis-ease-out),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer[data-size='sm'] {\n    --drawer-extent: var(--vectis-control-size-drawer-sm);\n  }\n\n  .v-drawer[data-size='lg'] {\n    --drawer-extent: var(--vectis-control-size-drawer-lg);\n  }\n\n  /* The uncovered strip keeps the backdrop within reach, to see the page and to close. */\n  .v-drawer[data-side='start'],\n  .v-drawer[data-side='end'] {\n    inline-size: var(--drawer-extent);\n    max-inline-size: calc(100dvi - var(--vectis-space-12));\n  }\n\n  .v-drawer[data-side='top'],\n  .v-drawer[data-side='bottom'] {\n    block-size: var(--drawer-extent);\n    max-block-size: calc(100dvb - var(--vectis-space-12));\n  }\n\n  /* The corners against the viewport stay square; the two facing the page are rounded. */\n  .v-drawer[data-side='start'] {\n    --drawer-offset: -100% 0;\n    inset-inline-end: auto;\n    border-start-end-radius: var(--vectis-radius-overlay);\n    border-end-end-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='end'] {\n    inset-inline-start: auto;\n    border-start-start-radius: var(--vectis-radius-overlay);\n    border-end-start-radius: var(--vectis-radius-overlay);\n  }\n\n  /* A translation is physical: in a right-to-left page the inline sides swap directions. */\n  .v-drawer[data-side='start']:dir(rtl) {\n    --drawer-offset: 100% 0;\n  }\n\n  .v-drawer[data-side='end']:dir(rtl) {\n    --drawer-offset: -100% 0;\n  }\n\n  .v-drawer[data-side='top'] {\n    --drawer-offset: 0 -100%;\n    bottom: auto;\n    border-bottom-left-radius: var(--vectis-radius-overlay);\n    border-bottom-right-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='bottom'] {\n    --drawer-offset: 0 100%;\n    top: auto;\n    border-top-left-radius: var(--vectis-radius-overlay);\n    border-top-right-radius: var(--vectis-radius-overlay);\n  }\n\n  /*\n   * An indispensable guard: the display declared above beats the browser's own rule hiding a\n   * closed dialog. Through the exit, the transition holds `display` back, and a closed drawer\n   * sliding away lets clicks through to the page it uncovers.\n   */\n  .v-drawer:not([open]) {\n    display: none;\n    translate: var(--drawer-offset);\n    pointer-events: none;\n    transition-timing-function: var(--vectis-ease-in);\n  }\n\n  @starting-style {\n    .v-drawer[open] {\n      translate: var(--drawer-offset);\n    }\n  }\n\n  .v-drawer::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition:\n      opacity var(--vectis-duration-slow) var(--vectis-ease-default),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer:not([open])::backdrop {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-drawer[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  /* No ring around the whole drawer when opening focuses it: the controls inside show theirs. */\n  .v-drawer:focus-visible {\n    outline: none;\n  }\n\n  .v-drawer-scroll {\n    /* The zero minimum lets the flex item shrink below its content, so that it scrolls. */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    container-type: scroll-state;\n  }\n\n  /* Negative margins make the sentinels occupy no space at all. */\n  .v-drawer-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-drawer-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-drawer-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-drawer-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-drawer-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-drawer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* Pulled back by the cross's own padding, so its glyph lines up with the header's edge. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-drawer-body {\n    /* Stretched when short, so the footer stays at the bottom of the drawer. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-drawer-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where scroll-state queries are missing, the sentinels simply stay transparent. */\n  @container scroll-state(scrollable: top) {\n    .v-drawer-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-drawer-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-drawer,\n    .v-drawer::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-drawer {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VDrawer/VDrawer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,128 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { cssSize as t } from "../../utils/css.js";
+import n from "../VIcon/VIcon.js";
+import r from "../VTypography/VTypography.js";
+import i from "../VIconButton/VIconButton.js";
+import { close as a } from "../VIcon/icons/close.js";
+import { useModalDialog as o } from "../../composables/useModalDialog.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, mergeProps as _, openBlock as v, renderSlot as y, toDisplayString as b, unref as x, useId as S, useModel as C, withCtx as w } from "vue";
+//#region src/components/VDrawer/VDrawer.vue?vue&type=script&setup=true&lang.ts
+var T = [
+	"aria-labelledby",
+	"aria-describedby",
+	"data-side",
+	"data-size"
+], E = { class: "v-drawer-header" }, D = { class: "v-drawer-titles" }, O = {
+	key: 0,
+	class: "v-drawer-header-actions"
+}, k = { class: "v-drawer-scroll" }, A = { class: "v-drawer-body" }, j = {
+	key: 0,
+	class: "v-drawer-footer"
+}, M = /*@__PURE__*/ h({
+	inheritAttrs: !1,
+	__name: "VDrawer",
+	props: /*@__PURE__*/ g({
+		title: { default: void 0 },
+		subtitle: { default: void 0 },
+		side: { default: "end" },
+		size: { default: "md" },
+		extent: { default: void 0 },
+		hideClose: {
+			type: Boolean,
+			default: !1
+		},
+		persistentBackdrop: {
+			type: Boolean,
+			default: !1
+		},
+		persistentEscape: {
+			type: Boolean,
+			default: !1
+		},
+		closeLabel: { default: void 0 }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(h, { expose: g }) {
+		let M = h, N = e(), P = c(() => M.closeLabel ?? N.value.common.close), F = C(h, "open"), I = S(), L = S(), { dialogEl: R, rendered: z, rootAttrs: B, show: V, close: H, onClose: U, onCancel: W, onPointerdown: G, onBackdropClick: K } = o(F, {
+			persistentBackdrop: () => M.persistentBackdrop,
+			persistentEscape: () => M.persistentEscape,
+			exitTransition: !0
+		}), q = c(() => ({
+			onClick: V,
+			"aria-haspopup": "dialog"
+		}));
+		return g({
+			show: V,
+			close: H,
+			el: R
+		}), (e, o) => (v(), d(s, null, [y(e.$slots, "trigger", { triggerProps: q.value }), x(z) ? (v(), d("dialog", _({
+			key: 0,
+			ref_key: "dialogEl",
+			ref: R,
+			"aria-labelledby": h.title ? x(I) : void 0,
+			"aria-describedby": h.subtitle ? x(L) : void 0
+		}, x(B), {
+			class: "v-drawer",
+			"data-side": h.side,
+			"data-size": h.size,
+			style: { "--drawer-extent": x(t)(h.extent) },
+			onClose: o[0] ||= (...e) => x(U) && x(U)(...e),
+			onCancel: o[1] ||= (...e) => x(W) && x(W)(...e),
+			onPointerdown: o[2] ||= (...e) => x(G) && x(G)(...e),
+			onClick: o[3] ||= (...e) => x(K) && x(K)(...e)
+		}), [
+			f("header", E, [y(e.$slots, "header", {}, () => [f("div", D, [h.title ? (v(), l(r, {
+				key: 0,
+				id: x(I),
+				as: "h2",
+				variant: "heading-3",
+				class: "v-drawer-title"
+			}, {
+				default: w(() => [p(b(h.title), 1)]),
+				_: 1
+			}, 8, ["id"])) : u("", !0), h.subtitle ? (v(), l(r, {
+				key: 1,
+				id: x(L),
+				variant: "subtitle",
+				tone: "muted",
+				class: "v-drawer-subtitle"
+			}, {
+				default: w(() => [p(b(h.subtitle), 1)]),
+				_: 1
+			}, 8, ["id"])) : u("", !0)])]), !h.hideClose || e.$slots["header-actions"] ? (v(), d("div", O, [y(e.$slots, "header-actions"), h.hideClose ? u("", !0) : (v(), l(i, {
+				key: 0,
+				class: "v-drawer-close",
+				label: P.value,
+				variant: "ghost",
+				tone: "neutral",
+				size: "sm",
+				onClick: x(H)
+			}, {
+				default: w(() => [m(n, { name: x(a) }, null, 8, ["name"])]),
+				_: 1
+			}, 8, ["label", "onClick"]))])) : u("", !0)]),
+			f("div", k, [
+				o[4] ||= f("span", {
+					class: "v-drawer-edge v-drawer-edge--top",
+					"aria-hidden": "true"
+				}, null, -1),
+				f("div", A, [y(e.$slots, "default")]),
+				o[5] ||= f("span", {
+					class: "v-drawer-edge v-drawer-edge--bottom",
+					"aria-hidden": "true"
+				}, null, -1)
+			]),
+			e.$slots.footer ? (v(), d("footer", j, [y(e.$slots, "footer")])) : u("", !0)
+		], 16, T)) : u("", !0)], 64));
+	}
+});
+//#endregion
+export { M as default };
+
+//# sourceMappingURL=VDrawer.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VDrawer/VDrawer.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDrawer.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDrawer/VDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A native modal `<dialog>` pinned to one edge of the viewport, its model bridged by\n * useModalDialog. It stays rendered through its exit, so it slides out as it slid in.\n */\n\nimport { computed, useId } from 'vue'\n\nimport type { DialogTriggerProps } from '../VDialog/VDialog.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useModalDialog } from '../../composables/useModalDialog'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** The edge the drawer comes from. `start` and `end` follow the writing direction. */\nexport type DrawerSide = 'start' | 'end' | 'top' | 'bottom'\n\n/** The width of a drawer on a side, or the height of one at the top or bottom. */\nexport type DrawerSize = 'sm' | 'md' | 'lg'\n\ninterface DrawerProps {\n  /**\n   * The title of the drawer, which also names it for assistive technology. It is ignored when\n   * the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title. */\n  subtitle?: string\n  /** The edge the drawer comes from. `start` and `end` follow the writing direction. */\n  side?: DrawerSide\n  /**\n   * How far the drawer reaches into the page: its width on a side, its height at the top or\n   * bottom. Each step reads a `--vectis-control-size-drawer-*` token.\n   */\n  size?: DrawerSize\n  /**\n   * A length replacing `size`: a number is read as pixels, a string as any CSS length. The\n   * drawer always leaves a strip of the page uncovered, which a click closes it through.\n   */\n  extent?: number | string\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the backdrop and\n   * whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the drawer from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the drawer. Refusing Escape while the backdrop still\n   * closes cannot be expressed natively, so both routes are then allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DrawerProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  side: 'end',\n  size: 'md',\n  extent: undefined,\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the drawer is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The body of the drawer. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the drawer. */\n  footer?(): unknown\n  /**\n   * The button that opens the drawer. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the drawer itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst titleId = useId()\nconst subtitleId = useId()\n\nconst {\n  dialogEl,\n  rendered,\n  rootAttrs,\n  show,\n  close,\n  onClose,\n  onCancel,\n  onPointerdown,\n  onBackdropClick,\n} = useModalDialog(open, {\n  persistentBackdrop: () => props.persistentBackdrop,\n  persistentEscape: () => props.persistentEscape,\n  exitTransition: true,\n})\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\ndefineExpose({\n  /**\n   * Opens the drawer, exactly as setting `open` does. The opening lands on the next tick: the\n   * promise returned settles once the drawer is showing.\n   */\n  show,\n  /**\n   * Closes the drawer. It closes unconditionally, `persistentEscape` and `persistentBackdrop`\n   * governing only the two routes the reader can take.\n   */\n  close,\n  /**\n   * The `<dialog>` element. It is null while closed, once its exit has played: each opening\n   * from there builds a fresh one.\n   */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-drawer\"\n    :data-side=\"side\"\n    :data-size=\"size\"\n    :style=\"{ '--drawer-extent': cssSize(extent) }\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      As in VDialog, only the body scrolls, and the lines under the header and above the footer\n      are drawn by sentinels stuck inside the scrolling area, which a scroll-state query reaches.\n    -->\n    <header class=\"v-drawer-header\">\n      <slot name=\"header\">\n        <div class=\"v-drawer-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-drawer-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-drawer-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-drawer-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-drawer-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"close\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-drawer-scroll\">\n      <span class=\"v-drawer-edge v-drawer-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-drawer-body\">\n        <slot />\n      </div>\n      <span class=\"v-drawer-edge v-drawer-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-drawer-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-drawer {\n    /*\n     * Declared on the element rather than as a `var()` fallback: a drawer opened from inside\n     * another is its DOM descendant, and would otherwise inherit that drawer's inline extent.\n     */\n    --drawer-extent: var(--vectis-control-size-drawer-md);\n    /* Where the drawer waits off screen, before it enters and after it leaves. */\n    --drawer-offset: 100% 0;\n    /*\n     * Fixed explicitly rather than left to the modal's UA style: an engine without `overlay`\n     * takes the drawer out of the top layer the moment it closes, and it must not fall back\n     * into the page while it slides out.\n     */\n    position: fixed;\n    inset: 0;\n    margin: 0;\n    inline-size: auto;\n    block-size: auto;\n    max-inline-size: none;\n    max-block-size: none;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n    /*\n     * `display` and `overlay` switch at the END of the exit, which keeps the closed drawer\n     * painted, and in the top layer, while it slides out.\n     */\n    transition:\n      translate var(--vectis-duration-slow) var(--vectis-ease-out),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer[data-size='sm'] {\n    --drawer-extent: var(--vectis-control-size-drawer-sm);\n  }\n\n  .v-drawer[data-size='lg'] {\n    --drawer-extent: var(--vectis-control-size-drawer-lg);\n  }\n\n  /* The uncovered strip keeps the backdrop within reach, to see the page and to close. */\n  .v-drawer[data-side='start'],\n  .v-drawer[data-side='end'] {\n    inline-size: var(--drawer-extent);\n    max-inline-size: calc(100dvi - var(--vectis-space-12));\n  }\n\n  .v-drawer[data-side='top'],\n  .v-drawer[data-side='bottom'] {\n    block-size: var(--drawer-extent);\n    max-block-size: calc(100dvb - var(--vectis-space-12));\n  }\n\n  /* The corners against the viewport stay square; the two facing the page are rounded. */\n  .v-drawer[data-side='start'] {\n    --drawer-offset: -100% 0;\n    inset-inline-end: auto;\n    border-start-end-radius: var(--vectis-radius-overlay);\n    border-end-end-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='end'] {\n    inset-inline-start: auto;\n    border-start-start-radius: var(--vectis-radius-overlay);\n    border-end-start-radius: var(--vectis-radius-overlay);\n  }\n\n  /* A translation is physical: in a right-to-left page the inline sides swap directions. */\n  .v-drawer[data-side='start']:dir(rtl) {\n    --drawer-offset: 100% 0;\n  }\n\n  .v-drawer[data-side='end']:dir(rtl) {\n    --drawer-offset: -100% 0;\n  }\n\n  .v-drawer[data-side='top'] {\n    --drawer-offset: 0 -100%;\n    bottom: auto;\n    border-bottom-left-radius: var(--vectis-radius-overlay);\n    border-bottom-right-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='bottom'] {\n    --drawer-offset: 0 100%;\n    top: auto;\n    border-top-left-radius: var(--vectis-radius-overlay);\n    border-top-right-radius: var(--vectis-radius-overlay);\n  }\n\n  /*\n   * An indispensable guard: the display declared above beats the browser's own rule hiding a\n   * closed dialog. Through the exit, the transition holds `display` back, and a closed drawer\n   * sliding away lets clicks through to the page it uncovers.\n   */\n  .v-drawer:not([open]) {\n    display: none;\n    translate: var(--drawer-offset);\n    pointer-events: none;\n    transition-timing-function: var(--vectis-ease-in);\n  }\n\n  @starting-style {\n    .v-drawer[open] {\n      translate: var(--drawer-offset);\n    }\n  }\n\n  .v-drawer::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition:\n      opacity var(--vectis-duration-slow) var(--vectis-ease-default),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer:not([open])::backdrop {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-drawer[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  /* No ring around the whole drawer when opening focuses it: the controls inside show theirs. */\n  .v-drawer:focus-visible {\n    outline: none;\n  }\n\n  .v-drawer-scroll {\n    /* The zero minimum lets the flex item shrink below its content, so that it scrolls. */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    container-type: scroll-state;\n  }\n\n  /* Negative margins make the sentinels occupy no space at all. */\n  .v-drawer-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-drawer-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-drawer-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-drawer-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-drawer-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-drawer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* Pulled back by the cross's own padding, so its glyph lines up with the header's edge. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-drawer-body {\n    /* Stretched when short, so the footer stays at the bottom of the drawer. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-drawer-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where scroll-state queries are missing, the sentinels simply stay transparent. */\n  @container scroll-state(scrollable: top) {\n    .v-drawer-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-drawer-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-drawer,\n    .v-drawer::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-drawer {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,IAAM,IAAQ,GAYR,IAAI,EAAY,GAChB,IAAqB,QAAe,EAAM,cAAc,EAAE,MAAM,OAAO,KAAK,GAG5E,IAAO,EAAoB,GAAC,MAA0B,GAoBtD,IAAU,EAAM,GAChB,IAAa,EAAM,GAEnB,EACJ,aACA,aACA,cACA,SACA,OAAA,GACA,YACA,aACA,kBACA,uBACE,EAAe,GAAM;GACvB,0BAA0B,EAAM;GAChC,wBAAwB,EAAM;GAC9B,gBAAgB;EAClB,CAAC,GAEK,IAAe,SAAoC;GACvD,SAAS;GACT,iBAAiB;EACnB,EAAE;SAEF,EAAa;GAKX;GAKA,OAAA;GAKA,IAAI;EACN,CAAC,+BAIC,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GAEzC,EAAA,CAAA,KAAA,EAAA,GADR,EAmES,UAnET,EAmES;;YAjEH;GAAJ,KAAI;GACH,mBAAiB,EAAA,QAAQ,EAAA,CAAA,IAAU,KAAA;GACnC,oBAAkB,EAAA,WAAW,EAAA,CAAA,IAAa,KAAA;KACnC,EAAA,CAAA,GAAS;GACjB,OAAM;GACL,aAAW,EAAA;GACX,aAAW,EAAA;GACX,OAAK,EAAA,mBAAuB,EAAA,CAAA,CAAO,CAAC,EAAA,MAAM,EAAA;GAC1C,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACP,UAAM,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACR,eAAW,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACb,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;;GAMR,EAqCS,UArCT,GAqCS,CApCP,EAqBO,EAAA,QAAA,UAAA,CAAA,SAAA,CApBL,EAmBM,OAnBN,GAmBM,CAjBI,EAAA,SAAA,EAAA,GADR,EAQc,GAAA;;IANX,IAAI,EAAA,CAAA;IACL,IAAG;IACH,SAAQ;IACR,OAAM;;qBAEK,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;+BAGF,EAAA,YAAA,EAAA,GADR,EAQc,GAAA;;IANX,IAAI,EAAA,CAAA;IACL,SAAQ;IACR,MAAK;IACL,OAAM;;qBAEQ,CAAA,EAAA,EAAX,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;oCAIL,EAAA,aAAaA,EAAAA,OAAM,qBAAA,EAAA,GAA/B,EAaM,OAbN,GAaM,CAZJ,EAA8B,EAAA,QAAA,gBAAA,GAErB,EAAA,yBAAA,EAAA,GADT,EAUc,GAAA;;IARZ,OAAM;IACL,OAAO,EAAA;IACR,SAAQ;IACR,MAAK;IACL,MAAK;IACJ,SAAO,EAAA,CAAA;;qBAEmB,CAA3B,EAA2B,GAAA,EAAnB,MAAM,EAAA,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;;GAI7B,EAMM,OANN,GAMM;aALJ,EAAoE,QAAA;KAA9D,OAAM;KAAmC,eAAY;;IAC3D,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;aAEV,EAAuE,QAAA;KAAjE,OAAM;KAAsC,eAAY;;;GAElDA,EAAAA,OAAO,UAAA,EAAA,GAArB,EAES,UAFT,GAES,CADP,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/VEmptyState/VEmptyState.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-empty-state{--empty-state-media:var(--vectis-control-size-empty-state-media-md);--empty-state-gap:var(--vectis-space-3);align-items:center;gap:var(--empty-state-gap);padding:var(--vectis-space-8) var(--vectis-space-6);text-align:center;color:var(--vectis-color-text);font-family:var(--vectis-text-family);flex-direction:column;display:flex}.v-empty-state[data-size=sm]{--empty-state-media:var(--vectis-control-size-empty-state-media-sm);--empty-state-gap:var(--vectis-space-2);padding:var(--vectis-space-4)}.v-empty-state[data-size=lg]{--empty-state-media:var(--vectis-control-size-empty-state-media-lg);--empty-state-gap:var(--vectis-space-4);padding:var(--vectis-space-12) var(--vectis-space-8)}.v-empty-state-icon{--vectis-icon-size:calc(var(--empty-state-media) / 2);inline-size:var(--empty-state-media);block-size:var(--empty-state-media);border-radius:var(--vectis-radius-full);background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-muted);place-items:center;display:inline-grid}.v-empty-state-icon,.v-empty-state-media{margin-block-end:var(--vectis-space-1)}.v-empty-state-title,.v-empty-state-description{max-inline-size:var(--vectis-control-size-empty-state-text-max);margin:0}.v-empty-state-title{font-size:var(--vectis-text-heading-4-size);font-weight:var(--vectis-text-heading-4-weight);line-height:var(--vectis-text-heading-4-leading)}.v-empty-state-description{font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-text-body-md-weight);line-height:var(--vectis-text-body-md-leading);color:var(--vectis-color-text-muted)}.v-empty-state[data-size=sm] .v-empty-state-title{font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);line-height:var(--vectis-text-label-leading)}.v-empty-state[data-size=sm] .v-empty-state-description{font-size:var(--vectis-text-body-sm-size);font-weight:var(--vectis-text-body-sm-weight);line-height:var(--vectis-text-body-sm-leading)}.v-empty-state[data-size=lg] .v-empty-state-title{font-size:var(--vectis-text-heading-3-size);font-weight:var(--vectis-text-heading-3-weight);line-height:var(--vectis-text-heading-3-leading)}.v-empty-state-actions{justify-content:center;gap:var(--vectis-space-3);flex-wrap:wrap;margin-block-start:var(--vectis-space-2);display:flex}@media (forced-colors:active){.v-empty-state-icon{outline:1px solid canvastext}}}