@eos-ui/vue 0.1.0 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"EDisclosure.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_toDisplayString","_createCommentVNode","_createTextVNode","_renderSlot","_hoisted_1","_hoisted_2","_hoisted_3","EDisclosure_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","props","__props","open","useModel","onToggle","openBlock","createElementBlock","normalizeClass","createElementVNode","Fragment","toDisplayString","createCommentVNode","createTextVNode","renderSlot","_ctx"],"sources":["../../../src/components/Disclosure/EDisclosure.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The summary line you press to open and close. */\n    title: string;\n    /** `row` is flush, with a divider above and a mono title. `card` is a roomy row for stacking, as in Accordion. */\n    variant?: \"row\" | \"card\";\n    /** A short note at the right of the summary. Card variant only. */\n    meta?: string;\n    /** Rows that share a group open one at a time (the native `name` of `details`). */\n    group?: string;\n  }>(),\n  { variant: \"row\" },\n);\n\ndefineSlots<{\n  /** What opens and closes. */\n  default?(): unknown;\n}>();\n\nconst open = defineModel<boolean>(\"open\");\n\nfunction onToggle(e: Event) {\n  open.value = (e.target as HTMLDetailsElement).open;\n}\n</script>\n\n<template>\n  <details\n    class=\"e-disclosure\"\n    :class=\"props.variant === 'card' ? 'e-acc' : 'e-details'\"\n    :name=\"group\"\n    :open=\"open || undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary>\n      <template v-if=\"variant === 'card'\">\n        <span class=\"e-acc-title\">{{ title }}</span>\n        <span v-if=\"meta\" class=\"e-acc-meta\">{{ meta }}</span>\n      </template>\n      <template v-else>{{ title }}</template>\n    </summary>\n    <div :class=\"variant === 'card' ? 'e-acc-body' : 'e-details-body'\"><slot /></div>\n  </details>\n</template>\n\n<style>\n@layer e.containers {\n  .e-details > summary {\n    list-style: none;\n    cursor: pointer;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: var(--e-control-height);\n    padding: var(--e-space-3) 0 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-ink);\n  }\n\n  .e-details > summary::after {\n    content: \"\";\n    flex: none;\n    width: 8px;\n    height: 8px;\n    margin-inline-end: 3px;\n    border-inline-end: 2px solid currentcolor;\n    border-bottom: 2px solid currentcolor;\n    transform: translateY(-2px) rotate(45deg);\n    transition: transform var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-details[open] > summary::after {\n    transform: translateY(2px) rotate(-135deg);\n  }\n\n  .e-details > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-details > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-details > summary:hover {\n    color: var(--e-primary);\n  }\n\n  .e-details[open] > summary {\n    min-height: 0;\n    padding-bottom: var(--e-space-3);\n  }\n\n  .e-details-body {\n    padding-bottom: var(--e-space-2);\n  }\n\n  .e-acc {\n    overflow: hidden;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-disclosure.e-acc + .e-disclosure.e-acc {\n    margin-top: var(--e-space-2);\n  }\n\n  .e-accordion .e-acc {\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  .e-accordion .e-disclosure.e-acc + .e-disclosure.e-acc {\n    margin-top: 0;\n  }\n\n  .e-acc[open] > summary {\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-accordion .e-acc[open] > summary {\n    border-bottom: 0;\n  }\n\n  .e-acc > summary {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: 52px;\n    padding: 0 var(--e-space-4);\n    list-style: none;\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-acc > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-acc > summary::after {\n    content: \"\";\n    flex: none;\n    width: 8px;\n    height: 8px;\n    margin-inline-end: 3px;\n    border-inline-end: 2px solid currentcolor;\n    border-bottom: 2px solid currentcolor;\n    transform: translateY(-2px) rotate(45deg);\n  }\n\n  .e-acc[open] > summary::after {\n    transform: translateY(2px) rotate(-135deg);\n  }\n\n  .e-acc > summary:hover {\n    background: var(--e-surface-tint);\n  }\n\n  .e-acc > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-acc-title {\n    flex: 1;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n  }\n\n  .e-acc-meta {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  .e-acc-body {\n    padding: var(--e-space-2) var(--e-space-4) var(--e-space-4);\n    font: 400 var(--e-text-md) / 1.5 var(--e-font-sans);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-details > summary::after,\n    .e-acc > summary {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAGA,IAAMgB,IAAQC,GAmBRC,IAAOlB,EAAoBiB,GAAC,MAAM;EAExC,SAASG,EAAS,GAAU;GAC1B,EAAK,QAAS,EAAE,OAA8B;EAChD;E,kBAIEnB,EAAA,GAAAC,EAeU,WAAA;GAdR,OAAKC,EAAA,CAAC,gBACEa,EAAM,YAAO,SAAA,UAAA,WAAA,CAAA;GACpB,MAAMC,EAAA;GACN,MAAMC,EAAA,SAAQ,KAAA;GACN;E,IAETd,EAMU,WAAA,MAAA,CALQa,EAAA,YAAO,UAAvBhB,EAAA,GAAAC,EAGWG,GAAA,EAAA,KAAA,EAAA,GAAA,CAFTD,EAA4C,QAA5CO,GAA4CL,EAAfW,EAAA,KAAK,GAAA,CAAA,GACtBA,EAAA,QAAZhB,EAAA,GAAAC,EAAsD,QAAtDU,GAAsDN,EAAdW,EAAA,IAAI,GAAA,CAAA,K,oBAE9ChB,EAAA,GAAAC,EAAuCG,GAAA,EAAA,KAAA,EAAA,GAAA,CAAnBG,EAAAF,EAAAW,EAAA,KAAK,GAAA,CAAA,C,WAE3Bb,EAAiF,OAAA,EAA3E,OAAKD,EAAEc,EAAA,YAAO,SAAA,eAAA,gBAAA,E,IAA+CR,EAAQqB,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EDisclosure.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","_hoisted_1","_hoisted_2","EDisclosure_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","open","useModel","__props","onToggle","openBlock","createElementBlock","createElementVNode","renderSlot","_ctx","createTextVNode","toDisplayString"],"sources":["../../../src/components/Disclosure/EDisclosure.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n    /** The summary line you press to open and close. Use the `title` slot for rich content. */\n    title?: string;\n    /** Rows that share a group open one at a time (the native `name` of `details`). */\n    group?: string;\n}>();\n\ndefineSlots<{\n  /** The summary line, in place of the `title` prop. */\n  title?(): unknown;\n  /** What opens and closes. */\n  default?(): unknown;\n}>();\n\n/** Whether it is open. Without a binding it keeps its own state. */\nconst open = defineModel<boolean>(\"open\");\n\nfunction onToggle(e: Event) {\n  open.value = (e.target as HTMLDetailsElement).open;\n}\n</script>\n\n<template>\n  <details\n    class=\"e-disclosure e-details\"\n    :name=\"group\"\n    :open=\"open || undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary><slot name=\"title\">{{ title }}</slot></summary>\n    <div class=\"e-details-body\"><slot /></div>\n  </details>\n</template>\n\n<style>\n@layer e.containers {\n  .e-details > summary {\n    list-style: none;\n    cursor: pointer;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: var(--e-control-height);\n    padding: var(--e-space-3) 0 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-ink);\n  }\n\n  .e-details > summary::after {\n    content: \"\";\n    flex: none;\n    width: 8px;\n    height: 8px;\n    margin-inline-end: 3px;\n    border-inline-end: var(--e-stroke-card) solid currentcolor;\n    border-bottom: var(--e-stroke-card) solid currentcolor;\n    transform: translateY(-2px) rotate(45deg);\n    transition: transform var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-details[open] > summary::after {\n    transform: translateY(2px) rotate(-135deg);\n  }\n\n  .e-details > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-details > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-details > summary:hover {\n    color: var(--e-primary);\n  }\n\n  .e-details[open] > summary {\n    min-height: 0;\n    padding-bottom: var(--e-space-3);\n  }\n\n  .e-details-body {\n    padding-bottom: var(--e-space-2);\n  }\n\n  @media (forced-colors: active) {\n    .e-details > summary {\n      border-top-color: CanvasText;\n      color: CanvasText;\n    }\n\n    .e-details > summary:hover {\n      color: Highlight;\n    }\n\n    .e-details > summary:focus-visible {\n      outline-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-details > summary::after {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,IAAMY,IAAOZ,EAAoBc,GAAC,MAAM;EAExC,SAASC,EAAS,GAAU;GAC1B,EAAK,QAAS,EAAE,OAA8B;EAChD;E,kBAIEd,EAAA,GAAAC,EAQU,WAAA;GAPR,OAAM;GACL,MAAMY,EAAA;GACN,MAAMF,EAAA,SAAQ,KAAA;GACN;E,IAETT,EAAwD,WAAA,MAAA,CAA/CC,EAAqCgB,EAAA,QAAA,SAAA,CAAA,SAAA,CAAff,EAAAC,EAAAQ,EAAA,KAAK,GAAA,CAAA,C,MACpCX,EAA0C,OAA1CK,GAA0C,CAAdJ,EAAQgB,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. */\n    side?: \"right\" | \"left\" | \"bottom\";\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, or Escape. `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\nconst open = defineModel<boolean>(\"open\");\n</script>\n\n<template>\n  <DialogFrame\n    v-bind=\"$attrs\"\n    v-model:open=\"open\"\n    :title=\"title\"\n    :heading-level=\"headingLevel\"\n    :inline=\"inline\"\n    :content-class=\"['e-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-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":""}

package/dist/components/Drawer/EDrawer.vue.d.ts

@@ -3,8 +3,10 @@ type __VLS_Props = {
     title: string;
     /** The level of the title's heading element, 1 to 6. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** The edge it slides in from. */
+    /** The edge it slides in from; `bottom` is a sheet for phones. */
     side?: "right" | "left" | "bottom";
+    /** Also closes when the backdrop is pressed. Leave it off for a form, where a stray press would throw the work away. */
+    dismissible?: boolean;
     /** Shows the drawer in the page, without the backdrop or the focus trap. Only for a preview. */
     inline?: boolean;
 };
@@ -15,6 +17,7 @@ type __VLS_Slots = {
     actions?(): unknown;
 };
 type __VLS_ModelProps = {
+    /** Whether it is open. Without a binding it keeps its own state. */
     "open"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

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

@@ -9,6 +9,7 @@ var f = /*@__PURE__*/ a({
 		title: {},
 		headingLevel: { default: 2 },
 		side: { default: "right" },
+		dismissible: { type: Boolean },
 		inline: { type: Boolean }
 	}, {
 		open: { type: Boolean },
@@ -23,6 +24,7 @@ var f = /*@__PURE__*/ a({
 			title: a.title,
 			"heading-level": a.headingLevel,
 			inline: a.inline,
+			dismissible: a.dismissible,
 			"content-class": [
 				"e-drawer",
 				a.side !== "right" && `e-drawer--${a.side}`,
@@ -44,6 +46,7 @@ var f = /*@__PURE__*/ a({
 			"title",
 			"heading-level",
 			"inline",
+			"dismissible",
 			"content-class"
 		]));
 	}

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. */\n    side?: \"right\" | \"left\" | \"bottom\";\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, or Escape. `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\nconst open = defineModel<boolean>(\"open\");\n</script>\n\n<template>\n  <DialogFrame\n    v-bind=\"$attrs\"\n    v-model:open=\"open\"\n    :title=\"title\"\n    :heading-level=\"headingLevel\"\n    :inline=\"inline\"\n    :content-class=\"['e-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":";;;;;;;;;;;;;;;;;;EAoBA,IAAMkB,IAAOD,GAYPE,IAAOjB,EAAoBmB,GAAC,MAAM;E,kBAItClB,EAAA,GAAAC,EAWcC,GAXdC,EACUN,EAUI,QAVE;GACN,MAAMmB,EAAA;GAAA,iBAAA,AAAAO,EAAA,QAAA,MAAA,EAAI,QAAAC;GACjB,OAAON,EAAA;GACP,iBAAeA,EAAA;GACf,QAAQA,EAAA;GACR,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-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"}

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. */\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    width: 56px;\n    height: 56px;\n    margin-bottom: var(--e-space-1);\n    border-radius: 50%;\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\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</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 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":""}

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

@@ -4,7 +4,7 @@ type __VLS_Props = {
     icon?: IconProp;
     /** What is missing, in the person's words. */
     title: string;
-    /** The level of the title's heading element, 1 to 6. */
+    /** The level of the title's heading element, 1 to 6; fit the page outline. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** Removes the dashed outline, for use inside a table or panel. */
     bare?: boolean;

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. */\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    width: 56px;\n    height: 56px;\n    margin-bottom: var(--e-space-1);\n    border-radius: 50%;\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\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</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 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"}

package/dist/components/ExpandableRow/EExpandableRow.js

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

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

@@ -0,0 +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":""}

package/dist/components/{ButtonGroup/EButtonGroup.vue.d.ts → ExpandableRow/EExpandableRow.vue.d.ts}

@@ -1,10 +1,18 @@
 type __VLS_Props = {
-    /** What the group is for. Read by screen readers as the name of the group. */
-    label: string;
+    /** The row's name, always visible in the summary. */
+    title: string;
+    /** A muted line under the title. */
+    subtitle?: string;
 };
 type __VLS_Slots = {
-    /** The buttons. */
-    default(): unknown;
+    /** Before the title, such as an `EStamp`, an icon or a date tile. */
+    leading?(): unknown;
+    /** The value at the end of the summary. Set in tabular mono. */
+    trailing?(): unknown;
+    /** What the row opens to. */
+    default?(): unknown;
+    /** Buttons for the bar at the foot of the opened row. */
+    actions?(): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,40 @@
+/* empty css                */
+import e from "../Actions/EActions.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, withCtx as u } from "vue";
+//#region src/components/ExpandableRow/EExpandableRow.vue?vue&type=script&setup=true&lang.ts
+var d = { class: "e-xrow" }, f = {
+	key: 0,
+	class: "e-xrow-lead"
+}, p = { class: "e-xrow-main" }, m = { class: "e-xrow-title" }, h = {
+	key: 0,
+	class: "e-xrow-sub"
+}, g = {
+	key: 1,
+	class: "e-xrow-trail"
+}, _ = { class: "e-xrow-body" }, v = {
+	key: 0,
+	class: "e-xrow-content"
+}, y = /*@__PURE__*/ a({
+	__name: "EExpandableRow",
+	props: {
+		title: {},
+		subtitle: {}
+	},
+	setup(a) {
+		return (y, b) => (s(), r("details", d, [i("summary", { class: o({ "e-xrow-summary--lead": y.$slots.leading }) }, [
+			y.$slots.leading ? (s(), r("div", f, [c(y.$slots, "leading")])) : n("", !0),
+			i("div", p, [i("p", m, l(a.title), 1), a.subtitle ? (s(), r("p", h, l(a.subtitle), 1)) : n("", !0)]),
+			y.$slots.trailing ? (s(), r("span", g, [c(y.$slots, "trailing")])) : n("", !0)
+		], 2), i("div", _, [y.$slots.default ? (s(), r("div", v, [c(y.$slots, "default")])) : n("", !0), y.$slots.actions ? (s(), t(e, {
+			key: 1,
+			bar: ""
+		}, {
+			default: u(() => [c(y.$slots, "actions")]),
+			_: 3
+		})) : n("", !0)])]));
+	}
+});
+//#endregion
+export { y as default };
+
+//# sourceMappingURL=EExpandableRow.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

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

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

package/dist/components/Field/EField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EField.js","names":["_sfc_main","EField_vue_vue_type_script_setup_true_lang_default","EField_default"],"sources":["../../../src/components/Field/EField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldFlag from \"./EFieldFlag.vue\";\nimport EFieldMessage from \"./EFieldMessage.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a small mono kicker above the control. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the control. */\n  hint?: string;\n  /** What to fix. Replaces the hint, turns the control invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** The id of the control; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\ndefineSlots<{\n  /** The control. Put `id`, `aria-invalid` and `aria-describedby` on it. */\n  default(props: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }): unknown;\n}>();\n\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-hint`);\n</script>\n\n<template>\n  <div class=\"e-field\">\n    <label :id=\"`${id}-label`\" class=\"e-field-label e-kicker\" :class=\"{ 'e-sr': hideLabel }\" :for=\"id\">\n      {{ label }}\n      <EFieldFlag :required=\"required\" :optional=\"optional\" />\n    </label>\n    <slot :id=\"id\" :aria-invalid=\"error ? 'true' : undefined\" :aria-describedby=\"error || hint ? hintId : undefined\" />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-space-2);\n    min-width: 0;\n  }\n\n  .e-field-label {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EField.js","names":["_sfc_main","EField_vue_vue_type_script_setup_true_lang_default","EField_default"],"sources":["../../../src/components/Field/EField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldFlag from \"./EFieldFlag.vue\";\nimport EFieldMessage from \"./EFieldMessage.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a small mono kicker above the control. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the control. */\n  hint?: string;\n  /** What to fix. Replaces the hint, turns the control invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** The id of the control; the label points at it. @default generated */\n  id?: string;\n}>();\n\ndefineSlots<{\n  /** The control. Put `id`, `aria-invalid` and `aria-describedby` on it. */\n  default(props: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }): unknown;\n}>();\n\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-hint`);\n</script>\n\n<template>\n  <div class=\"e-field\">\n    <label :id=\"`${id}-label`\" class=\"e-field-label e-kicker\" :class=\"{ 'e-sr': hideLabel }\" :for=\"id\">\n      {{ label }}\n      <EFieldFlag :required=\"required\" :optional=\"optional\" />\n    </label>\n    <slot :id=\"id\" :aria-invalid=\"error ? 'true' : undefined\" :aria-describedby=\"error || hint ? hintId : undefined\" />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-space-2);\n    min-width: 0;\n  }\n\n  .e-field-label {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Field/EField.vue.d.ts

@@ -11,7 +11,7 @@ type __VLS_Props = {
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
-    /** The id of the control; the label points at it. Generated when left out. */
+    /** The id of the control; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_Slots = {

package/dist/components/Field/EField.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 /* empty css                */
 import { useUid as e } from "../../composables/useUid.js";
-import t from "./EFieldFlag.js";
-import n from "./EFieldMessage.js";
+import t from "./EFieldMessage.js";
+import n from "./EFieldFlag.js";
 import { computed as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p } from "vue";
 //#region src/components/Field/EField.vue?vue&type=script&setup=true&lang.ts
 var m = { class: "e-field" }, h = ["id", "for"], g = /*@__PURE__*/ c({
@@ -22,7 +22,7 @@ var m = { class: "e-field" }, h = ["id", "for"], g = /*@__PURE__*/ c({
 				id: `${p(_)}-label`,
 				class: l(["e-field-label e-kicker", { "e-sr": c.hideLabel }]),
 				for: p(_)
-			}, [o(f(c.label) + " ", 1), s(t, {
+			}, [o(f(c.label) + " ", 1), s(n, {
 				required: c.required,
 				optional: c.optional
 			}, null, 8, ["required", "optional"])], 10, h),
@@ -31,7 +31,7 @@ var m = { class: "e-field" }, h = ["id", "for"], g = /*@__PURE__*/ c({
 				ariaInvalid: c.error ? "true" : void 0,
 				ariaDescribedby: c.error || c.hint ? v.value : void 0
 			}),
-			s(n, {
+			s(t, {
 				id: v.value,
 				error: c.error,
 				hint: c.hint

package/dist/components/Field/EField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_normalizeClass","_createTextVNode","_toDisplayString","_createVNode","EFieldFlag","_renderSlot","EFieldMessage","EFieldFlag_default","EFieldMessage_default","_hoisted_1","_hoisted_2","EField_vue_vue_type_script_setup_true_lang_default","props","__props","id","useUid","hintId","computed","openBlock","createElementBlock","createElementVNode","unref","normalizeClass","createTextVNode","toDisplayString","createVNode","renderSlot","_ctx"],"sources":["../../../src/components/Field/EField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldFlag from \"./EFieldFlag.vue\";\nimport EFieldMessage from \"./EFieldMessage.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a small mono kicker above the control. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the control. */\n  hint?: string;\n  /** What to fix. Replaces the hint, turns the control invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** The id of the control; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\ndefineSlots<{\n  /** The control. Put `id`, `aria-invalid` and `aria-describedby` on it. */\n  default(props: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }): unknown;\n}>();\n\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-hint`);\n</script>\n\n<template>\n  <div class=\"e-field\">\n    <label :id=\"`${id}-label`\" class=\"e-field-label e-kicker\" :class=\"{ 'e-sr': hideLabel }\" :for=\"id\">\n      {{ label }}\n      <EFieldFlag :required=\"required\" :optional=\"optional\" />\n    </label>\n    <slot :id=\"id\" :aria-invalid=\"error ? 'true' : undefined\" :aria-describedby=\"error || hint ? hintId : undefined\" />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-space-2);\n    min-width: 0;\n  }\n\n  .e-field-label {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAOA,IAAMgB,IAAQC,GAsBRC,IAAKC,QAAaH,EAAM,EAAE,GAC1BI,IAASC,QAAe,GAAGH,EAAG,MAAM,MAAM;E,kBAI9ClB,EAAA,GAAAC,EAOM,OAPNY,GAOM;GANJX,EAGQ,SAAA;IAHA,IAAE,GAAKC,EAAAe,CAAA,EAAE;IAAU,OAAKd,EAAA,CAAC,0BAAwB,EAAA,QAAmBa,EAAA,UAAS,CAAA,CAAA;IAAK,KAAKd,EAAAe,CAAA;G,IAC1Fb,EAAAC,EAAAW,EAAA,KAAK,IAAG,KACX,CAAA,GAAAV,EAAwDC,GAAA;IAA3C,UAAUS,EAAA;IAAW,UAAUA,EAAA;;GAE9CR,EAAmHsB,EAAA,QAAA,WAAA;IAA5G,IAAI5B,EAAAe,CAAA;IAAK,aAAcD,EAAA,QAAK,SAAY,KAAA;IAAY,iBAAkBA,EAAA,SAASA,EAAA,OAAOG,EAAA,QAAS,KAAA;;GACtGb,EAA0DG,GAAA;IAA1C,IAAIU,EAAA;IAAS,OAAOH,EAAA;IAAQ,MAAMA,EAAA"}
+{"version":3,"file":"EField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_normalizeClass","_createTextVNode","_toDisplayString","_createVNode","EFieldFlag","_renderSlot","EFieldMessage","EFieldMessage_default","EFieldFlag_default","_hoisted_1","_hoisted_2","EField_vue_vue_type_script_setup_true_lang_default","props","__props","id","useUid","hintId","computed","openBlock","createElementBlock","createElementVNode","unref","normalizeClass","createTextVNode","toDisplayString","createVNode","renderSlot","_ctx"],"sources":["../../../src/components/Field/EField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldFlag from \"./EFieldFlag.vue\";\nimport EFieldMessage from \"./EFieldMessage.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a small mono kicker above the control. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the control. */\n  hint?: string;\n  /** What to fix. Replaces the hint, turns the control invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** The id of the control; the label points at it. @default generated */\n  id?: string;\n}>();\n\ndefineSlots<{\n  /** The control. Put `id`, `aria-invalid` and `aria-describedby` on it. */\n  default(props: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }): unknown;\n}>();\n\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-hint`);\n</script>\n\n<template>\n  <div class=\"e-field\">\n    <label :id=\"`${id}-label`\" class=\"e-field-label e-kicker\" :class=\"{ 'e-sr': hideLabel }\" :for=\"id\">\n      {{ label }}\n      <EFieldFlag :required=\"required\" :optional=\"optional\" />\n    </label>\n    <slot :id=\"id\" :aria-invalid=\"error ? 'true' : undefined\" :aria-describedby=\"error || hint ? hintId : undefined\" />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-space-2);\n    min-width: 0;\n  }\n\n  .e-field-label {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAOA,IAAMgB,IAAQC,GAsBRC,IAAKC,QAAaH,EAAM,EAAE,GAC1BI,IAASC,QAAe,GAAGH,EAAG,MAAM,MAAM;E,kBAI9ClB,EAAA,GAAAC,EAOM,OAPNY,GAOM;GANJX,EAGQ,SAAA;IAHA,IAAE,GAAKC,EAAAe,CAAA,EAAE;IAAU,OAAKd,EAAA,CAAC,0BAAwB,EAAA,QAAmBa,EAAA,UAAS,CAAA,CAAA;IAAK,KAAKd,EAAAe,CAAA;G,IAC1Fb,EAAAC,EAAAW,EAAA,KAAK,IAAG,KACX,CAAA,GAAAV,EAAwDC,GAAA;IAA3C,UAAUS,EAAA;IAAW,UAAUA,EAAA;;GAE9CR,EAAmHsB,EAAA,QAAA,WAAA;IAA5G,IAAI5B,EAAAe,CAAA;IAAK,aAAcD,EAAA,QAAK,SAAY,KAAA;IAAY,iBAAkBA,EAAA,SAASA,EAAA,OAAOG,EAAA,QAAS,KAAA;;GACtGb,EAA0DG,GAAA;IAA1C,IAAIU,EAAA;IAAS,OAAOH,EAAA;IAAQ,MAAMA,EAAA"}

package/dist/components/Field/labelProps.d.ts

@@ -1,11 +1,11 @@
-/** The label API shared by ESelect, ECombobox, EAutocomplete and EMultiSelect: a `label`, or `bare` with an accessible name. */
+/** The label API shared by ESelect, ECombobox: a `label`, or `bare` with an accessible name. */
 export type ELabelProps = {
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
     /** The accessible name when `bare`. */
     ariaLabel?: string;
 } & ({
-    /** The visible label, a mono kicker above the control. It also names the list. Required unless `bare`. */
+    /** The visible label, a mono kicker above the control. It also names the list. Required unless `bare` with an `ariaLabel`. */
     label: string;
     /** Only the control, no label, hint or error. Give it `label` or `ariaLabel`. For dense places such as table filters. */
     bare?: boolean;

package/dist/components/Fieldset/EFieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFieldset.js","names":["_sfc_main","EFieldset_vue_vue_type_script_setup_true_lang_default","EFieldset_default"],"sources":["../../../src/components/Fieldset/EFieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldFlag from \"../Field/EFieldFlag.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The question the controls answer. Names the group for screen readers. */\n  legend?: string;\n  /** No box: the legend becomes a small mono label above the controls (RadioGroup, SlotPicker). */\n  bare?: boolean;\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  /** A word at the end of the legend. */\n  required?: boolean;\n  /** A word at the end of the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every control inside. */\n  disabled?: boolean;\n  /** Extra classes for the legend. */\n  legendClass?: string;\n  /** Keep the legend for screen readers and remove it from the page. */\n  hideLegend?: boolean;\n  /** The id the hint and error ids are built from. Generated when left out. */\n  id?: string;\n}>();\n\ndefineSlots<{\n  /** The controls. */\n  default(): unknown;\n}>();\n\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-hint`);\n</script>\n\n<template>\n  <fieldset\n    class=\"e-fieldset\"\n    :class=\"{ 'e-fieldset--box': !bare }\"\n    :disabled=\"disabled\"\n    :aria-describedby=\"error || hint ? hintId : undefined\"\n    :aria-invalid=\"error ? 'true' : undefined\"\n  >\n    <legend\n      v-if=\"legend\"\n      class=\"e-fieldset-legend\"\n      :class=\"[bare && 'e-kicker', hideLegend && 'e-fieldset-legend--hidden', legendClass]\"\n    >\n      <span class=\"e-fieldset-title\">{{ legend }}</span>\n      <span v-if=\"!bare\" class=\"e-fieldset-rule\" aria-hidden=\"true\" />\n      <EFieldFlag :required=\"required\" :optional=\"optional\" />\n    </legend>\n    <template v-if=\"bare\">\n      <slot />\n      <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    </template>\n    <div v-else class=\"e-fieldset-body\">\n      <slot />\n      <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    </div>\n  </fieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-fieldset-legend {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    width: 100%;\n    padding: 0;\n  }\n\n  .e-fieldset-legend--hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  .e-fieldset:not(.e-fieldset--box) > .e-fieldset-legend {\n    float: inline-start;\n    margin-bottom: var(--e-space-2);\n  }\n\n  .e-fieldset:not(.e-fieldset--box) > .e-fieldset-legend + * {\n    clear: both;\n  }\n\n  .e-fieldset--box {\n    padding: 0 var(--e-space-4) var(--e-space-4);\n    border: var(--e-stroke-hair) solid var(--e-border);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n  }\n\n  .e-fieldset--box > .e-fieldset-legend {\n    align-items: center;\n    gap: 0;\n    font: 500 var(--e-text-md)/1.3 var(--e-font-sans);\n    letter-spacing: 0;\n    text-transform: none;\n    color: var(--e-ink);\n  }\n\n  .e-fieldset--box .e-fieldset-title,\n  .e-fieldset--box .e-field-flag {\n    padding-inline: var(--e-space-3);\n  }\n\n  .e-fieldset-rule {\n    flex: 1;\n    min-width: var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-fieldset-body {\n    display: grid;\n    gap: var(--e-space-4);\n    padding-top: var(--e-space-1);\n  }\n\n  .e-fieldset:not(.e-slots) > .e-field-hint,\n  .e-fieldset:not(.e-slots) > .e-field-error {\n    margin-top: -6px;\n  }\n\n  .e-fieldset-body > .e-field-hint,\n  .e-fieldset-body > .e-field-error {\n    margin-top: calc(var(--e-space-4) * -1 + var(--e-space-2));\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EFieldset.js","names":["_sfc_main","EFieldset_vue_vue_type_script_setup_true_lang_default","EFieldset_default"],"sources":["../../../src/components/Fieldset/EFieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldFlag from \"../Field/EFieldFlag.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The question the controls answer. Names the group for screen readers. */\n  legend?: string;\n  /** No box: the legend becomes a small mono label above the controls (RadioGroup). */\n  bare?: boolean;\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  /** \"Required\" at the end of the legend. */\n  required?: boolean;\n  /** A word at the end of the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** A titled form section: no box, a larger legend ruled off from what comes before, and the hint under the legend. Replaces `EFormSection`. */\n  section?: boolean;\n  /** Disables every control inside. */\n  disabled?: boolean;\n  /** Extra classes for the legend. */\n  legendClass?: string;\n  /** Keep the legend for screen readers and remove it from the page. */\n  hideLegend?: boolean;\n  /** The id the hint and error ids are built from. @default generated */\n  id?: string;\n}>();\n\ndefineSlots<{\n  /** The controls. */\n  default(): unknown;\n}>();\n\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-hint`);\n</script>\n\n<template>\n  <fieldset\n    class=\"e-fieldset\"\n    :class=\"{ 'e-fieldset--box': !bare && !section, 'e-fieldset--section': section }\"\n    :disabled=\"disabled\"\n    :aria-describedby=\"error || hint ? hintId : undefined\"\n    :aria-invalid=\"error ? 'true' : undefined\"\n  >\n    <legend\n      v-if=\"legend\"\n      class=\"e-fieldset-legend\"\n      :class=\"[bare && 'e-kicker', hideLegend && 'e-fieldset-legend--hidden', legendClass]\"\n    >\n      <span class=\"e-fieldset-title\">{{ legend }}</span>\n      <span v-if=\"!bare && !section\" class=\"e-fieldset-rule\" aria-hidden=\"true\" />\n      <EFieldFlag :required=\"required\" :optional=\"optional\" />\n    </legend>\n    <div v-if=\"section\" class=\"e-fieldset-body\">\n      <EFieldMessage v-if=\"!error\" :id=\"hintId\" :hint=\"hint\" />\n      <slot />\n      <EFieldMessage v-if=\"error\" :id=\"hintId\" :error=\"error\" />\n    </div>\n    <template v-else-if=\"bare\">\n      <slot />\n      <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    </template>\n    <div v-else class=\"e-fieldset-body\">\n      <slot />\n      <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    </div>\n  </fieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-fieldset-legend {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    width: 100%;\n    padding: 0;\n  }\n\n  .e-fieldset-legend--hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  .e-fieldset:not(.e-fieldset--box, .e-fieldset--section) > .e-fieldset-legend {\n    float: inline-start;\n    margin-bottom: var(--e-space-2);\n  }\n\n  .e-fieldset:not(.e-fieldset--box, .e-fieldset--section) > .e-fieldset-legend + * {\n    clear: both;\n  }\n\n  /* The ring is the outline alone: a native fieldset border is broken around its legend, so pairing it with the overlay painted a second, unbroken line. The legend straddles the ring and its own surface background breaks the line instead. */\n  .e-fieldset--box {\n    padding: 0 var(--e-space-4) var(--e-space-4);\n    border: 0;\n\n    --e-bc: var(--e-border);\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-md);\n    background: var(--e-surface);\n  }\n\n  .e-fieldset--box > .e-fieldset-legend {\n    position: relative;\n    align-items: center;\n    gap: 0;\n    width: fit-content;\n    max-width: 100%;\n    inset-block-start: -0.65em;\n    margin: 0 0 var(--e-space-3) calc(-1 * var(--e-space-2));\n    background: var(--e-surface);\n    font: 500 var(--e-text-md)/1.3 var(--e-font-sans);\n    letter-spacing: 0;\n    text-transform: none;\n    color: var(--e-ink);\n  }\n\n  .e-fieldset--box .e-fieldset-title,\n  .e-fieldset--box .e-field-flag {\n    padding-inline: var(--e-space-2);\n  }\n\n  /* The rule is the legend's own border, never a native fieldset border (which would break around the legend). */\n  .e-fieldset--section > .e-fieldset-legend {\n    display: block;\n    padding-top: var(--e-space-6);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 500 var(--e-text-xl)/1.25 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  .e-fieldset--section:first-child > .e-fieldset-legend {\n    padding-top: 0;\n    border-top: 0;\n  }\n\n  .e-fieldset--section > .e-fieldset-legend .e-fieldset-title {\n    padding: 0;\n  }\n\n  .e-fieldset--section > .e-fieldset-body {\n    padding-top: var(--e-space-4);\n  }\n\n  .e-fieldset--section > .e-fieldset-body > .e-field-hint {\n    margin-top: calc(var(--e-space-4) * -1 + var(--e-space-1));\n    max-width: var(--e-measure);\n  }\n\n  .e-fieldset-rule {\n    flex: none;\n    width: var(--e-space-2);\n  }\n\n  .e-fieldset-body {\n    display: grid;\n    gap: var(--e-space-4);\n    padding-top: var(--e-space-1);\n  }\n\n  .e-fieldset > .e-field-hint,\n  .e-fieldset > .e-field-error {\n    margin-top: -6px;\n  }\n\n  .e-fieldset-body > .e-field-hint,\n  .e-fieldset-body > .e-field-error {\n    margin-top: calc(var(--e-space-4) * -1 + var(--e-space-2));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Fieldset/EFieldset.vue.d.ts

@@ -1,23 +1,25 @@
 type __VLS_Props = {
     /** The question the controls answer. Names the group for screen readers. */
     legend?: string;
-    /** No box: the legend becomes a small mono label above the controls (RadioGroup, SlotPicker). */
+    /** No box: the legend becomes a small mono label above the controls (RadioGroup). */
     bare?: boolean;
     /** Help that is announced with the group. */
     hint?: string;
     /** What to fix. Replaces the hint and is announced with the group. */
     error?: string;
-    /** A word at the end of the legend. */
+    /** "Required" at the end of the legend. */
     required?: boolean;
     /** A word at the end of the legend. Flag whichever is rarer. */
     optional?: boolean;
+    /** A titled form section: no box, a larger legend ruled off from what comes before, and the hint under the legend. Replaces `EFormSection`. */
+    section?: boolean;
     /** Disables every control inside. */
     disabled?: boolean;
     /** Extra classes for the legend. */
     legendClass?: string;
     /** Keep the legend for screen readers and remove it from the page. */
     hideLegend?: boolean;
-    /** The id the hint and error ids are built from. Generated when left out. */
+    /** The id the hint and error ids are built from. @default generated */
     id?: string;
 };
 type __VLS_Slots = {

package/dist/components/Fieldset/EFieldset.vue_vue_type_script_setup_true_lang.js

@@ -1,21 +1,24 @@
 /* empty css                */
 import { useUid as e } from "../../composables/useUid.js";
-import t from "../Field/EFieldFlag.js";
-import n from "../Field/EFieldMessage.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderSlot as f, toDisplayString as p } from "vue";
+import t from "../Field/EFieldMessage.js";
+import n from "../Field/EFieldFlag.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderSlot as p, toDisplayString as m } from "vue";
 //#region src/components/Fieldset/EFieldset.vue?vue&type=script&setup=true&lang.ts
-var m = [
+var h = [
 	"disabled",
 	"aria-describedby",
 	"aria-invalid"
-], h = { class: "e-fieldset-title" }, g = {
+], g = { class: "e-fieldset-title" }, _ = {
 	key: 0,
 	class: "e-fieldset-rule",
 	"aria-hidden": "true"
-}, _ = {
-	key: 2,
+}, v = {
+	key: 1,
 	class: "e-fieldset-body"
-}, v = /*@__PURE__*/ l({
+}, y = {
+	key: 3,
+	class: "e-fieldset-body"
+}, b = /*@__PURE__*/ u({
 	__name: "EFieldset",
 	props: {
 		legend: {},
@@ -24,52 +27,68 @@ var m = [
 		error: {},
 		required: { type: Boolean },
 		optional: { type: Boolean },
+		section: { type: Boolean },
 		disabled: { type: Boolean },
 		legendClass: {},
 		hideLegend: { type: Boolean },
 		id: {}
 	},
-	setup(l) {
-		let v = l, y = e(() => v.id), b = i(() => `${y.value}-hint`);
-		return (e, i) => (d(), o("fieldset", {
-			class: u(["e-fieldset", { "e-fieldset--box": !l.bare }]),
-			disabled: l.disabled,
-			"aria-describedby": l.error || l.hint ? b.value : void 0,
-			"aria-invalid": l.error ? "true" : void 0
-		}, [l.legend ? (d(), o("legend", {
+	setup(u) {
+		let b = u, x = e(() => b.id), S = i(() => `${x.value}-hint`);
+		return (e, i) => (f(), s("fieldset", {
+			class: d(["e-fieldset", {
+				"e-fieldset--box": !u.bare && !u.section,
+				"e-fieldset--section": u.section
+			}]),
+			disabled: u.disabled,
+			"aria-describedby": u.error || u.hint ? S.value : void 0,
+			"aria-invalid": u.error ? "true" : void 0
+		}, [u.legend ? (f(), s("legend", {
 			key: 0,
-			class: u(["e-fieldset-legend", [
-				l.bare && "e-kicker",
-				l.hideLegend && "e-fieldset-legend--hidden",
-				l.legendClass
+			class: d(["e-fieldset-legend", [
+				u.bare && "e-kicker",
+				u.hideLegend && "e-fieldset-legend--hidden",
+				u.legendClass
 			]])
 		}, [
-			s("span", h, p(l.legend), 1),
-			l.bare ? a("", !0) : (d(), o("span", g)),
-			c(t, {
-				required: l.required,
-				optional: l.optional
+			c("span", g, m(u.legend), 1),
+			!u.bare && !u.section ? (f(), s("span", _)) : o("", !0),
+			l(n, {
+				required: u.required,
+				optional: u.optional
 			}, null, 8, ["required", "optional"])
-		], 2)) : a("", !0), l.bare ? (d(), o(r, { key: 1 }, [f(e.$slots, "default"), c(n, {
-			id: b.value,
-			error: l.error,
-			hint: l.hint
+		], 2)) : o("", !0), u.section ? (f(), s("div", v, [
+			u.error ? o("", !0) : (f(), a(t, {
+				key: 0,
+				id: S.value,
+				hint: u.hint
+			}, null, 8, ["id", "hint"])),
+			p(e.$slots, "default"),
+			u.error ? (f(), a(t, {
+				key: 1,
+				id: S.value,
+				error: u.error
+			}, null, 8, ["id", "error"])) : o("", !0)
+		])) : u.bare ? (f(), s(r, { key: 2 }, [p(e.$slots, "default"), l(t, {
+			id: S.value,
+			error: u.error,
+			hint: u.hint
 		}, null, 8, [
 			"id",
 			"error",
 			"hint"
-		])], 64)) : (d(), o("div", _, [f(e.$slots, "default"), c(n, {
-			id: b.value,
-			error: l.error,
-			hint: l.hint
+		])], 64)) : (f(), s("div", y, [p(e.$slots, "default"), l(t, {
+			id: S.value,
+			error: u.error,
+			hint: u.hint
 		}, null, 8, [
 			"id",
 			"error",
 			"hint"
-		])]))], 10, m));
+		])]))], 10, h));
 	}
 });
 //#endregion
-export { v as default };
+export { b as default };
 
 //# sourceMappingURL=EFieldset.vue_vue_type_script_setup_true_lang.js.map