@eos-ui/vue 0.3.0 → 0.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"EDescriptionList.js","names":["_sfc_main","EDescriptionList_vue_vue_type_script_setup_true_lang_default","EDescriptionList_default"],"sources":["../../../src/components/DescriptionList/EDescriptionList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { 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":""}
+{"version":3,"file":"EDescriptionList.js","names":["_sfc_main","EDescriptionList_vue_vue_type_script_setup_true_lang_default","EDescriptionList_default"],"sources":["../../../src/components/DescriptionList/EDescriptionList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type VNodeChild } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { StampTone } from \"../Stamp/EStamp.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface DescriptionItem {\n  /** The label, shown as a small uppercase kicker. Leave it out on every row for a plain list of facts. */\n  label?: string;\n  /** The text beside it. A string, or a rendered VNode for rich text. */\n  text: string | VNodeChild;\n  /** A decorative icon before the label (or before the text in a plain list). */\n  icon?: IconProp;\n  /** A word in a stamp after the text, such as \"Verified\". */\n  badge?: string;\n  /** The badge's tone. */\n  badgeTone?: StampTone;\n  /** Shows an Edit button at the end of the row. Pressing it emits `edit`. */\n  editable?: boolean;\n}\n\nconst props = defineProps<{\n  /** Label and text rows, ruled apart: `{ label: string, text: string | VNode }`. Labels are keys, so keep them unique. `null` items are skipped. */\n  items: (DescriptionItem | null | undefined)[];\n}>();\n\nconst emit = defineEmits<{\n  /** An item's Edit button was pressed. */\n  edit: [item: DescriptionItem, index: number];\n}>();\n\ndefineSlots<{\n  /** Replaces the end of a row (after the text and badge), such as a Button or IconButton. */\n  action?(props: { item: DescriptionItem; index: number }): unknown;\n}>();\n\nconst t = useMessages();\nconst shown = computed(() => props.items.filter((it): it is DescriptionItem => Boolean(it)));\n/** No labels anywhere: render a plain list of facts instead of term/description pairs. */\nconst plain = computed(() => shown.value.length > 0 && shown.value.every((it) => !it.label));\n\nconst Render = Object.assign((p: { value: VNodeChild }) => p.value, { props: [\"value\"] });\n\nfunction say(key: string, fallback: string, vars?: Record<string, string>) {\n  const text = t(key, vars);\n  return text === key ? fallback.replace(/\\{(\\w+)\\}/g, (m, k: string) => vars?.[k] ?? m) : text;\n}\n</script>\n\n<template>\n  <ul v-if=\"plain\" class=\"e-facts e-facts--plain\">\n    <li v-for=\"(item, i) in shown\" :key=\"i\" class=\"e-fact\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span class=\"e-fact-text\"><Render :value=\"item.text\" /></span>\n      <EStamp v-if=\"item.badge\" :tone=\"item.badgeTone\" 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":""}

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    --e-bc: var(--e-secondary);\n\n    outline: var(--e-stroke-hair) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\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    --e-bc: var(--e-secondary);\n\n    outline: var(--e-stroke-hair) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\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/ExpandableRow/EExpandableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"EExpandableRow.js","names":["_sfc_main","EExpandableRow_vue_vue_type_script_setup_true_lang_default","EExpandableRow_default"],"sources":["../../../src/components/ExpandableRow/EExpandableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The row's name, always visible in the summary. */\n  title: string;\n  /** A muted line under the title. */\n  subtitle?: string;\n}>();\n\ndefineSlots<{\n  /** Before the title, such as an `EStamp`, an icon or a date tile. */\n  leading?(): unknown;\n  /** The value at the end of the summary. Set in tabular mono. */\n  trailing?(): unknown;\n  /** What the row opens to. */\n  default?(): unknown;\n  /** Buttons for the bar at the foot of the opened row. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <details class=\"e-xrow\">\n    <summary :class=\"{ 'e-xrow-summary--lead': $slots.leading }\">\n      <div v-if=\"$slots.leading\" class=\"e-xrow-lead\"><slot name=\"leading\" /></div>\n      <div class=\"e-xrow-main\">\n        <p class=\"e-xrow-title\">{{ title }}</p>\n        <p v-if=\"subtitle\" class=\"e-xrow-sub\">{{ subtitle }}</p>\n      </div>\n      <span v-if=\"$slots.trailing\" class=\"e-xrow-trail\"><slot name=\"trailing\" /></span>\n    </summary>\n    <div class=\"e-xrow-body\">\n      <div v-if=\"$slots.default\" class=\"e-xrow-content\"><slot /></div>\n      <EActions v-if=\"$slots.actions\" bar><slot name=\"actions\" /></EActions>\n    </div>\n  </details>\n</template>\n\n<style>\n@layer e.containers {\n  .e-xrow {\n    border-bottom: var(--e-depth) solid var(--e-border);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\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-xrow:not([open]):hover {\n    border-bottom-color: var(--e-border-strong);\n    background: var(--e-surface-hover);\n    box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: 0;\n  }\n\n  .e-xrow[open] {\n    border-bottom-width: 0;\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-xrow[open]:has(> summary:hover) {\n    background-color: var(--e-surface-hover);\n    box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: 0;\n  }\n\n  .e-xrow[open] > summary:hover {\n    border-bottom-color: var(--e-border-strong);\n  }\n\n  .e-xrow > summary {\n    border-radius: var(--e-radius-md);\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: center;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    list-style: none;\n    cursor: pointer;\n  }\n\n  /* The lead column is auto; a pattern sets --e-xrow-lead to a fixed width so rows in a list line up. */\n  .e-xrow > .e-xrow-summary--lead {\n    grid-template-columns: var(--e-xrow-lead, auto) minmax(0, 1fr) auto;\n  }\n\n  .e-xrow > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-xrow > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-xrow-lead {\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    justify-self: start;\n    align-self: center;\n    min-width: 0;\n  }\n\n  .e-xrow-main {\n    min-width: 0;\n  }\n\n  .e-xrow-title {\n    margin: 0;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    overflow-wrap: anywhere;\n    text-wrap: balance;\n  }\n\n  .e-xrow-sub {\n    margin: var(--e-space-1) 0 0;\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-xrow-trail {\n    min-width: 5.5rem;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n    text-align: end;\n  }\n\n  .e-xrow[open] > summary {\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-xrow-body {\n    container-type: inline-size;\n    border-radius: 0 0 var(--e-radius-md) var(--e-radius-md);\n  }\n\n  .e-xrow-content {\n    display: grid;\n    gap: var(--e-space-2);\n    padding: var(--e-space-4);\n  }\n\n  .e-xrow-body > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  @media (max-width: 32rem) {\n    .e-xrow > .e-xrow-summary--lead {\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n    }\n\n    .e-xrow-summary--lead > .e-xrow-lead {\n      grid-column: 1 / -1;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-xrow {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-xrow {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-xrow,\n    .e-xrow:not([open]):hover,\n    .e-xrow[open]:has(> summary:hover) {\n      border-color: CanvasText;\n      outline-color: CanvasText;\n    }\n\n    .e-xrow > summary:focus-visible {\n      outline-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EExpandableRow.js","names":["_sfc_main","EExpandableRow_vue_vue_type_script_setup_true_lang_default","EExpandableRow_default"],"sources":["../../../src/components/ExpandableRow/EExpandableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The row's name, always visible in the summary. */\n  title: string;\n  /** A muted line under the title. */\n  subtitle?: string;\n}>();\n\ndefineSlots<{\n  /** Before the title, such as an `EStamp`, an icon or a date tile. */\n  leading?(): unknown;\n  /** The value at the end of the summary. Set in tabular mono. */\n  trailing?(): unknown;\n  /** What the row opens to. */\n  default?(): unknown;\n  /** Buttons for the bar at the foot of the opened row. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <details class=\"e-xrow\">\n    <summary :class=\"{ 'e-xrow-summary--lead': $slots.leading }\">\n      <div v-if=\"$slots.leading\" class=\"e-xrow-lead\"><slot name=\"leading\" /></div>\n      <div class=\"e-xrow-main\">\n        <p class=\"e-xrow-title\">{{ title }}</p>\n        <p v-if=\"subtitle\" class=\"e-xrow-sub\">{{ subtitle }}</p>\n      </div>\n      <span v-if=\"$slots.trailing\" class=\"e-xrow-trail\"><slot name=\"trailing\" /></span>\n    </summary>\n    <div class=\"e-xrow-body\">\n      <div v-if=\"$slots.default\" class=\"e-xrow-content\"><slot /></div>\n      <EActions v-if=\"$slots.actions\" bar><slot name=\"actions\" /></EActions>\n    </div>\n  </details>\n</template>\n\n<style>\n@layer e.containers {\n  .e-xrow {\n    --e-band-c: var(--e-border);\n\n    border-bottom: var(--e-depth) solid transparent;\n    border-radius: var(--e-radius-md);\n    background-color: var(--e-surface);\n    background-image: linear-gradient(to top, var(--e-band-c) var(--e-depth), transparent var(--e-depth));\n    background-origin: border-box;\n    background-repeat: no-repeat;\n    box-shadow: var(--e-edge);\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-xrow:not([open]):hover {\n    --e-band-c: var(--e-border-strong);\n\n    background-color: var(--e-surface-hover);\n    box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n  }\n\n  .e-xrow[open] {\n    border-bottom-width: 0;\n    background-image: none;\n    box-shadow: var(--e-edge);\n  }\n\n  .e-xrow[open]:has(> summary:hover) {\n    background-color: var(--e-surface-hover);\n    box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n  }\n\n  .e-xrow[open] > summary:hover {\n    border-bottom-color: var(--e-border-strong);\n  }\n\n  .e-xrow > summary {\n    border-radius: var(--e-radius-md);\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: center;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    list-style: none;\n    cursor: pointer;\n  }\n\n  /* The lead column is auto; a pattern sets --e-xrow-lead to a fixed width so rows in a list line up. */\n  .e-xrow > .e-xrow-summary--lead {\n    grid-template-columns: var(--e-xrow-lead, auto) minmax(0, 1fr) auto;\n  }\n\n  .e-xrow > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-xrow > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-xrow-lead {\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    justify-self: start;\n    align-self: center;\n    min-width: 0;\n  }\n\n  .e-xrow-main {\n    min-width: 0;\n  }\n\n  .e-xrow-title {\n    margin: 0;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    overflow-wrap: anywhere;\n    text-wrap: balance;\n  }\n\n  .e-xrow-sub {\n    margin: var(--e-space-1) 0 0;\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-xrow-trail {\n    min-width: 5.5rem;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n    text-align: end;\n  }\n\n  .e-xrow[open] > summary {\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-xrow-body {\n    container-type: inline-size;\n    border-radius: 0 0 var(--e-radius-md) var(--e-radius-md);\n  }\n\n  .e-xrow-content {\n    display: grid;\n    gap: var(--e-space-2);\n    padding: var(--e-space-4);\n  }\n\n  .e-xrow-body > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  @media (max-width: 32rem) {\n    .e-xrow > .e-xrow-summary--lead {\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n    }\n\n    .e-xrow-summary--lead > .e-xrow-lead {\n      grid-column: 1 / -1;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-xrow {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-xrow {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-xrow,\n    .e-xrow:not([open]):hover,\n    .e-xrow[open]:has(> summary:hover) {\n      border-color: CanvasText;\n      outline-color: CanvasText;\n    }\n\n    .e-xrow > summary:focus-visible {\n      outline-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ExpandableRow/EExpandableRow.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EExpandableRow.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_renderSlot","_createCommentVNode","_toDisplayString","_createBlock","EActions","_withCtx","EActions_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","EExpandableRow_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","createElementVNode","normalizeClass","_ctx","renderSlot","createCommentVNode","toDisplayString","__props","createBlock","withCtx"],"sources":["../../../src/components/ExpandableRow/EExpandableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The row's name, always visible in the summary. */\n  title: string;\n  /** A muted line under the title. */\n  subtitle?: string;\n}>();\n\ndefineSlots<{\n  /** Before the title, such as an `EStamp`, an icon or a date tile. */\n  leading?(): unknown;\n  /** The value at the end of the summary. Set in tabular mono. */\n  trailing?(): unknown;\n  /** What the row opens to. */\n  default?(): unknown;\n  /** Buttons for the bar at the foot of the opened row. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <details class=\"e-xrow\">\n    <summary :class=\"{ 'e-xrow-summary--lead': $slots.leading }\">\n      <div v-if=\"$slots.leading\" class=\"e-xrow-lead\"><slot name=\"leading\" /></div>\n      <div class=\"e-xrow-main\">\n        <p class=\"e-xrow-title\">{{ title }}</p>\n        <p v-if=\"subtitle\" class=\"e-xrow-sub\">{{ subtitle }}</p>\n      </div>\n      <span v-if=\"$slots.trailing\" class=\"e-xrow-trail\"><slot name=\"trailing\" /></span>\n    </summary>\n    <div class=\"e-xrow-body\">\n      <div v-if=\"$slots.default\" class=\"e-xrow-content\"><slot /></div>\n      <EActions v-if=\"$slots.actions\" bar><slot name=\"actions\" /></EActions>\n    </div>\n  </details>\n</template>\n\n<style>\n@layer e.containers {\n  .e-xrow {\n    border-bottom: var(--e-depth) solid var(--e-border);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\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-xrow:not([open]):hover {\n    border-bottom-color: var(--e-border-strong);\n    background: var(--e-surface-hover);\n    box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: 0;\n  }\n\n  .e-xrow[open] {\n    border-bottom-width: 0;\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-xrow[open]:has(> summary:hover) {\n    background-color: var(--e-surface-hover);\n    box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: 0;\n  }\n\n  .e-xrow[open] > summary:hover {\n    border-bottom-color: var(--e-border-strong);\n  }\n\n  .e-xrow > summary {\n    border-radius: var(--e-radius-md);\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: center;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    list-style: none;\n    cursor: pointer;\n  }\n\n  /* The lead column is auto; a pattern sets --e-xrow-lead to a fixed width so rows in a list line up. */\n  .e-xrow > .e-xrow-summary--lead {\n    grid-template-columns: var(--e-xrow-lead, auto) minmax(0, 1fr) auto;\n  }\n\n  .e-xrow > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-xrow > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-xrow-lead {\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    justify-self: start;\n    align-self: center;\n    min-width: 0;\n  }\n\n  .e-xrow-main {\n    min-width: 0;\n  }\n\n  .e-xrow-title {\n    margin: 0;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    overflow-wrap: anywhere;\n    text-wrap: balance;\n  }\n\n  .e-xrow-sub {\n    margin: var(--e-space-1) 0 0;\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-xrow-trail {\n    min-width: 5.5rem;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n    text-align: end;\n  }\n\n  .e-xrow[open] > summary {\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-xrow-body {\n    container-type: inline-size;\n    border-radius: 0 0 var(--e-radius-md) var(--e-radius-md);\n  }\n\n  .e-xrow-content {\n    display: grid;\n    gap: var(--e-space-2);\n    padding: var(--e-space-4);\n  }\n\n  .e-xrow-body > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  @media (max-width: 32rem) {\n    .e-xrow > .e-xrow-summary--lead {\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n    }\n\n    .e-xrow-summary--lead > .e-xrow-lead {\n      grid-column: 1 / -1;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-xrow {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-xrow {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-xrow,\n    .e-xrow:not([open]):hover,\n    .e-xrow[open]:has(> summary:hover) {\n      border-color: CanvasText;\n      outline-color: CanvasText;\n    }\n\n    .e-xrow > summary:focus-visible {\n      outline-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;E,kBAwBEC,EAAA,GAAAC,EAaU,WAbVU,GAaU,CAZRT,EAOU,WAAA,EAPA,OAAKC,EAAA,EAAA,wBAA4BJ,EAAAA,OAAO,QAAO,CAAA,E;GAC5CA,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAA4E,OAA5EW,GAA4E,CAA7BR,EAAuBoB,EAAA,QAAA,SAAA,C;GACtEtB,EAGM,OAHNW,GAGM,CAFJX,EAAuC,KAAvCY,GAAuCR,EAAZsB,EAAA,KAAK,GAAA,CAAA,GACvBA,EAAA,YAAT5B,EAAA,GAAAC,EAAwD,KAAxDc,GAAwDT,EAAfsB,EAAA,QAAQ,GAAA,CAAA,K;GAEvC7B,EAAAA,OAAO,YAAnBC,EAAA,GAAAC,EAAiF,QAAjFe,GAAiF,CAA/BZ,EAAwBoB,EAAA,QAAA,UAAA,C;E,OAE5EtB,EAGM,OAHNe,GAGM,CAFOlB,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAAgE,OAAhEiB,GAAgE,CAAdd,EAAQoB,EAAA,QAAA,SAAA,C,iBAC1CzB,EAAAA,OAAO,WAAvBC,EAAA,GAAAO,EAAsEC,GAAA;;GAAtC,KAAA;;GAAI,SAAAC,QAAuB,CAAvBL,EAAuBoB,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EExpandableRow.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_renderSlot","_createCommentVNode","_toDisplayString","_createBlock","EActions","_withCtx","EActions_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","EExpandableRow_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","createElementVNode","normalizeClass","_ctx","renderSlot","createCommentVNode","toDisplayString","__props","createBlock","withCtx"],"sources":["../../../src/components/ExpandableRow/EExpandableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** The row's name, always visible in the summary. */\n  title: string;\n  /** A muted line under the title. */\n  subtitle?: string;\n}>();\n\ndefineSlots<{\n  /** Before the title, such as an `EStamp`, an icon or a date tile. */\n  leading?(): unknown;\n  /** The value at the end of the summary. Set in tabular mono. */\n  trailing?(): unknown;\n  /** What the row opens to. */\n  default?(): unknown;\n  /** Buttons for the bar at the foot of the opened row. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <details class=\"e-xrow\">\n    <summary :class=\"{ 'e-xrow-summary--lead': $slots.leading }\">\n      <div v-if=\"$slots.leading\" class=\"e-xrow-lead\"><slot name=\"leading\" /></div>\n      <div class=\"e-xrow-main\">\n        <p class=\"e-xrow-title\">{{ title }}</p>\n        <p v-if=\"subtitle\" class=\"e-xrow-sub\">{{ subtitle }}</p>\n      </div>\n      <span v-if=\"$slots.trailing\" class=\"e-xrow-trail\"><slot name=\"trailing\" /></span>\n    </summary>\n    <div class=\"e-xrow-body\">\n      <div v-if=\"$slots.default\" class=\"e-xrow-content\"><slot /></div>\n      <EActions v-if=\"$slots.actions\" bar><slot name=\"actions\" /></EActions>\n    </div>\n  </details>\n</template>\n\n<style>\n@layer e.containers {\n  .e-xrow {\n    --e-band-c: var(--e-border);\n\n    border-bottom: var(--e-depth) solid transparent;\n    border-radius: var(--e-radius-md);\n    background-color: var(--e-surface);\n    background-image: linear-gradient(to top, var(--e-band-c) var(--e-depth), transparent var(--e-depth));\n    background-origin: border-box;\n    background-repeat: no-repeat;\n    box-shadow: var(--e-edge);\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-xrow:not([open]):hover {\n    --e-band-c: var(--e-border-strong);\n\n    background-color: var(--e-surface-hover);\n    box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n  }\n\n  .e-xrow[open] {\n    border-bottom-width: 0;\n    background-image: none;\n    box-shadow: var(--e-edge);\n  }\n\n  .e-xrow[open]:has(> summary:hover) {\n    background-color: var(--e-surface-hover);\n    box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n  }\n\n  .e-xrow[open] > summary:hover {\n    border-bottom-color: var(--e-border-strong);\n  }\n\n  .e-xrow > summary {\n    border-radius: var(--e-radius-md);\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: center;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    list-style: none;\n    cursor: pointer;\n  }\n\n  /* The lead column is auto; a pattern sets --e-xrow-lead to a fixed width so rows in a list line up. */\n  .e-xrow > .e-xrow-summary--lead {\n    grid-template-columns: var(--e-xrow-lead, auto) minmax(0, 1fr) auto;\n  }\n\n  .e-xrow > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-xrow > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-xrow-lead {\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    justify-self: start;\n    align-self: center;\n    min-width: 0;\n  }\n\n  .e-xrow-main {\n    min-width: 0;\n  }\n\n  .e-xrow-title {\n    margin: 0;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    overflow-wrap: anywhere;\n    text-wrap: balance;\n  }\n\n  .e-xrow-sub {\n    margin: var(--e-space-1) 0 0;\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-xrow-trail {\n    min-width: 5.5rem;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n    text-align: end;\n  }\n\n  .e-xrow[open] > summary {\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-xrow-body {\n    container-type: inline-size;\n    border-radius: 0 0 var(--e-radius-md) var(--e-radius-md);\n  }\n\n  .e-xrow-content {\n    display: grid;\n    gap: var(--e-space-2);\n    padding: var(--e-space-4);\n  }\n\n  .e-xrow-body > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  @media (max-width: 32rem) {\n    .e-xrow > .e-xrow-summary--lead {\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n    }\n\n    .e-xrow-summary--lead > .e-xrow-lead {\n      grid-column: 1 / -1;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-xrow {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-xrow {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-xrow,\n    .e-xrow:not([open]):hover,\n    .e-xrow[open]:has(> summary:hover) {\n      border-color: CanvasText;\n      outline-color: CanvasText;\n    }\n\n    .e-xrow > summary:focus-visible {\n      outline-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;E,kBAwBEC,EAAA,GAAAC,EAaU,WAbVU,GAaU,CAZRT,EAOU,WAAA,EAPA,OAAKC,EAAA,EAAA,wBAA4BJ,EAAAA,OAAO,QAAO,CAAA,E;GAC5CA,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAA4E,OAA5EW,GAA4E,CAA7BR,EAAuBoB,EAAA,QAAA,SAAA,C;GACtEtB,EAGM,OAHNW,GAGM,CAFJX,EAAuC,KAAvCY,GAAuCR,EAAZsB,EAAA,KAAK,GAAA,CAAA,GACvBA,EAAA,YAAT5B,EAAA,GAAAC,EAAwD,KAAxDc,GAAwDT,EAAfsB,EAAA,QAAQ,GAAA,CAAA,K;GAEvC7B,EAAAA,OAAO,YAAnBC,EAAA,GAAAC,EAAiF,QAAjFe,GAAiF,CAA/BZ,EAAwBoB,EAAA,QAAA,UAAA,C;E,OAE5EtB,EAGM,OAHNe,GAGM,CAFOlB,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAAgE,OAAhEiB,GAAgE,CAAdd,EAAQoB,EAAA,QAAA,SAAA,C,iBAC1CzB,EAAAA,OAAO,WAAvBC,EAAA,GAAAO,EAAsEC,GAAA;;GAAtC,KAAA;;GAAI,SAAAC,QAAuB,CAAvBL,EAAuBoB,EAAA,QAAA,SAAA,C"}

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\n    --e-bc: var(--e-border-strong);\n\n    outline: var(--e-stroke-hair) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\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\n    --e-bc: var(--e-border-strong);\n\n    outline: var(--e-stroke-hair) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\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/Menu/EMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"EMenu.js","names":["_sfc_main","EMenu_vue_vue_type_script_setup_true_lang_default","EMenu_default"],"sources":["../../../src/components/Menu/EMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { watch } from \"vue\";\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"reka-ui\";\nimport EButton from \"../Button/EButton.vue\";\nimport EDivider from \"../Divider/EDivider.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\n/** An action in the menu. */\nexport interface EMenuAction {\n  /** What the row says: a verb. */\n  label: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** Called when the row is chosen, after the menu closes. */\n  onClick?: () => void;\n  /** Red text for a destructive action. Put it last, after a divider. */\n  danger?: boolean;\n  /** Not choosable. Stays visible, muted. */\n  disabled?: boolean;\n  divider?: undefined;\n}\n/** A rule between groups of actions. */\nexport interface EMenuDivider {\n  divider: true;\n}\nexport type EMenuItem = EMenuAction | EMenuDivider;\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The button's text. With a `trigger` slot it is not shown; name your own trigger. */\n    label: string;\n    /** The actions, in order. Action: `{ label, icon?, onClick?, danger?, disabled? }`; `{ divider: true }` draws a rule. Put destructive last. */\n    items: readonly EMenuItem[];\n    /** The look of the button. */\n    variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"quiet\";\n    /** An icon before the label. */\n    icon?: IconProp;\n    /** Which edge of the trigger the menu lines up with. Use `end` for a trigger at the end of a bar. */\n    align?: \"start\" | \"end\";\n  }>(),\n  { variant: \"outline\", align: \"start\" },\n);\n\nconst emit = defineEmits<{\n  /** An action was chosen. Also calls that item's own `onClick`. */\n  select: [item: EMenuAction];\n}>();\n\ndefineSlots<{\n  /** Your own trigger, one element that takes a click, such as a `button` around an avatar. It replaces the button; give it an accessible name. */\n  trigger?(): unknown;\n}>();\n\n/** The open state. Opening it from outside moves no focus. */\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst portal = usePortalTarget();\n\nfunction choose(item: EMenuAction) {\n  item.onClick?.();\n  emit(\"select\", item);\n}\n\nlet byPerson = false;\nlet hadFocus = false;\nconst intent = () => (byPerson = true);\n\nwatch(\n  open,\n  (isOpen) => {\n    if (!isOpen) hadFocus = !!document.activeElement?.closest(\"[role=menu]\");\n  },\n  { flush: \"sync\" },\n);\n\nfunction focusFirst(event: Event) {\n  event.preventDefault();\n  const content = event.target as HTMLElement | null;\n  if (!byPerson) return;\n  byPerson = false;\n  requestAnimationFrame(() => {\n    content?.querySelector<HTMLElement>(\"[role=menuitem]:not([data-disabled])\")?.focus({ preventScroll: true });\n  });\n}\n\nfunction returnFocus(event: Event) {\n  byPerson = false;\n  if (!hadFocus) event.preventDefault();\n}\n</script>\n\n<template>\n  <DropdownMenuRoot v-model:open=\"open\" :modal=\"false\">\n    <DropdownMenuTrigger as-child @click=\"intent\" @keydown=\"intent\">\n      <slot name=\"trigger\">\n        <EButton :variant=\"variant\" :icon=\"icon\" v-bind=\"$attrs\">\n          {{ label }}\n          <EIcon name=\"chevron-down\" />\n        </EButton>\n      </slot>\n    </DropdownMenuTrigger>\n    <DropdownMenuPortal :to=\"portal\">\n      <DropdownMenuContent\n        class=\"e-popover e-menu e-root\"\n        :align=\"align\"\n        :side-offset=\"8\"\n        :collision-padding=\"16\"\n        loop\n        @open-auto-focus=\"focusFirst\"\n        @close-auto-focus=\"returnFocus\"\n      >\n        <template v-for=\"(item, i) in items\" :key=\"i\">\n          <DropdownMenuSeparator v-if=\"item.divider\" as-child>\n            <EDivider />\n          </DropdownMenuSeparator>\n          <DropdownMenuItem\n            v-else\n            class=\"e-menu-item\"\n            :class=\"{ 'e-menu-item--danger': item.danger }\"\n            :disabled=\"item.disabled\"\n            @select=\"choose(item)\"\n          >\n            <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n            {{ item.label }}\n          </DropdownMenuItem>\n        </template>\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenuRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-menu {\n    width: max-content;\n    min-width: 12rem;\n    max-width: min(20rem, calc(100vw - 2 * var(--e-space-4)));\n    padding: var(--e-space-1);\n  }\n\n  .e-menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    width: 100%;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-3);\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .e-menu-item:hover,\n  .e-menu-item:focus-visible,\n  .e-menu-item[data-highlighted] {\n    background: var(--e-surface-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-card));\n  }\n\n  .e-menu-item--danger {\n    color: var(--e-danger);\n  }\n\n  .e-menu-item[disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-menu .e-divider {\n    margin: var(--e-space-1) 0;\n  }\n\n  .e-menu-item[data-disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-menu-item[disabled]:hover,\n  .e-menu-item[data-disabled][data-highlighted] {\n    background: transparent;\n    box-shadow: none;\n    outline: 0;\n  }\n\n  @media (forced-colors: active) {\n    .e-menu-item[disabled],\n    .e-menu-item[data-disabled] {\n      color: GrayText;\n    }\n\n    .e-menu-item:hover,\n    .e-menu-item:focus-visible,\n    .e-menu-item[data-highlighted] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EMenu.js","names":["_sfc_main","EMenu_vue_vue_type_script_setup_true_lang_default","EMenu_default"],"sources":["../../../src/components/Menu/EMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { watch } from \"vue\";\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"reka-ui\";\nimport EButton from \"../Button/EButton.vue\";\nimport EDivider from \"../Divider/EDivider.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\n/** An action in the menu. */\nexport interface EMenuAction {\n  /** What the row says: a verb. */\n  label: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** Called when the row is chosen, after the menu closes. */\n  onClick?: () => void;\n  /** Red text for a destructive action. Put it last, after a divider. */\n  danger?: boolean;\n  /** Not choosable. Stays visible, muted. */\n  disabled?: boolean;\n  divider?: undefined;\n}\n/** A rule between groups of actions. */\nexport interface EMenuDivider {\n  divider: true;\n}\nexport type EMenuItem = EMenuAction | EMenuDivider;\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The button's text. With a `trigger` slot it is not shown; name your own trigger. */\n    label: string;\n    /** The actions, in order. Action: `{ label, icon?, onClick?, danger?, disabled? }`; `{ divider: true }` draws a rule. Put destructive last. */\n    items: readonly EMenuItem[];\n    /** The look of the button. */\n    variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"quiet\";\n    /** An icon before the label. */\n    icon?: IconProp;\n    /** Which edge of the trigger the menu lines up with. Use `end` for a trigger at the end of a bar. */\n    align?: \"start\" | \"end\";\n  }>(),\n  { variant: \"outline\", align: \"start\" },\n);\n\nconst emit = defineEmits<{\n  /** An action was chosen. Also calls that item's own `onClick`. */\n  select: [item: EMenuAction];\n}>();\n\ndefineSlots<{\n  /** Your own trigger, one element that takes a click, such as a `button` around an avatar. It replaces the button; give it an accessible name. */\n  trigger?(): unknown;\n}>();\n\n/** The open state. Opening it from outside moves no focus. */\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst portal = usePortalTarget();\n\nfunction choose(item: EMenuAction) {\n  item.onClick?.();\n  emit(\"select\", item);\n}\n\nlet byPerson = false;\nlet hadFocus = false;\nconst intent = () => (byPerson = true);\n\nwatch(\n  open,\n  (isOpen) => {\n    if (!isOpen) hadFocus = !!document.activeElement?.closest(\"[role=menu]\");\n  },\n  { flush: \"sync\" },\n);\n\nfunction focusFirst(event: Event) {\n  event.preventDefault();\n  const content = event.target as HTMLElement | null;\n  if (!byPerson) return;\n  byPerson = false;\n  requestAnimationFrame(() => {\n    content?.querySelector<HTMLElement>(\"[role=menuitem]:not([data-disabled])\")?.focus({ preventScroll: true });\n  });\n}\n\nfunction returnFocus(event: Event) {\n  byPerson = false;\n  if (!hadFocus) event.preventDefault();\n}\n</script>\n\n<template>\n  <DropdownMenuRoot v-model:open=\"open\" :modal=\"false\">\n    <DropdownMenuTrigger as-child @click=\"intent\" @keydown=\"intent\">\n      <slot name=\"trigger\">\n        <EButton :variant=\"variant\" :icon=\"icon\" v-bind=\"$attrs\">\n          {{ label }}\n          <EIcon name=\"chevron-down\" />\n        </EButton>\n      </slot>\n    </DropdownMenuTrigger>\n    <DropdownMenuPortal :to=\"portal\">\n      <DropdownMenuContent\n        class=\"e-popover e-menu e-root\"\n        :align=\"align\"\n        :side-offset=\"8\"\n        :collision-padding=\"16\"\n        loop\n        @open-auto-focus=\"focusFirst\"\n        @close-auto-focus=\"returnFocus\"\n      >\n        <template v-for=\"(item, i) in items\" :key=\"i\">\n          <DropdownMenuSeparator v-if=\"item.divider\" as-child>\n            <EDivider />\n          </DropdownMenuSeparator>\n          <DropdownMenuItem\n            v-else\n            class=\"e-menu-item\"\n            :class=\"{ 'e-menu-item--danger': item.danger }\"\n            :disabled=\"item.disabled\"\n            @select=\"choose(item)\"\n          >\n            <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n            {{ item.label }}\n          </DropdownMenuItem>\n        </template>\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenuRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-menu {\n    width: max-content;\n    min-width: 12rem;\n    max-width: min(20rem, calc(100vw - 2 * var(--e-space-4)));\n    padding: var(--e-space-1);\n  }\n\n  .e-menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    width: 100%;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-3);\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .e-menu-item:hover,\n  .e-menu-item:focus-visible,\n  .e-menu-item[data-highlighted] {\n    background: var(--e-surface-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n  }\n\n  .e-menu-item--danger {\n    color: var(--e-danger);\n  }\n\n  .e-menu-item[disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-menu .e-divider {\n    margin: var(--e-space-1) 0;\n  }\n\n  .e-menu-item[data-disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-menu-item[disabled]:hover,\n  .e-menu-item[data-disabled][data-highlighted] {\n    background: transparent;\n    box-shadow: none;\n    outline: 0;\n  }\n\n  @media (forced-colors: active) {\n    .e-menu-item[disabled],\n    .e-menu-item[data-disabled] {\n      color: GrayText;\n    }\n\n    .e-menu-item:hover,\n    .e-menu-item:focus-visible,\n    .e-menu-item[data-highlighted] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Menu/EMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","EButton","_mergeProps","_createTextVNode","_toDisplayString","EIcon","_createElementBlock","_Fragment","_renderList","EDivider","_normalizeClass","_createCommentVNode","EIcon_default","EButton_default","EDivider_default","EMenu_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","emit","open","useModel","__props","portal","usePortalTarget","choose","item","byPerson","hadFocus","intent","isOpen","focusFirst","content","event","returnFocus","openBlock","createBlock","unref","DropdownMenuRoot","_cache","$event","withCtx","createVNode","DropdownMenuTrigger","renderSlot","_ctx","mergeProps","createTextVNode","toDisplayString","DropdownMenuPortal","DropdownMenuContent","createElementBlock","Fragment","renderList","i","DropdownMenuSeparator","DropdownMenuItem","normalizeClass","createCommentVNode"],"sources":["../../../src/components/Menu/EMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { watch } from \"vue\";\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"reka-ui\";\nimport EButton from \"../Button/EButton.vue\";\nimport EDivider from \"../Divider/EDivider.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\n/** An action in the menu. */\nexport interface EMenuAction {\n  /** What the row says: a verb. */\n  label: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** Called when the row is chosen, after the menu closes. */\n  onClick?: () => void;\n  /** Red text for a destructive action. Put it last, after a divider. */\n  danger?: boolean;\n  /** Not choosable. Stays visible, muted. */\n  disabled?: boolean;\n  divider?: undefined;\n}\n/** A rule between groups of actions. */\nexport interface EMenuDivider {\n  divider: true;\n}\nexport type EMenuItem = EMenuAction | EMenuDivider;\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The button's text. With a `trigger` slot it is not shown; name your own trigger. */\n    label: string;\n    /** The actions, in order. Action: `{ label, icon?, onClick?, danger?, disabled? }`; `{ divider: true }` draws a rule. Put destructive last. */\n    items: readonly EMenuItem[];\n    /** The look of the button. */\n    variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"quiet\";\n    /** An icon before the label. */\n    icon?: IconProp;\n    /** Which edge of the trigger the menu lines up with. Use `end` for a trigger at the end of a bar. */\n    align?: \"start\" | \"end\";\n  }>(),\n  { variant: \"outline\", align: \"start\" },\n);\n\nconst emit = defineEmits<{\n  /** An action was chosen. Also calls that item's own `onClick`. */\n  select: [item: EMenuAction];\n}>();\n\ndefineSlots<{\n  /** Your own trigger, one element that takes a click, such as a `button` around an avatar. It replaces the button; give it an accessible name. */\n  trigger?(): unknown;\n}>();\n\n/** The open state. Opening it from outside moves no focus. */\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst portal = usePortalTarget();\n\nfunction choose(item: EMenuAction) {\n  item.onClick?.();\n  emit(\"select\", item);\n}\n\nlet byPerson = false;\nlet hadFocus = false;\nconst intent = () => (byPerson = true);\n\nwatch(\n  open,\n  (isOpen) => {\n    if (!isOpen) hadFocus = !!document.activeElement?.closest(\"[role=menu]\");\n  },\n  { flush: \"sync\" },\n);\n\nfunction focusFirst(event: Event) {\n  event.preventDefault();\n  const content = event.target as HTMLElement | null;\n  if (!byPerson) return;\n  byPerson = false;\n  requestAnimationFrame(() => {\n    content?.querySelector<HTMLElement>(\"[role=menuitem]:not([data-disabled])\")?.focus({ preventScroll: true });\n  });\n}\n\nfunction returnFocus(event: Event) {\n  byPerson = false;\n  if (!hadFocus) event.preventDefault();\n}\n</script>\n\n<template>\n  <DropdownMenuRoot v-model:open=\"open\" :modal=\"false\">\n    <DropdownMenuTrigger as-child @click=\"intent\" @keydown=\"intent\">\n      <slot name=\"trigger\">\n        <EButton :variant=\"variant\" :icon=\"icon\" v-bind=\"$attrs\">\n          {{ label }}\n          <EIcon name=\"chevron-down\" />\n        </EButton>\n      </slot>\n    </DropdownMenuTrigger>\n    <DropdownMenuPortal :to=\"portal\">\n      <DropdownMenuContent\n        class=\"e-popover e-menu e-root\"\n        :align=\"align\"\n        :side-offset=\"8\"\n        :collision-padding=\"16\"\n        loop\n        @open-auto-focus=\"focusFirst\"\n        @close-auto-focus=\"returnFocus\"\n      >\n        <template v-for=\"(item, i) in items\" :key=\"i\">\n          <DropdownMenuSeparator v-if=\"item.divider\" as-child>\n            <EDivider />\n          </DropdownMenuSeparator>\n          <DropdownMenuItem\n            v-else\n            class=\"e-menu-item\"\n            :class=\"{ 'e-menu-item--danger': item.danger }\"\n            :disabled=\"item.disabled\"\n            @select=\"choose(item)\"\n          >\n            <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n            {{ item.label }}\n          </DropdownMenuItem>\n        </template>\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenuRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-menu {\n    width: max-content;\n    min-width: 12rem;\n    max-width: min(20rem, calc(100vw - 2 * var(--e-space-4)));\n    padding: var(--e-space-1);\n  }\n\n  .e-menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    width: 100%;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-3);\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .e-menu-item:hover,\n  .e-menu-item:focus-visible,\n  .e-menu-item[data-highlighted] {\n    background: var(--e-surface-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-card));\n  }\n\n  .e-menu-item--danger {\n    color: var(--e-danger);\n  }\n\n  .e-menu-item[disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-menu .e-divider {\n    margin: var(--e-space-1) 0;\n  }\n\n  .e-menu-item[data-disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-menu-item[disabled]:hover,\n  .e-menu-item[data-disabled][data-highlighted] {\n    background: transparent;\n    box-shadow: none;\n    outline: 0;\n  }\n\n  @media (forced-colors: active) {\n    .e-menu-item[disabled],\n    .e-menu-item[data-disabled] {\n      color: GrayText;\n    }\n\n    .e-menu-item:hover,\n    .e-menu-item:focus-visible,\n    .e-menu-item[data-highlighted] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,IAAM0B,IAAOD,GAWPE,IAAO1B,EAAoB4B,GAAC,MAA0B,GAEtDC,IAASC,EAAgB;EAE/B,SAASC,EAAO,GAAmB;GAEjC,AADAC,EAAK,UAAU,GACfP,EAAK,UAAUO,CAAI;EACrB;EAEA,IAAIC,IAAW,IACXC,IAAW,IACTC,UAAgB,IAAW;EAEjC,EACET,IACC,MAAW;GACV,AAAKU,MAAQ,IAAW,CAAC,CAAC,SAAS,eAAe,QAAQ,aAAa;EACzE,GACA,EAAE,OAAO,OAAO,CAClB;EAEA,SAASC,EAAW,GAAc;GAChC,EAAM,eAAe;GACrB,IAAMC,IAAUC,EAAM;GACtB,AAAKN,MACL,IAAW,IACX,4BAA4B;IAC1B,GAAS,cAA2B,sCAAsC,CAAC,EAAE,MAAM,EAAE,eAAe,GAAK,CAAC;GAC5G,CAAC;EACH;EAEA,SAASO,EAAY,GAAc;GAEjC,AADA,IAAW,IACNN,KAAUK,EAAM,eAAe;EACtC;E,kBAIEtC,EAAA,GAAAC,EAoCmBC,EAAAyC,CAAA,GAAA;GApCO,MAAMlB,EAAA;GAAA,iBAAA,AAAAmB,EAAA,QAAA,MAAA,EAAI,QAAAC;GAAG,OAAO;;GAC5C,SAAA1C,QAOsB,CAPtBC,EAOsBF,EAAA8C,CAAA,GAAA;IAPD,YAAA;IAAU,SAAOd;IAAS,WAASA;;IACtD,SAAA/B,QAKO,CALPE,EAKO6C,EAAA,QAAA,WAAA,CAAA,SAAA,CAJL9C,EAGUE,GAHVC,EAGU;KAHA,SAASoB,EAAA;KAAU,MAAMA,EAAA;IAAc7B,GAAAA,EAAAA,MAAM,GAAA;KACrD,SAAAK,QAAW,CAARK,EAAAC,EAAAkB,EAAA,KAAK,IAAG,KACX,CAAA,GAAAvB,EAA6BM,GAAA,EAAtB,MAAK,eAAc,CAAA,C;;;;G,IAIhCN,EA0BqBF,EAAAoD,CAAA,GAAA,EA1BA,IAAIpD,EAAA0B,CAAA,EAAM,GAAA;IAC7B,SAAAzB,QAwBsB,CAxBtBC,EAwBsBF,EAAAqD,CAAA,GAAA;KAvBpB,OAAM;KACL,OAAO5B,EAAA;KACP,eAAa;KACb,qBAAmB;KACpB,MAAA;KACC,iBAAiBS;KACjB,kBAAkBG;;KAET,SAAApC,QAA0B,EAApCH,EAAA,EAAA,GAAAW,EAcWC,GAAA,MAAAC,EAdmBc,EAAA,QAAZ,GAAM,OAAmB3B,EAAA,GAAAW,EAAAC,GAAA,EAAA,KAAA+C,EAAC,GAAA,CACb5B,EAAK,WAAlC/B,EAAA,GAAAC,EAEwBC,EAAA0D,CAAA,GAAA;;MAFmB,YAAA;;MACzC,SAAAzD,QAAY,CAAZC,EAAYU,CAAA,C;;K,OAEdd,EAAA,GAAAC,EASmBC,EAAA2D,CAAA,GAAA;;MAPjB,OAAK9C,EAAA,CAAC,eAAa,EAAA,uBACcgB,EAAK,OAAM,CAAA,CAAA;MAC3C,UAAUA,EAAK;MACf,WAAM,MAAED,EAAOC,CAAI;;MAEpB,SAAA5B,QAA4C,CAA/B4B,EAAK,QAAlB/B,EAAA,GAAAC,EAA4CS,GAAA;;OAAnB,MAAMqB,EAAK;M,oCAAQvB,EAAA,MAC5CC,EAAGsB,EAAK,KAAK,GAAA,CAAA,C"}
+{"version":3,"file":"EMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","EButton","_mergeProps","_createTextVNode","_toDisplayString","EIcon","_createElementBlock","_Fragment","_renderList","EDivider","_normalizeClass","_createCommentVNode","EIcon_default","EButton_default","EDivider_default","EMenu_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","emit","open","useModel","__props","portal","usePortalTarget","choose","item","byPerson","hadFocus","intent","isOpen","focusFirst","content","event","returnFocus","openBlock","createBlock","unref","DropdownMenuRoot","_cache","$event","withCtx","createVNode","DropdownMenuTrigger","renderSlot","_ctx","mergeProps","createTextVNode","toDisplayString","DropdownMenuPortal","DropdownMenuContent","createElementBlock","Fragment","renderList","i","DropdownMenuSeparator","DropdownMenuItem","normalizeClass","createCommentVNode"],"sources":["../../../src/components/Menu/EMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { watch } from \"vue\";\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"reka-ui\";\nimport EButton from \"../Button/EButton.vue\";\nimport EDivider from \"../Divider/EDivider.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\n/** An action in the menu. */\nexport interface EMenuAction {\n  /** What the row says: a verb. */\n  label: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** Called when the row is chosen, after the menu closes. */\n  onClick?: () => void;\n  /** Red text for a destructive action. Put it last, after a divider. */\n  danger?: boolean;\n  /** Not choosable. Stays visible, muted. */\n  disabled?: boolean;\n  divider?: undefined;\n}\n/** A rule between groups of actions. */\nexport interface EMenuDivider {\n  divider: true;\n}\nexport type EMenuItem = EMenuAction | EMenuDivider;\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** The button's text. With a `trigger` slot it is not shown; name your own trigger. */\n    label: string;\n    /** The actions, in order. Action: `{ label, icon?, onClick?, danger?, disabled? }`; `{ divider: true }` draws a rule. Put destructive last. */\n    items: readonly EMenuItem[];\n    /** The look of the button. */\n    variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"quiet\";\n    /** An icon before the label. */\n    icon?: IconProp;\n    /** Which edge of the trigger the menu lines up with. Use `end` for a trigger at the end of a bar. */\n    align?: \"start\" | \"end\";\n  }>(),\n  { variant: \"outline\", align: \"start\" },\n);\n\nconst emit = defineEmits<{\n  /** An action was chosen. Also calls that item's own `onClick`. */\n  select: [item: EMenuAction];\n}>();\n\ndefineSlots<{\n  /** Your own trigger, one element that takes a click, such as a `button` around an avatar. It replaces the button; give it an accessible name. */\n  trigger?(): unknown;\n}>();\n\n/** The open state. Opening it from outside moves no focus. */\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst portal = usePortalTarget();\n\nfunction choose(item: EMenuAction) {\n  item.onClick?.();\n  emit(\"select\", item);\n}\n\nlet byPerson = false;\nlet hadFocus = false;\nconst intent = () => (byPerson = true);\n\nwatch(\n  open,\n  (isOpen) => {\n    if (!isOpen) hadFocus = !!document.activeElement?.closest(\"[role=menu]\");\n  },\n  { flush: \"sync\" },\n);\n\nfunction focusFirst(event: Event) {\n  event.preventDefault();\n  const content = event.target as HTMLElement | null;\n  if (!byPerson) return;\n  byPerson = false;\n  requestAnimationFrame(() => {\n    content?.querySelector<HTMLElement>(\"[role=menuitem]:not([data-disabled])\")?.focus({ preventScroll: true });\n  });\n}\n\nfunction returnFocus(event: Event) {\n  byPerson = false;\n  if (!hadFocus) event.preventDefault();\n}\n</script>\n\n<template>\n  <DropdownMenuRoot v-model:open=\"open\" :modal=\"false\">\n    <DropdownMenuTrigger as-child @click=\"intent\" @keydown=\"intent\">\n      <slot name=\"trigger\">\n        <EButton :variant=\"variant\" :icon=\"icon\" v-bind=\"$attrs\">\n          {{ label }}\n          <EIcon name=\"chevron-down\" />\n        </EButton>\n      </slot>\n    </DropdownMenuTrigger>\n    <DropdownMenuPortal :to=\"portal\">\n      <DropdownMenuContent\n        class=\"e-popover e-menu e-root\"\n        :align=\"align\"\n        :side-offset=\"8\"\n        :collision-padding=\"16\"\n        loop\n        @open-auto-focus=\"focusFirst\"\n        @close-auto-focus=\"returnFocus\"\n      >\n        <template v-for=\"(item, i) in items\" :key=\"i\">\n          <DropdownMenuSeparator v-if=\"item.divider\" as-child>\n            <EDivider />\n          </DropdownMenuSeparator>\n          <DropdownMenuItem\n            v-else\n            class=\"e-menu-item\"\n            :class=\"{ 'e-menu-item--danger': item.danger }\"\n            :disabled=\"item.disabled\"\n            @select=\"choose(item)\"\n          >\n            <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n            {{ item.label }}\n          </DropdownMenuItem>\n        </template>\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenuRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-menu {\n    width: max-content;\n    min-width: 12rem;\n    max-width: min(20rem, calc(100vw - 2 * var(--e-space-4)));\n    padding: var(--e-space-1);\n  }\n\n  .e-menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    width: 100%;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-3);\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .e-menu-item:hover,\n  .e-menu-item:focus-visible,\n  .e-menu-item[data-highlighted] {\n    background: var(--e-surface-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n  }\n\n  .e-menu-item--danger {\n    color: var(--e-danger);\n  }\n\n  .e-menu-item[disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-menu .e-divider {\n    margin: var(--e-space-1) 0;\n  }\n\n  .e-menu-item[data-disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-menu-item[disabled]:hover,\n  .e-menu-item[data-disabled][data-highlighted] {\n    background: transparent;\n    box-shadow: none;\n    outline: 0;\n  }\n\n  @media (forced-colors: active) {\n    .e-menu-item[disabled],\n    .e-menu-item[data-disabled] {\n      color: GrayText;\n    }\n\n    .e-menu-item:hover,\n    .e-menu-item:focus-visible,\n    .e-menu-item[data-highlighted] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,IAAM0B,IAAOD,GAWPE,IAAO1B,EAAoB4B,GAAC,MAA0B,GAEtDC,IAASC,EAAgB;EAE/B,SAASC,EAAO,GAAmB;GAEjC,AADAC,EAAK,UAAU,GACfP,EAAK,UAAUO,CAAI;EACrB;EAEA,IAAIC,IAAW,IACXC,IAAW,IACTC,UAAgB,IAAW;EAEjC,EACET,IACC,MAAW;GACV,AAAKU,MAAQ,IAAW,CAAC,CAAC,SAAS,eAAe,QAAQ,aAAa;EACzE,GACA,EAAE,OAAO,OAAO,CAClB;EAEA,SAASC,EAAW,GAAc;GAChC,EAAM,eAAe;GACrB,IAAMC,IAAUC,EAAM;GACtB,AAAKN,MACL,IAAW,IACX,4BAA4B;IAC1B,GAAS,cAA2B,sCAAsC,CAAC,EAAE,MAAM,EAAE,eAAe,GAAK,CAAC;GAC5G,CAAC;EACH;EAEA,SAASO,EAAY,GAAc;GAEjC,AADA,IAAW,IACNN,KAAUK,EAAM,eAAe;EACtC;E,kBAIEtC,EAAA,GAAAC,EAoCmBC,EAAAyC,CAAA,GAAA;GApCO,MAAMlB,EAAA;GAAA,iBAAA,AAAAmB,EAAA,QAAA,MAAA,EAAI,QAAAC;GAAG,OAAO;;GAC5C,SAAA1C,QAOsB,CAPtBC,EAOsBF,EAAA8C,CAAA,GAAA;IAPD,YAAA;IAAU,SAAOd;IAAS,WAASA;;IACtD,SAAA/B,QAKO,CALPE,EAKO6C,EAAA,QAAA,WAAA,CAAA,SAAA,CAJL9C,EAGUE,GAHVC,EAGU;KAHA,SAASoB,EAAA;KAAU,MAAMA,EAAA;IAAc7B,GAAAA,EAAAA,MAAM,GAAA;KACrD,SAAAK,QAAW,CAARK,EAAAC,EAAAkB,EAAA,KAAK,IAAG,KACX,CAAA,GAAAvB,EAA6BM,GAAA,EAAtB,MAAK,eAAc,CAAA,C;;;;G,IAIhCN,EA0BqBF,EAAAoD,CAAA,GAAA,EA1BA,IAAIpD,EAAA0B,CAAA,EAAM,GAAA;IAC7B,SAAAzB,QAwBsB,CAxBtBC,EAwBsBF,EAAAqD,CAAA,GAAA;KAvBpB,OAAM;KACL,OAAO5B,EAAA;KACP,eAAa;KACb,qBAAmB;KACpB,MAAA;KACC,iBAAiBS;KACjB,kBAAkBG;;KAET,SAAApC,QAA0B,EAApCH,EAAA,EAAA,GAAAW,EAcWC,GAAA,MAAAC,EAdmBc,EAAA,QAAZ,GAAM,OAAmB3B,EAAA,GAAAW,EAAAC,GAAA,EAAA,KAAA+C,EAAC,GAAA,CACb5B,EAAK,WAAlC/B,EAAA,GAAAC,EAEwBC,EAAA0D,CAAA,GAAA;;MAFmB,YAAA;;MACzC,SAAAzD,QAAY,CAAZC,EAAYU,CAAA,C;;K,OAEdd,EAAA,GAAAC,EASmBC,EAAA2D,CAAA,GAAA;;MAPjB,OAAK9C,EAAA,CAAC,eAAa,EAAA,uBACcgB,EAAK,OAAM,CAAA,CAAA;MAC3C,UAAUA,EAAK;MACf,WAAM,MAAED,EAAOC,CAAI;;MAEpB,SAAA5B,QAA4C,CAA/B4B,EAAK,QAAlB/B,EAAA,GAAAC,EAA4CS,GAAA;;OAAnB,MAAMqB,EAAK;M,oCAAQvB,EAAA,MAC5CC,EAAGsB,EAAK,KAAK,GAAA,CAAA,C"}