@eos-ui/vue 0.1.0 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"EFieldset.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_createCommentVNode","_createVNode","EFieldFlag","_Fragment","_renderSlot","EFieldMessage","EFieldFlag_default","EFieldMessage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EFieldset_vue_vue_type_script_setup_true_lang_default","props","__props","id","useUid","hintId","computed","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","createCommentVNode","createVNode","Fragment","renderSlot","_ctx"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMkB,IAAQC,GA4BRC,IAAKC,QAAaH,EAAM,EAAE,GAC1BI,IAASC,QAAe,GAAGH,EAAG,MAAM,MAAM;E,kBAI9CpB,EAAA,GAAAC,EAwBW,YAAA;GAvBT,OAAKC,EAAA,CAAC,cAAY,EAAA,mBAAA,CACYiB,EAAA,KAAI,CAAA,CAAA;GACjC,UAAUA,EAAA;GACV,oBAAkBA,EAAA,SAASA,EAAA,OAAOG,EAAA,QAAS,KAAA;GAC3C,gBAAcH,EAAA,QAAK,SAAY,KAAA;E,IAGxBA,EAAA,UADRnB,EAAA,GAAAC,EAQS,UAAA;;GANP,OAAKC,EAAA,CAAC,qBAAmB;IAChBiB,EAAA,QAAI;IAAgBA,EAAA,cAAU;IAAiCA,EAAA;GAAW,CAAA,CAAA;;GAEnFhB,EAAkD,QAAlDW,GAAkDV,EAAhBe,EAAA,MAAM,GAAA,CAAA;GAC3BA,EAAA,O,aAAbnB,EAAA,GAAAC,EAAgE,QAAhEc,CAAgE;GAChET,EAAwDC,GAAA;IAA3C,UAAUY,EAAA;IAAW,UAAUA,EAAA;;E,oBAE9BA,EAAA,QAAhBnB,EAAA,GAAAC,EAGWO,GAAA,EAAA,KAAA,EAAA,GAAA,CAFTC,EAAQwB,EAAA,QAAA,SAAA,GACR3B,EAA0DI,GAAA;GAA1C,IAAIY,EAAA;GAAS,OAAOH,EAAA;GAAQ,MAAMA,EAAA;;;;;E,aAEpDnB,EAAA,GAAAC,EAGM,OAHNe,GAGM,CAFJP,EAAQwB,EAAA,QAAA,SAAA,GACR3B,EAA0DI,GAAA;GAA1C,IAAIY,EAAA;GAAS,OAAOH,EAAA;GAAQ,MAAMA,EAAA"}
+{"version":3,"file":"EFieldset.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_createCommentVNode","_createVNode","EFieldFlag","_createBlock","EFieldMessage","_renderSlot","_Fragment","EFieldMessage_default","EFieldFlag_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EFieldset_vue_vue_type_script_setup_true_lang_default","props","__props","id","useUid","hintId","computed","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","createCommentVNode","createVNode","createBlock","renderSlot","_ctx","Fragment"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMoB,IAAQC,GA8BRC,IAAKC,QAAaH,EAAM,EAAE,GAC1BI,IAASC,QAAe,GAAGH,EAAG,MAAM,MAAM;E,kBAI9CtB,EAAA,GAAAC,EA6BW,YAAA;GA5BT,OAAKC,EAAA,CAAC,cAAY;IAAA,mBAAA,CACYmB,EAAA,QAAI,CAAKA,EAAA;IAAO,uBAAyBA,EAAA;GAAO,CAAA,CAAA;GAC7E,UAAUA,EAAA;GACV,oBAAkBA,EAAA,SAASA,EAAA,OAAOG,EAAA,QAAS,KAAA;GAC3C,gBAAcH,EAAA,QAAK,SAAY,KAAA;E,IAGxBA,EAAA,UADRrB,EAAA,GAAAC,EAQS,UAAA;;GANP,OAAKC,EAAA,CAAC,qBAAmB;IAChBmB,EAAA,QAAI;IAAgBA,EAAA,cAAU;IAAiCA,EAAA;GAAW,CAAA,CAAA;;GAEnFlB,EAAkD,QAAlDY,GAAkDX,EAAhBiB,EAAA,MAAM,GAAA,CAAA;GAC3B,CAAAA,EAAA,QAAI,CAAKA,EAAA,WAAtBrB,EAAA,GAAAC,EAA4E,QAA5Ee,CAA4E,K;GAC5EV,EAAwDC,GAAA;IAA3C,UAAUc,EAAA;IAAW,UAAUA,EAAA;;E,oBAEnCA,EAAA,WAAXrB,EAAA,GAAAC,EAIM,OAJNgB,GAIM;GAHkBI,EAAA,Q,aAAtBrB,EAAA,GAAAQ,EAAyDC,GAAA;;IAA3B,IAAIe,EAAA;IAAS,MAAMH,EAAA;;GACjDX,EAAQyB,EAAA,QAAA,SAAA;GACad,EAAA,SAArBrB,EAAA,GAAAQ,EAA0DC,GAAA;;IAA7B,IAAIe,EAAA;IAAS,OAAOH,EAAA;;E,MAE9BA,EAAA,QAArBrB,EAAA,GAAAC,EAGWU,GAAA,EAAA,KAAA,EAAA,GAAA,CAFTD,EAAQyB,EAAA,QAAA,SAAA,GACR7B,EAA0DG,GAAA;GAA1C,IAAIe,EAAA;GAAS,OAAOH,EAAA;GAAQ,MAAMA,EAAA;;;;;E,aAEpDrB,EAAA,GAAAC,EAGM,OAHNiB,GAGM,CAFJR,EAAQyB,EAAA,QAAA,SAAA,GACR7B,EAA0DG,GAAA;GAA1C,IAAIe,EAAA;GAAS,OAAOH,EAAA;GAAQ,MAAMA,EAAA"}

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. */\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  }>(),\n  { as: \"div\", min: \"16rem\", gap: 4 },\n);\n\ndefineSlots<{\n  /** The cards. Items stretch to the tallest in their row. */\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\" :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</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, `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":""}

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

@@ -1,19 +1,22 @@
 type __VLS_Props = {
-    /** The element to render, `div` by default. */
+    /** The element to render, `div` by default; for example `ul` with `li` children. */
     as?: string;
     /** The narrowest a column may be, as a CSS length. One column below that. */
     min?: string;
     /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */
     gap?: number | string;
+    /** Pack cards of uneven height into columns with no gaps under the short ones. Items flow top to bottom within each column. */
+    masonry?: boolean;
 };
 type __VLS_Slots = {
-    /** The cards. Items stretch to the tallest in their row. */
+    /** The cards. Items stretch to the tallest in their row, unless `masonry` is set. */
     default(): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     min: string;
     as: string;
     gap: string | number;
+    masonry: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,28 +1,32 @@
 /* empty css                */
-import { computed as e, createBlock as t, defineComponent as n, normalizeStyle as r, openBlock as i, renderSlot as a, resolveDynamicComponent as o, withCtx as s } from "vue";
+import { computed as e, createBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderSlot as o, resolveDynamicComponent as s, withCtx as c } from "vue";
 //#region src/components/Grid/EGrid.vue?vue&type=script&setup=true&lang.ts
-var c = /*@__PURE__*/ n({
+var l = /*@__PURE__*/ n({
 	__name: "EGrid",
 	props: {
 		as: { default: "div" },
 		min: { default: "16rem" },
-		gap: { default: 4 }
+		gap: { default: 4 },
+		masonry: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	setup(n) {
-		let c = n, l = e(() => typeof c.gap == "number" ? `var(--e-space-${c.gap})` : c.gap);
-		return (e, c) => (i(), t(o(n.as), {
-			class: "e-grid-layout",
-			style: r({
-				"--e-gap": l.value,
+		let l = n, u = e(() => typeof l.gap == "number" ? `var(--e-space-${l.gap})` : l.gap);
+		return (e, l) => (a(), t(s(n.as), {
+			class: r(["e-grid-layout", { "e-grid-layout--masonry": n.masonry }]),
+			style: i({
+				"--e-gap": u.value,
 				"--e-min": n.min
 			})
 		}, {
-			default: s(() => [a(e.$slots, "default")]),
+			default: c(() => [o(e.$slots, "default")]),
 			_: 3
-		}, 8, ["style"]));
+		}, 8, ["class", "style"]));
 	}
 });
 //#endregion
-export { c as default };
+export { l as default };
 
 //# sourceMappingURL=EGrid.vue_vue_type_script_setup_true_lang.js.map

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","_normalizeStyle","_withCtx","_renderSlot","EGrid_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","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. */\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  }>(),\n  { as: \"div\", min: \"16rem\", gap: 4 },\n);\n\ndefineSlots<{\n  /** The cards. Items stretch to the tallest in their row. */\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\" :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</style>\n"],"mappings":";;;;;;;;;;;EAIA,IAAMO,IAAQC,GAiBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGP,EAAA,GAAAC,EAEYC,EAFIM,EAAA,EAAE,GAAA;GAAE,OAAM;GAAiB,OAAKL,EAAA;IAAA,WAAeM,EAAA;IAAQ,WAAaD,EAAA;GAAG,CAAA;;GACrF,SAAAJ,QAAQ,CAARC,EAAQY,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, `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"}

package/dist/components/Heading/EHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"EHeading.js","names":["_sfc_main","EHeading_vue_vue_type_script_setup_true_lang_default","EHeading_default"],"sources":["../../../src/components/Heading/EHeading.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** 1 to 6: sets both the element (`h1` to `h6`) and the size (36, 24, 20, 18, 16 and 14px). One level 1 per page; do not skip levels. */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** A small mono label above the heading. */\n    kicker?: string;\n  }>(),\n  { level: 2 },\n);\n\ndefineSlots<{\n  /** The heading text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-heading\">\n    <p v-if=\"kicker\" class=\"e-kicker\" style=\"margin: 0\">{{ kicker }}</p>\n    <component :is=\"`h${level}`\" class=\"e-h\" :class=\"`e-h${level}`\"><slot /></component>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-heading {\n    display: grid;\n    gap: var(--e-space-1);\n  }\n\n  .e-h {\n    margin: 0;\n    font-family: var(--e-font-sans);\n    font-weight: 500;\n    color: var(--e-ink);\n    text-wrap: balance;\n  }\n\n  .e-h1 {\n    font-size: var(--e-text-4xl);\n    line-height: 1.15;\n  }\n\n  .e-h2 {\n    font-size: var(--e-text-2xl);\n    line-height: 1.25;\n  }\n\n  .e-h3 {\n    font-size: var(--e-text-xl);\n    line-height: 1.25;\n  }\n\n  .e-h4 {\n    font-size: var(--e-text-lg);\n    line-height: 1.3;\n  }\n\n  .e-h5 {\n    font-size: var(--e-text-md);\n    line-height: 1.3;\n  }\n\n  .e-h6 {\n    font-size: var(--e-text-sm);\n    line-height: 1.3;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EHeading.js","names":["_sfc_main","EHeading_vue_vue_type_script_setup_true_lang_default","EHeading_default"],"sources":["../../../src/components/Heading/EHeading.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EKicker from \"../Kicker/EKicker.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** 1 to 6: sets both the element (`h1` to `h6`) and the size (36, 24, 20, 18, 16 and 14px). One level 1 per page; do not skip levels. */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** A small mono label above the heading; renders an `EKicker`, which is not itself a heading. */\n    kicker?: string;\n  }>(),\n  { level: 2 },\n);\n\ndefineSlots<{\n  /** The heading text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-heading\">\n    <EKicker v-if=\"kicker\">{{ kicker }}</EKicker>\n    <component :is=\"`h${level}`\" class=\"e-h\" :class=\"`e-h${level}`\"><slot /></component>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-heading {\n    display: grid;\n    gap: var(--e-space-1);\n  }\n\n  .e-heading > .e-kicker {\n    margin: 0;\n  }\n\n  .e-h {\n    margin: 0;\n    font-family: var(--e-font-sans);\n    font-weight: 500;\n    color: var(--e-ink);\n    text-wrap: balance;\n  }\n\n  .e-h1 {\n    font-size: var(--e-text-4xl);\n    line-height: 1.15;\n  }\n\n  .e-h2 {\n    font-size: var(--e-text-2xl);\n    line-height: 1.25;\n  }\n\n  .e-h3 {\n    font-size: var(--e-text-xl);\n    line-height: 1.25;\n  }\n\n  .e-h4 {\n    font-size: var(--e-text-lg);\n    line-height: 1.3;\n  }\n\n  .e-h5 {\n    font-size: var(--e-text-md);\n    line-height: 1.3;\n  }\n\n  .e-h6 {\n    font-size: var(--e-text-sm);\n    line-height: 1.3;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Heading/EHeading.vue.d.ts

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     /** 1 to 6: sets both the element (`h1` to `h6`) and the size (36, 24, 20, 18, 16 and 14px). One level 1 per page; do not skip levels. */
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** A small mono label above the heading. */
+    /** A small mono label above the heading; renders an `EKicker`, which is not itself a heading. */
     kicker?: string;
 };
 type __VLS_Slots = {

package/dist/components/Heading/EHeading.vue_vue_type_script_setup_true_lang.js

@@ -1,24 +1,24 @@
 /* empty css                */
-import { createBlock as e, createCommentVNode as t, createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, resolveDynamicComponent as s, toDisplayString as c, withCtx as l } from "vue";
+import e from "../Kicker/EKicker.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createTextVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toDisplayString as u, withCtx as d } from "vue";
 //#region src/components/Heading/EHeading.vue?vue&type=script&setup=true&lang.ts
-var u = { class: "e-heading" }, d = {
-	key: 0,
-	class: "e-kicker",
-	style: { margin: "0" }
-}, f = /*@__PURE__*/ r({
+var f = { class: "e-heading" }, p = /*@__PURE__*/ a({
 	__name: "EHeading",
 	props: {
 		level: { default: 2 },
 		kicker: {}
 	},
-	setup(r) {
-		return (f, p) => (a(), n("div", u, [r.kicker ? (a(), n("p", d, c(r.kicker), 1)) : t("", !0), (a(), e(s(`h${r.level}`), { class: i(["e-h", `e-h${r.level}`]) }, {
-			default: l(() => [o(f.$slots, "default")]),
+	setup(a) {
+		return (p, m) => (s(), r("div", f, [a.kicker ? (s(), t(e, { key: 0 }, {
+			default: d(() => [i(u(a.kicker), 1)]),
+			_: 1
+		})) : n("", !0), (s(), t(l(`h${a.level}`), { class: o(["e-h", `e-h${a.level}`]) }, {
+			default: d(() => [c(p.$slots, "default")]),
 			_: 3
 		}, 8, ["class"]))]));
 	}
 });
 //#endregion
-export { f as default };
+export { p as default };
 
 //# sourceMappingURL=EHeading.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Heading/EHeading.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EHeading.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_toDisplayString","_createCommentVNode","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","_hoisted_1","_hoisted_2","\"margin\"","EHeading_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","__props","toDisplayString","createCommentVNode","createBlock","resolveDynamicComponent","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Heading/EHeading.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** 1 to 6: sets both the element (`h1` to `h6`) and the size (36, 24, 20, 18, 16 and 14px). One level 1 per page; do not skip levels. */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** A small mono label above the heading. */\n    kicker?: string;\n  }>(),\n  { level: 2 },\n);\n\ndefineSlots<{\n  /** The heading text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-heading\">\n    <p v-if=\"kicker\" class=\"e-kicker\" style=\"margin: 0\">{{ kicker }}</p>\n    <component :is=\"`h${level}`\" class=\"e-h\" :class=\"`e-h${level}`\"><slot /></component>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-heading {\n    display: grid;\n    gap: var(--e-space-1);\n  }\n\n  .e-h {\n    margin: 0;\n    font-family: var(--e-font-sans);\n    font-weight: 500;\n    color: var(--e-ink);\n    text-wrap: balance;\n  }\n\n  .e-h1 {\n    font-size: var(--e-text-4xl);\n    line-height: 1.15;\n  }\n\n  .e-h2 {\n    font-size: var(--e-text-2xl);\n    line-height: 1.25;\n  }\n\n  .e-h3 {\n    font-size: var(--e-text-xl);\n    line-height: 1.25;\n  }\n\n  .e-h4 {\n    font-size: var(--e-text-lg);\n    line-height: 1.3;\n  }\n\n  .e-h5 {\n    font-size: var(--e-text-md);\n    line-height: 1.3;\n  }\n\n  .e-h6 {\n    font-size: var(--e-text-sm);\n    line-height: 1.3;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;E,kBAoBEA,EAAA,GAAAC,EAGM,OAHNQ,GAGM,CAFKM,EAAA,UAATf,EAAA,GAAAC,EAAoE,KAApES,GAAoER,EAAba,EAAA,MAAM,GAAA,CAAA,K,YAC7Df,EAAA,GAAAI,EAAoFC,EAAA,IAAhEU,EAAA,OAAK,GAAA,EAAI,OAAKT,EAAA,CAAC,OAAK,MAAeS,EAAA,OAAK,CAAA,E;GAAI,SAAAR,QAAQ,CAARC,EAAQe,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EHeading.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createBlock","EKicker","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_resolveDynamicComponent","_normalizeClass","_renderSlot","EKicker_default","_hoisted_1","EHeading_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","__props","createBlock","withCtx","createTextVNode","toDisplayString","createCommentVNode","resolveDynamicComponent","normalizeClass","renderSlot","_ctx"],"sources":["../../../src/components/Heading/EHeading.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EKicker from \"../Kicker/EKicker.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** 1 to 6: sets both the element (`h1` to `h6`) and the size (36, 24, 20, 18, 16 and 14px). One level 1 per page; do not skip levels. */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** A small mono label above the heading; renders an `EKicker`, which is not itself a heading. */\n    kicker?: string;\n  }>(),\n  { level: 2 },\n);\n\ndefineSlots<{\n  /** The heading text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-heading\">\n    <EKicker v-if=\"kicker\">{{ kicker }}</EKicker>\n    <component :is=\"`h${level}`\" class=\"e-h\" :class=\"`e-h${level}`\"><slot /></component>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-heading {\n    display: grid;\n    gap: var(--e-space-1);\n  }\n\n  .e-heading > .e-kicker {\n    margin: 0;\n  }\n\n  .e-h {\n    margin: 0;\n    font-family: var(--e-font-sans);\n    font-weight: 500;\n    color: var(--e-ink);\n    text-wrap: balance;\n  }\n\n  .e-h1 {\n    font-size: var(--e-text-4xl);\n    line-height: 1.15;\n  }\n\n  .e-h2 {\n    font-size: var(--e-text-2xl);\n    line-height: 1.25;\n  }\n\n  .e-h3 {\n    font-size: var(--e-text-xl);\n    line-height: 1.25;\n  }\n\n  .e-h4 {\n    font-size: var(--e-text-lg);\n    line-height: 1.3;\n  }\n\n  .e-h5 {\n    font-size: var(--e-text-md);\n    line-height: 1.3;\n  }\n\n  .e-h6 {\n    font-size: var(--e-text-sm);\n    line-height: 1.3;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;E,kBAqBEA,EAAA,GAAAC,EAGM,OAHNW,GAGM,CAFWI,EAAA,UAAfhB,EAAA,GAAAE,EAA6CC,GAAA,EAAA,KAAA,EAAA,GAAA;GAAtB,SAAAC,QAAY,CAATC,EAAAC,EAAAU,EAAA,MAAM,GAAA,CAAA,C;;E,kBAChChB,EAAA,GAAAE,EAAoFM,EAAA,IAAhEQ,EAAA,OAAK,GAAA,EAAI,OAAKP,EAAA,CAAC,OAAK,MAAeO,EAAA,OAAK,CAAA,E;GAAI,SAAAZ,QAAQ,CAARM,EAAQe,EAAA,QAAA,SAAA,C"}

package/dist/components/Highlight/EHighlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"EHighlight.js","names":["_sfc_main","EHighlight_vue_vue_type_script_setup_true_lang_default","EHighlight_default"],"sources":["../../../src/components/Highlight/EHighlight.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** Renders a `code` element in the mono font, for a name, value or snippet inside a sentence. Without it the element is a `mark`, for a word worth noticing. */\n  code?: boolean;\n}>();\n\ndefineSlots<{\n  /** The text to mark. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <code v-if=\"code\" class=\"e-highlight e-highlight--code\"><slot /></code>\n  <mark v-else class=\"e-highlight\"><slot /></mark>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-highlight {\n    padding: 0 0.2em;\n    border-radius: 0.15em;\n    background: linear-gradient(\n      to bottom,\n      transparent 18%,\n      color-mix(in srgb, var(--e-secondary) 38%, transparent) 18% 94%,\n      transparent 94%\n    );\n    box-decoration-break: clone;\n    -webkit-box-decoration-break: clone;\n    color: var(--e-ink);\n    font-weight: 500;\n  }\n\n  .e-highlight--code {\n    font-family: var(--e-font-mono);\n    font-size: 0.9em;\n  }\n\n  @media (forced-colors: active) {\n    .e-highlight {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EHighlight.js","names":["_sfc_main","EHighlight_vue_vue_type_script_setup_true_lang_default","EHighlight_default"],"sources":["../../../src/components/Highlight/EHighlight.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** Renders a `code` element in the mono font, for a name, value or snippet inside a sentence. Without it the element is a `mark`, for a word worth noticing. */\n  code?: boolean;\n}>();\n\ndefineSlots<{\n  /** The text to mark. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <code v-if=\"code\" class=\"e-highlight e-highlight--code\"><slot /></code>\n  <mark v-else class=\"e-highlight\"><slot /></mark>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-highlight {\n    padding: 0.1em 0.35em;\n    border-radius: 0.25em;\n    background: linear-gradient(\n      to bottom,\n      transparent 4%,\n      color-mix(in srgb, var(--e-secondary) 38%, transparent) 4% 100%,\n      transparent 100%\n    );\n    box-decoration-break: clone;\n    -webkit-box-decoration-break: clone;\n    color: var(--e-ink);\n    font-weight: 500;\n  }\n\n  /* Inside a link the highlight gives way to the link: no wash, an underline instead. */\n  a:any-link > .e-highlight {\n    padding: 0;\n    background: transparent;\n    color: inherit;\n    text-decoration: underline;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-decoration-color: currentcolor;\n    text-underline-offset: var(--e-space-1);\n  }\n\n  .e-highlight--code {\n    font-family: var(--e-font-mono);\n    font-size: var(--e-text-sm);\n  }\n\n  @media (forced-colors: active) {\n    .e-highlight {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Highlight/EHighlight.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EHighlight.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_renderSlot","_hoisted_1","_hoisted_2","EHighlight_vue_vue_type_script_setup_true_lang_default","__props","openBlock","createElementBlock","renderSlot","_ctx"],"sources":["../../../src/components/Highlight/EHighlight.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** Renders a `code` element in the mono font, for a name, value or snippet inside a sentence. Without it the element is a `mark`, for a word worth noticing. */\n  code?: boolean;\n}>();\n\ndefineSlots<{\n  /** The text to mark. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <code v-if=\"code\" class=\"e-highlight e-highlight--code\"><slot /></code>\n  <mark v-else class=\"e-highlight\"><slot /></mark>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-highlight {\n    padding: 0 0.2em;\n    border-radius: 0.15em;\n    background: linear-gradient(\n      to bottom,\n      transparent 18%,\n      color-mix(in srgb, var(--e-secondary) 38%, transparent) 18% 94%,\n      transparent 94%\n    );\n    box-decoration-break: clone;\n    -webkit-box-decoration-break: clone;\n    color: var(--e-ink);\n    font-weight: 500;\n  }\n\n  .e-highlight--code {\n    font-family: var(--e-font-mono);\n    font-size: 0.9em;\n  }\n\n  @media (forced-colors: active) {\n    .e-highlight {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;E,iBAecM,EAAA,QAAZN,EAAA,GAAAC,EAAuE,QAAvEE,GAAuE,CAAfD,EAAQQ,EAAA,QAAA,SAAA,C,OAChEV,EAAA,GAAAC,EAAgD,QAAhDG,GAAgD,CAAfF,EAAQQ,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EHighlight.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_renderSlot","_hoisted_1","_hoisted_2","EHighlight_vue_vue_type_script_setup_true_lang_default","__props","openBlock","createElementBlock","renderSlot","_ctx"],"sources":["../../../src/components/Highlight/EHighlight.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** Renders a `code` element in the mono font, for a name, value or snippet inside a sentence. Without it the element is a `mark`, for a word worth noticing. */\n  code?: boolean;\n}>();\n\ndefineSlots<{\n  /** The text to mark. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <code v-if=\"code\" class=\"e-highlight e-highlight--code\"><slot /></code>\n  <mark v-else class=\"e-highlight\"><slot /></mark>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-highlight {\n    padding: 0.1em 0.35em;\n    border-radius: 0.25em;\n    background: linear-gradient(\n      to bottom,\n      transparent 4%,\n      color-mix(in srgb, var(--e-secondary) 38%, transparent) 4% 100%,\n      transparent 100%\n    );\n    box-decoration-break: clone;\n    -webkit-box-decoration-break: clone;\n    color: var(--e-ink);\n    font-weight: 500;\n  }\n\n  /* Inside a link the highlight gives way to the link: no wash, an underline instead. */\n  a:any-link > .e-highlight {\n    padding: 0;\n    background: transparent;\n    color: inherit;\n    text-decoration: underline;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-decoration-color: currentcolor;\n    text-underline-offset: var(--e-space-1);\n  }\n\n  .e-highlight--code {\n    font-family: var(--e-font-mono);\n    font-size: var(--e-text-sm);\n  }\n\n  @media (forced-colors: active) {\n    .e-highlight {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;E,iBAecM,EAAA,QAAZN,EAAA,GAAAC,EAAuE,QAAvEE,GAAuE,CAAfD,EAAQQ,EAAA,QAAA,SAAA,C,OAChEV,EAAA,GAAAC,EAAgD,QAAhDG,GAAgD,CAAfF,EAAQQ,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  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:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 1px var(--e-wash-ring);\n  }\n\n  .e-icon-btn:active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 1.5px var(--e-ink);\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</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    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":""}

package/dist/components/IconButton/EIconButton.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     icon: IconProp;
     /** The accessible name. Write it as an action, such as "Download receipt". */
     label: string;
+    /** Disables the button. */
     disabled?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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  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:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 1px var(--e-wash-ring);\n  }\n\n  .e-icon-btn:active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 1.5px var(--e-ink);\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</style>\n"],"mappings":";;;;;;;;;;;;E,kBAeEA,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    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"}

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. */\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    /** `between` or `end`; start by default. */\n    justify?: \"between\" | \"end\";\n    /** `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, `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":""}

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

@@ -1,11 +1,11 @@
 type __VLS_Props = {
-    /** The element to render, `div` by default. */
+    /** The element to render, `div` by default; 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;
-    /** `between` or `end`; start by default. */
+    /** Main-axis placement: `between` or `end`; start by default. */
     justify?: "between" | "end";
-    /** `start` or `baseline`; centred by default. */
+    /** Cross-axis alignment: `start` or `baseline`; centred by default. */
     align?: "start" | "baseline";
     /** Keeps the children on one line instead of wrapping. */
     nowrap?: boolean;

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. */\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    /** `between` or `end`; start by default. */\n    justify?: \"between\" | \"end\";\n    /** `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, `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"}

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

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

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

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

package/dist/components/Link/ELink.js.map

@@ -1 +1 @@
-{"version":3,"file":"ELink.js","names":["_sfc_main","ELink_vue_vue_type_script_setup_true_lang_default","ELink_default"],"sources":["../../../src/components/Link/ELink.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  /** Where the link goes. */\n  href: string;\n  /** Opens in a new tab. */\n  external?: boolean;\n  /** An icon before the text: a built-in name, a name from your icon set, or an icon component. */\n  icon?: IconProp;\n}>();\n\ndefineSlots<{\n  /** The link text: say where it goes. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <a\n    class=\"e-link\"\n    :class=\"icon && 'e-link--icon'\"\n    :href=\"href\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noreferrer' : undefined\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </a>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-link {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-underline-offset: 4px;\n    text-decoration-color: var(--e-primary);\n  }\n\n  .e-link:hover {\n    color: var(--e-ink);\n    text-decoration-color: var(--e-ink);\n  }\n\n  .e-link:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-link--icon {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-link--icon .e-icon {\n    width: 1.25em;\n    height: 1.25em;\n  }\n\n  @media print {\n    .e-link::after {\n      content: \" (\" attr(href) \")\";\n      font-size: 0.85em;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ELink.js","names":["_sfc_main","ELink_vue_vue_type_script_setup_true_lang_default","ELink_default"],"sources":["../../../src/components/Link/ELink.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  /** Where the link goes. */\n  href: string;\n  /** Opens in a new tab (`target=\"_blank\"`, `rel=\"noreferrer\"`). */\n  external?: boolean;\n  /** An icon before the text: a built-in name, a name from your icon set, or an icon component. It is hidden from screen readers; the text names the link. */\n  icon?: IconProp;\n}>();\n\ndefineSlots<{\n  /** The link text: say where it goes. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <a\n    class=\"e-link\"\n    :class=\"icon && 'e-link--icon'\"\n    :href=\"href\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noreferrer' : undefined\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </a>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-link {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-underline-offset: 4px;\n    text-decoration-color: var(--e-primary);\n  }\n\n  .e-link:hover {\n    color: var(--e-ink);\n    text-decoration-color: var(--e-ink);\n  }\n\n  .e-link:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-link--icon {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-link--icon .e-icon {\n    width: 1.25em;\n    height: 1.25em;\n  }\n\n  @media print {\n    .e-link::after {\n      content: \" (\" attr(href) \")\";\n      font-size: 0.85em;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Link/ELink.vue.d.ts

@@ -2,9 +2,9 @@ import { IconProp } from '../../icons/types.js';
 type __VLS_Props = {
     /** Where the link goes. */
     href: string;
-    /** Opens in a new tab. */
+    /** Opens in a new tab (`target="_blank"`, `rel="noreferrer"`). */
     external?: boolean;
-    /** An icon before the text: a built-in name, a name from your icon set, or an icon component. */
+    /** An icon before the text: a built-in name, a name from your icon set, or an icon component. It is hidden from screen readers; the text names the link. */
     icon?: IconProp;
 };
 type __VLS_Slots = {

package/dist/components/Link/ELink.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ELink.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_renderSlot","EIcon_default","_hoisted_1","ELink_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","createBlock","createCommentVNode","renderSlot","_ctx"],"sources":["../../../src/components/Link/ELink.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  /** Where the link goes. */\n  href: string;\n  /** Opens in a new tab. */\n  external?: boolean;\n  /** An icon before the text: a built-in name, a name from your icon set, or an icon component. */\n  icon?: IconProp;\n}>();\n\ndefineSlots<{\n  /** The link text: say where it goes. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <a\n    class=\"e-link\"\n    :class=\"icon && 'e-link--icon'\"\n    :href=\"href\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noreferrer' : undefined\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </a>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-link {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-underline-offset: 4px;\n    text-decoration-color: var(--e-primary);\n  }\n\n  .e-link:hover {\n    color: var(--e-ink);\n    text-decoration-color: var(--e-ink);\n  }\n\n  .e-link:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-link--icon {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-link--icon .e-icon {\n    width: 1.25em;\n    height: 1.25em;\n  }\n\n  @media print {\n    .e-link::after {\n      content: \" (\" attr(href) \")\";\n      font-size: 0.85em;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;E,kBAqBEA,EAAA,GAAAC,EASI,KAAA;GARF,OAAKC,EAAA,CAAC,UACEW,EAAA,QAAI,cAAA,CAAA;GACX,MAAMA,EAAA;GACN,QAAQA,EAAA,WAAQ,WAAc,KAAA;GAC9B,KAAKA,EAAA,WAAQ,eAAkB,KAAA;E,IAEnBA,EAAA,QAAbb,EAAA,GAAAG,EAAkCC,GAAA;;GAAd,MAAMS,EAAA;E,oCAC1BP,EAAQW,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"ELink.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_renderSlot","EIcon_default","_hoisted_1","ELink_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","createBlock","createCommentVNode","renderSlot","_ctx"],"sources":["../../../src/components/Link/ELink.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  /** Where the link goes. */\n  href: string;\n  /** Opens in a new tab (`target=\"_blank\"`, `rel=\"noreferrer\"`). */\n  external?: boolean;\n  /** An icon before the text: a built-in name, a name from your icon set, or an icon component. It is hidden from screen readers; the text names the link. */\n  icon?: IconProp;\n}>();\n\ndefineSlots<{\n  /** The link text: say where it goes. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <a\n    class=\"e-link\"\n    :class=\"icon && 'e-link--icon'\"\n    :href=\"href\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noreferrer' : undefined\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </a>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-link {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-underline-offset: 4px;\n    text-decoration-color: var(--e-primary);\n  }\n\n  .e-link:hover {\n    color: var(--e-ink);\n    text-decoration-color: var(--e-ink);\n  }\n\n  .e-link:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-link--icon {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-link--icon .e-icon {\n    width: 1.25em;\n    height: 1.25em;\n  }\n\n  @media print {\n    .e-link::after {\n      content: \" (\" attr(href) \")\";\n      font-size: 0.85em;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;E,kBAqBEA,EAAA,GAAAC,EASI,KAAA;GARF,OAAKC,EAAA,CAAC,UACEW,EAAA,QAAI,cAAA,CAAA;GACX,MAAMA,EAAA;GACN,QAAQA,EAAA,WAAQ,WAAc,KAAA;GAC9B,KAAKA,EAAA,WAAQ,eAAkB,KAAA;E,IAEnBA,EAAA,QAAbb,EAAA,GAAAG,EAAkCC,GAAA;;GAAd,MAAMS,EAAA;E,oCAC1BP,EAAQW,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. `{ divider: true }` draws a rule. */\n    items: readonly EMenuItem[];\n    /** The look of the button. Default `outline`. */\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. Default `start`. */\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\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 - 32px));\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    background: var(--e-surface-tint);\n    outline: none;\n    box-shadow: inset 0 0 0 1px 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-highlighted] {\n    background: var(--e-surface-tint);\n    outline: none;\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n  }\n\n  .e-menu-item[data-disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\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    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":""}

package/dist/components/Menu/EMenu.vue.d.ts

@@ -21,13 +21,13 @@ export type EMenuItem = EMenuAction | EMenuDivider;
 type __VLS_Props = {
     /** The button's text. With a `trigger` slot it is not shown; name your own trigger. */
     label: string;
-    /** The actions, in order. `{ divider: true }` draws a rule. */
+    /** The actions, in order. Action: `{ label, icon?, onClick?, danger?, disabled? }`; `{ divider: true }` draws a rule. Put destructive last. */
     items: readonly EMenuItem[];
-    /** The look of the button. Default `outline`. */
+    /** The look of the button. */
     variant?: "primary" | "secondary" | "outline" | "danger" | "quiet";
     /** An icon before the label. */
     icon?: IconProp;
-    /** Which edge of the trigger the menu lines up with. Use `end` for a trigger at the end of a bar. Default `start`. */
+    /** Which edge of the trigger the menu lines up with. Use `end` for a trigger at the end of a bar. */
     align?: "start" | "end";
 };
 type __VLS_Slots = {
@@ -35,6 +35,7 @@ type __VLS_Slots = {
     trigger?(): unknown;
 };
 type __VLS_ModelProps = {
+    /** The open state. Opening it from outside moves no focus. */
     "open"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

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

@@ -1,8 +1,8 @@
 /* empty css                */
 import { usePortalTarget as e } from "../../config.js";
 import t from "../Icon/EIcon.js";
-/* empty css              */
 import n from "../Button/EButton.js";
+/* empty css              */
 import r from "../Divider/EDivider.js";
 import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeClass as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useModel as y, watch as b, withCtx as x } from "vue";
 import { DropdownMenuContent as S, DropdownMenuItem as C, DropdownMenuPortal as w, DropdownMenuRoot as T, DropdownMenuSeparator as E, DropdownMenuTrigger as D } from "reka-ui";

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. `{ divider: true }` draws a rule. */\n    items: readonly EMenuItem[];\n    /** The look of the button. Default `outline`. */\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. Default `start`. */\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\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 - 32px));\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    background: var(--e-surface-tint);\n    outline: none;\n    box-shadow: inset 0 0 0 1px 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-highlighted] {\n    background: var(--e-surface-tint);\n    outline: none;\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n  }\n\n  .e-menu-item[data-disabled] {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\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,GAUPE,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    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"}

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

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