@eos-ui/vue 0.1.0 → 0.2.0

package/dist/components/{Popover/EPopover.vue_vue_type_script_setup_true_lang.js → Definition/EDefinition.vue_vue_type_script_setup_true_lang.js}

@@ -3,17 +3,17 @@ import { useMessages as e, usePortalTarget as t } from "../../config.js";
 import { useUid as n } from "../../composables/useUid.js";
 import r from "../Actions/EActions.js";
 import i from "../Icon/EIcon.js";
-/* empty css              */
 import a from "../IconButton/EIconButton.js";
+/* empty css              */
 import { createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, nextTick as h, openBlock as g, ref as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useModel as S, watch as C, withCtx as w } from "vue";
 import { PopoverClose as T, PopoverContent as E, PopoverPortal as D, PopoverRoot as O, PopoverTrigger as k } from "reka-ui";
-//#region src/components/Popover/EPopover.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/Definition/EDefinition.vue?vue&type=script&setup=true&lang.ts
 var A = { class: "e-sr" }, j = {
 	key: 0,
 	class: "e-pop-head"
 }, M = ["id"], N = { class: "e-pop-body" }, P = /*@__PURE__*/ f({
 	inheritAttrs: !1,
-	__name: "EPopover",
+	__name: "EDefinition",
 	props: /*@__PURE__*/ p({
 		label: {},
 		title: {},
@@ -95,4 +95,4 @@ var A = { class: "e-sr" }, j = {
 //#endregion
 export { P as default };
 
-//# sourceMappingURL=EPopover.vue_vue_type_script_setup_true_lang.js.map
+//# sourceMappingURL=EDefinition.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Definition/EDefinition.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EDefinition.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_mergeProps","EIcon","_renderSlot","_toDisplayString","_createElementBlock","_resolveDynamicComponent","_createTextVNode","EIconButton","EActions","_createCommentVNode","EActions_default","EIcon_default","EIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EDefinition_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","open","useModel","__props","t","useMessages","portal","usePortalTarget","id","useUid","trigger","ref","watch","isOpen","nextTick","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverTrigger","createElementVNode","mergeProps","_ctx","renderSlot","toDisplayString","PopoverPortal","PopoverContent","createElementBlock","resolveDynamicComponent","createTextVNode","PopoverClose","\"actions\"","createCommentVNode"],"sources":["../../../src/components/Definition/EDefinition.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, ref, watch } from \"vue\";\nimport { PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** Names the panel for screen readers (when there is no `title`) and is read after the term. */\n    label: string;\n    /** Adds a title row with this title and a Close button. */\n    title?: string;\n    /** The level of the title's heading, so it fits the page outline. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** The term, shown with a dotted underline and an info glyph. */\n  trigger(): unknown;\n  /** The explanation. Keep it short; use a Dialog when the reader must decide something. */\n  default(): unknown;\n  /** Buttons in a tinted footer, left-aligned, the main action first. They stack full width on a phone. */\n  actions?(): unknown;\n}>();\n\n/** The open state. */\nconst open = defineModel<boolean>({ default: false });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\nconst id = useUid();\n\nconst trigger = ref<HTMLElement | null>(null);\nwatch(\n  open,\n  async (isOpen) => {\n    if (!isOpen) return;\n    await nextTick();\n    document\n      .getElementById(trigger.value?.getAttribute(\"aria-controls\") ?? \"\")\n      ?.setAttribute(\"aria-labelledby\", `${id.value}-title`);\n  },\n  { flush: \"post\" },\n);\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <button ref=\"trigger\" type=\"button\" class=\"e-linkbtn\" v-bind=\"$attrs\">\n        <EIcon name=\"info\" small />\n        <slot name=\"trigger\" />\n        <span class=\"e-sr\">, {{ label }}</span>\n      </button>\n    </PopoverTrigger>\n    <PopoverPortal :to=\"portal\">\n      <PopoverContent class=\"e-popover e-root\" side=\"bottom\" align=\"start\" :side-offset=\"8\" :collision-padding=\"16\">\n        <div v-if=\"title\" class=\"e-pop-head\">\n          <component :is=\"`h${headingLevel}`\" :id=\"`${id}-title`\" class=\"e-pop-title\">{{ title }}</component>\n          <PopoverClose as-child>\n            <EIconButton icon=\"x\" :label=\"t('close')\" />\n          </PopoverClose>\n        </div>\n        <span v-else :id=\"`${id}-title`\" class=\"e-sr\">{{ label }}</span>\n        <div class=\"e-pop-body\"><slot /></div>\n        <EActions v-if=\"$slots['actions']\" bar><slot name=\"actions\" /></EActions>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-linkbtn {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    position: relative;\n    min-height: 28px;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--e-primary);\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    text-decoration: underline dotted;\n    text-decoration-color: currentcolor;\n    text-underline-offset: 4px;\n    text-decoration-thickness: var(--e-stroke-edge);\n    cursor: help;\n  }\n\n  .e-linkbtn::after {\n    content: \"\";\n    position: absolute;\n    inset: calc(-1 * var(--e-space-2)) calc(-1 * var(--e-space-1));\n  }\n\n  .e-linkbtn:hover,\n  .e-linkbtn:active {\n    color: var(--e-ink);\n  }\n\n  .e-pop-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    padding: var(--e-space-1) var(--e-space-1) 0 var(--e-space-4);\n  }\n\n  .e-pop-title {\n    margin: 0;\n    font: 600 var(--e-text-xs) / 1.2 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-muted);\n  }\n\n  .e-pop-body {\n    padding: var(--e-space-3) var(--e-space-4) var(--e-space-4);\n    font: 400 var(--e-text-md) / 1.5 var(--e-font-sans);\n  }\n\n  .e-pop-head + .e-pop-body {\n    padding-top: var(--e-space-1);\n  }\n\n  @media print {\n    .e-linkbtn {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,IAAM6B,IAAO3B,EAAoB6B,GAAA,YAAmB,GAE9CC,IAAIC,EAAY,GAChBC,IAASC,EAAgB,GACzBC,IAAKC,EAAO,GAEZC,IAAUC,EAAwB,IAAI;E,OAC5CC,EACEX,GACA,OAAO,MAAW;GAChB,AAAKY,MACL,MAAMC,EAAS,GACf,SACG,eAAeJ,EAAQ,OAAO,aAAa,eAAe,KAAK,EAAE,CAAA,EAChE,aAAa,mBAAmB,GAAGF,EAAG,MAAM,OAAO;EACzD,GACA,EAAE,OAAO,OAAO,CAClB,I,UAIEjC,EAAA,GAAAC,EAqBcC,EAAAyC,CAAA,GAAA;GArBO,MAAMjB,EAAA;GAAA,iBAAA,AAAAkB,EAAA,QAAA,MAAA,EAAI,QAAAC;;GAC7B,SAAA1C,QAMiB,CANjBC,EAMiBF,EAAA8C,CAAA,GAAA,EAND,YAAA,GAAQ,GAAA;IACtB,SAAA7C,QAIS,CAJTE,EAIS,UAJTC,EAIS;KAJG,SAAA;KAAJ,KAAI6B;KAAU,MAAK;KAAS,OAAM;IAAoBtC,GAAAA,EAAAA,MAAM,GAAA;KAClEO,EAA2BG,GAAA;MAApB,MAAK;MAAO,OAAA;;KACnBC,EAAuB2C,EAAA,QAAA,SAAA;KACvB9C,EAAuC,QAAvCc,GAAmB,OAAEV,EAAGmB,EAAA,KAAK,GAAA,CAAA;;;G,IAGjCxB,EAYgBF,EAAAoD,CAAA,GAAA,EAZA,IAAIpD,EAAA6B,CAAA,EAAM,GAAA;IACxB,SAAA5B,QAUiB,CAVjBC,EAUiBF,EAAAqD,CAAA,GAAA;KAVD,OAAM;KAAmB,MAAK;KAAS,OAAM;KAAS,eAAa;KAAI,qBAAmB;;KACxG,SAAApD,QAKM;MALKyB,EAAA,SAAX5B,EAAA,GAAAU,EAKM,OALNU,GAKM,EAJJpB,EAAA,GAAAC,EAAmGU,EAAA,IAA/EiB,EAAA,cAAY,GAAA;OAAK,IAAE,GAAK1B,EAAA+B,CAAA,EAAE;OAAU,OAAM;;OAAc,SAAA9B,QAAW,CAARS,EAAAH,EAAAmB,EAAA,KAAK,GAAA,CAAA,C;;M,gBACpFxB,EAEeF,EAAAyD,CAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;OACpB,SAAAxD,QAA4C,CAA5CC,EAA4CS,GAAA;QAA/B,MAAK;QAAK,OAAOX,EAAA2B,CAAA,CAAC,CAAA,OAAA;;;M,SAGnC7B,EAAA,GAAAU,EAAgE,QAAA;;OAAlD,IAAE,GAAKR,EAAA+B,CAAA,EAAE;OAAU,OAAM;MAAU,GAAAxB,EAAAmB,EAAA,KAAK,GAAA,GAAAP,CAAA;MACtDhB,EAAsC,OAAtCiB,GAAsC,CAAdd,EAAQ2C,EAAA,QAAA,SAAA,C;MAChBrD,EAAAA,OAAM8D,WAAtB5D,EAAA,GAAAC,EAAyEa,GAAA;;OAAtC,KAAA;;OAAI,SAAAX,QAAuB,CAAvBK,EAAuB2C,EAAA,QAAA,SAAA,C"}

package/dist/components/Definition/index.d.ts

@@ -0,0 +1 @@
+export { default as EDefinition } from './EDefinition.vue.js';

package/dist/components/DescriptionList/EDescriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"EDescriptionList.js","names":["_sfc_main","EDescriptionList_vue_vue_type_script_setup_true_lang_default","EDescriptionList_default"],"sources":["../../../src/components/DescriptionList/EDescriptionList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VNodeChild } from \"vue\";\nimport \"../../styles/base.css\";\n\nexport interface DescriptionItem {\n  /** The label, shown as a small uppercase kicker. */\n  label: string;\n  /** The text beside it. A string, or a rendered VNode for rich text. */\n  text: string | VNodeChild;\n}\n\ndefineProps<{\n  /** Label and text rows, ruled apart. */\n  items: DescriptionItem[];\n}>();\n\nconst Render = Object.assign((p: { value: VNodeChild }) => p.value, { props: [\"value\"] });\n</script>\n\n<template>\n  <dl class=\"e-facts\">\n    <div v-for=\"item in items\" :key=\"item.label\" class=\"e-fact\">\n      <dt class=\"e-kicker\">{{ item.label }}</dt>\n      <dd class=\"e-fact-text\"><Render :value=\"item.text\" /></dd>\n    </div>\n  </dl>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-facts {\n    display: grid;\n    margin: 0;\n  }\n\n  .e-fact {\n    display: grid;\n    grid-template-columns: 8rem minmax(0, 1fr);\n    gap: var(--e-space-1) var(--e-space-4);\n    align-items: baseline;\n    padding: var(--e-space-3) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    min-width: 0;\n  }\n\n  .e-fact-text {\n    margin: 0;\n    font: 400 var(--e-text-md) / 1.45 var(--e-font-sans);\n  }\n\n  @media (max-width: 26rem) {\n    .e-fact {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  }\n\n  @media print {\n    .e-fact {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n      border-width: 0 0 1px;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EDescriptionList.js","names":["_sfc_main","EDescriptionList_vue_vue_type_script_setup_true_lang_default","EDescriptionList_default"],"sources":["../../../src/components/DescriptionList/EDescriptionList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type VNodeChild } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { StampTone } from \"../Stamp/EStamp.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface DescriptionItem {\n  /** The label, shown as a small uppercase kicker. Leave it out on every row for a plain list of facts. */\n  label?: string;\n  /** The text beside it. A string, or a rendered VNode for rich text. */\n  text: string | VNodeChild;\n  /** A decorative icon before the label (or before the text in a plain list). */\n  icon?: IconProp;\n  /** A word in a stamp after the text, such as \"Verified\". */\n  badge?: string;\n  /** The badge's tone. */\n  badgeTone?: StampTone;\n  /** Shows an Edit button at the end of the row. Pressing it emits `edit`. */\n  editable?: boolean;\n}\n\nconst props = defineProps<{\n  /** Label and text rows, ruled apart: `{ label: string, text: string | VNode }`. Labels are keys, so keep them unique. `null` items are skipped. */\n  items: (DescriptionItem | null | undefined)[];\n}>();\n\nconst emit = defineEmits<{\n  /** An item's Edit button was pressed. */\n  edit: [item: DescriptionItem, index: number];\n}>();\n\ndefineSlots<{\n  /** Replaces the end of a row (after the text and badge), such as a Button or IconButton. */\n  action?(props: { item: DescriptionItem; index: number }): unknown;\n}>();\n\nconst t = useMessages();\nconst shown = computed(() => props.items.filter((it): it is DescriptionItem => Boolean(it)));\n/** No labels anywhere: render a plain list of facts instead of term/description pairs. */\nconst plain = computed(() => shown.value.length > 0 && shown.value.every((it) => !it.label));\n\nconst Render = Object.assign((p: { value: VNodeChild }) => p.value, { props: [\"value\"] });\n\nfunction say(key: string, fallback: string, vars?: Record<string, string>) {\n  const text = t(key, vars);\n  return text === key ? fallback.replace(/\\{(\\w+)\\}/g, (m, k: string) => vars?.[k] ?? m) : text;\n}\n</script>\n\n<template>\n  <ul v-if=\"plain\" class=\"e-facts e-facts--plain\">\n    <li v-for=\"(item, i) in shown\" :key=\"i\" class=\"e-fact\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span class=\"e-fact-text\"><Render :value=\"item.text\" /></span>\n      <EStamp v-if=\"item.badge\" :tone=\"item.badgeTone\" size=\"sm\">{{ item.badge }}</EStamp>\n      <slot name=\"action\" :item=\"item\" :index=\"i\" />\n    </li>\n  </ul>\n  <dl v-else class=\"e-facts\">\n    <div v-for=\"(item, i) in shown\" :key=\"i\" class=\"e-fact\">\n      <dt class=\"e-kicker\">\n        <EIcon v-if=\"item.icon\" :name=\"item.icon\" />{{ item.label }}\n      </dt>\n      <dd class=\"e-fact-text\">\n        <span class=\"e-fact-value\"><Render :value=\"item.text\" /></span>\n        <EStamp v-if=\"item.badge\" :tone=\"item.badgeTone\" size=\"sm\">{{ item.badge }}</EStamp>\n        <slot name=\"action\" :item=\"item\" :index=\"i\" />\n        <EButton\n          v-if=\"item.editable\"\n          variant=\"quiet\"\n          :aria-label=\"say('editItem', 'Edit {label}', { label: item.label ?? '' })\"\n          @click=\"emit('edit', item, i)\"\n        >\n          {{ say(\"edit\", \"Edit\") }}\n        </EButton>\n      </dd>\n    </div>\n  </dl>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-facts {\n    display: grid;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-fact {\n    display: grid;\n    grid-template-columns: 8rem minmax(0, 1fr);\n    gap: var(--e-space-1) var(--e-space-4);\n    align-items: baseline;\n    padding: var(--e-space-3) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    min-width: 0;\n  }\n\n  .e-fact:first-child {\n    border-top: 0;\n  }\n\n  .e-fact > .e-kicker {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-fact > .e-kicker .e-icon {\n    flex: none;\n    width: 1.125rem;\n    height: 1.125rem;\n  }\n\n  .e-fact-text {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n    margin: 0;\n    min-width: 0;\n    font: 400 var(--e-text-md) / 1.45 var(--e-font-sans);\n  }\n\n  .e-fact-value {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-fact-text > :not(.e-fact-value) {\n    flex: none;\n  }\n\n  /* Plain list: icon, text, then the end. */\n  .e-facts--plain {\n    gap: var(--e-space-2);\n  }\n\n  .e-facts--plain > .e-fact {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-2);\n    padding: 0;\n    border-top: 0;\n  }\n\n  .e-facts--plain > .e-fact > .e-icon {\n    flex: none;\n    width: 1.125rem;\n    height: 1.125rem;\n    margin-top: var(--e-space-1);\n  }\n\n  .e-facts--plain > .e-fact > .e-fact-text {\n    flex: 1;\n    display: block;\n    line-height: 1.4;\n  }\n\n  @media (max-width: 26rem) {\n    .e-fact {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  }\n\n  @media print {\n    .e-fact {\n      box-shadow: none;\n      outline: 0;\n      border: 0 solid var(--e-print-ink);\n      border-width: 0 0 var(--e-stroke-hair);\n      break-inside: avoid;\n    }\n\n    .e-fact .e-btn {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/DescriptionList/EDescriptionList.vue.d.ts

@@ -1,14 +1,41 @@
 import { VNodeChild } from 'vue';
+import { StampTone } from '../Stamp/EStamp.vue.js';
+import { IconProp } from '../../icons/types.js';
 export interface DescriptionItem {
-    /** The label, shown as a small uppercase kicker. */
-    label: string;
+    /** The label, shown as a small uppercase kicker. Leave it out on every row for a plain list of facts. */
+    label?: string;
     /** The text beside it. A string, or a rendered VNode for rich text. */
     text: string | VNodeChild;
+    /** A decorative icon before the label (or before the text in a plain list). */
+    icon?: IconProp;
+    /** A word in a stamp after the text, such as "Verified". */
+    badge?: string;
+    /** The badge's tone. */
+    badgeTone?: StampTone;
+    /** Shows an Edit button at the end of the row. Pressing it emits `edit`. */
+    editable?: boolean;
 }
 type __VLS_Props = {
-    /** Label and text rows, ruled apart. */
-    items: DescriptionItem[];
+    /** Label and text rows, ruled apart: `{ label: string, text: string | VNode }`. Labels are keys, so keep them unique. `null` items are skipped. */
+    items: (DescriptionItem | null | undefined)[];
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+type __VLS_Slots = {
+    /** Replaces the end of a row (after the text and badge), such as a Button or IconButton. */
+    action?(props: {
+        item: DescriptionItem;
+        index: number;
+    }): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    edit: (item: DescriptionItem, index: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEdit?: ((item: DescriptionItem, index: number) => any) | undefined;
+}>, {}, {}, {}, {}, 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/DescriptionList/EDescriptionList.vue_vue_type_script_setup_true_lang.js

@@ -1,18 +1,80 @@
 /* empty css                */
-import { Fragment as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, openBlock as a, renderList as o, toDisplayString as s, unref as c } from "vue";
+import { useMessages as e } from "../../config.js";
+import t from "../Icon/EIcon.js";
+import n from "../Button/EButton.js";
+import r from "../Stamp/EStamp.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
 //#region src/components/DescriptionList/EDescriptionList.vue?vue&type=script&setup=true&lang.ts
-var l = { class: "e-facts" }, u = { class: "e-kicker" }, d = { class: "e-fact-text" }, f = /*@__PURE__*/ i({
+var y = {
+	key: 0,
+	class: "e-facts e-facts--plain"
+}, b = { class: "e-fact-text" }, x = {
+	key: 1,
+	class: "e-facts"
+}, S = { class: "e-kicker" }, C = { class: "e-fact-text" }, w = { class: "e-fact-value" }, T = /*@__PURE__*/ f({
 	__name: "EDescriptionList",
 	props: { items: {} },
-	setup(i) {
-		let f = Object.assign((e) => e.value, { props: ["value"] });
-		return (p, m) => (a(), t("dl", l, [(a(!0), t(e, null, o(i.items, (e) => (a(), t("div", {
-			key: e.label,
+	emits: ["edit"],
+	setup(f, { emit: T }) {
+		let E = f, D = T, O = e(), k = a(() => E.items.filter((e) => !!e)), A = a(() => k.value.length > 0 && k.value.every((e) => !e.label)), j = Object.assign((e) => e.value, { props: ["value"] });
+		function M(e, t, n) {
+			let r = O(e, n);
+			return r === e ? t.replace(/\{(\w+)\}/g, (e, t) => n?.[t] ?? e) : r;
+		}
+		return (e, a) => A.value ? (p(), c("ul", y, [(p(!0), c(i, null, m(k.value, (n, i) => (p(), c("li", {
+			key: i,
 			class: "e-fact"
-		}, [n("dt", u, s(e.label), 1), n("dd", d, [r(c(f), { value: e.text }, null, 8, ["value"])])]))), 128))]));
+		}, [
+			n.icon ? (p(), o(t, {
+				key: 0,
+				name: n.icon
+			}, null, 8, ["name"])) : s("", !0),
+			l("span", b, [d(_(j), { value: n.text }, null, 8, ["value"])]),
+			n.badge ? (p(), o(r, {
+				key: 1,
+				tone: n.badgeTone,
+				size: "sm"
+			}, {
+				default: v(() => [u(g(n.badge), 1)]),
+				_: 2
+			}, 1032, ["tone"])) : s("", !0),
+			h(e.$slots, "action", {
+				item: n,
+				index: i
+			})
+		]))), 128))])) : (p(), c("dl", x, [(p(!0), c(i, null, m(k.value, (i, a) => (p(), c("div", {
+			key: a,
+			class: "e-fact"
+		}, [l("dt", S, [i.icon ? (p(), o(t, {
+			key: 0,
+			name: i.icon
+		}, null, 8, ["name"])) : s("", !0), u(g(i.label), 1)]), l("dd", C, [
+			l("span", w, [d(_(j), { value: i.text }, null, 8, ["value"])]),
+			i.badge ? (p(), o(r, {
+				key: 0,
+				tone: i.badgeTone,
+				size: "sm"
+			}, {
+				default: v(() => [u(g(i.badge), 1)]),
+				_: 2
+			}, 1032, ["tone"])) : s("", !0),
+			h(e.$slots, "action", {
+				item: i,
+				index: a
+			}),
+			i.editable ? (p(), o(n, {
+				key: 1,
+				variant: "quiet",
+				"aria-label": M("editItem", "Edit {label}", { label: i.label ?? "" }),
+				onClick: (e) => D("edit", i, a)
+			}, {
+				default: v(() => [u(g(M("edit", "Edit")), 1)]),
+				_: 1
+			}, 8, ["aria-label", "onClick"])) : s("", !0)
+		])]))), 128))]));
 	}
 });
 //#endregion
-export { f as default };
+export { T as default };
 
 //# sourceMappingURL=EDescriptionList.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/DescriptionList/EDescriptionList.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EDescriptionList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_createVNode","_unref","_hoisted_1","_hoisted_2","_hoisted_3","EDescriptionList_vue_vue_type_script_setup_true_lang_default","Render","p","openBlock","createElementBlock","Fragment","renderList","__props","item","createElementVNode","toDisplayString","createVNode","unref"],"sources":["../../../src/components/DescriptionList/EDescriptionList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VNodeChild } from \"vue\";\nimport \"../../styles/base.css\";\n\nexport interface DescriptionItem {\n  /** The label, shown as a small uppercase kicker. */\n  label: string;\n  /** The text beside it. A string, or a rendered VNode for rich text. */\n  text: string | VNodeChild;\n}\n\ndefineProps<{\n  /** Label and text rows, ruled apart. */\n  items: DescriptionItem[];\n}>();\n\nconst Render = Object.assign((p: { value: VNodeChild }) => p.value, { props: [\"value\"] });\n</script>\n\n<template>\n  <dl class=\"e-facts\">\n    <div v-for=\"item in items\" :key=\"item.label\" class=\"e-fact\">\n      <dt class=\"e-kicker\">{{ item.label }}</dt>\n      <dd class=\"e-fact-text\"><Render :value=\"item.text\" /></dd>\n    </div>\n  </dl>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-facts {\n    display: grid;\n    margin: 0;\n  }\n\n  .e-fact {\n    display: grid;\n    grid-template-columns: 8rem minmax(0, 1fr);\n    gap: var(--e-space-1) var(--e-space-4);\n    align-items: baseline;\n    padding: var(--e-space-3) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    min-width: 0;\n  }\n\n  .e-fact-text {\n    margin: 0;\n    font: 400 var(--e-text-md) / 1.45 var(--e-font-sans);\n  }\n\n  @media (max-width: 26rem) {\n    .e-fact {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  }\n\n  @media print {\n    .e-fact {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n      border-width: 0 0 1px;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;EAgBA,IAAMY,IAAS,OAAO,QAAQ,MAA6BC,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC;E,kBAItFb,EAAA,GAAAC,EAKK,MALLO,GAKK,EAJHR,EAAA,EAAA,GAAAC,EAGMC,GAAA,MAAAC,EAHce,EAAA,QAAR,OAAZlB,EAAA,GAAAC,EAGM,OAAA;GAHsB,KAAKkB,EAAK;GAAO,OAAM;E,IACjDf,EAA0C,MAA1CK,GAA0CJ,EAAlBc,EAAK,KAAK,GAAA,CAAA,GAClCf,EAA0D,MAA1DM,GAA0D,CAAlCJ,EAA6BC,EAAAK,CAAA,GAAA,EAApB,OAAOO,EAAK,K"}
+{"version":3,"file":"EDescriptionList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","EIcon","_createCommentVNode","_createElementVNode","_createVNode","_unref","EStamp","_withCtx","_createTextVNode","_toDisplayString","_renderSlot","EButton","EIcon_default","EButton_default","EStamp_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","EDescriptionList_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useMessages","shown","computed","it","plain","Render","p","say","text","key","vars","fallback","k","m","openBlock","createElementBlock","Fragment","renderList","item","createBlock","createCommentVNode","createElementVNode","createVNode","unref","withCtx","createTextVNode","toDisplayString","renderSlot","_ctx","i"],"sources":["../../../src/components/DescriptionList/EDescriptionList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type VNodeChild } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { StampTone } from \"../Stamp/EStamp.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface DescriptionItem {\n  /** The label, shown as a small uppercase kicker. Leave it out on every row for a plain list of facts. */\n  label?: string;\n  /** The text beside it. A string, or a rendered VNode for rich text. */\n  text: string | VNodeChild;\n  /** A decorative icon before the label (or before the text in a plain list). */\n  icon?: IconProp;\n  /** A word in a stamp after the text, such as \"Verified\". */\n  badge?: string;\n  /** The badge's tone. */\n  badgeTone?: StampTone;\n  /** Shows an Edit button at the end of the row. Pressing it emits `edit`. */\n  editable?: boolean;\n}\n\nconst props = defineProps<{\n  /** Label and text rows, ruled apart: `{ label: string, text: string | VNode }`. Labels are keys, so keep them unique. `null` items are skipped. */\n  items: (DescriptionItem | null | undefined)[];\n}>();\n\nconst emit = defineEmits<{\n  /** An item's Edit button was pressed. */\n  edit: [item: DescriptionItem, index: number];\n}>();\n\ndefineSlots<{\n  /** Replaces the end of a row (after the text and badge), such as a Button or IconButton. */\n  action?(props: { item: DescriptionItem; index: number }): unknown;\n}>();\n\nconst t = useMessages();\nconst shown = computed(() => props.items.filter((it): it is DescriptionItem => Boolean(it)));\n/** No labels anywhere: render a plain list of facts instead of term/description pairs. */\nconst plain = computed(() => shown.value.length > 0 && shown.value.every((it) => !it.label));\n\nconst Render = Object.assign((p: { value: VNodeChild }) => p.value, { props: [\"value\"] });\n\nfunction say(key: string, fallback: string, vars?: Record<string, string>) {\n  const text = t(key, vars);\n  return text === key ? fallback.replace(/\\{(\\w+)\\}/g, (m, k: string) => vars?.[k] ?? m) : text;\n}\n</script>\n\n<template>\n  <ul v-if=\"plain\" class=\"e-facts e-facts--plain\">\n    <li v-for=\"(item, i) in shown\" :key=\"i\" class=\"e-fact\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span class=\"e-fact-text\"><Render :value=\"item.text\" /></span>\n      <EStamp v-if=\"item.badge\" :tone=\"item.badgeTone\" size=\"sm\">{{ item.badge }}</EStamp>\n      <slot name=\"action\" :item=\"item\" :index=\"i\" />\n    </li>\n  </ul>\n  <dl v-else class=\"e-facts\">\n    <div v-for=\"(item, i) in shown\" :key=\"i\" class=\"e-fact\">\n      <dt class=\"e-kicker\">\n        <EIcon v-if=\"item.icon\" :name=\"item.icon\" />{{ item.label }}\n      </dt>\n      <dd class=\"e-fact-text\">\n        <span class=\"e-fact-value\"><Render :value=\"item.text\" /></span>\n        <EStamp v-if=\"item.badge\" :tone=\"item.badgeTone\" size=\"sm\">{{ item.badge }}</EStamp>\n        <slot name=\"action\" :item=\"item\" :index=\"i\" />\n        <EButton\n          v-if=\"item.editable\"\n          variant=\"quiet\"\n          :aria-label=\"say('editItem', 'Edit {label}', { label: item.label ?? '' })\"\n          @click=\"emit('edit', item, i)\"\n        >\n          {{ say(\"edit\", \"Edit\") }}\n        </EButton>\n      </dd>\n    </div>\n  </dl>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-facts {\n    display: grid;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-fact {\n    display: grid;\n    grid-template-columns: 8rem minmax(0, 1fr);\n    gap: var(--e-space-1) var(--e-space-4);\n    align-items: baseline;\n    padding: var(--e-space-3) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    min-width: 0;\n  }\n\n  .e-fact:first-child {\n    border-top: 0;\n  }\n\n  .e-fact > .e-kicker {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-fact > .e-kicker .e-icon {\n    flex: none;\n    width: 1.125rem;\n    height: 1.125rem;\n  }\n\n  .e-fact-text {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n    margin: 0;\n    min-width: 0;\n    font: 400 var(--e-text-md) / 1.45 var(--e-font-sans);\n  }\n\n  .e-fact-value {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-fact-text > :not(.e-fact-value) {\n    flex: none;\n  }\n\n  /* Plain list: icon, text, then the end. */\n  .e-facts--plain {\n    gap: var(--e-space-2);\n  }\n\n  .e-facts--plain > .e-fact {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-2);\n    padding: 0;\n    border-top: 0;\n  }\n\n  .e-facts--plain > .e-fact > .e-icon {\n    flex: none;\n    width: 1.125rem;\n    height: 1.125rem;\n    margin-top: var(--e-space-1);\n  }\n\n  .e-facts--plain > .e-fact > .e-fact-text {\n    flex: 1;\n    display: block;\n    line-height: 1.4;\n  }\n\n  @media (max-width: 26rem) {\n    .e-fact {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  }\n\n  @media print {\n    .e-fact {\n      box-shadow: none;\n      outline: 0;\n      border: 0 solid var(--e-print-ink);\n      border-width: 0 0 var(--e-stroke-hair);\n      break-inside: avoid;\n    }\n\n    .e-fact .e-btn {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAyBA,IAAM2B,IAAQC,GAKRC,IAAOH,GAUPI,IAAIC,EAAY,GAChBC,IAAQC,QAAeN,EAAM,MAAM,QAAQ,MAA8B,EAAQO,CAAG,CAAC,GAErFC,IAAQF,QAAeD,EAAM,MAAM,SAAS,KAAKA,EAAM,MAAM,OAAO,MAAO,CAACE,EAAG,KAAK,CAAC,GAErFE,IAAS,OAAO,QAAQ,MAA6BC,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC;EAExF,SAASC,EAAI,GAAa,GAAkB,GAA+B;GACzE,IAAMC,IAAOT,EAAEU,GAAKC,CAAI;GACxB,OAAOF,MAASC,IAAME,EAAS,QAAQ,eAAe,GAAG,MAAcD,IAAOE,MAAMC,CAAC,IAAIL;EAC3F;E,iBAIYJ,EAAA,SAAVnC,EAAA,GAAAC,EAOK,MAPLkB,GAOK,EANHnB,EAAA,EAAA,GAAAC,EAKKC,GAAA,MAAAC,EALmB6B,EAAA,QAAZ,GAAM,OAAlBhC,EAAA,GAAAC,EAKK,MAAA;GAL2B,KAAK;GAAG,OAAM;;GAC/BgD,EAAK,QAAlBjD,EAAA,GAAAI,EAA4CC,GAAA;;IAAnB,MAAM4C,EAAK;;GACpC1C,EAA8D,QAA9Da,GAA8D,CAApCZ,EAA6BC,EAAA2B,CAAA,GAAA,EAApB,OAAOa,EAAK,K;GACjCA,EAAK,SAAnBjD,EAAA,GAAAI,EAAoFM,GAAA;;IAAzD,MAAMuC,EAAK;IAAW,MAAK;;IAAK,SAAAtC,QAAgB,CAAbC,EAAAC,EAAAoC,EAAK,KAAK,GAAA,CAAA,C;;;GACxEnC,EAA8C6C,EAAA,QAAA,UAAA;IAAnB;IAAO,OAAO;;E,kBAG7C3D,EAAA,GAAAC,EAmBK,MAnBLoB,GAmBK,EAlBHrB,EAAA,EAAA,GAAAC,EAiBMC,GAAA,MAAAC,EAjBmB6B,EAAA,QAAZ,GAAM,OAAnBhC,EAAA,GAAAC,EAiBM,OAAA;GAjB2B,KAAK2D;GAAG,OAAM;E,IAC7CrD,EAEK,MAFLe,GAEK,CADU2B,EAAK,QAAlBjD,EAAA,GAAAI,EAA4CC,GAAA;;GAAnB,MAAM4C,EAAK;E,oCAAWrC,EAAAC,EAAAoC,EAAK,KAAK,GAAA,CAAA,C,IAE3D1C,EAYK,MAZLgB,GAYK;GAXHhB,EAA+D,QAA/DiB,GAA+D,CAApChB,EAA6BC,EAAA2B,CAAA,GAAA,EAApB,OAAOa,EAAK,K;GAClCA,EAAK,SAAnBjD,EAAA,GAAAI,EAAoFM,GAAA;;IAAzD,MAAMuC,EAAK;IAAW,MAAK;;IAAK,SAAAtC,QAAgB,CAAbC,EAAAC,EAAAoC,EAAK,KAAK,GAAA,CAAA,C;;;GACxEnC,EAA8C6C,EAAA,QAAA,UAAA;IAAnB;IAAO,OAAOC;;GAEjCX,EAAK,YADbjD,EAAA,GAAAI,EAOUW,GAAA;;IALR,SAAQ;IACP,cAAYuB,EAAG,YAAA,gBAAA,EAAA,OAAsCW,EAAK,SAAK,GAAA,CAAA;IAC/D,UAAK,MAAEpB,EAAI,QAASoB,GAAMW,CAAC;;IAE5B,SAAAjD,QAAyB,CAAtBC,EAAAC,EAAAyB,EAAG,QAAA,MAAA,CAAA,GAAA,CAAA,C"}

package/dist/components/Dialog/DialogFrame.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogFrame.js","names":["_sfc_main","DialogFrame_vue_vue_type_script_setup_true_lang_default","DialogFrame_default"],"sources":["../../../src/components/Dialog/DialogFrame.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from \"reka-ui\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"./dialog.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    title: string;\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    inline?: boolean;\n    contentClass?: unknown;\n  }>(),\n  { headingLevel: 2 },\n);\n\nconst emit = defineEmits<{\n  close: [];\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n  actions?(): unknown;\n}>();\n\nconst open = defineModel<boolean>(\"open\");\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nfunction setOpen(value: boolean) {\n  open.value = value;\n  if (!value) emit(\"close\");\n}\n</script>\n\n<template>\n  <DialogRoot :open=\"!!open\" :modal=\"!inline\" @update:open=\"setOpen\">\n    <DialogPortal :to=\"target\" :disabled=\"inline\">\n      <div class=\"e-root\">\n        <DialogOverlay v-if=\"!inline\" class=\"e-dialog-overlay\" />\n        <DialogContent\n          v-bind=\"$attrs\"\n          :class=\"contentClass\"\n          :aria-describedby=\"undefined\"\n          @interact-outside.prevent\n        >\n          <header class=\"e-dialog-head\">\n            <DialogTitle :as=\"`h${headingLevel}`\" class=\"e-dialog-title\">{{ title }}</DialogTitle>\n            <DialogClose as-child>\n              <EIconButton icon=\"x\" :label=\"t('close')\" />\n            </DialogClose>\n          </header>\n          <slot />\n          <EActions v-if=\"$slots.actions\" as=\"footer\" bar class=\"e-dialog-foot\"><slot name=\"actions\" /></EActions>\n        </DialogContent>\n      </div>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DialogFrame.js","names":["_sfc_main","DialogFrame_vue_vue_type_script_setup_true_lang_default","DialogFrame_default"],"sources":["../../../src/components/Dialog/DialogFrame.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from \"reka-ui\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"./dialog.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    title: string;\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    inline?: boolean;\n    dismissible?: boolean;\n    contentClass?: unknown;\n  }>(),\n  { headingLevel: 2 },\n);\n\nconst emit = defineEmits<{\n  close: [];\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n  actions?(): unknown;\n}>();\n\nconst open = defineModel<boolean>(\"open\");\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nfunction setOpen(value: boolean) {\n  open.value = value;\n  if (!value) emit(\"close\");\n}\n</script>\n\n<template>\n  <DialogRoot :open=\"!!open\" :modal=\"!inline\" @update:open=\"setOpen\">\n    <DialogPortal :to=\"target\" :disabled=\"inline\">\n      <div class=\"e-root\">\n        <DialogOverlay v-if=\"!inline\" class=\"e-dialog-overlay\" />\n        <DialogContent\n          v-bind=\"$attrs\"\n          :class=\"contentClass\"\n          :aria-describedby=\"undefined\"\n          @interact-outside=\"(e) => !dismissible && e.preventDefault()\"\n        >\n          <header class=\"e-dialog-head\">\n            <DialogTitle :as=\"`h${headingLevel}`\" class=\"e-dialog-title\">{{ title }}</DialogTitle>\n            <DialogClose as-child>\n              <EIconButton icon=\"x\" :label=\"t('close')\" />\n            </DialogClose>\n          </header>\n          <slot />\n          <EActions v-if=\"$slots.actions\" as=\"footer\" bar class=\"e-dialog-foot\"><slot name=\"actions\" /></EActions>\n        </DialogContent>\n      </div>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}

package/dist/components/Dialog/DialogFrame.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     title: string;
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     inline?: boolean;
+    dismissible?: boolean;
     contentClass?: unknown;
 };
 type __VLS_Slots = {

package/dist/components/Dialog/DialogFrame.vue_vue_type_script_setup_true_lang.js

@@ -3,16 +3,17 @@ import { useMessages as e, usePortalTarget as t } from "../../config.js";
 import n from "../Actions/EActions.js";
 import r from "../IconButton/EIconButton.js";
 /* empty css       */
-import { createBlock as i, createCommentVNode as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, withCtx as _, withModifiers as v } from "vue";
-import { DialogClose as y, DialogContent as b, DialogOverlay as x, DialogPortal as S, DialogRoot as C, DialogTitle as w } from "reka-ui";
+import { createBlock as i, createCommentVNode as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
+import { DialogClose as v, DialogContent as y, DialogOverlay as b, DialogPortal as x, DialogRoot as S, DialogTitle as C } from "reka-ui";
 //#region src/components/Dialog/DialogFrame.vue?vue&type=script&setup=true&lang.ts
-var T = { class: "e-root" }, E = { class: "e-dialog-head" }, D = /*@__PURE__*/ l({
+var w = { class: "e-root" }, T = { class: "e-dialog-head" }, E = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "DialogFrame",
 	props: /*@__PURE__*/ u({
 		title: {},
 		headingLevel: { default: 2 },
 		inline: { type: Boolean },
+		dismissible: { type: Boolean },
 		contentClass: {}
 	}, {
 		open: { type: Boolean },
@@ -20,38 +21,38 @@ var T = { class: "e-root" }, E = { class: "e-dialog-head" }, D = /*@__PURE__*/ l
 	}),
 	emits: /*@__PURE__*/ u(["close"], ["update:open"]),
 	setup(l, { emit: u }) {
-		let D = u, O = g(l, "open"), k = e(), A = t();
-		function j(e) {
-			O.value = e, e || D("close");
+		let E = u, D = g(l, "open"), O = e(), k = t();
+		function A(e) {
+			D.value = e, e || E("close");
 		}
-		return (e, t) => (f(), i(h(C), {
-			open: !!O.value,
+		return (e, t) => (f(), i(h(S), {
+			open: !!D.value,
 			modal: !l.inline,
-			"onUpdate:open": j
+			"onUpdate:open": A
 		}, {
-			default: _(() => [c(h(S), {
-				to: h(A),
+			default: _(() => [c(h(x), {
+				to: h(k),
 				disabled: l.inline
 			}, {
-				default: _(() => [o("div", T, [l.inline ? a("", !0) : (f(), i(h(x), {
+				default: _(() => [o("div", w, [l.inline ? a("", !0) : (f(), i(h(b), {
 					key: 0,
 					class: "e-dialog-overlay"
-				})), c(h(b), d(e.$attrs, {
+				})), c(h(y), d(e.$attrs, {
 					class: l.contentClass,
 					"aria-describedby": void 0,
-					onInteractOutside: t[0] ||= v(() => {}, ["prevent"])
+					onInteractOutside: t[0] ||= (e) => !l.dismissible && e.preventDefault()
 				}), {
 					default: _(() => [
-						o("header", E, [c(h(w), {
+						o("header", T, [c(h(C), {
 							as: `h${l.headingLevel}`,
 							class: "e-dialog-title"
 						}, {
 							default: _(() => [s(m(l.title), 1)]),
 							_: 1
-						}, 8, ["as"]), c(h(y), { "as-child": "" }, {
+						}, 8, ["as"]), c(h(v), { "as-child": "" }, {
 							default: _(() => [c(r, {
 								icon: "x",
-								label: h(k)("close")
+								label: h(O)("close")
 							}, null, 8, ["label"])]),
 							_: 1
 						})]),
@@ -75,6 +76,6 @@ var T = { class: "e-root" }, E = { class: "e-dialog-head" }, D = /*@__PURE__*/ l
 	}
 });
 //#endregion
-export { D as default };
+export { E as default };
 
 //# sourceMappingURL=DialogFrame.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Dialog/DialogFrame.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogFrame.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_createCommentVNode","_mergeProps","_withModifiers","_createTextVNode","_toDisplayString","EIconButton","_renderSlot","EActions","EActions_default","EIconButton_default","_hoisted_1","_hoisted_2","DialogFrame_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","emit","open","useModel","__props","t","useMessages","target","usePortalTarget","setOpen","value","openBlock","createBlock","unref","DialogRoot","withCtx","createVNode","DialogPortal","createElementVNode","createCommentVNode","DialogOverlay","DialogContent","mergeProps","_ctx","_cache","withModifiers","DialogTitle","createTextVNode","toDisplayString","DialogClose","renderSlot"],"sources":["../../../src/components/Dialog/DialogFrame.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from \"reka-ui\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"./dialog.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    title: string;\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    inline?: boolean;\n    contentClass?: unknown;\n  }>(),\n  { headingLevel: 2 },\n);\n\nconst emit = defineEmits<{\n  close: [];\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n  actions?(): unknown;\n}>();\n\nconst open = defineModel<boolean>(\"open\");\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nfunction setOpen(value: boolean) {\n  open.value = value;\n  if (!value) emit(\"close\");\n}\n</script>\n\n<template>\n  <DialogRoot :open=\"!!open\" :modal=\"!inline\" @update:open=\"setOpen\">\n    <DialogPortal :to=\"target\" :disabled=\"inline\">\n      <div class=\"e-root\">\n        <DialogOverlay v-if=\"!inline\" class=\"e-dialog-overlay\" />\n        <DialogContent\n          v-bind=\"$attrs\"\n          :class=\"contentClass\"\n          :aria-describedby=\"undefined\"\n          @interact-outside.prevent\n        >\n          <header class=\"e-dialog-head\">\n            <DialogTitle :as=\"`h${headingLevel}`\" class=\"e-dialog-title\">{{ title }}</DialogTitle>\n            <DialogClose as-child>\n              <EIconButton icon=\"x\" :label=\"t('close')\" />\n            </DialogClose>\n          </header>\n          <slot />\n          <EActions v-if=\"$slots.actions\" as=\"footer\" bar class=\"e-dialog-foot\"><slot name=\"actions\" /></EActions>\n        </DialogContent>\n      </div>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoBA,IAAMyB,IAAOD,GASPE,IAAOxB,EAAoB0B,GAAC,MAAM,GAElCC,IAAIC,EAAY,GAChBC,IAASC,EAAgB;EAE/B,SAASC,EAAQ,GAAgB;GAE/B,AADA,EAAK,QAAQC,GACRA,KAAOT,EAAK,OAAO;EAC1B;E,kBAIEtB,EAAA,GAAAC,EAqBaC,EAAAiC,CAAA,GAAA;GArBA,MAAI,CAAA,CAAIZ,EAAA;GAAO,OAAK,CAAGE,EAAA;GAAS,iBAAaK;;GACxD,SAAA3B,QAmBe,CAnBfC,EAmBeF,EAAAoC,CAAA,GAAA;IAnBA,IAAIpC,EAAA0B,CAAA;IAAS,UAAUH,EAAA;;IACpC,SAAAtB,QAiBM,CAjBNE,EAiBM,OAjBNW,GAiBM,CAhBkBS,EAAA,S,aAAtBzB,EAAA,GAAAC,EAAyDC,EAAAuC,CAAA,GAAA;;KAA3B,OAAM;I,KACpCrC,EAcgBF,EAAAwC,CAAA,GAdhBnC,EACUV,EAaM,QAbA;KACb,OAAO4B,EAAA;KACP,oBAAkB,KAAA;KAClB,mBAAgB,AAAAoB,EAAA,OAAArC,QAAjB,CAAA,GAAyB,CAAA,SAAA,CAAA;;KAEzB,SAAAL,QAKS;MALTE,EAKS,UALTY,GAKS,CAJPb,EAAsFF,EAAA6C,CAAA,GAAA;OAAxE,IAAE,IAAMtB,EAAA;OAAgB,OAAM;;OAAiB,SAAAtB,QAAW,CAARM,EAAAC,EAAAe,EAAA,KAAK,GAAA,CAAA,C;;M,eACrErB,EAEcF,EAAAgD,CAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;OACnB,SAAA/C,QAA4C,CAA5CC,EAA4CO,GAAA;QAA/B,MAAK;QAAK,OAAOT,EAAAwB,CAAA,CAAC,CAAA,OAAA;;;;MAGnCd,EAAQgC,EAAA,QAAA,SAAA;MACQ9C,EAAAA,OAAO,WAAvBE,EAAA,GAAAC,EAAwGY,GAAA;;OAAxE,IAAG;OAAS,KAAA;OAAI,OAAM;;OAAgB,SAAAV,QAAuB,CAAvBS,EAAuBgC,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"DialogFrame.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_createCommentVNode","_mergeProps","_createTextVNode","_toDisplayString","EIconButton","_renderSlot","EActions","EActions_default","EIconButton_default","_hoisted_1","_hoisted_2","DialogFrame_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","emit","open","useModel","__props","t","useMessages","target","usePortalTarget","setOpen","value","openBlock","createBlock","unref","DialogRoot","withCtx","createVNode","DialogPortal","createElementVNode","createCommentVNode","DialogOverlay","DialogContent","mergeProps","_ctx","_cache","DialogTitle","createTextVNode","toDisplayString","DialogClose","renderSlot"],"sources":["../../../src/components/Dialog/DialogFrame.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from \"reka-ui\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"./dialog.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    title: string;\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    inline?: boolean;\n    dismissible?: boolean;\n    contentClass?: unknown;\n  }>(),\n  { headingLevel: 2 },\n);\n\nconst emit = defineEmits<{\n  close: [];\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n  actions?(): unknown;\n}>();\n\nconst open = defineModel<boolean>(\"open\");\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nfunction setOpen(value: boolean) {\n  open.value = value;\n  if (!value) emit(\"close\");\n}\n</script>\n\n<template>\n  <DialogRoot :open=\"!!open\" :modal=\"!inline\" @update:open=\"setOpen\">\n    <DialogPortal :to=\"target\" :disabled=\"inline\">\n      <div class=\"e-root\">\n        <DialogOverlay v-if=\"!inline\" class=\"e-dialog-overlay\" />\n        <DialogContent\n          v-bind=\"$attrs\"\n          :class=\"contentClass\"\n          :aria-describedby=\"undefined\"\n          @interact-outside=\"(e) => !dismissible && e.preventDefault()\"\n        >\n          <header class=\"e-dialog-head\">\n            <DialogTitle :as=\"`h${headingLevel}`\" class=\"e-dialog-title\">{{ title }}</DialogTitle>\n            <DialogClose as-child>\n              <EIconButton icon=\"x\" :label=\"t('close')\" />\n            </DialogClose>\n          </header>\n          <slot />\n          <EActions v-if=\"$slots.actions\" as=\"footer\" bar class=\"e-dialog-foot\"><slot name=\"actions\" /></EActions>\n        </DialogContent>\n      </div>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAqBA,IAAMwB,IAAOD,GASPE,IAAOvB,EAAoByB,GAAC,MAAM,GAElCC,IAAIC,EAAY,GAChBC,IAASC,EAAgB;EAE/B,SAASC,EAAQ,GAAgB;GAE/B,AADA,EAAK,QAAQC,GACRA,KAAOT,EAAK,OAAO;EAC1B;E,kBAIErB,EAAA,GAAAC,EAqBaC,EAAAgC,CAAA,GAAA;GArBA,MAAI,CAAA,CAAIZ,EAAA;GAAO,OAAK,CAAGE,EAAA;GAAS,iBAAaK;;GACxD,SAAA1B,QAmBe,CAnBfC,EAmBeF,EAAAmC,CAAA,GAAA;IAnBA,IAAInC,EAAAyB,CAAA;IAAS,UAAUH,EAAA;;IACpC,SAAArB,QAiBM,CAjBNE,EAiBM,OAjBNU,GAiBM,CAhBkBS,EAAA,S,aAAtBxB,EAAA,GAAAC,EAAyDC,EAAAsC,CAAA,GAAA;;KAA3B,OAAM;I,KACpCpC,EAcgBF,EAAAuC,CAAA,GAdhBlC,EACUV,EAaM,QAbA;KACb,OAAO2B,EAAA;KACP,oBAAkB,KAAA;KAClB,mBAAgB,AAAAoB,EAAA,QAAG,MAAC,CAAMpB,EAAA,eAAe,EAAE,eAAc;;KAE1D,SAAArB,QAKS;MALTE,EAKS,UALTW,GAKS,CAJPZ,EAAsFF,EAAA2C,CAAA,GAAA;OAAxE,IAAE,IAAMrB,EAAA;OAAgB,OAAM;;OAAiB,SAAArB,QAAW,CAARK,EAAAC,EAAAe,EAAA,KAAK,GAAA,CAAA,C;;M,eACrEpB,EAEcF,EAAA8C,CAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;OACnB,SAAA7C,QAA4C,CAA5CC,EAA4CM,GAAA;QAA/B,MAAK;QAAK,OAAOR,EAAAuB,CAAA,CAAC,CAAA,OAAA;;;;MAGnCd,EAAQgC,EAAA,QAAA,SAAA;MACQ7C,EAAAA,OAAO,WAAvBE,EAAA,GAAAC,EAAwGW,GAAA;;OAAxE,IAAG;OAAS,KAAA;OAAI,OAAM;;OAAgB,SAAAT,QAAuB,CAAvBQ,EAAuBgC,EAAA,QAAA,SAAA,C"}

package/dist/components/Dialog/EDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"EDialog.js","names":["_sfc_main","EDialog_vue_vue_type_script_setup_true_lang_default","EDialog_default"],"sources":["../../../src/components/Dialog/EDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DialogFrame from \"./DialogFrame.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The question or task, as the dialog's heading and accessible name. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Shows the dialog in the page, without the backdrop or the focus trap. Only for a preview. */\n    inline?: boolean;\n  }>(),\n  { headingLevel: 2 },\n);\n\nconst emit = defineEmits<{\n  /** The person closed it: the Close button, or Escape. `open` is already false. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** The content: a sentence or two, or a short form. */\n  default?(): unknown;\n  /** Buttons for the foot bar, the main action first. Name the danger button for what it does. */\n  actions?(): unknown;\n}>();\n\nconst open = defineModel<boolean>(\"open\");\n</script>\n\n<template>\n  <DialogFrame\n    v-bind=\"$attrs\"\n    v-model:open=\"open\"\n    :title=\"title\"\n    :heading-level=\"headingLevel\"\n    :inline=\"inline\"\n    :content-class=\"['e-dialog', inline && 'e-dialog--inline']\"\n    @close=\"emit('close')\"\n  >\n    <div class=\"e-dialog-body\"><slot /></div>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </DialogFrame>\n</template>\n\n<style>\n@layer e.containers {\n  .e-dialog {\n    position: fixed;\n    inset: 0;\n    width: min(32rem, calc(100vw - 32px));\n    height: fit-content;\n    max-height: calc(100dvh - 32px);\n    margin: auto;\n    border-radius: var(--e-radius-lg);\n    overflow: auto;\n  }\n\n  .e-dialog--inline {\n    position: static;\n    margin: 0;\n    width: 100%;\n    max-width: 32rem;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EDialog.js","names":["_sfc_main","EDialog_vue_vue_type_script_setup_true_lang_default","EDialog_default"],"sources":["../../../src/components/Dialog/EDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DialogFrame from \"./DialogFrame.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The question or task, as the dialog's heading and accessible name; make it a real question. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Also closes when the backdrop is pressed. Leave it off for a form, where a stray press would throw the work away. */\n    dismissible?: boolean;\n    /** Shows the dialog in the page, without the backdrop or the focus trap. Only for a preview. */\n    inline?: boolean;\n  }>(),\n  { headingLevel: 2 },\n);\n\nconst emit = defineEmits<{\n  /** The person closed it: the Close button, Escape, or the backdrop when `dismissible`. `open` is already false. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** The content: a sentence or two, or a short form. */\n  default?(): unknown;\n  /** Buttons for the foot bar, the main action first. Name the danger button for what it does. */\n  actions?(): unknown;\n}>();\n\n/** Whether it is open. Without a binding it keeps its own state. */\nconst open = defineModel<boolean>(\"open\");\n</script>\n\n<template>\n  <DialogFrame\n    v-bind=\"$attrs\"\n    v-model:open=\"open\"\n    :title=\"title\"\n    :heading-level=\"headingLevel\"\n    :inline=\"inline\"\n    :dismissible=\"dismissible\"\n    :content-class=\"['e-dialog', inline && 'e-dialog--inline']\"\n    @close=\"emit('close')\"\n  >\n    <div class=\"e-dialog-body\"><slot /></div>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </DialogFrame>\n</template>\n\n<style>\n@layer e.containers {\n  .e-dialog {\n    position: fixed;\n    inset: 0;\n    width: min(32rem, calc(100vw - var(--e-space-8)));\n    height: fit-content;\n    max-height: calc(100dvh - var(--e-space-8));\n    margin: auto;\n    border-radius: var(--e-radius-lg);\n    overflow: auto;\n  }\n\n  .e-dialog--inline {\n    position: static;\n    margin: 0;\n    width: 100%;\n    max-width: 32rem;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Dialog/EDialog.vue.d.ts

@@ -1,8 +1,10 @@
 type __VLS_Props = {
-    /** The question or task, as the dialog's heading and accessible name. */
+    /** The question or task, as the dialog's heading and accessible name; make it a real question. */
     title: string;
     /** The level of the title's heading element, 1 to 6. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Also closes when the backdrop is pressed. Leave it off for a form, where a stray press would throw the work away. */
+    dismissible?: boolean;
     /** Shows the dialog in the page, without the backdrop or the focus trap. Only for a preview. */
     inline?: boolean;
 };
@@ -13,6 +15,7 @@ type __VLS_Slots = {
     actions?(): unknown;
 };
 type __VLS_ModelProps = {
+    /** Whether it is open. Without a binding it keeps its own state. */
     "open"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/Dialog/EDialog.vue_vue_type_script_setup_true_lang.js

@@ -7,6 +7,7 @@ var d = { class: "e-dialog-body" }, f = /*@__PURE__*/ i({
 	props: /*@__PURE__*/ a({
 		title: {},
 		headingLevel: { default: 2 },
+		dismissible: { type: Boolean },
 		inline: { type: Boolean }
 	}, {
 		open: { type: Boolean },
@@ -21,6 +22,7 @@ var d = { class: "e-dialog-body" }, f = /*@__PURE__*/ i({
 			title: i.title,
 			"heading-level": i.headingLevel,
 			inline: i.inline,
+			dismissible: i.dismissible,
 			"content-class": ["e-dialog", i.inline && "e-dialog--inline"],
 			onClose: l[1] ||= (e) => f("close")
 		}), r({
@@ -35,6 +37,7 @@ var d = { class: "e-dialog-body" }, f = /*@__PURE__*/ i({
 			"title",
 			"heading-level",
 			"inline",
+			"dismissible",
 			"content-class"
 		]));
 	}

package/dist/components/Dialog/EDialog.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EDialog.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createBlock","DialogFrame","_mergeProps","_createSlots","_withCtx","_createElementVNode","_renderSlot","DialogFrame_default","_hoisted_1","EDialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","emit","open","useModel","__props","openBlock","createBlock","mergeProps","_ctx","_cache","$event","createSlots","withCtx","createElementVNode","renderSlot"],"sources":["../../../src/components/Dialog/EDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DialogFrame from \"./DialogFrame.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The question or task, as the dialog's heading and accessible name. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Shows the dialog in the page, without the backdrop or the focus trap. Only for a preview. */\n    inline?: boolean;\n  }>(),\n  { headingLevel: 2 },\n);\n\nconst emit = defineEmits<{\n  /** The person closed it: the Close button, or Escape. `open` is already false. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** The content: a sentence or two, or a short form. */\n  default?(): unknown;\n  /** Buttons for the foot bar, the main action first. Name the danger button for what it does. */\n  actions?(): unknown;\n}>();\n\nconst open = defineModel<boolean>(\"open\");\n</script>\n\n<template>\n  <DialogFrame\n    v-bind=\"$attrs\"\n    v-model:open=\"open\"\n    :title=\"title\"\n    :heading-level=\"headingLevel\"\n    :inline=\"inline\"\n    :content-class=\"['e-dialog', inline && 'e-dialog--inline']\"\n    @close=\"emit('close')\"\n  >\n    <div class=\"e-dialog-body\"><slot /></div>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </DialogFrame>\n</template>\n\n<style>\n@layer e.containers {\n  .e-dialog {\n    position: fixed;\n    inset: 0;\n    width: min(32rem, calc(100vw - 32px));\n    height: fit-content;\n    max-height: calc(100dvh - 32px);\n    margin: auto;\n    border-radius: var(--e-radius-lg);\n    overflow: auto;\n  }\n\n  .e-dialog--inline {\n    position: static;\n    margin: 0;\n    width: 100%;\n    max-width: 32rem;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAiBA,IAAMiB,IAAOD,GAYPE,IAAOhB,EAAoBkB,GAAC,MAAM;E,kBAItCjB,EAAA,GAAAC,EAWcC,GAXdC,EACUN,EAUI,QAVE;GACN,MAAMkB,EAAA;GAAA,iBAAA,AAAAO,EAAA,QAAA,MAAA,EAAI,QAAAC;GACjB,OAAON,EAAA;GACP,iBAAeA,EAAA;GACf,QAAQA,EAAA;GACR,iBAAa,CAAA,YAAeA,EAAA,UAAM,kBAAA;GAClC,SAAK,AAAAK,EAAA,QAAA,MAAER,EAAI,OAAA;;GAEZ,SAAAT,QAAyC,CAAzCC,EAAyC,OAAzCG,GAAyC,CAAdF,EAAQc,EAAA,QAAA,SAAA,C;;E,IACnBvB,EAAAA,OAAO,U;GAAU,MAAA;GAAQ,IAAAO,QAAuB,CAAvBE,EAAuBc,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EDialog.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createBlock","DialogFrame","_mergeProps","_createSlots","_withCtx","_createElementVNode","_renderSlot","DialogFrame_default","_hoisted_1","EDialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","emit","open","useModel","__props","openBlock","createBlock","mergeProps","_ctx","_cache","$event","createSlots","withCtx","createElementVNode","renderSlot"],"sources":["../../../src/components/Dialog/EDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DialogFrame from \"./DialogFrame.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The question or task, as the dialog's heading and accessible name; make it a real question. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Also closes when the backdrop is pressed. Leave it off for a form, where a stray press would throw the work away. */\n    dismissible?: boolean;\n    /** Shows the dialog in the page, without the backdrop or the focus trap. Only for a preview. */\n    inline?: boolean;\n  }>(),\n  { headingLevel: 2 },\n);\n\nconst emit = defineEmits<{\n  /** The person closed it: the Close button, Escape, or the backdrop when `dismissible`. `open` is already false. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** The content: a sentence or two, or a short form. */\n  default?(): unknown;\n  /** Buttons for the foot bar, the main action first. Name the danger button for what it does. */\n  actions?(): unknown;\n}>();\n\n/** Whether it is open. Without a binding it keeps its own state. */\nconst open = defineModel<boolean>(\"open\");\n</script>\n\n<template>\n  <DialogFrame\n    v-bind=\"$attrs\"\n    v-model:open=\"open\"\n    :title=\"title\"\n    :heading-level=\"headingLevel\"\n    :inline=\"inline\"\n    :dismissible=\"dismissible\"\n    :content-class=\"['e-dialog', inline && 'e-dialog--inline']\"\n    @close=\"emit('close')\"\n  >\n    <div class=\"e-dialog-body\"><slot /></div>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </DialogFrame>\n</template>\n\n<style>\n@layer e.containers {\n  .e-dialog {\n    position: fixed;\n    inset: 0;\n    width: min(32rem, calc(100vw - var(--e-space-8)));\n    height: fit-content;\n    max-height: calc(100dvh - var(--e-space-8));\n    margin: auto;\n    border-radius: var(--e-radius-lg);\n    overflow: auto;\n  }\n\n  .e-dialog--inline {\n    position: static;\n    margin: 0;\n    width: 100%;\n    max-width: 32rem;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAmBA,IAAMiB,IAAOD,GAaPE,IAAOhB,EAAoBkB,GAAC,MAAM;E,kBAItCjB,EAAA,GAAAC,EAYcC,GAZdC,EACUN,EAWI,QAXE;GACN,MAAMkB,EAAA;GAAA,iBAAA,AAAAO,EAAA,QAAA,MAAA,EAAI,QAAAC;GACjB,OAAON,EAAA;GACP,iBAAeA,EAAA;GACf,QAAQA,EAAA;GACR,aAAaA,EAAA;GACb,iBAAa,CAAA,YAAeA,EAAA,UAAM,kBAAA;GAClC,SAAK,AAAAK,EAAA,QAAA,MAAER,EAAI,OAAA;;GAEZ,SAAAT,QAAyC,CAAzCC,EAAyC,OAAzCG,GAAyC,CAAdF,EAAQc,EAAA,QAAA,SAAA,C;;E,IACnBvB,EAAAA,OAAO,U;GAAU,MAAA;GAAQ,IAAAO,QAAuB,CAAvBE,EAAuBc,EAAA,QAAA,SAAA,C"}

package/dist/components/Disclosure/EDisclosure.js.map

@@ -1 +1 @@
-{"version":3,"file":"EDisclosure.js","names":["_sfc_main","EDisclosure_vue_vue_type_script_setup_true_lang_default","EDisclosure_default"],"sources":["../../../src/components/Disclosure/EDisclosure.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The summary line you press to open and close. */\n    title: string;\n    /** `row` is flush, with a divider above and a mono title. `card` is a roomy row for stacking, as in Accordion. */\n    variant?: \"row\" | \"card\";\n    /** A short note at the right of the summary. Card variant only. */\n    meta?: string;\n    /** Rows that share a group open one at a time (the native `name` of `details`). */\n    group?: string;\n  }>(),\n  { variant: \"row\" },\n);\n\ndefineSlots<{\n  /** What opens and closes. */\n  default?(): unknown;\n}>();\n\nconst open = defineModel<boolean>(\"open\");\n\nfunction onToggle(e: Event) {\n  open.value = (e.target as HTMLDetailsElement).open;\n}\n</script>\n\n<template>\n  <details\n    class=\"e-disclosure\"\n    :class=\"props.variant === 'card' ? 'e-acc' : 'e-details'\"\n    :name=\"group\"\n    :open=\"open || undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary>\n      <template v-if=\"variant === 'card'\">\n        <span class=\"e-acc-title\">{{ title }}</span>\n        <span v-if=\"meta\" class=\"e-acc-meta\">{{ meta }}</span>\n      </template>\n      <template v-else>{{ title }}</template>\n    </summary>\n    <div :class=\"variant === 'card' ? 'e-acc-body' : 'e-details-body'\"><slot /></div>\n  </details>\n</template>\n\n<style>\n@layer e.containers {\n  .e-details > summary {\n    list-style: none;\n    cursor: pointer;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: var(--e-control-height);\n    padding: var(--e-space-3) 0 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-ink);\n  }\n\n  .e-details > summary::after {\n    content: \"\";\n    flex: none;\n    width: 8px;\n    height: 8px;\n    margin-inline-end: 3px;\n    border-inline-end: 2px solid currentcolor;\n    border-bottom: 2px solid currentcolor;\n    transform: translateY(-2px) rotate(45deg);\n    transition: transform var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-details[open] > summary::after {\n    transform: translateY(2px) rotate(-135deg);\n  }\n\n  .e-details > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-details > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-details > summary:hover {\n    color: var(--e-primary);\n  }\n\n  .e-details[open] > summary {\n    min-height: 0;\n    padding-bottom: var(--e-space-3);\n  }\n\n  .e-details-body {\n    padding-bottom: var(--e-space-2);\n  }\n\n  .e-acc {\n    overflow: hidden;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-disclosure.e-acc + .e-disclosure.e-acc {\n    margin-top: var(--e-space-2);\n  }\n\n  .e-accordion .e-acc {\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  .e-accordion .e-disclosure.e-acc + .e-disclosure.e-acc {\n    margin-top: 0;\n  }\n\n  .e-acc[open] > summary {\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-accordion .e-acc[open] > summary {\n    border-bottom: 0;\n  }\n\n  .e-acc > summary {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: 52px;\n    padding: 0 var(--e-space-4);\n    list-style: none;\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-acc > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-acc > summary::after {\n    content: \"\";\n    flex: none;\n    width: 8px;\n    height: 8px;\n    margin-inline-end: 3px;\n    border-inline-end: 2px solid currentcolor;\n    border-bottom: 2px solid currentcolor;\n    transform: translateY(-2px) rotate(45deg);\n  }\n\n  .e-acc[open] > summary::after {\n    transform: translateY(2px) rotate(-135deg);\n  }\n\n  .e-acc > summary:hover {\n    background: var(--e-surface-tint);\n  }\n\n  .e-acc > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-acc-title {\n    flex: 1;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n  }\n\n  .e-acc-meta {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  .e-acc-body {\n    padding: var(--e-space-2) var(--e-space-4) var(--e-space-4);\n    font: 400 var(--e-text-md) / 1.5 var(--e-font-sans);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-details > summary::after,\n    .e-acc > summary {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EDisclosure.js","names":["_sfc_main","EDisclosure_vue_vue_type_script_setup_true_lang_default","EDisclosure_default"],"sources":["../../../src/components/Disclosure/EDisclosure.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n    /** The summary line you press to open and close. Use the `title` slot for rich content. */\n    title?: string;\n    /** Rows that share a group open one at a time (the native `name` of `details`). */\n    group?: string;\n}>();\n\ndefineSlots<{\n  /** The summary line, in place of the `title` prop. */\n  title?(): unknown;\n  /** What opens and closes. */\n  default?(): unknown;\n}>();\n\n/** Whether it is open. Without a binding it keeps its own state. */\nconst open = defineModel<boolean>(\"open\");\n\nfunction onToggle(e: Event) {\n  open.value = (e.target as HTMLDetailsElement).open;\n}\n</script>\n\n<template>\n  <details\n    class=\"e-disclosure e-details\"\n    :name=\"group\"\n    :open=\"open || undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary><slot name=\"title\">{{ title }}</slot></summary>\n    <div class=\"e-details-body\"><slot /></div>\n  </details>\n</template>\n\n<style>\n@layer e.containers {\n  .e-details > summary {\n    list-style: none;\n    cursor: pointer;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: var(--e-control-height);\n    padding: var(--e-space-3) 0 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-ink);\n  }\n\n  .e-details > summary::after {\n    content: \"\";\n    flex: none;\n    width: 8px;\n    height: 8px;\n    margin-inline-end: 3px;\n    border-inline-end: var(--e-stroke-card) solid currentcolor;\n    border-bottom: var(--e-stroke-card) solid currentcolor;\n    transform: translateY(-2px) rotate(45deg);\n    transition: transform var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-details[open] > summary::after {\n    transform: translateY(2px) rotate(-135deg);\n  }\n\n  .e-details > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-details > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-details > summary:hover {\n    color: var(--e-primary);\n  }\n\n  .e-details[open] > summary {\n    min-height: 0;\n    padding-bottom: var(--e-space-3);\n  }\n\n  .e-details-body {\n    padding-bottom: var(--e-space-2);\n  }\n\n  @media (forced-colors: active) {\n    .e-details > summary {\n      border-top-color: CanvasText;\n      color: CanvasText;\n    }\n\n    .e-details > summary:hover {\n      color: Highlight;\n    }\n\n    .e-details > summary:focus-visible {\n      outline-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-details > summary::after {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Disclosure/EDisclosure.vue.d.ts

@@ -1,18 +1,17 @@
 type __VLS_Props = {
-    /** The summary line you press to open and close. */
-    title: string;
-    /** `row` is flush, with a divider above and a mono title. `card` is a roomy row for stacking, as in Accordion. */
-    variant?: "row" | "card";
-    /** A short note at the right of the summary. Card variant only. */
-    meta?: string;
+    /** The summary line you press to open and close. Use the `title` slot for rich content. */
+    title?: string;
     /** Rows that share a group open one at a time (the native `name` of `details`). */
     group?: string;
 };
 type __VLS_Slots = {
+    /** The summary line, in place of the `title` prop. */
+    title?(): unknown;
     /** What opens and closes. */
     default?(): unknown;
 };
 type __VLS_ModelProps = {
+    /** Whether it is open. Without a binding it keeps its own state. */
     "open"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
@@ -20,9 +19,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     "update:open": (value: boolean | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
-}>, {
-    variant: "card" | "row";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, 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;

package/dist/components/Disclosure/EDisclosure.vue_vue_type_script_setup_true_lang.js

@@ -1,35 +1,30 @@
 /* empty css                */
-import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, renderSlot as l, toDisplayString as u, useModel as d } from "vue";
+import { createElementBlock as e, createElementVNode as t, createTextVNode as n, defineComponent as r, mergeModels as i, openBlock as a, renderSlot as o, toDisplayString as s, useModel as c } from "vue";
 //#region src/components/Disclosure/EDisclosure.vue?vue&type=script&setup=true&lang.ts
-var f = ["name", "open"], p = { class: "e-acc-title" }, m = {
-	key: 0,
-	class: "e-acc-meta"
-}, h = /*@__PURE__*/ a({
+var l = ["name", "open"], u = { class: "e-details-body" }, d = /*@__PURE__*/ r({
 	__name: "EDisclosure",
-	props: /*@__PURE__*/ o({
+	props: /*@__PURE__*/ i({
 		title: {},
-		variant: { default: "row" },
-		meta: {},
 		group: {}
 	}, {
 		open: { type: Boolean },
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(a) {
-		let o = a, h = d(a, "open");
-		function g(e) {
-			h.value = e.target.open;
+	setup(r) {
+		let i = c(r, "open");
+		function d(e) {
+			i.value = e.target.open;
 		}
-		return (d, _) => (c(), n("details", {
-			class: s(["e-disclosure", o.variant === "card" ? "e-acc" : "e-details"]),
-			name: a.group,
-			open: h.value || void 0,
-			onToggle: g
-		}, [r("summary", null, [a.variant === "card" ? (c(), n(e, { key: 0 }, [r("span", p, u(a.title), 1), a.meta ? (c(), n("span", m, u(a.meta), 1)) : t("", !0)], 64)) : (c(), n(e, { key: 1 }, [i(u(a.title), 1)], 64))]), r("div", { class: s(a.variant === "card" ? "e-acc-body" : "e-details-body") }, [l(d.$slots, "default")], 2)], 42, f));
+		return (c, f) => (a(), e("details", {
+			class: "e-disclosure e-details",
+			name: r.group,
+			open: i.value || void 0,
+			onToggle: d
+		}, [t("summary", null, [o(c.$slots, "title", {}, () => [n(s(r.title), 1)])]), t("div", u, [o(c.$slots, "default")])], 40, l));
 	}
 });
 //#endregion
-export { h as default };
+export { d as default };
 
 //# sourceMappingURL=EDisclosure.vue_vue_type_script_setup_true_lang.js.map