@eos-ui/vue 0.4.0 → 0.5.0

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

@@ -33,7 +33,7 @@ var y = {
 			n.badge ? (p(), o(r, {
 				key: 1,
 				tone: n.badgeTone,
-				size: "sm"
+				small: ""
 			}, {
 				default: v(() => [u(g(n.badge), 1)]),
 				_: 2
@@ -53,7 +53,7 @@ var y = {
 			i.badge ? (p(), o(r, {
 				key: 0,
 				tone: i.badgeTone,
-				size: "sm"
+				small: ""
 			}, {
 				default: v(() => [u(g(i.badge), 1)]),
 				_: 2

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","_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"}
+{"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\" small>{{ 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\" small>{{ 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,EAAgFM,GAAA;;IAArD,MAAMuC,EAAK;IAAW,OAAA;;IAAM,SAAAtC,QAAgB,CAAbC,EAAAC,EAAAoC,EAAK,KAAK,GAAA,CAAA,C;;;GACpEnC,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,EAAgFM,GAAA;;IAArD,MAAMuC,EAAK;IAAW,OAAA;;IAAM,SAAAtC,QAAgB,CAAbC,EAAAC,EAAAoC,EAAK,KAAK,GAAA,CAAA,C;;;GACpEnC,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/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; 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":""}
+{"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-md);\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_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; 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"}
+{"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-md);\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/Drawer/EDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"EDrawer.js","names":["_sfc_main","EDrawer_vue_vue_type_script_setup_true_lang_default","EDrawer_default"],"sources":["../../../src/components/Drawer/EDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DialogFrame from \"../Dialog/DialogFrame.vue\";\nimport EDrawerBody from \"./EDrawerBody.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The panel's heading and accessible name, such as the statement being read. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The edge it slides in from; `bottom` is a sheet for phones. */\n    side?: \"right\" | \"left\" | \"bottom\";\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 drawer in the page, without the backdrop or the focus trap. Only for a preview. */\n    inline?: boolean;\n  }>(),\n  { headingLevel: 2, side: \"right\" },\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, such as a statement or receipt. It scrolls inside the drawer. */\n  default?(): unknown;\n  /** Buttons for the foot bar, the main action first. */\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-drawer', side !== 'right' && `e-drawer--${side}`, inline && 'e-drawer--inline']\"\n    @close=\"emit('close')\"\n  >\n    <EDrawerBody><slot /></EDrawerBody>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </DialogFrame>\n</template>\n\n<style>\n@layer e.containers {\n  .e-drawer {\n    position: fixed;\n    inset: 0;\n    width: min(28rem, 100vw);\n    height: 100dvh;\n    max-height: none;\n    margin: 0 0 0 auto;\n    border-radius: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .e-drawer--left {\n    margin: 0 auto 0 0;\n  }\n\n  .e-drawer--bottom {\n    inset: auto 0 0;\n    width: 100%;\n    height: auto;\n    max-height: min(32rem, 85dvh);\n    margin: 0;\n    border-radius: var(--e-radius-lg) var(--e-radius-lg) 0 0;\n  }\n\n  .e-drawer[data-state=\"open\"] {\n    animation: e-drawer-in 220ms var(--e-easing-out);\n  }\n\n  .e-drawer[data-state=\"closed\"] {\n    animation: e-drawer-out 220ms var(--e-easing-out) forwards;\n  }\n\n  .e-drawer--left[data-state=\"open\"] {\n    animation-name: e-drawer-in-left;\n  }\n\n  .e-drawer--left[data-state=\"closed\"] {\n    animation-name: e-drawer-out-left;\n  }\n\n  .e-drawer--bottom[data-state=\"open\"] {\n    animation-name: e-drawer-in-bottom;\n  }\n\n  .e-drawer--bottom[data-state=\"closed\"] {\n    animation-name: e-drawer-out-bottom;\n  }\n\n  @keyframes e-drawer-in-bottom {\n    from {\n      transform: translateY(100%);\n    }\n  }\n\n  @keyframes e-drawer-out-bottom {\n    to {\n      transform: translateY(100%);\n    }\n  }\n\n  @keyframes e-drawer-in {\n    from {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes e-drawer-out {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes e-drawer-in-left {\n    from {\n      transform: translateX(-100%);\n    }\n  }\n\n  @keyframes e-drawer-out-left {\n    to {\n      transform: translateX(-100%);\n    }\n  }\n\n  .e-drawer-body {\n    flex: 1;\n    overflow: auto;\n  }\n\n  .e-drawer .e-dialog-foot {\n    margin-top: auto;\n  }\n\n  .e-drawer--inline,\n  .e-drawer--inline[data-state] {\n    animation: none;\n    transition: none;\n    position: static;\n    width: 100%;\n    max-width: 28rem;\n    height: 26rem;\n    margin: 0;\n    transform: none;\n  }\n\n  .e-drawer--inline.e-drawer--bottom {\n    max-width: 28rem;\n    height: auto;\n    max-height: 18rem;\n    border-radius: var(--e-radius-lg);\n  }\n\n  .e-drawer-body: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  @media (prefers-reduced-motion: reduce) {\n    .e-drawer {\n      animation: none;\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EDrawer.js","names":["_sfc_main","EDrawer_vue_vue_type_script_setup_true_lang_default","EDrawer_default"],"sources":["../../../src/components/Drawer/EDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DialogFrame from \"../Dialog/DialogFrame.vue\";\nimport EDrawerBody from \"./EDrawerBody.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The panel's heading and accessible name, such as the statement being read. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The edge it slides in from; `bottom` is a sheet for phones. */\n    side?: \"right\" | \"left\" | \"bottom\";\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 drawer in the page, without the backdrop or the focus trap. Only for a preview. */\n    inline?: boolean;\n  }>(),\n  { headingLevel: 2, side: \"right\" },\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, such as a statement or receipt. It scrolls inside the drawer. */\n  default?(): unknown;\n  /** Buttons for the foot bar, the main action first. */\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-drawer', side !== 'right' && `e-drawer--${side}`, inline && 'e-drawer--inline']\"\n    @close=\"emit('close')\"\n  >\n    <EDrawerBody><slot /></EDrawerBody>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </DialogFrame>\n</template>\n\n<style>\n@layer e.containers {\n  .e-drawer {\n    position: fixed;\n    inset: 0;\n    width: min(28rem, 100vw);\n    height: 100dvh;\n    max-height: none;\n    margin: 0 0 0 auto;\n    border-radius: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .e-drawer--left {\n    margin: 0 auto 0 0;\n  }\n\n  .e-drawer--bottom {\n    inset: auto 0 0;\n    width: 100%;\n    height: auto;\n    max-height: min(32rem, 85dvh);\n    margin: 0;\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n  }\n\n  .e-drawer[data-state=\"open\"] {\n    animation: e-drawer-in 220ms var(--e-easing-out);\n  }\n\n  .e-drawer[data-state=\"closed\"] {\n    animation: e-drawer-out 220ms var(--e-easing-out) forwards;\n  }\n\n  .e-drawer--left[data-state=\"open\"] {\n    animation-name: e-drawer-in-left;\n  }\n\n  .e-drawer--left[data-state=\"closed\"] {\n    animation-name: e-drawer-out-left;\n  }\n\n  .e-drawer--bottom[data-state=\"open\"] {\n    animation-name: e-drawer-in-bottom;\n  }\n\n  .e-drawer--bottom[data-state=\"closed\"] {\n    animation-name: e-drawer-out-bottom;\n  }\n\n  @keyframes e-drawer-in-bottom {\n    from {\n      transform: translateY(100%);\n    }\n  }\n\n  @keyframes e-drawer-out-bottom {\n    to {\n      transform: translateY(100%);\n    }\n  }\n\n  @keyframes e-drawer-in {\n    from {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes e-drawer-out {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes e-drawer-in-left {\n    from {\n      transform: translateX(-100%);\n    }\n  }\n\n  @keyframes e-drawer-out-left {\n    to {\n      transform: translateX(-100%);\n    }\n  }\n\n  .e-drawer-body {\n    flex: 1;\n    overflow: auto;\n  }\n\n  .e-drawer .e-dialog-foot {\n    margin-top: auto;\n  }\n\n  .e-drawer--inline,\n  .e-drawer--inline[data-state] {\n    animation: none;\n    transition: none;\n    position: static;\n    width: 100%;\n    max-width: 28rem;\n    height: 26rem;\n    margin: 0;\n    transform: none;\n  }\n\n  .e-drawer--inline.e-drawer--bottom {\n    max-width: 28rem;\n    height: auto;\n    max-height: 18rem;\n    border-radius: var(--e-radius-md);\n  }\n\n  .e-drawer-body: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  @media (prefers-reduced-motion: reduce) {\n    .e-drawer {\n      animation: none;\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Drawer/EDrawer.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createBlock","DialogFrame","_mergeProps","_createSlots","_withCtx","_createVNode","EDrawerBody","_renderSlot","DialogFrame_default","EDrawerBody_default","EDrawer_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","emit","open","useModel","__props","openBlock","createBlock","mergeProps","_ctx","_cache","$event","createSlots","withCtx","createVNode","renderSlot"],"sources":["../../../src/components/Drawer/EDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DialogFrame from \"../Dialog/DialogFrame.vue\";\nimport EDrawerBody from \"./EDrawerBody.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The panel's heading and accessible name, such as the statement being read. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The edge it slides in from; `bottom` is a sheet for phones. */\n    side?: \"right\" | \"left\" | \"bottom\";\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 drawer in the page, without the backdrop or the focus trap. Only for a preview. */\n    inline?: boolean;\n  }>(),\n  { headingLevel: 2, side: \"right\" },\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, such as a statement or receipt. It scrolls inside the drawer. */\n  default?(): unknown;\n  /** Buttons for the foot bar, the main action first. */\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-drawer', side !== 'right' && `e-drawer--${side}`, inline && 'e-drawer--inline']\"\n    @close=\"emit('close')\"\n  >\n    <EDrawerBody><slot /></EDrawerBody>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </DialogFrame>\n</template>\n\n<style>\n@layer e.containers {\n  .e-drawer {\n    position: fixed;\n    inset: 0;\n    width: min(28rem, 100vw);\n    height: 100dvh;\n    max-height: none;\n    margin: 0 0 0 auto;\n    border-radius: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .e-drawer--left {\n    margin: 0 auto 0 0;\n  }\n\n  .e-drawer--bottom {\n    inset: auto 0 0;\n    width: 100%;\n    height: auto;\n    max-height: min(32rem, 85dvh);\n    margin: 0;\n    border-radius: var(--e-radius-lg) var(--e-radius-lg) 0 0;\n  }\n\n  .e-drawer[data-state=\"open\"] {\n    animation: e-drawer-in 220ms var(--e-easing-out);\n  }\n\n  .e-drawer[data-state=\"closed\"] {\n    animation: e-drawer-out 220ms var(--e-easing-out) forwards;\n  }\n\n  .e-drawer--left[data-state=\"open\"] {\n    animation-name: e-drawer-in-left;\n  }\n\n  .e-drawer--left[data-state=\"closed\"] {\n    animation-name: e-drawer-out-left;\n  }\n\n  .e-drawer--bottom[data-state=\"open\"] {\n    animation-name: e-drawer-in-bottom;\n  }\n\n  .e-drawer--bottom[data-state=\"closed\"] {\n    animation-name: e-drawer-out-bottom;\n  }\n\n  @keyframes e-drawer-in-bottom {\n    from {\n      transform: translateY(100%);\n    }\n  }\n\n  @keyframes e-drawer-out-bottom {\n    to {\n      transform: translateY(100%);\n    }\n  }\n\n  @keyframes e-drawer-in {\n    from {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes e-drawer-out {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes e-drawer-in-left {\n    from {\n      transform: translateX(-100%);\n    }\n  }\n\n  @keyframes e-drawer-out-left {\n    to {\n      transform: translateX(-100%);\n    }\n  }\n\n  .e-drawer-body {\n    flex: 1;\n    overflow: auto;\n  }\n\n  .e-drawer .e-dialog-foot {\n    margin-top: auto;\n  }\n\n  .e-drawer--inline,\n  .e-drawer--inline[data-state] {\n    animation: none;\n    transition: none;\n    position: static;\n    width: 100%;\n    max-width: 28rem;\n    height: 26rem;\n    margin: 0;\n    transform: none;\n  }\n\n  .e-drawer--inline.e-drawer--bottom {\n    max-width: 28rem;\n    height: auto;\n    max-height: 18rem;\n    border-radius: var(--e-radius-lg);\n  }\n\n  .e-drawer-body: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  @media (prefers-reduced-motion: reduce) {\n    .e-drawer {\n      animation: none;\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAsBA,IAAMkB,IAAOD,GAaPE,IAAOjB,EAAoBmB,GAAC,MAAM;E,kBAItClB,EAAA,GAAAC,EAYcC,GAZdC,EACUN,EAWI,QAXE;GACN,MAAMmB,EAAA;GAAA,iBAAA,AAAAO,EAAA,QAAA,MAAA,EAAI,QAAAC;GACjB,OAAON,EAAA;GACP,iBAAeA,EAAA;GACf,QAAQA,EAAA;GACR,aAAaA,EAAA;GACb,iBAAa;IAAA;IAAeA,EAAA,SAAI,WAAA,aAA6BA,EAAA;IAAQA,EAAA,UAAM;GAAA;GAC3E,SAAK,AAAAK,EAAA,QAAA,MAAER,EAAI,OAAA;;GAEZ,SAAAV,QAAmC,CAAnCC,EAAmCC,GAAA,MAAA;IAAtB,SAAAF,QAAQ,CAARG,EAAQc,EAAA,QAAA,SAAA,C;;;;E,IACLxB,EAAAA,OAAO,U;GAAU,MAAA;GAAQ,IAAAO,QAAuB,CAAvBG,EAAuBc,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createBlock","DialogFrame","_mergeProps","_createSlots","_withCtx","_createVNode","EDrawerBody","_renderSlot","DialogFrame_default","EDrawerBody_default","EDrawer_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","emit","open","useModel","__props","openBlock","createBlock","mergeProps","_ctx","_cache","$event","createSlots","withCtx","createVNode","renderSlot"],"sources":["../../../src/components/Drawer/EDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DialogFrame from \"../Dialog/DialogFrame.vue\";\nimport EDrawerBody from \"./EDrawerBody.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The panel's heading and accessible name, such as the statement being read. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The edge it slides in from; `bottom` is a sheet for phones. */\n    side?: \"right\" | \"left\" | \"bottom\";\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 drawer in the page, without the backdrop or the focus trap. Only for a preview. */\n    inline?: boolean;\n  }>(),\n  { headingLevel: 2, side: \"right\" },\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, such as a statement or receipt. It scrolls inside the drawer. */\n  default?(): unknown;\n  /** Buttons for the foot bar, the main action first. */\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-drawer', side !== 'right' && `e-drawer--${side}`, inline && 'e-drawer--inline']\"\n    @close=\"emit('close')\"\n  >\n    <EDrawerBody><slot /></EDrawerBody>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </DialogFrame>\n</template>\n\n<style>\n@layer e.containers {\n  .e-drawer {\n    position: fixed;\n    inset: 0;\n    width: min(28rem, 100vw);\n    height: 100dvh;\n    max-height: none;\n    margin: 0 0 0 auto;\n    border-radius: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .e-drawer--left {\n    margin: 0 auto 0 0;\n  }\n\n  .e-drawer--bottom {\n    inset: auto 0 0;\n    width: 100%;\n    height: auto;\n    max-height: min(32rem, 85dvh);\n    margin: 0;\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n  }\n\n  .e-drawer[data-state=\"open\"] {\n    animation: e-drawer-in 220ms var(--e-easing-out);\n  }\n\n  .e-drawer[data-state=\"closed\"] {\n    animation: e-drawer-out 220ms var(--e-easing-out) forwards;\n  }\n\n  .e-drawer--left[data-state=\"open\"] {\n    animation-name: e-drawer-in-left;\n  }\n\n  .e-drawer--left[data-state=\"closed\"] {\n    animation-name: e-drawer-out-left;\n  }\n\n  .e-drawer--bottom[data-state=\"open\"] {\n    animation-name: e-drawer-in-bottom;\n  }\n\n  .e-drawer--bottom[data-state=\"closed\"] {\n    animation-name: e-drawer-out-bottom;\n  }\n\n  @keyframes e-drawer-in-bottom {\n    from {\n      transform: translateY(100%);\n    }\n  }\n\n  @keyframes e-drawer-out-bottom {\n    to {\n      transform: translateY(100%);\n    }\n  }\n\n  @keyframes e-drawer-in {\n    from {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes e-drawer-out {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes e-drawer-in-left {\n    from {\n      transform: translateX(-100%);\n    }\n  }\n\n  @keyframes e-drawer-out-left {\n    to {\n      transform: translateX(-100%);\n    }\n  }\n\n  .e-drawer-body {\n    flex: 1;\n    overflow: auto;\n  }\n\n  .e-drawer .e-dialog-foot {\n    margin-top: auto;\n  }\n\n  .e-drawer--inline,\n  .e-drawer--inline[data-state] {\n    animation: none;\n    transition: none;\n    position: static;\n    width: 100%;\n    max-width: 28rem;\n    height: 26rem;\n    margin: 0;\n    transform: none;\n  }\n\n  .e-drawer--inline.e-drawer--bottom {\n    max-width: 28rem;\n    height: auto;\n    max-height: 18rem;\n    border-radius: var(--e-radius-md);\n  }\n\n  .e-drawer-body: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  @media (prefers-reduced-motion: reduce) {\n    .e-drawer {\n      animation: none;\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAsBA,IAAMkB,IAAOD,GAaPE,IAAOjB,EAAoBmB,GAAC,MAAM;E,kBAItClB,EAAA,GAAAC,EAYcC,GAZdC,EACUN,EAWI,QAXE;GACN,MAAMmB,EAAA;GAAA,iBAAA,AAAAO,EAAA,QAAA,MAAA,EAAI,QAAAC;GACjB,OAAON,EAAA;GACP,iBAAeA,EAAA;GACf,QAAQA,EAAA;GACR,aAAaA,EAAA;GACb,iBAAa;IAAA;IAAeA,EAAA,SAAI,WAAA,aAA6BA,EAAA;IAAQA,EAAA,UAAM;GAAA;GAC3E,SAAK,AAAAK,EAAA,QAAA,MAAER,EAAI,OAAA;;GAEZ,SAAAV,QAAmC,CAAnCC,EAAmCC,GAAA,MAAA;IAAtB,SAAAF,QAAQ,CAARG,EAAQc,EAAA,QAAA,SAAA,C;;;;E,IACLxB,EAAAA,OAAO,U;GAAU,MAAA;GAAQ,IAAAO,QAAuB,CAAvBG,EAAuBc,EAAA,QAAA,SAAA,C"}

package/dist/components/EmptyState/EEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EEmptyState.js","names":["_sfc_main","EEmptyState_vue_vue_type_script_setup_true_lang_default","EEmptyState_default"],"sources":["../../../src/components/EmptyState/EEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** A glyph in a round badge above the title. */\n    icon?: IconProp;\n    /** What is missing, in the person's words. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6; fit the page outline. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Removes the dashed outline, for use inside a table or panel. */\n    bare?: boolean;\n  }>(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** One or two sentences: why it is empty and what to do. */\n  default?(): unknown;\n  /** The next step, a Button. */\n  action?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-empty\" :class=\"bare && 'e-empty--bare'\">\n    <span v-if=\"icon\" class=\"e-empty-icon\"><EIcon :name=\"icon\" /></span>\n    <component :is=\"`h${headingLevel}`\" class=\"e-empty-title\">{{ title }}</component>\n    <p v-if=\"$slots.default\" class=\"e-empty-text\"><slot /></p>\n    <slot name=\"action\" />\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-empty {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-8) var(--e-space-4);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    text-align: center;\n  }\n\n  .e-empty--bare {\n    border: 0;\n  }\n\n  .e-empty-icon {\n    display: grid;\n    place-items: center;\n    box-sizing: border-box;\n    width: 56px;\n    height: 56px;\n    margin-bottom: var(--e-space-1);\n    border-radius: 50%;\n    background: var(--e-secondary-soft);\n    border: var(--e-stroke-hair) solid var(--e-secondary);\n\n\n  }\n\n  .e-empty-icon .e-icon {\n    width: 26px;\n    height: 26px;\n  }\n\n  .e-empty-title {\n    margin: 0;\n    font: 500 var(--e-text-xl) / 1.25 var(--e-font-sans);\n  }\n\n  .e-empty-text {\n    margin: 0 0 var(--e-space-2);\n    max-width: 38ch;\n    font: 400 var(--e-text-md) / 1.5 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (forced-colors: active) {\n    .e-empty-icon {\n      border-color: CanvasText;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EEmptyState.js","names":["_sfc_main","EEmptyState_vue_vue_type_script_setup_true_lang_default","EEmptyState_default"],"sources":["../../../src/components/EmptyState/EEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** A glyph in the primary colour above the title. */\n    icon?: IconProp;\n    /** What is missing, in the person's words. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6; fit the page outline. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Removes the dashed outline, for use inside a table or panel. */\n    bare?: boolean;\n  }>(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** One or two sentences: why it is empty and what to do. */\n  default?(): unknown;\n  /** The next step, a Button. */\n  action?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-empty\" :class=\"bare && 'e-empty--bare'\">\n    <span v-if=\"icon\" class=\"e-empty-icon\"><EIcon :name=\"icon\" /></span>\n    <component :is=\"`h${headingLevel}`\" class=\"e-empty-title\">{{ title }}</component>\n    <p v-if=\"$slots.default\" class=\"e-empty-text\"><slot /></p>\n    <slot name=\"action\" />\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-empty {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-8) var(--e-space-4);\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-md);\n    text-align: center;\n  }\n\n  .e-empty--bare {\n    outline: 0;\n  }\n\n  .e-empty-icon {\n    display: grid;\n    place-items: center;\n    margin-bottom: var(--e-space-1);\n    color: var(--e-primary);\n  }\n\n  .e-empty-icon .e-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .e-empty-title {\n    margin: 0;\n    font: 500 var(--e-text-xl) / 1.25 var(--e-font-sans);\n  }\n\n  .e-empty-text {\n    margin: 0 0 var(--e-space-2);\n    max-width: 38ch;\n    font: 400 var(--e-text-md) / 1.5 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (forced-colors: active) {\n    .e-empty {\n      outline-color: CanvasText;\n    }\n\n    .e-empty-icon {\n      color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/EmptyState/EEmptyState.vue.d.ts

@@ -1,6 +1,6 @@
 import { IconProp } from '../../icons/types.js';
 type __VLS_Props = {
-    /** A glyph in a round badge above the title. */
+    /** A glyph in the primary colour above the title. */
     icon?: IconProp;
     /** What is missing, in the person's words. */
     title: string;

package/dist/components/EmptyState/EEmptyState.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EEmptyState.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createVNode","EIcon","_createCommentVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_renderSlot","EIcon_default","_hoisted_1","_hoisted_2","EEmptyState_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","createVNode","createCommentVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","_ctx","renderSlot"],"sources":["../../../src/components/EmptyState/EEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** A glyph in a round badge above the title. */\n    icon?: IconProp;\n    /** What is missing, in the person's words. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6; fit the page outline. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Removes the dashed outline, for use inside a table or panel. */\n    bare?: boolean;\n  }>(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** One or two sentences: why it is empty and what to do. */\n  default?(): unknown;\n  /** The next step, a Button. */\n  action?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-empty\" :class=\"bare && 'e-empty--bare'\">\n    <span v-if=\"icon\" class=\"e-empty-icon\"><EIcon :name=\"icon\" /></span>\n    <component :is=\"`h${headingLevel}`\" class=\"e-empty-title\">{{ title }}</component>\n    <p v-if=\"$slots.default\" class=\"e-empty-text\"><slot /></p>\n    <slot name=\"action\" />\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-empty {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-8) var(--e-space-4);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    text-align: center;\n  }\n\n  .e-empty--bare {\n    border: 0;\n  }\n\n  .e-empty-icon {\n    display: grid;\n    place-items: center;\n    box-sizing: border-box;\n    width: 56px;\n    height: 56px;\n    margin-bottom: var(--e-space-1);\n    border-radius: 50%;\n    background: var(--e-secondary-soft);\n    border: var(--e-stroke-hair) solid var(--e-secondary);\n\n\n  }\n\n  .e-empty-icon .e-icon {\n    width: 26px;\n    height: 26px;\n  }\n\n  .e-empty-title {\n    margin: 0;\n    font: 500 var(--e-text-xl) / 1.25 var(--e-font-sans);\n  }\n\n  .e-empty-text {\n    margin: 0 0 var(--e-space-2);\n    max-width: 38ch;\n    font: 400 var(--e-text-md) / 1.5 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (forced-colors: active) {\n    .e-empty-icon {\n      border-color: CanvasText;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;E,kBA4BEC,EAAA,GAAAC,EAKM,OAAA,EALD,OAAKC,EAAA,CAAC,WAAkBiB,EAAA,QAAI,eAAA,CAAA,E;GACnBA,EAAA,QAAZnB,EAAA,GAAAC,EAAoE,QAApEY,GAAoE,CAA7BV,EAAsBC,GAAA,EAAd,MAAMe,EAAA,KAAI,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C;IACzDnB,EAAA,GAAAM,EAAiFC,EAAA,IAA7DY,EAAA,cAAY,GAAA,EAAI,OAAM,gBAAe,GAAA;IAAC,SAAAX,QAAW,CAARC,EAAAC,EAAAS,EAAA,KAAK,GAAA,CAAA,C;;;GACzDpB,EAAAA,OAAO,WAAhBC,EAAA,GAAAC,EAA0D,KAA1Da,GAA0D,CAAZH,EAAQgB,EAAA,QAAA,SAAA,C;GACtDhB,EAAsBgB,EAAA,QAAA,QAAA"}
+{"version":3,"file":"EEmptyState.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createVNode","EIcon","_createCommentVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_renderSlot","EIcon_default","_hoisted_1","_hoisted_2","EEmptyState_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","createVNode","createCommentVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","_ctx","renderSlot"],"sources":["../../../src/components/EmptyState/EEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** A glyph in the primary colour above the title. */\n    icon?: IconProp;\n    /** What is missing, in the person's words. */\n    title: string;\n    /** The level of the title's heading element, 1 to 6; fit the page outline. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Removes the dashed outline, for use inside a table or panel. */\n    bare?: boolean;\n  }>(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** One or two sentences: why it is empty and what to do. */\n  default?(): unknown;\n  /** The next step, a Button. */\n  action?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-empty\" :class=\"bare && 'e-empty--bare'\">\n    <span v-if=\"icon\" class=\"e-empty-icon\"><EIcon :name=\"icon\" /></span>\n    <component :is=\"`h${headingLevel}`\" class=\"e-empty-title\">{{ title }}</component>\n    <p v-if=\"$slots.default\" class=\"e-empty-text\"><slot /></p>\n    <slot name=\"action\" />\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-empty {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-8) var(--e-space-4);\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-md);\n    text-align: center;\n  }\n\n  .e-empty--bare {\n    outline: 0;\n  }\n\n  .e-empty-icon {\n    display: grid;\n    place-items: center;\n    margin-bottom: var(--e-space-1);\n    color: var(--e-primary);\n  }\n\n  .e-empty-icon .e-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .e-empty-title {\n    margin: 0;\n    font: 500 var(--e-text-xl) / 1.25 var(--e-font-sans);\n  }\n\n  .e-empty-text {\n    margin: 0 0 var(--e-space-2);\n    max-width: 38ch;\n    font: 400 var(--e-text-md) / 1.5 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (forced-colors: active) {\n    .e-empty {\n      outline-color: CanvasText;\n    }\n\n    .e-empty-icon {\n      color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;E,kBA4BEC,EAAA,GAAAC,EAKM,OAAA,EALD,OAAKC,EAAA,CAAC,WAAkBiB,EAAA,QAAI,eAAA,CAAA,E;GACnBA,EAAA,QAAZnB,EAAA,GAAAC,EAAoE,QAApEY,GAAoE,CAA7BV,EAAsBC,GAAA,EAAd,MAAMe,EAAA,KAAI,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C;IACzDnB,EAAA,GAAAM,EAAiFC,EAAA,IAA7DY,EAAA,cAAY,GAAA,EAAI,OAAM,gBAAe,GAAA;IAAC,SAAAX,QAAW,CAARC,EAAAC,EAAAS,EAAA,KAAK,GAAA,CAAA,C;;;GACzDpB,EAAAA,OAAO,WAAhBC,EAAA,GAAAC,EAA0D,KAA1Da,GAA0D,CAAZH,EAAQgB,EAAA,QAAA,SAAA,C;GACtDhB,EAAsBgB,EAAA,QAAA,QAAA"}

package/dist/components/Grid/EGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"EGrid.js","names":["_sfc_main","EGrid_vue_vue_type_script_setup_true_lang_default","EGrid_default"],"sources":["../../../src/components/Grid/EGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default; for example `ul` with `li` children. */\n    as?: string;\n    /** The narrowest a column may be, as a CSS length. One column below that. */\n    min?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Pack cards of uneven height into columns with no gaps under the short ones. Items flow top to bottom within each column. */\n    masonry?: boolean;\n  }>(),\n  { as: \"div\", min: \"16rem\", gap: 4, masonry: false },\n);\n\ndefineSlots<{\n  /** The cards. Items stretch to the tallest in their row, unless `masonry` is set. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" :class=\"['e-grid-layout', { 'e-grid-layout--masonry': masonry }]\" :style=\"{ '--e-gap': gapValue, '--e-min': min }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-grid-layout {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--e-min, 16rem)), 1fr));\n    gap: var(--e-gap, var(--e-space-4));\n    align-items: stretch;\n  }\n\n  .e-grid-layout > * {\n    min-width: 0;\n  }\n\n  .e-grid-layout--masonry {\n    display: block;\n    column-width: var(--e-min, 16rem);\n    column-gap: var(--e-gap, var(--e-space-4));\n  }\n\n  /* Each item carries the row gap below it; a column drops the margin after its last item. */\n  .e-grid-layout--masonry > * {\n    break-inside: avoid;\n    margin-block-end: var(--e-gap, var(--e-space-4));\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EGrid.js","names":["_sfc_main","EGrid_vue_vue_type_script_setup_true_lang_default","EGrid_default"],"sources":["../../../src/components/Grid/EGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, for example `ul` with `li` children. */\n    as?: string;\n    /** The narrowest a column may be, as a CSS length. One column below that. */\n    min?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Pack cards of uneven height into columns with no gaps under the short ones. Items flow top to bottom within each column. */\n    masonry?: boolean;\n  }>(),\n  { as: \"div\", min: \"16rem\", gap: 4, masonry: false },\n);\n\ndefineSlots<{\n  /** The cards. Items stretch to the tallest in their row, unless `masonry` is set. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" :class=\"['e-grid-layout', { 'e-grid-layout--masonry': masonry }]\" :style=\"{ '--e-gap': gapValue, '--e-min': min }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-grid-layout {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--e-min, 16rem)), 1fr));\n    gap: var(--e-gap, var(--e-space-4));\n    align-items: stretch;\n  }\n\n  .e-grid-layout > * {\n    min-width: 0;\n  }\n\n  .e-grid-layout--masonry {\n    display: block;\n    column-width: var(--e-min, 16rem);\n    column-gap: var(--e-gap, var(--e-space-4));\n  }\n\n  /* Each item carries the row gap below it; a column drops the margin after its last item. */\n  .e-grid-layout--masonry > * {\n    break-inside: avoid;\n    margin-block-end: var(--e-gap, var(--e-space-4));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Grid/EGrid.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    /** The element to render, `div` by default; for example `ul` with `li` children. */
+    /** The element to render, for example `ul` with `li` children. */
     as?: string;
     /** The narrowest a column may be, as a CSS length. One column below that. */
     min?: string;

package/dist/components/Grid/EGrid.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EGrid.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_renderSlot","EGrid_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","normalizeClass","normalizeStyle","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Grid/EGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default; for example `ul` with `li` children. */\n    as?: string;\n    /** The narrowest a column may be, as a CSS length. One column below that. */\n    min?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Pack cards of uneven height into columns with no gaps under the short ones. Items flow top to bottom within each column. */\n    masonry?: boolean;\n  }>(),\n  { as: \"div\", min: \"16rem\", gap: 4, masonry: false },\n);\n\ndefineSlots<{\n  /** The cards. Items stretch to the tallest in their row, unless `masonry` is set. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" :class=\"['e-grid-layout', { 'e-grid-layout--masonry': masonry }]\" :style=\"{ '--e-gap': gapValue, '--e-min': min }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-grid-layout {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--e-min, 16rem)), 1fr));\n    gap: var(--e-gap, var(--e-space-4));\n    align-items: stretch;\n  }\n\n  .e-grid-layout > * {\n    min-width: 0;\n  }\n\n  .e-grid-layout--masonry {\n    display: block;\n    column-width: var(--e-min, 16rem);\n    column-gap: var(--e-gap, var(--e-space-4));\n  }\n\n  /* Each item carries the row gap below it; a column drops the margin after its last item. */\n  .e-grid-layout--masonry > * {\n    break-inside: avoid;\n    margin-block-end: var(--e-gap, var(--e-space-4));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAIA,IAAMQ,IAAQC,GAmBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGR,EAAA,GAAAC,EAEYC,EAFIO,EAAA,EAAE,GAAA;GAAG,OAAKN,EAAA,CAAA,iBAAA,EAAA,0BAAgDM,EAAA,QAAO,CAAA,CAAA;GAAM,OAAKL,EAAA;IAAA,WAAeM,EAAA;IAAQ,WAAaD,EAAA;GAAG,CAAA;;GACjI,SAAAJ,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EGrid.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_renderSlot","EGrid_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","normalizeClass","normalizeStyle","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Grid/EGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, for example `ul` with `li` children. */\n    as?: string;\n    /** The narrowest a column may be, as a CSS length. One column below that. */\n    min?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Pack cards of uneven height into columns with no gaps under the short ones. Items flow top to bottom within each column. */\n    masonry?: boolean;\n  }>(),\n  { as: \"div\", min: \"16rem\", gap: 4, masonry: false },\n);\n\ndefineSlots<{\n  /** The cards. Items stretch to the tallest in their row, unless `masonry` is set. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" :class=\"['e-grid-layout', { 'e-grid-layout--masonry': masonry }]\" :style=\"{ '--e-gap': gapValue, '--e-min': min }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-grid-layout {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--e-min, 16rem)), 1fr));\n    gap: var(--e-gap, var(--e-space-4));\n    align-items: stretch;\n  }\n\n  .e-grid-layout > * {\n    min-width: 0;\n  }\n\n  .e-grid-layout--masonry {\n    display: block;\n    column-width: var(--e-min, 16rem);\n    column-gap: var(--e-gap, var(--e-space-4));\n  }\n\n  /* Each item carries the row gap below it; a column drops the margin after its last item. */\n  .e-grid-layout--masonry > * {\n    break-inside: avoid;\n    margin-block-end: var(--e-gap, var(--e-space-4));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAIA,IAAMQ,IAAQC,GAmBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGR,EAAA,GAAAC,EAEYC,EAFIO,EAAA,EAAE,GAAA;GAAG,OAAKN,EAAA,CAAA,iBAAA,EAAA,0BAAgDM,EAAA,QAAO,CAAA,CAAA;GAAM,OAAKL,EAAA;IAAA,WAAeM,EAAA;IAAQ,WAAaD,EAAA;GAAG,CAAA;;GACjI,SAAAJ,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}

package/dist/components/IconButton/EIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"EIconButton.js","names":["_sfc_main","EIconButton_vue_vue_type_script_setup_true_lang_default","EIconButton_default"],"sources":["../../../src/components/IconButton/EIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The glyph. */\n  icon: IconProp;\n  /** The accessible name. Write it as an action, such as \"Download receipt\". */\n  label: string;\n  /** Disables the button. */\n  disabled?: boolean;\n}>();\n</script>\n\n<template>\n  <button type=\"button\" class=\"e-icon-btn\" :aria-label=\"label\" :disabled=\"disabled\">\n    <EIcon :name=\"icon\" />\n  </button>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-icon-btn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    height: var(--e-control-height);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-icon-btn:not(:disabled):hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-wash-ring);\n  }\n\n  .e-icon-btn:not(:disabled):active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n  }\n\n  .e-icon-btn:disabled {\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-icon-btn {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-icon-btn {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-icon-btn:not(:disabled):hover,\n    .e-icon-btn:not(:disabled):active {\n      outline: var(--e-stroke-edge) solid Highlight;\n      outline-offset: calc(-1 * var(--e-stroke-edge));\n    }\n\n    .e-icon-btn:disabled {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EIconButton.js","names":["_sfc_main","EIconButton_vue_vue_type_script_setup_true_lang_default","EIconButton_default"],"sources":["../../../src/components/IconButton/EIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The glyph. */\n  icon: IconProp;\n  /** The accessible name. Write it as an action, such as \"Download receipt\". */\n  label: string;\n  /** Disables the button. */\n  disabled?: boolean;\n}>();\n</script>\n\n<template>\n  <button type=\"button\" class=\"e-icon-btn\" :aria-label=\"label\" :disabled=\"disabled\">\n    <EIcon :name=\"icon\" />\n  </button>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-icon-btn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    height: var(--e-control-height);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-icon-btn:not(:disabled):hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-wash-ring);\n  }\n\n  .e-icon-btn:not(:disabled):active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n  }\n\n  .e-icon-btn:disabled {\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-icon-btn {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-icon-btn {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-icon-btn:not(:disabled):hover,\n    .e-icon-btn:not(:disabled):active {\n      outline: var(--e-stroke-edge) solid Highlight;\n      outline-offset: calc(-1 * var(--e-stroke-edge));\n    }\n\n    .e-icon-btn:disabled {\n      outline-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/IconButton/EIconButton.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EIconButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","EIcon","EIcon_default","_hoisted_1","EIconButton_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","__props","createVNode"],"sources":["../../../src/components/IconButton/EIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The glyph. */\n  icon: IconProp;\n  /** The accessible name. Write it as an action, such as \"Download receipt\". */\n  label: string;\n  /** Disables the button. */\n  disabled?: boolean;\n}>();\n</script>\n\n<template>\n  <button type=\"button\" class=\"e-icon-btn\" :aria-label=\"label\" :disabled=\"disabled\">\n    <EIcon :name=\"icon\" />\n  </button>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-icon-btn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    height: var(--e-control-height);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-icon-btn:not(:disabled):hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-wash-ring);\n  }\n\n  .e-icon-btn:not(:disabled):active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n  }\n\n  .e-icon-btn:disabled {\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-icon-btn {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-icon-btn {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-icon-btn:not(:disabled):hover,\n    .e-icon-btn:not(:disabled):active {\n      outline: var(--e-stroke-edge) solid Highlight;\n      outline-offset: calc(-1 * var(--e-stroke-edge));\n    }\n\n    .e-icon-btn:disabled {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;E,kBAgBEA,EAAA,GAAAC,EAES,UAAA;GAFD,MAAK;GAAS,OAAM;GAAc,cAAYQ,EAAA;GAAQ,UAAUA,EAAA;E,IACtEP,EAAsBC,GAAA,EAAd,MAAMM,EAAA,KAAI,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C"}
+{"version":3,"file":"EIconButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","EIcon","EIcon_default","_hoisted_1","EIconButton_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","__props","createVNode"],"sources":["../../../src/components/IconButton/EIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The glyph. */\n  icon: IconProp;\n  /** The accessible name. Write it as an action, such as \"Download receipt\". */\n  label: string;\n  /** Disables the button. */\n  disabled?: boolean;\n}>();\n</script>\n\n<template>\n  <button type=\"button\" class=\"e-icon-btn\" :aria-label=\"label\" :disabled=\"disabled\">\n    <EIcon :name=\"icon\" />\n  </button>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-icon-btn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    height: var(--e-control-height);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-icon-btn:not(:disabled):hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-wash-ring);\n  }\n\n  .e-icon-btn:not(:disabled):active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n  }\n\n  .e-icon-btn:disabled {\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-icon-btn {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-icon-btn {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-icon-btn:not(:disabled):hover,\n    .e-icon-btn:not(:disabled):active {\n      outline: var(--e-stroke-edge) solid Highlight;\n      outline-offset: calc(-1 * var(--e-stroke-edge));\n    }\n\n    .e-icon-btn:disabled {\n      outline-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;E,kBAgBEA,EAAA,GAAAC,EAES,UAAA;GAFD,MAAK;GAAS,OAAM;GAAc,cAAYQ,EAAA;GAAQ,UAAUA,EAAA;E,IACtEP,EAAsBC,GAAA,EAAd,MAAMM,EAAA,KAAI,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C"}

package/dist/components/Inline/EInline.js.map

@@ -1 +1 @@
-{"version":3,"file":"EInline.js","names":["_sfc_main","EInline_vue_vue_type_script_setup_true_lang_default","EInline_default"],"sources":["../../../src/components/Inline/EInline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default; for example `ul`. */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Main-axis placement: `between` or `end`; start by default. */\n    justify?: \"between\" | \"end\";\n    /** Cross-axis alignment: `start` or `baseline`; centred by default. */\n    align?: \"start\" | \"baseline\";\n    /** Keeps the children on one line instead of wrapping. */\n    nowrap?: boolean;\n  }>(),\n  { as: \"div\", gap: 2 },\n);\n\ndefineSlots<{\n  /** The children, in a row that wraps when it runs out of room. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-inline\"\n    :class=\"[nowrap && 'e-inline--nowrap', justify && `e-inline--${justify}`, align && `e-inline--a-${align}`]\"\n    :style=\"{ '--e-gap': gapValue }\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-inline {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-gap, var(--e-space-2));\n    min-width: 0;\n  }\n\n  .e-inline--nowrap {\n    flex-wrap: nowrap;\n  }\n\n  .e-inline--between {\n    justify-content: space-between;\n  }\n\n  .e-inline--end {\n    justify-content: flex-end;\n  }\n\n  .e-inline--a-start {\n    align-items: flex-start;\n  }\n\n  .e-inline--a-baseline {\n    align-items: baseline;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EInline.js","names":["_sfc_main","EInline_vue_vue_type_script_setup_true_lang_default","EInline_default"],"sources":["../../../src/components/Inline/EInline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, for example `ul`. */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Main-axis placement: `between` or `end`; start by default. */\n    justify?: \"between\" | \"end\";\n    /** Cross-axis alignment: `start` or `baseline`; centred by default. */\n    align?: \"start\" | \"baseline\";\n    /** Keeps the children on one line instead of wrapping. */\n    nowrap?: boolean;\n  }>(),\n  { as: \"div\", gap: 2 },\n);\n\ndefineSlots<{\n  /** The children, in a row that wraps when it runs out of room. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-inline\"\n    :class=\"[nowrap && 'e-inline--nowrap', justify && `e-inline--${justify}`, align && `e-inline--a-${align}`]\"\n    :style=\"{ '--e-gap': gapValue }\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-inline {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-gap, var(--e-space-2));\n    min-width: 0;\n  }\n\n  .e-inline--nowrap {\n    flex-wrap: nowrap;\n  }\n\n  .e-inline--between {\n    justify-content: space-between;\n  }\n\n  .e-inline--end {\n    justify-content: flex-end;\n  }\n\n  .e-inline--a-start {\n    align-items: flex-start;\n  }\n\n  .e-inline--a-baseline {\n    align-items: baseline;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Inline/EInline.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    /** The element to render, `div` by default; for example `ul`. */
+    /** The element to render, for example `ul`. */
     as?: string;
     /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */
     gap?: number | string;

package/dist/components/Inline/EInline.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EInline.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_renderSlot","EInline_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","normalizeClass","normalizeStyle","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Inline/EInline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default; for example `ul`. */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Main-axis placement: `between` or `end`; start by default. */\n    justify?: \"between\" | \"end\";\n    /** Cross-axis alignment: `start` or `baseline`; centred by default. */\n    align?: \"start\" | \"baseline\";\n    /** Keeps the children on one line instead of wrapping. */\n    nowrap?: boolean;\n  }>(),\n  { as: \"div\", gap: 2 },\n);\n\ndefineSlots<{\n  /** The children, in a row that wraps when it runs out of room. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-inline\"\n    :class=\"[nowrap && 'e-inline--nowrap', justify && `e-inline--${justify}`, align && `e-inline--a-${align}`]\"\n    :style=\"{ '--e-gap': gapValue }\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-inline {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-gap, var(--e-space-2));\n    min-width: 0;\n  }\n\n  .e-inline--nowrap {\n    flex-wrap: nowrap;\n  }\n\n  .e-inline--between {\n    justify-content: space-between;\n  }\n\n  .e-inline--end {\n    justify-content: flex-end;\n  }\n\n  .e-inline--a-start {\n    align-items: flex-start;\n  }\n\n  .e-inline--a-baseline {\n    align-items: baseline;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAIA,IAAMQ,IAAQC,GAqBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGR,EAAA,GAAAC,EAOYC,EANLO,EAAA,EAAE,GAAA;GACP,OAAKN,EAAA,CAAC,YAAU;IACPM,EAAA,UAAM;IAAwBA,EAAA,WAAO,aAAiBA,EAAA;IAAWA,EAAA,SAAK,eAAmBA,EAAA;GAAK,CAAA,CAAA;GACtG,OAAKL,EAAA,EAAA,WAAeM,EAAA,MAAQ,CAAA;;GAE7B,SAAAL,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EInline.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_renderSlot","EInline_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","normalizeClass","normalizeStyle","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Inline/EInline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, for example `ul`. */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Main-axis placement: `between` or `end`; start by default. */\n    justify?: \"between\" | \"end\";\n    /** Cross-axis alignment: `start` or `baseline`; centred by default. */\n    align?: \"start\" | \"baseline\";\n    /** Keeps the children on one line instead of wrapping. */\n    nowrap?: boolean;\n  }>(),\n  { as: \"div\", gap: 2 },\n);\n\ndefineSlots<{\n  /** The children, in a row that wraps when it runs out of room. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-inline\"\n    :class=\"[nowrap && 'e-inline--nowrap', justify && `e-inline--${justify}`, align && `e-inline--a-${align}`]\"\n    :style=\"{ '--e-gap': gapValue }\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-inline {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-gap, var(--e-space-2));\n    min-width: 0;\n  }\n\n  .e-inline--nowrap {\n    flex-wrap: nowrap;\n  }\n\n  .e-inline--between {\n    justify-content: space-between;\n  }\n\n  .e-inline--end {\n    justify-content: flex-end;\n  }\n\n  .e-inline--a-start {\n    align-items: flex-start;\n  }\n\n  .e-inline--a-baseline {\n    align-items: baseline;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAIA,IAAMQ,IAAQC,GAqBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGR,EAAA,GAAAC,EAOYC,EANLO,EAAA,EAAE,GAAA;GACP,OAAKN,EAAA,CAAC,YAAU;IACPM,EAAA,UAAM;IAAwBA,EAAA,WAAO,aAAiBA,EAAA;IAAWA,EAAA,SAAK,eAAmBA,EAAA;GAAK,CAAA,CAAA;GACtG,OAAKL,EAAA,EAAA,WAAeM,EAAA,MAAQ,CAAA;;GAE7B,SAAAL,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}

package/dist/components/Kbd/EKbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"EKbd.js","names":["_sfc_main","EKbd_vue_vue_type_script_setup_true_lang_default","EKbd_default"],"sources":["../../../src/components/Kbd/EKbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The smaller size, for a hint inside running small text. */\n  small?: boolean;\n}>();\n\ndefineSlots<{\n  /** The key, written as it is on the keycap: \"/\", \"Esc\", \"Ctrl\". */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <kbd class=\"e-kbd\" :class=\"small && 'e-kbd--s'\"><slot /></kbd>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-kbd {\n    display: inline-block;\n    min-width: 1.5em;\n    padding: 0 var(--e-space-1);\n    border: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-surface-tint);\n    color: var(--e-muted);\n    font: 500 var(--e-text-sm) / 1.5 var(--e-font-mono);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  .e-kbd--s {\n    font-size: var(--e-text-xs);\n  }\n\n  @media (forced-colors: active) {\n    .e-kbd {\n      border-color: ButtonText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EKbd.js","names":["_sfc_main","EKbd_vue_vue_type_script_setup_true_lang_default","EKbd_default"],"sources":["../../../src/components/Kbd/EKbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The smaller size, for a hint inside running small text. */\n  small?: boolean;\n}>();\n\ndefineSlots<{\n  /** The key, written as it is on the keycap: \"/\", \"Esc\", \"Ctrl\". */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <kbd class=\"e-kbd\" :class=\"small && 'e-kbd--s'\"><slot /></kbd>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-kbd {\n    display: inline-block;\n    min-width: 1.5em;\n    padding: 0 var(--e-space-1);\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);\n    color: var(--e-muted);\n    font: 500 var(--e-text-sm) / 1.5 var(--e-font-mono);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  .e-kbd--s {\n    font-size: var(--e-text-xs);\n  }\n\n  @media (forced-colors: active) {\n    .e-kbd {\n      outline: var(--e-stroke-hair) solid ButtonText;\n      outline-offset: calc(-1 * var(--e-stroke-hair));\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Kbd/EKbd.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EKbd.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","EKbd_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","renderSlot","_ctx"],"sources":["../../../src/components/Kbd/EKbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The smaller size, for a hint inside running small text. */\n  small?: boolean;\n}>();\n\ndefineSlots<{\n  /** The key, written as it is on the keycap: \"/\", \"Esc\", \"Ctrl\". */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <kbd class=\"e-kbd\" :class=\"small && 'e-kbd--s'\"><slot /></kbd>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-kbd {\n    display: inline-block;\n    min-width: 1.5em;\n    padding: 0 var(--e-space-1);\n    border: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-surface-tint);\n    color: var(--e-muted);\n    font: 500 var(--e-text-sm) / 1.5 var(--e-font-mono);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  .e-kbd--s {\n    font-size: var(--e-text-xs);\n  }\n\n  @media (forced-colors: active) {\n    .e-kbd {\n      border-color: ButtonText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;E,kBAeEA,EAAA,GAAAC,EAA8D,OAAA,EAAzD,OAAKC,EAAA,CAAC,SAAgBM,EAAA,SAAK,UAAA,CAAA,E,IAAgBL,EAAQO,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EKbd.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","EKbd_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","renderSlot","_ctx"],"sources":["../../../src/components/Kbd/EKbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The smaller size, for a hint inside running small text. */\n  small?: boolean;\n}>();\n\ndefineSlots<{\n  /** The key, written as it is on the keycap: \"/\", \"Esc\", \"Ctrl\". */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <kbd class=\"e-kbd\" :class=\"small && 'e-kbd--s'\"><slot /></kbd>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-kbd {\n    display: inline-block;\n    min-width: 1.5em;\n    padding: 0 var(--e-space-1);\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);\n    color: var(--e-muted);\n    font: 500 var(--e-text-sm) / 1.5 var(--e-font-mono);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  .e-kbd--s {\n    font-size: var(--e-text-xs);\n  }\n\n  @media (forced-colors: active) {\n    .e-kbd {\n      outline: var(--e-stroke-hair) solid ButtonText;\n      outline-offset: calc(-1 * var(--e-stroke-hair));\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;E,kBAeEA,EAAA,GAAAC,EAA8D,OAAA,EAAzD,OAAKC,EAAA,CAAC,SAAgBM,EAAA,SAAK,UAAA,CAAA,E,IAAgBL,EAAQO,EAAA,QAAA,SAAA,C"}

package/dist/components/NavList/ENavList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ENavList.js","names":["_sfc_main","ENavList_vue_vue_type_script_setup_true_lang_default","ENavList_default"],"sources":["../../../src/components/NavList/ENavList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport LinkNav, { type LinkItem, type LinkSection } from \"./LinkNav.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface NavItem extends LinkItem {\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** A count of things waiting on the person (bills to pay, forms to sign). */\n  count?: number;\n}\n\nexport type NavSection = LinkSection<NavItem>;\n\nconst props = withDefaults(\n  defineProps<{\n    /** The destinations, in order: `{ label, href?, to?, icon?, count?, current? }`. With no `href` or `to` a link goes to `#`. Set `current` yourself. */\n    items?: NavItem[];\n    /** Destinations in labelled groups, instead of `items`: `{ label?, items }`. Give a label only when there is more than one section. */\n    sections?: NavSection[];\n    /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header, with a hairline between each. Items look the same as in the vertical list: a tint on hover, and a primary outline with a heavier bottom edge on the current page. */\n    orientation?: \"vertical\" | \"horizontal\";\n    /** The landmark's name; give each navigation on a page its own. @default \"Main\" */\n    label?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href`, the class `e-nav-item` and `aria-current`. */\n    linkComponent?: string | Component;\n  }>(),\n  { orientation: \"vertical\", linkComponent: \"a\" },\n);\n\nconst groups = computed<NavSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\n</script>\n\n<template>\n  <LinkNav\n    class=\"e-nav\"\n    :class=\"orientation === 'horizontal' && 'e-nav--horizontal'\"\n    :groups=\"groups\"\n    :label=\"label\"\n    :link-component=\"linkComponent\"\n    item-class=\"e-nav-item\"\n    heading-class=\"e-nav-heading\"\n  >\n    <template #item=\"{ item }\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span class=\"e-nav-label\">{{ item.label }}</span>\n      <span v-if=\"item.count != null\" class=\"e-nav-count\">{{ item.count }}</span>\n    </template>\n  </LinkNav>\n</template>\n\n<style>\n@layer e.page {\n  .e-nav ul {\n    display: grid;\n    gap: calc(var(--e-space-1) / 2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-nav:not(.e-nav--horizontal) ul {\n    gap: 0;\n  }\n\n  .e-nav:not(.e-nav--horizontal) li + li::before {\n    content: \"\";\n    display: block;\n    height: var(--e-stroke-hair);\n    margin-block: var(--e-space-2);\n    background: color-mix(in srgb, var(--e-border) 60%, transparent);\n  }\n\n  .e-nav-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n    height: calc(var(--e-control-height) - var(--e-lift));\n    margin-block-end: var(--e-lift);\n    box-sizing: border-box;\n    padding: 0 var(--e-space-3);\n\n    --e-lift: 0px;\n\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-decoration: none;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-nav-item:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-nav-item:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-nav-item[aria-current=\"page\"] {\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    font-weight: 600;\n    border-color: var(--e-primary);\n\n    --e-lift: var(--e-depth);\n\n    box-shadow: 0 var(--e-lift) 0 0 var(--e-primary);\n  }\n\n  .e-nav-label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-nav--horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  /* The separator sits inside the next item's li, so the list has no gap of its own: the margins on the separator space both sides equally. */\n  .e-nav--horizontal ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0;\n  }\n\n  .e-nav--horizontal li {\n    display: flex;\n    align-items: center;\n  }\n\n  .e-nav--horizontal li + li::before {\n    content: \"\";\n    width: var(--e-stroke-hair);\n    height: 1.75rem;\n    margin-inline: var(--e-space-2);\n    background: color-mix(in srgb, var(--e-border) 60%, transparent);\n  }\n\n  .e-nav--horizontal .e-nav-heading {\n    margin: 0;\n    padding-inline: 0;\n  }\n\n  .e-nav-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-nav-item {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-nav-item[aria-current=\"page\"] {\n      border-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ENavList.js","names":["_sfc_main","ENavList_vue_vue_type_script_setup_true_lang_default","ENavList_default"],"sources":["../../../src/components/NavList/ENavList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport LinkNav, { type LinkItem, type LinkSection } from \"./LinkNav.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface NavItem extends LinkItem {\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** A count of things waiting on the person (bills to pay, forms to sign). */\n  count?: number;\n}\n\nexport type NavSection = LinkSection<NavItem>;\n\nconst props = withDefaults(\n  defineProps<{\n    /** The destinations, in order: `{ label, href?, to?, icon?, count?, current? }`. With no `href` or `to` a link goes to `#`. Set `current` yourself. */\n    items?: NavItem[];\n    /** Destinations in labelled groups, instead of `items`: `{ label?, items }`. Give a label only when there is more than one section. */\n    sections?: NavSection[];\n    /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header, with a hairline between each. Items look the same as in the vertical list: a tint on hover, and a primary outline with a heavier bottom edge on the current page. */\n    orientation?: \"vertical\" | \"horizontal\";\n    /** The landmark's name; give each navigation on a page its own. @default \"Main\" */\n    label?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href`, the class `e-nav-item` and `aria-current`. */\n    linkComponent?: string | Component;\n  }>(),\n  { orientation: \"vertical\", linkComponent: \"a\" },\n);\n\nconst groups = computed<NavSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\n</script>\n\n<template>\n  <LinkNav\n    class=\"e-nav\"\n    :class=\"orientation === 'horizontal' && 'e-nav--horizontal'\"\n    :groups=\"groups\"\n    :label=\"label\"\n    :link-component=\"linkComponent\"\n    item-class=\"e-nav-item\"\n    heading-class=\"e-nav-heading\"\n  >\n    <template #item=\"{ item }\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span class=\"e-nav-label\">{{ item.label }}</span>\n      <span v-if=\"item.count != null\" class=\"e-nav-count\">{{ item.count }}</span>\n    </template>\n  </LinkNav>\n</template>\n\n<style>\n@layer e.page {\n  .e-nav ul {\n    display: grid;\n    gap: calc(var(--e-space-1) / 2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-nav:not(.e-nav--horizontal) ul {\n    gap: 0;\n  }\n\n  .e-nav:not(.e-nav--horizontal) li + li::before {\n    content: \"\";\n    display: block;\n    height: var(--e-stroke-hair);\n    margin-block: var(--e-space-2);\n    background: color-mix(in srgb, var(--e-border) 60%, transparent);\n  }\n\n  .e-nav-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n    height: var(--e-control-height);\n    box-sizing: border-box;\n    padding: 0 var(--e-space-3) var(--e-lift);\n\n    --e-lift: 0px;\n\n    border: 0;\n    border-radius: var(--e-radius-md);\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-decoration: none;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-nav-item:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-nav-item:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-nav-item[aria-current=\"page\"] {\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    font-weight: 600;\n\n    --e-lift: var(--e-depth);\n    --e-slab: var(--e-primary);\n\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-primary),\n      inset 0 calc(-1 * (var(--e-lift) + var(--e-stroke-edge))) 0 0 var(--e-slab);\n  }\n\n  .e-nav-item[aria-current=\"page\"]:hover {\n    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n  }\n\n  .e-nav-label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-nav--horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  /* The separator sits inside the next item's li, so the list has no gap of its own: the margins on the separator space both sides equally. */\n  .e-nav--horizontal ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0;\n  }\n\n  .e-nav--horizontal li {\n    display: flex;\n    align-items: center;\n  }\n\n  .e-nav--horizontal li + li::before {\n    content: \"\";\n    width: var(--e-stroke-hair);\n    height: 1.75rem;\n    margin-inline: var(--e-space-2);\n    background: color-mix(in srgb, var(--e-border) 60%, transparent);\n  }\n\n  .e-nav--horizontal .e-nav-heading {\n    margin: 0;\n    padding-inline: 0;\n  }\n\n  .e-nav-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-nav-item {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-nav-item[aria-current=\"page\"] {\n      border-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/NavList/ENavList.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ENavList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","LinkNav","_normalizeClass","_withCtx","EIcon","_createCommentVNode","_createElementVNode","_toDisplayString","_createElementBlock","EIcon_default","LinkNav_default","_hoisted_1","_hoisted_2","ENavList_vue_vue_type_script_setup_true_lang_default","props","__props","groups","computed","openBlock","createBlock","normalizeClass","withCtx","item","createCommentVNode","createElementVNode","toDisplayString","createElementBlock"],"sources":["../../../src/components/NavList/ENavList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport LinkNav, { type LinkItem, type LinkSection } from \"./LinkNav.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface NavItem extends LinkItem {\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** A count of things waiting on the person (bills to pay, forms to sign). */\n  count?: number;\n}\n\nexport type NavSection = LinkSection<NavItem>;\n\nconst props = withDefaults(\n  defineProps<{\n    /** The destinations, in order: `{ label, href?, to?, icon?, count?, current? }`. With no `href` or `to` a link goes to `#`. Set `current` yourself. */\n    items?: NavItem[];\n    /** Destinations in labelled groups, instead of `items`: `{ label?, items }`. Give a label only when there is more than one section. */\n    sections?: NavSection[];\n    /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header, with a hairline between each. Items look the same as in the vertical list: a tint on hover, and a primary outline with a heavier bottom edge on the current page. */\n    orientation?: \"vertical\" | \"horizontal\";\n    /** The landmark's name; give each navigation on a page its own. @default \"Main\" */\n    label?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href`, the class `e-nav-item` and `aria-current`. */\n    linkComponent?: string | Component;\n  }>(),\n  { orientation: \"vertical\", linkComponent: \"a\" },\n);\n\nconst groups = computed<NavSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\n</script>\n\n<template>\n  <LinkNav\n    class=\"e-nav\"\n    :class=\"orientation === 'horizontal' && 'e-nav--horizontal'\"\n    :groups=\"groups\"\n    :label=\"label\"\n    :link-component=\"linkComponent\"\n    item-class=\"e-nav-item\"\n    heading-class=\"e-nav-heading\"\n  >\n    <template #item=\"{ item }\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span class=\"e-nav-label\">{{ item.label }}</span>\n      <span v-if=\"item.count != null\" class=\"e-nav-count\">{{ item.count }}</span>\n    </template>\n  </LinkNav>\n</template>\n\n<style>\n@layer e.page {\n  .e-nav ul {\n    display: grid;\n    gap: calc(var(--e-space-1) / 2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-nav:not(.e-nav--horizontal) ul {\n    gap: 0;\n  }\n\n  .e-nav:not(.e-nav--horizontal) li + li::before {\n    content: \"\";\n    display: block;\n    height: var(--e-stroke-hair);\n    margin-block: var(--e-space-2);\n    background: color-mix(in srgb, var(--e-border) 60%, transparent);\n  }\n\n  .e-nav-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n    height: calc(var(--e-control-height) - var(--e-lift));\n    margin-block-end: var(--e-lift);\n    box-sizing: border-box;\n    padding: 0 var(--e-space-3);\n\n    --e-lift: 0px;\n\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-decoration: none;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-nav-item:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-nav-item:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-nav-item[aria-current=\"page\"] {\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    font-weight: 600;\n    border-color: var(--e-primary);\n\n    --e-lift: var(--e-depth);\n\n    box-shadow: 0 var(--e-lift) 0 0 var(--e-primary);\n  }\n\n  .e-nav-label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-nav--horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  /* The separator sits inside the next item's li, so the list has no gap of its own: the margins on the separator space both sides equally. */\n  .e-nav--horizontal ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0;\n  }\n\n  .e-nav--horizontal li {\n    display: flex;\n    align-items: center;\n  }\n\n  .e-nav--horizontal li + li::before {\n    content: \"\";\n    width: var(--e-stroke-hair);\n    height: 1.75rem;\n    margin-inline: var(--e-space-2);\n    background: color-mix(in srgb, var(--e-border) 60%, transparent);\n  }\n\n  .e-nav--horizontal .e-nav-heading {\n    margin: 0;\n    padding-inline: 0;\n  }\n\n  .e-nav-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-nav-item {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-nav-item[aria-current=\"page\"] {\n      border-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,IAAMe,IAAQC,GAgBRC,IAASC,QAA6BH,EAAM,YAAY,CAAC,EAAE,OAAOA,EAAM,SAAS,CAAC,EAAE,CAAC,CAAC;E,kBAI1Ff,EAAA,GAAAC,EAcUC,GAAA;GAbR,OAAKC,EAAA,CAAC,SACEa,EAAA,gBAAW,gBAAA,mBAAA,CAAA;GAClB,QAAQC,EAAA;GACR,OAAOD,EAAA;GACP,kBAAgBA,EAAA;GACjB,cAAW;GACX,iBAAc;;GAEH,MAAIZ,GAC+B,EAD3B,cAAI;IACRmB,EAAK,QAAlBvB,EAAA,GAAAC,EAA4CI,GAAA;;KAAnB,MAAMkB,EAAK;;IACpChB,EAAiD,QAAjDK,GAAiDJ,EAApBe,EAAK,KAAK,GAAA,CAAA;IAC3BA,EAAK,SAAK,O,aAAtBvB,EAAA,GAAAS,EAA2E,QAA3EI,GAA2EL,EAApBe,EAAK,KAAK,GAAA,CAAA"}
+{"version":3,"file":"ENavList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","LinkNav","_normalizeClass","_withCtx","EIcon","_createCommentVNode","_createElementVNode","_toDisplayString","_createElementBlock","EIcon_default","LinkNav_default","_hoisted_1","_hoisted_2","ENavList_vue_vue_type_script_setup_true_lang_default","props","__props","groups","computed","openBlock","createBlock","normalizeClass","withCtx","item","createCommentVNode","createElementVNode","toDisplayString","createElementBlock"],"sources":["../../../src/components/NavList/ENavList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport LinkNav, { type LinkItem, type LinkSection } from \"./LinkNav.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface NavItem extends LinkItem {\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** A count of things waiting on the person (bills to pay, forms to sign). */\n  count?: number;\n}\n\nexport type NavSection = LinkSection<NavItem>;\n\nconst props = withDefaults(\n  defineProps<{\n    /** The destinations, in order: `{ label, href?, to?, icon?, count?, current? }`. With no `href` or `to` a link goes to `#`. Set `current` yourself. */\n    items?: NavItem[];\n    /** Destinations in labelled groups, instead of `items`: `{ label?, items }`. Give a label only when there is more than one section. */\n    sections?: NavSection[];\n    /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header, with a hairline between each. Items look the same as in the vertical list: a tint on hover, and a primary outline with a heavier bottom edge on the current page. */\n    orientation?: \"vertical\" | \"horizontal\";\n    /** The landmark's name; give each navigation on a page its own. @default \"Main\" */\n    label?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href`, the class `e-nav-item` and `aria-current`. */\n    linkComponent?: string | Component;\n  }>(),\n  { orientation: \"vertical\", linkComponent: \"a\" },\n);\n\nconst groups = computed<NavSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\n</script>\n\n<template>\n  <LinkNav\n    class=\"e-nav\"\n    :class=\"orientation === 'horizontal' && 'e-nav--horizontal'\"\n    :groups=\"groups\"\n    :label=\"label\"\n    :link-component=\"linkComponent\"\n    item-class=\"e-nav-item\"\n    heading-class=\"e-nav-heading\"\n  >\n    <template #item=\"{ item }\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span class=\"e-nav-label\">{{ item.label }}</span>\n      <span v-if=\"item.count != null\" class=\"e-nav-count\">{{ item.count }}</span>\n    </template>\n  </LinkNav>\n</template>\n\n<style>\n@layer e.page {\n  .e-nav ul {\n    display: grid;\n    gap: calc(var(--e-space-1) / 2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-nav:not(.e-nav--horizontal) ul {\n    gap: 0;\n  }\n\n  .e-nav:not(.e-nav--horizontal) li + li::before {\n    content: \"\";\n    display: block;\n    height: var(--e-stroke-hair);\n    margin-block: var(--e-space-2);\n    background: color-mix(in srgb, var(--e-border) 60%, transparent);\n  }\n\n  .e-nav-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n    height: var(--e-control-height);\n    box-sizing: border-box;\n    padding: 0 var(--e-space-3) var(--e-lift);\n\n    --e-lift: 0px;\n\n    border: 0;\n    border-radius: var(--e-radius-md);\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-decoration: none;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-nav-item:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-nav-item:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-nav-item[aria-current=\"page\"] {\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    font-weight: 600;\n\n    --e-lift: var(--e-depth);\n    --e-slab: var(--e-primary);\n\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-primary),\n      inset 0 calc(-1 * (var(--e-lift) + var(--e-stroke-edge))) 0 0 var(--e-slab);\n  }\n\n  .e-nav-item[aria-current=\"page\"]:hover {\n    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n  }\n\n  .e-nav-label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-nav--horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  /* The separator sits inside the next item's li, so the list has no gap of its own: the margins on the separator space both sides equally. */\n  .e-nav--horizontal ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0;\n  }\n\n  .e-nav--horizontal li {\n    display: flex;\n    align-items: center;\n  }\n\n  .e-nav--horizontal li + li::before {\n    content: \"\";\n    width: var(--e-stroke-hair);\n    height: 1.75rem;\n    margin-inline: var(--e-space-2);\n    background: color-mix(in srgb, var(--e-border) 60%, transparent);\n  }\n\n  .e-nav--horizontal .e-nav-heading {\n    margin: 0;\n    padding-inline: 0;\n  }\n\n  .e-nav-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-nav-item {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-nav-item[aria-current=\"page\"] {\n      border-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,IAAMe,IAAQC,GAgBRC,IAASC,QAA6BH,EAAM,YAAY,CAAC,EAAE,OAAOA,EAAM,SAAS,CAAC,EAAE,CAAC,CAAC;E,kBAI1Ff,EAAA,GAAAC,EAcUC,GAAA;GAbR,OAAKC,EAAA,CAAC,SACEa,EAAA,gBAAW,gBAAA,mBAAA,CAAA;GAClB,QAAQC,EAAA;GACR,OAAOD,EAAA;GACP,kBAAgBA,EAAA;GACjB,cAAW;GACX,iBAAc;;GAEH,MAAIZ,GAC+B,EAD3B,cAAI;IACRmB,EAAK,QAAlBvB,EAAA,GAAAC,EAA4CI,GAAA;;KAAnB,MAAMkB,EAAK;;IACpChB,EAAiD,QAAjDK,GAAiDJ,EAApBe,EAAK,KAAK,GAAA,CAAA;IAC3BA,EAAK,SAAK,O,aAAtBvB,EAAA,GAAAS,EAA2E,QAA3EI,GAA2EL,EAApBe,EAAK,KAAK,GAAA,CAAA"}

package/dist/components/Notice/ENotice.js.map

@@ -1 +1 @@
-{"version":3,"file":"ENotice.js","names":["_sfc_main","ENotice_vue_vue_type_script_setup_true_lang_default","ENotice_default"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n    tone?: NoticeTone;\n    /** What happened, in one short line. */\n    title: string;\n    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading; without it the title is a paragraph. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The id of the title element, for a parent that labels itself by it. */\n    titleId?: string;\n    /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n    role?: string | false;\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The close button was pressed. The button only shows when a listener is attached. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** One sentence of detail under the title. */\n  default?(): unknown;\n  /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n  props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <div\n    class=\"e-notice\"\n    :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n    :role=\"role\"\n  >\n    <div class=\"e-notice-grid\">\n      <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n      <div class=\"e-notice-body\">\n        <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n          {{ title }}\n        </component>\n        <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-close\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-notice {\n    --e-tone: var(--e-primary);\n    --e-bg: var(--e-surface-tint);\n\n    container-type: inline-size;\n    padding: var(--e-space-3) var(--e-space-4);\n    padding-left: calc(var(--e-space-4) + 2 * var(--e-depth));\n    border: var(--e-stroke-edge) solid var(--e-tone);\n    border-radius: var(--e-radius-md);\n    background-color: var(--e-bg);\n    background-image: linear-gradient(to right, var(--e-tone) calc(var(--e-stroke-edge) + 2 * var(--e-depth)), transparent calc(var(--e-stroke-edge) + 2 * var(--e-depth)));\n    background-origin: border-box;\n    background-repeat: no-repeat;\n    color: var(--e-ink);\n  }\n\n  .e-notice--success {\n    --e-tone: var(--e-secondary);\n    --e-bg: var(--e-secondary-soft);\n  }\n\n  .e-notice--warning {\n    --e-tone: var(--e-warning-strong);\n    --e-bg: var(--e-warning-soft);\n  }\n\n  .e-notice--danger {\n    --e-tone: var(--e-danger);\n    --e-bg: var(--e-danger-soft);\n  }\n\n  .e-notice-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-notice-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  @media (forced-colors: active) {\n    .e-notice {\n      border: var(--e-stroke-edge) solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ENotice.js","names":["_sfc_main","ENotice_vue_vue_type_script_setup_true_lang_default","ENotice_default"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n    tone?: NoticeTone;\n    /** What happened, in one short line. */\n    title: string;\n    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading; without it the title is a paragraph. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The id of the title element, for a parent that labels itself by it. */\n    titleId?: string;\n    /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n    role?: string | false;\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The close button was pressed. The button only shows when a listener is attached. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** One sentence of detail under the title. */\n  default?(): unknown;\n  /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n  props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <div\n    class=\"e-notice\"\n    :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n    :role=\"role\"\n  >\n    <div class=\"e-notice-grid\">\n      <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n      <div class=\"e-notice-body\">\n        <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n          {{ title }}\n        </component>\n        <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-close\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-notice {\n    --e-tone: var(--e-primary);\n    --e-bg: var(--e-surface-tint);\n\n    container-type: inline-size;\n    padding: var(--e-space-3) var(--e-space-4);\n    padding-left: calc(var(--e-space-4) + 2 * var(--e-depth));\n    border: 0;\n    border-radius: var(--e-radius-md);\n    background-color: var(--e-bg);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-tone);\n    background-image: linear-gradient(to right, var(--e-tone) calc(var(--e-stroke-edge) + 2 * var(--e-depth)), transparent calc(var(--e-stroke-edge) + 2 * var(--e-depth)));\n    background-repeat: no-repeat;\n    color: var(--e-ink);\n  }\n\n  .e-notice--success {\n    --e-tone: var(--e-secondary);\n    --e-bg: var(--e-secondary-soft);\n  }\n\n  .e-notice--warning {\n    --e-tone: var(--e-warning-strong);\n    --e-bg: var(--e-warning-soft);\n  }\n\n  .e-notice--danger {\n    --e-tone: var(--e-danger);\n    --e-bg: var(--e-danger-soft);\n  }\n\n  .e-notice-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-notice-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  @media (forced-colors: active) {\n    .e-notice {\n      border: var(--e-stroke-edge) solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Notice/ENotice.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ENotice.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","EIcon","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_renderSlot","_createCommentVNode","EActions","EIconButton","_unref","EActions_default","EIcon_default","EIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ENotice_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useMessages","instance","getCurrentInstance","TONE_ICON","role","computed","hasClose","openBlock","createElementBlock","normalizeClass","_ctx","createElementVNode","createVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","renderSlot","createCommentVNode","unref","_cache"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n    tone?: NoticeTone;\n    /** What happened, in one short line. */\n    title: string;\n    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading; without it the title is a paragraph. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The id of the title element, for a parent that labels itself by it. */\n    titleId?: string;\n    /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n    role?: string | false;\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The close button was pressed. The button only shows when a listener is attached. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** One sentence of detail under the title. */\n  default?(): unknown;\n  /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n  props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <div\n    class=\"e-notice\"\n    :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n    :role=\"role\"\n  >\n    <div class=\"e-notice-grid\">\n      <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n      <div class=\"e-notice-body\">\n        <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n          {{ title }}\n        </component>\n        <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-close\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-notice {\n    --e-tone: var(--e-primary);\n    --e-bg: var(--e-surface-tint);\n\n    container-type: inline-size;\n    padding: var(--e-space-3) var(--e-space-4);\n    padding-left: calc(var(--e-space-4) + 2 * var(--e-depth));\n    border: var(--e-stroke-edge) solid var(--e-tone);\n    border-radius: var(--e-radius-md);\n    background-color: var(--e-bg);\n    background-image: linear-gradient(to right, var(--e-tone) calc(var(--e-stroke-edge) + 2 * var(--e-depth)), transparent calc(var(--e-stroke-edge) + 2 * var(--e-depth)));\n    background-origin: border-box;\n    background-repeat: no-repeat;\n    color: var(--e-ink);\n  }\n\n  .e-notice--success {\n    --e-tone: var(--e-secondary);\n    --e-bg: var(--e-secondary-soft);\n  }\n\n  .e-notice--warning {\n    --e-tone: var(--e-warning-strong);\n    --e-bg: var(--e-warning-soft);\n  }\n\n  .e-notice--danger {\n    --e-tone: var(--e-danger);\n    --e-bg: var(--e-danger-soft);\n  }\n\n  .e-notice-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-notice-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  @media (forced-colors: active) {\n    .e-notice {\n      border: var(--e-stroke-edge) solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,IAAM4B,IAAQC,GAoBRC,IAAOH,GAYPI,IAAIC,EAAY,GAChBC,IAAWC,EAAmB,GAC9BC,IAAwC;GAAE,MAAM;GAAQ,SAAS;GAAS,SAAS;GAAS,QAAQ;EAAQ,GAC5GC,IAAOC,QACXT,EAAM,SAAS,KAAQ,KAAA,IAAYA,EAAM,SAASA,EAAM,SAAS,WAAW,UAAU,SACxF,GACMU,UAAiBV,EAAM,YAAY,CAAC,CAACK,GAAU,MAAM,OAAO;E,kBAIhEhC,EAAA,GAAAC,EAkBM,OAAA;GAjBJ,OAAKC,EAAA,CAAC,YAAU,CACP0B,EAAA,SAAI,UAAA,aAA4BA,EAAA,QAAQ7B,EAAAA,OAAO,WAAO,mBAAA,CAAA,CAAA;GAC9D,MAAMoC,EAAA;E,IAEPhC,EAYM,OAZNiB,GAYM;GAXJjB,EAA4E,QAA5EkB,GAA4E,CAAhDjB,EAAyCC,GAAA,EAAjC,MAAMuB,EAAA,QAAQM,EAAUN,EAAA,M;GAC5DzB,EAKM,OALNmB,GAKM,EAJJtB,EAAA,GAAAM,EAEYC,EAFIqB,EAAA,eAAY,IAAOA,EAAA,iBAAY,GAAA,GAAA;IAAW,IAAIA,EAAA;IAAS,OAAM;;IAC3E,SAAApB,QAAW,CAARC,EAAAC,EAAAkB,EAAA,KAAK,GAAA,CAAA,C;;G,gBAEC7B,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAA+D,OAA/DsB,GAA+D,CAAdZ,EAAQ8B,EAAA,QAAA,SAAA,C;GAE3C1C,EAAAA,OAAO,WAAvBC,EAAA,GAAAM,EAA2FO,GAAA;;IAA3D,OAAM;;IAAmB,SAAAL,QAAuB,CAAvBG,EAAuB8B,EAAA,QAAA,SAAA,C;;;GACpEJ,EAAQ,KAApBrC,EAAA,GAAAC,EAEO,QAFPuB,GAEO,CADLpB,EAAqEU,GAAA;IAAxD,MAAK;IAAK,OAAOC,EAAAe,CAAA,CAAC,CAAA,SAAA;IAAc,SAAK,AAAAsB,EAAA,QAAA,MAAEvB,EAAI,OAAA"}
+{"version":3,"file":"ENotice.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","EIcon","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_renderSlot","_createCommentVNode","EActions","EIconButton","_unref","EActions_default","EIcon_default","EIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ENotice_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useMessages","instance","getCurrentInstance","TONE_ICON","role","computed","hasClose","openBlock","createElementBlock","normalizeClass","_ctx","createElementVNode","createVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","renderSlot","createCommentVNode","unref","_cache"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n    tone?: NoticeTone;\n    /** What happened, in one short line. */\n    title: string;\n    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading; without it the title is a paragraph. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The id of the title element, for a parent that labels itself by it. */\n    titleId?: string;\n    /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n    role?: string | false;\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The close button was pressed. The button only shows when a listener is attached. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** One sentence of detail under the title. */\n  default?(): unknown;\n  /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n  props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <div\n    class=\"e-notice\"\n    :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n    :role=\"role\"\n  >\n    <div class=\"e-notice-grid\">\n      <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n      <div class=\"e-notice-body\">\n        <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n          {{ title }}\n        </component>\n        <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-close\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-notice {\n    --e-tone: var(--e-primary);\n    --e-bg: var(--e-surface-tint);\n\n    container-type: inline-size;\n    padding: var(--e-space-3) var(--e-space-4);\n    padding-left: calc(var(--e-space-4) + 2 * var(--e-depth));\n    border: 0;\n    border-radius: var(--e-radius-md);\n    background-color: var(--e-bg);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-tone);\n    background-image: linear-gradient(to right, var(--e-tone) calc(var(--e-stroke-edge) + 2 * var(--e-depth)), transparent calc(var(--e-stroke-edge) + 2 * var(--e-depth)));\n    background-repeat: no-repeat;\n    color: var(--e-ink);\n  }\n\n  .e-notice--success {\n    --e-tone: var(--e-secondary);\n    --e-bg: var(--e-secondary-soft);\n  }\n\n  .e-notice--warning {\n    --e-tone: var(--e-warning-strong);\n    --e-bg: var(--e-warning-soft);\n  }\n\n  .e-notice--danger {\n    --e-tone: var(--e-danger);\n    --e-bg: var(--e-danger-soft);\n  }\n\n  .e-notice-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-notice-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  @media (forced-colors: active) {\n    .e-notice {\n      border: var(--e-stroke-edge) solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,IAAM4B,IAAQC,GAoBRC,IAAOH,GAYPI,IAAIC,EAAY,GAChBC,IAAWC,EAAmB,GAC9BC,IAAwC;GAAE,MAAM;GAAQ,SAAS;GAAS,SAAS;GAAS,QAAQ;EAAQ,GAC5GC,IAAOC,QACXT,EAAM,SAAS,KAAQ,KAAA,IAAYA,EAAM,SAASA,EAAM,SAAS,WAAW,UAAU,SACxF,GACMU,UAAiBV,EAAM,YAAY,CAAC,CAACK,GAAU,MAAM,OAAO;E,kBAIhEhC,EAAA,GAAAC,EAkBM,OAAA;GAjBJ,OAAKC,EAAA,CAAC,YAAU,CACP0B,EAAA,SAAI,UAAA,aAA4BA,EAAA,QAAQ7B,EAAAA,OAAO,WAAO,mBAAA,CAAA,CAAA;GAC9D,MAAMoC,EAAA;E,IAEPhC,EAYM,OAZNiB,GAYM;GAXJjB,EAA4E,QAA5EkB,GAA4E,CAAhDjB,EAAyCC,GAAA,EAAjC,MAAMuB,EAAA,QAAQM,EAAUN,EAAA,M;GAC5DzB,EAKM,OALNmB,GAKM,EAJJtB,EAAA,GAAAM,EAEYC,EAFIqB,EAAA,eAAY,IAAOA,EAAA,iBAAY,GAAA,GAAA;IAAW,IAAIA,EAAA;IAAS,OAAM;;IAC3E,SAAApB,QAAW,CAARC,EAAAC,EAAAkB,EAAA,KAAK,GAAA,CAAA,C;;G,gBAEC7B,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAA+D,OAA/DsB,GAA+D,CAAdZ,EAAQ8B,EAAA,QAAA,SAAA,C;GAE3C1C,EAAAA,OAAO,WAAvBC,EAAA,GAAAM,EAA2FO,GAAA;;IAA3D,OAAM;;IAAmB,SAAAL,QAAuB,CAAvBG,EAAuB8B,EAAA,QAAA,SAAA,C;;;GACpEJ,EAAQ,KAApBrC,EAAA,GAAAC,EAEO,QAFPuB,GAEO,CADLpB,EAAqEU,GAAA;IAAxD,MAAK;IAAK,OAAOC,EAAAe,CAAA,CAAC,CAAA,SAAA;IAAc,SAAK,AAAAsB,EAAA,QAAA,MAAEvB,EAAI,OAAA"}

package/dist/components/OtpField/EOtpField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EOtpField.js","names":["_sfc_main","EOtpField_vue_vue_type_script_setup_true_lang_default","EOtpField_default"],"sources":["../../../src/components/OtpField/EOtpField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, watch } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The field's label. @default \"Verification code\" */\n    label?: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** How many characters: the number of boxes. */\n    length?: number;\n    /** `numeric` opens the number pad; `text` takes letters and digits, upper-cased. */\n    inputmode?: \"numeric\" | \"text\";\n    /** A gap between groups: 6 with 3 reads 123 456. */\n    groupSize?: number;\n    /** The name submitted with a form (the whole code), through a hidden input. */\n    name?: string;\n    /** Start in the first empty box. */\n    autoFocus?: boolean;\n    /** Help under the boxes, read with each box. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks every box invalid and is announced. */\n    error?: string;\n    /** A word beside the label, and the `required` attribute on every box. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    /** Disables every box. */\n    disabled?: boolean;\n    /** The id of the first box; the label and hint ids are built from it. @default generated */\n    id?: string;\n  }>(),\n  { length: 6, inputmode: \"numeric\", groupSize: 0 },\n);\n\nconst emit = defineEmits<{\n  /** Once, when the last box fills. */\n  complete: [code: string];\n}>();\n\n/** The code typed so far. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst numeric = computed(() => props.inputmode !== \"text\");\nconst refs: (HTMLInputElement | null)[] = [];\n\nfunction clean(s: unknown): string {\n  const text = String(s ?? \"\");\n  return (numeric.value ? text.replace(/\\D/g, \"\") : text.replace(/[^a-z0-9]/gi, \"\").toUpperCase()).slice(\n    0,\n    props.length,\n  );\n}\nconst value = computed(() => clean(model.value));\n\nlet live = value.value;\nwatch(value, (v) => (live = v), { flush: \"sync\" });\n\nfunction commit(next: string) {\n  next = clean(next);\n  const prev = live;\n  live = next;\n  model.value = next;\n  if (next.length === props.length && prev !== next) emit(\"complete\", next);\n}\nfunction focusAt(i: number) {\n  refs[Math.max(0, Math.min(props.length - 1, i))]?.focus();\n}\nconst without = (v: string, i: number) => v.slice(0, i) + v.slice(i + 1);\nfunction put(i: number, text: string) {\n  const chars = clean(text);\n  if (!chars) return;\n  const from = chars.length >= props.length ? 0 : Math.min(i, live.length);\n  commit(live.slice(0, from) + chars);\n  focusAt(from + chars.length);\n}\nfunction onInput(i: number, e: Event) {\n  const target = e.target as HTMLInputElement;\n  const v = live;\n  let raw = target.value;\n  if (!raw) {\n    commit(without(v, i));\n    return;\n  }\n  if (v[i] && raw.length === 2) {\n    const k = raw.indexOf(v[i]!);\n    raw = k >= 0 ? without(raw, k) : raw.charAt(1);\n  }\n  const chars = clean(raw);\n  if (!chars) {\n    target.value = live[i] ?? \"\";\n    return;\n  }\n  if (chars.length === 1 && i < v.length) {\n    commit(v.slice(0, i) + chars + v.slice(i + 1));\n    focusAt(i + 1);\n  } else put(i, chars);\n  target.value = live[i] ?? \"\";\n}\nfunction onKey(i: number, e: KeyboardEvent) {\n  const v = live;\n  const k = e.key;\n  if (k === \"Backspace\") {\n    e.preventDefault();\n    if (v[i]) {\n      commit(without(v, i));\n      focusAt(i);\n    } else if (i > 0) {\n      commit(without(v, i - 1));\n      focusAt(i - 1);\n    }\n  } else if (k === \"Delete\") {\n    e.preventDefault();\n    commit(without(v, i));\n  } else if (k === \"ArrowLeft\") {\n    e.preventDefault();\n    focusAt(i - 1);\n  } else if (k === \"ArrowRight\") {\n    e.preventDefault();\n    focusAt(Math.min(i + 1, v.length));\n  } else if (k === \"Home\") {\n    e.preventDefault();\n    focusAt(0);\n  } else if (k === \"End\") {\n    e.preventDefault();\n    focusAt(v.length);\n  }\n}\nfunction onFocus(i: number) {\n  if (i > live.length) focusAt(live.length);\n}\nfunction onPaste(i: number, e: ClipboardEvent) {\n  e.preventDefault();\n  put(i, e.clipboardData?.getData(\"text\") ?? \"\");\n}\n\nonMounted(() => {\n  if (props.autoFocus) focusAt(live.length);\n});\n\ndefineExpose({\n  focus: () => focusAt(live.length),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('verificationCode')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <div role=\"group\" :aria-labelledby=\"`${field.id}-label`\" class=\"e-otp\" v-bind=\"attrs.input()\">\n        <template v-for=\"i in length\" :key=\"i\">\n          <span v-if=\"groupSize && i > 1 && (i - 1) % groupSize === 0\" class=\"e-otp-sep\" aria-hidden=\"true\" />\n          <input\n            :id=\"i === 1 ? field.id : undefined\"\n            :ref=\"(el) => (refs[i - 1] = el as HTMLInputElement | null)\"\n            class=\"e-input e-otp-box\"\n            type=\"text\"\n            :inputmode=\"numeric ? 'numeric' : 'text'\"\n            :autocomplete=\"i === 1 ? 'one-time-code' : 'off'\"\n            autocapitalize=\"characters\"\n            :spellcheck=\"false\"\n            :value=\"value[i - 1] || ''\"\n            :disabled=\"disabled\"\n            :required=\"required\"\n            :data-filled=\"value[i - 1] ? '' : undefined\"\n            :aria-label=\"t(numeric ? 'otpDigit' : 'otpChar', { n: i, total: length })\"\n            :aria-invalid=\"field.ariaInvalid\"\n            :aria-describedby=\"field.ariaDescribedby\"\n            @input=\"onInput(i - 1, $event)\"\n            @keydown=\"onKey(i - 1, $event)\"\n            @focus=\"onFocus(i - 1)\"\n            @paste=\"onPaste(i - 1, $event)\"\n          />\n        </template>\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"value\" />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-otp {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    max-width: 100%;\n  }\n\n  .e-otp-sep {\n    flex: none;\n    width: var(--e-space-3);\n  }\n\n  .e-otp .e-otp-box {\n    flex: 1 1 0;\n    width: 0;\n    min-width: 30px;\n    max-width: var(--e-control-height);\n    padding: 0;\n    text-align: center;\n    font: 500 var(--e-text-xl)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    text-transform: uppercase;\n    caret-color: var(--e-primary);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation */\n  .e-otp .e-otp-box[data-filled]:not(:focus):not([aria-invalid=\"true\"]) {\n    border-color: var(--e-ink);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EOtpField.js","names":["_sfc_main","EOtpField_vue_vue_type_script_setup_true_lang_default","EOtpField_default"],"sources":["../../../src/components/OtpField/EOtpField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, watch } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The field's label. @default \"Verification code\" */\n    label?: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** How many characters: the number of boxes. */\n    length?: number;\n    /** `numeric` opens the number pad; `text` takes letters and digits, upper-cased. */\n    inputmode?: \"numeric\" | \"text\";\n    /** A gap between groups: 6 with 3 reads 123 456. */\n    groupSize?: number;\n    /** The name submitted with a form (the whole code), through a hidden input. */\n    name?: string;\n    /** Start in the first empty box. */\n    autoFocus?: boolean;\n    /** Help under the boxes, read with each box. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks every box invalid and is announced. */\n    error?: string;\n    /** A word beside the label, and the `required` attribute on every box. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    /** Disables every box. */\n    disabled?: boolean;\n    /** The id of the first box; the label and hint ids are built from it. @default generated */\n    id?: string;\n  }>(),\n  { length: 6, inputmode: \"numeric\", groupSize: 0 },\n);\n\nconst emit = defineEmits<{\n  /** Once, when the last box fills. */\n  complete: [code: string];\n}>();\n\n/** The code typed so far. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst numeric = computed(() => props.inputmode !== \"text\");\nconst refs: (HTMLInputElement | null)[] = [];\n\nfunction clean(s: unknown): string {\n  const text = String(s ?? \"\");\n  return (numeric.value ? text.replace(/\\D/g, \"\") : text.replace(/[^a-z0-9]/gi, \"\").toUpperCase()).slice(\n    0,\n    props.length,\n  );\n}\nconst value = computed(() => clean(model.value));\n\nlet live = value.value;\nwatch(value, (v) => (live = v), { flush: \"sync\" });\n\nfunction commit(next: string) {\n  next = clean(next);\n  const prev = live;\n  live = next;\n  model.value = next;\n  if (next.length === props.length && prev !== next) emit(\"complete\", next);\n}\nfunction focusAt(i: number) {\n  refs[Math.max(0, Math.min(props.length - 1, i))]?.focus();\n}\nconst without = (v: string, i: number) => v.slice(0, i) + v.slice(i + 1);\nfunction put(i: number, text: string) {\n  const chars = clean(text);\n  if (!chars) return;\n  const from = chars.length >= props.length ? 0 : Math.min(i, live.length);\n  commit(live.slice(0, from) + chars);\n  focusAt(from + chars.length);\n}\nfunction onInput(i: number, e: Event) {\n  const target = e.target as HTMLInputElement;\n  const v = live;\n  let raw = target.value;\n  if (!raw) {\n    commit(without(v, i));\n    return;\n  }\n  if (v[i] && raw.length === 2) {\n    const k = raw.indexOf(v[i]!);\n    raw = k >= 0 ? without(raw, k) : raw.charAt(1);\n  }\n  const chars = clean(raw);\n  if (!chars) {\n    target.value = live[i] ?? \"\";\n    return;\n  }\n  if (chars.length === 1 && i < v.length) {\n    commit(v.slice(0, i) + chars + v.slice(i + 1));\n    focusAt(i + 1);\n  } else put(i, chars);\n  target.value = live[i] ?? \"\";\n}\nfunction onKey(i: number, e: KeyboardEvent) {\n  const v = live;\n  const k = e.key;\n  if (k === \"Backspace\") {\n    e.preventDefault();\n    if (v[i]) {\n      commit(without(v, i));\n      focusAt(i);\n    } else if (i > 0) {\n      commit(without(v, i - 1));\n      focusAt(i - 1);\n    }\n  } else if (k === \"Delete\") {\n    e.preventDefault();\n    commit(without(v, i));\n  } else if (k === \"ArrowLeft\") {\n    e.preventDefault();\n    focusAt(i - 1);\n  } else if (k === \"ArrowRight\") {\n    e.preventDefault();\n    focusAt(Math.min(i + 1, v.length));\n  } else if (k === \"Home\") {\n    e.preventDefault();\n    focusAt(0);\n  } else if (k === \"End\") {\n    e.preventDefault();\n    focusAt(v.length);\n  }\n}\nfunction onFocus(i: number) {\n  if (i > live.length) focusAt(live.length);\n}\nfunction onPaste(i: number, e: ClipboardEvent) {\n  e.preventDefault();\n  put(i, e.clipboardData?.getData(\"text\") ?? \"\");\n}\n\nonMounted(() => {\n  if (props.autoFocus) focusAt(live.length);\n});\n\ndefineExpose({\n  focus: () => focusAt(live.length),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('verificationCode')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <div role=\"group\" :aria-labelledby=\"`${field.id}-label`\" class=\"e-otp\" v-bind=\"attrs.input()\">\n        <template v-for=\"i in length\" :key=\"i\">\n          <span v-if=\"groupSize && i > 1 && (i - 1) % groupSize === 0\" class=\"e-otp-sep\" aria-hidden=\"true\" />\n          <input\n            :id=\"i === 1 ? field.id : undefined\"\n            :ref=\"(el) => (refs[i - 1] = el as HTMLInputElement | null)\"\n            class=\"e-input e-otp-box\"\n            type=\"text\"\n            :inputmode=\"numeric ? 'numeric' : 'text'\"\n            :autocomplete=\"i === 1 ? 'one-time-code' : 'off'\"\n            autocapitalize=\"characters\"\n            :spellcheck=\"false\"\n            :value=\"value[i - 1] || ''\"\n            :disabled=\"disabled\"\n            :required=\"required\"\n            :data-filled=\"value[i - 1] ? '' : undefined\"\n            :aria-label=\"t(numeric ? 'otpDigit' : 'otpChar', { n: i, total: length })\"\n            :aria-invalid=\"field.ariaInvalid\"\n            :aria-describedby=\"field.ariaDescribedby\"\n            @input=\"onInput(i - 1, $event)\"\n            @keydown=\"onKey(i - 1, $event)\"\n            @focus=\"onFocus(i - 1)\"\n            @paste=\"onPaste(i - 1, $event)\"\n          />\n        </template>\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"value\" />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-otp {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    max-width: 100%;\n  }\n\n  .e-otp-sep {\n    flex: none;\n    width: var(--e-space-3);\n  }\n\n  .e-otp .e-otp-box {\n    flex: 1 1 0;\n    width: 0;\n    min-width: 30px;\n    max-width: var(--e-control-height);\n    padding: 0;\n    text-align: center;\n    font: 500 var(--e-text-xl)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    text-transform: uppercase;\n    caret-color: var(--e-primary);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation */\n  .e-otp .e-otp-box[data-filled]:not(:focus):not([aria-invalid=\"true\"]) {\n    --e-ring: var(--e-ink);\n  }\n}\n</style>\n"],"mappings":""}