@eos-ui/vue 0.1.1 → 0.2.1

package/THIRD_PARTY.md

@@ -1,4 +1,4 @@
 # Third-party notices
 
 - **Phosphor Icons** (https://phosphoricons.com), MIT License, Copyright (c) 2020 Phosphor Icons. The icon paths in `packages/vue/src/icons/phosphor.ts` are taken from this set.
-- **Jost** and **Spline Sans Mono** are the default typefaces (SIL Open Font License 1.1). They are not bundled; `fonts.css` loads them from Google Fonts, and any other font can be set with `defineTheme({ fonts })`.
+- **Bricolage Grotesque** and **Geist Mono** are the default typefaces (SIL Open Font License 1.1). They are not bundled; `fonts.css` loads them from Google Fonts, and any other font can be set with `defineTheme({ fonts })`.

package/dist/component-names.js

@@ -1,5 +1,5 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ new Set(/* @__PURE__ */ "EAccordion.EActions.EAddressField.EAmount.EAppFooter.EAppHeader.EAppShell.EAutocomplete.EAvatar.EBackLink.EBookingCard.EBreadcrumb.EButton.EButtonGroup.ECalendar.ECardField.ECheckbox.EChip.ECodeBlock.EColorField.ECombobox.ECurrencyField.EDataGrid.EDatePicker.EDescriptionList.EDetailRow.EDialog.EDisclosure.EDivider.EDrawer.EEmptyState.EErrorSummary.EField.EFieldset.EFormSection.EGrid.EHeading.EHighlight.EIcon.EIconButton.EInline.EItemList.EItemRow.EKbd.EKicker.ELink.ELinkCard.ELoadingBar.EMenu.EMetaList.EMultiSelect.ENavList.ENotice.ENumberField.EOtpField.EPageHeader.EPagination.EPanel.EPasswordField.EPhoneField.EPopover.EProgress.ERadioGroup.ERangePicker.ESearchBar.ESearchResults.ESegmented.ESelect.ESignatureField.ESignaturePad.ESkeleton.ESkipLink.ESlotPicker.ESpinner.EStack.EStamp.EStatementCard.EStatementRow.EStepper.ESurface.ESwitch.ETabs.EText.ETextField.ETextarea.ETimeline.EToast.EToastProvider.EToggle.ETooltip.EUpload.EVisuallyHidden".split("."));
+var e = /* @__PURE__ */ new Set(/* @__PURE__ */ "EActions.EAppFooter.EAppHeader.EAppShell.EAvatar.EBreadcrumb.EButton.ECalendar.ECheckbox.ECodeBlock.EColorField.ECombobox.ECurrencyField.EDataGrid.EDatePicker.EDefinition.EDescriptionList.EDialog.EDisclosure.EDivider.EDrawer.EEmptyState.EExpandableRow.EField.EFieldset.EGrid.EHeading.EHighlight.EIcon.EIconButton.EInline.EKbd.EKicker.ELink.EMenu.ENavList.ENotice.ENumberField.EOtpField.EPageHeader.EPagination.EPasswordField.EPhoneField.EProgress.ERadioGroup.ERangePicker.ESearchBar.ESearchResults.ESegmented.ESelect.ESignatureField.ESignaturePad.ESkeleton.ESkipLink.ESpinner.EStack.EStamp.EStepper.ESurface.ESwitch.ETabs.EText.ETextField.ETextarea.EToast.EToastProvider.ETooltip.EUpload.EVisuallyHidden".split("."));
 //#endregion
 export { e as componentNames };
 

package/dist/component-names.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-names.js","names":["componentNames"],"sources":["../src/component-names.ts"],"sourcesContent":["// Generated by scripts/gen-index.mjs. Do not edit.\nexport const componentNames: ReadonlySet<string> = new Set([\"EAccordion\",\"EActions\",\"EAddressField\",\"EAmount\",\"EAppFooter\",\"EAppHeader\",\"EAppShell\",\"EAutocomplete\",\"EAvatar\",\"EBackLink\",\"EBookingCard\",\"EBreadcrumb\",\"EButton\",\"EButtonGroup\",\"ECalendar\",\"ECardField\",\"ECheckbox\",\"EChip\",\"ECodeBlock\",\"EColorField\",\"ECombobox\",\"ECurrencyField\",\"EDataGrid\",\"EDatePicker\",\"EDescriptionList\",\"EDetailRow\",\"EDialog\",\"EDisclosure\",\"EDivider\",\"EDrawer\",\"EEmptyState\",\"EErrorSummary\",\"EField\",\"EFieldset\",\"EFormSection\",\"EGrid\",\"EHeading\",\"EHighlight\",\"EIcon\",\"EIconButton\",\"EInline\",\"EItemList\",\"EItemRow\",\"EKbd\",\"EKicker\",\"ELink\",\"ELinkCard\",\"ELoadingBar\",\"EMenu\",\"EMetaList\",\"EMultiSelect\",\"ENavList\",\"ENotice\",\"ENumberField\",\"EOtpField\",\"EPageHeader\",\"EPagination\",\"EPanel\",\"EPasswordField\",\"EPhoneField\",\"EPopover\",\"EProgress\",\"ERadioGroup\",\"ERangePicker\",\"ESearchBar\",\"ESearchResults\",\"ESegmented\",\"ESelect\",\"ESignatureField\",\"ESignaturePad\",\"ESkeleton\",\"ESkipLink\",\"ESlotPicker\",\"ESpinner\",\"EStack\",\"EStamp\",\"EStatementCard\",\"EStatementRow\",\"EStepper\",\"ESurface\",\"ESwitch\",\"ETabs\",\"EText\",\"ETextField\",\"ETextarea\",\"ETimeline\",\"EToast\",\"EToastProvider\",\"EToggle\",\"ETooltip\",\"EUpload\",\"EVisuallyHidden\"]);\n"],"mappings":";AACA,IAAaA,oBAAsC,IAAI,IAAI,q9BAAknC,CAAC"}
+{"version":3,"file":"component-names.js","names":["componentNames"],"sources":["../src/component-names.ts"],"sourcesContent":["// Generated by scripts/gen-index.mjs. Do not edit.\nexport const componentNames: ReadonlySet<string> = new Set([\"EActions\",\"EAppFooter\",\"EAppHeader\",\"EAppShell\",\"EAvatar\",\"EBreadcrumb\",\"EButton\",\"ECalendar\",\"ECheckbox\",\"ECodeBlock\",\"EColorField\",\"ECombobox\",\"ECurrencyField\",\"EDataGrid\",\"EDatePicker\",\"EDefinition\",\"EDescriptionList\",\"EDialog\",\"EDisclosure\",\"EDivider\",\"EDrawer\",\"EEmptyState\",\"EExpandableRow\",\"EField\",\"EFieldset\",\"EGrid\",\"EHeading\",\"EHighlight\",\"EIcon\",\"EIconButton\",\"EInline\",\"EKbd\",\"EKicker\",\"ELink\",\"EMenu\",\"ENavList\",\"ENotice\",\"ENumberField\",\"EOtpField\",\"EPageHeader\",\"EPagination\",\"EPasswordField\",\"EPhoneField\",\"EProgress\",\"ERadioGroup\",\"ERangePicker\",\"ESearchBar\",\"ESearchResults\",\"ESegmented\",\"ESelect\",\"ESignatureField\",\"ESignaturePad\",\"ESkeleton\",\"ESkipLink\",\"ESpinner\",\"EStack\",\"EStamp\",\"EStepper\",\"ESurface\",\"ESwitch\",\"ETabs\",\"EText\",\"ETextField\",\"ETextarea\",\"EToast\",\"EToastProvider\",\"ETooltip\",\"EUpload\",\"EVisuallyHidden\"]);\n"],"mappings":";AACA,IAAaA,oBAAsC,IAAI,IAAI,2tBAA00B,CAAC"}

package/dist/components/Actions/EActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EActions.js","names":["_sfc_main","EActions_vue_vue_type_script_setup_true_lang_default","EActions_default"],"sources":["../../../src/components/Actions/EActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `footer` for a bar at the end of a card. */\n    as?: string;\n    /** Puts the group on a tinted footer bar with a rule above. Use it for a group that ends a card or an overlay. */\n    bar?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The Buttons, in the order of the content, the main action first. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-actions\" :class=\"bar && 'e-actions--bar'\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-actions--bar {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    background: var(--e-surface-tint);\n  }\n\n  @media (max-width: 32rem) {\n    .e-actions--bar > .e-btn {\n      flex: 1 1 100%;\n    }\n  }\n\n  @media print {\n    .e-actions {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EActions.js","names":["_sfc_main","EActions_vue_vue_type_script_setup_true_lang_default","EActions_default"],"sources":["../../../src/components/Actions/EActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `footer` for a bar at the end of a card. */\n    as?: string;\n    /** Puts the group on a tinted footer bar with a rule above, for actions that end a card or an overlay. Buttons stack full width up to 32rem. Leave it off for the next step on a page. */\n    bar?: boolean;\n    /** Names the group for screen readers (for example \"Record actions\"): renders `role=\"group\"` with `aria-label`. Use it for buttons that belong together, such as a filter row. */\n    label?: string;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The Buttons, in the order of the content, the main action first. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-actions\"\n    :class=\"bar && 'e-actions--bar'\"\n    :role=\"label ? 'group' : undefined\"\n    :aria-label=\"label\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-actions--bar {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    background: var(--e-surface-tint);\n  }\n\n  @media (max-width: 32rem) {\n    .e-actions--bar > .e-btn {\n      flex: 1 1 100%;\n    }\n  }\n\n  @media print {\n    .e-actions {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Actions/EActions.vue.d.ts

@@ -1,8 +1,10 @@
 type __VLS_Props = {
     /** The element to render, `div` by default. Use `footer` for a bar at the end of a card. */
     as?: string;
-    /** Puts the group on a tinted footer bar with a rule above. Use it for a group that ends a card or an overlay. */
+    /** Puts the group on a tinted footer bar with a rule above, for actions that end a card or an overlay. Buttons stack full width up to 32rem. Leave it off for the next step on a page. */
     bar?: boolean;
+    /** Names the group for screen readers (for example "Record actions"): renders `role="group"` with `aria-label`. Use it for buttons that belong together, such as a filter row. */
+    label?: string;
 };
 type __VLS_Slots = {
     /** The Buttons, in the order of the content, the main action first. */

package/dist/components/Actions/EActions.vue_vue_type_script_setup_true_lang.js

@@ -5,13 +5,22 @@ var s = /*@__PURE__*/ t({
 	__name: "EActions",
 	props: {
 		as: { default: "div" },
-		bar: { type: Boolean }
+		bar: { type: Boolean },
+		label: {}
 	},
 	setup(t) {
-		return (s, c) => (r(), e(a(t.as), { class: n(["e-actions", t.bar && "e-actions--bar"]) }, {
+		return (s, c) => (r(), e(a(t.as), {
+			class: n(["e-actions", t.bar && "e-actions--bar"]),
+			role: t.label ? "group" : void 0,
+			"aria-label": t.label
+		}, {
 			default: o(() => [i(s.$slots, "default")]),
 			_: 3
-		}, 8, ["class"]));
+		}, 8, [
+			"class",
+			"role",
+			"aria-label"
+		]));
 	}
 });
 //#endregion

package/dist/components/Actions/EActions.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EActions.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","EActions_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","resolveDynamicComponent","__props","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Actions/EActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `footer` for a bar at the end of a card. */\n    as?: string;\n    /** Puts the group on a tinted footer bar with a rule above. Use it for a group that ends a card or an overlay. */\n    bar?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The Buttons, in the order of the content, the main action first. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-actions\" :class=\"bar && 'e-actions--bar'\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-actions--bar {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    background: var(--e-surface-tint);\n  }\n\n  @media (max-width: 32rem) {\n    .e-actions--bar > .e-btn {\n      flex: 1 1 100%;\n    }\n  }\n\n  @media print {\n    .e-actions {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;E,kBAoBEA,EAAA,GAAAC,EAEYC,EAFIQ,EAAA,EAAE,GAAA,EAAE,OAAKP,EAAA,CAAC,aAAoBO,EAAA,OAAG,gBAAA,CAAA,E;GAC/C,SAAAN,QAAQ,CAARC,EAAQS,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EActions.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","EActions_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","resolveDynamicComponent","__props","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Actions/EActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `footer` for a bar at the end of a card. */\n    as?: string;\n    /** Puts the group on a tinted footer bar with a rule above, for actions that end a card or an overlay. Buttons stack full width up to 32rem. Leave it off for the next step on a page. */\n    bar?: boolean;\n    /** Names the group for screen readers (for example \"Record actions\"): renders `role=\"group\"` with `aria-label`. Use it for buttons that belong together, such as a filter row. */\n    label?: string;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The Buttons, in the order of the content, the main action first. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-actions\"\n    :class=\"bar && 'e-actions--bar'\"\n    :role=\"label ? 'group' : undefined\"\n    :aria-label=\"label\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-actions--bar {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    background: var(--e-surface-tint);\n  }\n\n  @media (max-width: 32rem) {\n    .e-actions--bar > .e-btn {\n      flex: 1 1 100%;\n    }\n  }\n\n  @media print {\n    .e-actions {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;E,kBAsBEA,EAAA,GAAAC,EAQYC,EAPLQ,EAAA,EAAE,GAAA;GACP,OAAKP,EAAA,CAAC,aACEO,EAAA,OAAG,gBAAA,CAAA;GACV,MAAMA,EAAA,QAAK,UAAa,KAAA;GACxB,cAAYA,EAAA;;GAEb,SAAAN,QAAQ,CAARC,EAAQS,EAAA,QAAA,SAAA,C"}

package/dist/components/AppHeader/EAppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"EAppHeader.js","names":["_sfc_main","EAppHeader_vue_vue_type_script_setup_true_lang_default","EAppHeader_default"],"sources":["../../../src/components/AppHeader/EAppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\nimport \"./shell.css\";\n\ndefineProps<{\n  /** Pins the header to the top while the page scrolls. */\n  sticky?: boolean;\n}>();\n\ndefineSlots<{\n  /** The logo or the name, usually a link to the home page. */\n  logo?(): unknown;\n  /** The person's menu or a sign-in Button, at the end of the bar. */\n  actions?(): unknown;\n  /** The navigation, usually an ENavList. It sits on its own row and scrolls sideways when it does not fit. */\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <header class=\"e-appheader\" :class=\"sticky && 'e-appheader--sticky'\">\n    <div class=\"e-appheader-bar e-shell-inner\">\n      <div class=\"e-appheader-logo\"><slot name=\"logo\" /></div>\n      <div v-if=\"$slots.actions\" class=\"e-appheader-actions\"><slot name=\"actions\" /></div>\n    </div>\n    <div v-if=\"$slots.default\" class=\"e-appheader-nav\">\n      <div class=\"e-shell-inner\"><slot /></div>\n    </div>\n  </header>\n</template>\n\n<style>\n@layer e.page {\n  .e-appheader {\n    background: var(--e-surface);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-appheader--sticky {\n    position: sticky;\n    top: 0;\n    z-index: var(--e-z-sticky);\n  }\n\n  .e-appheader-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-4);\n    min-height: 64px;\n    padding: 0 var(--e-space-4);\n  }\n\n  .e-appheader-logo {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    font: 600 var(--e-text-xl) / 1.2 var(--e-font-sans);\n  }\n\n  .e-appheader-logo a {\n    color: var(--e-ink);\n    text-decoration: none;\n  }\n\n  .e-appheader-logo a: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-appheader-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-appheader-nav {\n    padding: 0 var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    overflow-x: auto;\n    padding-block: var(--e-space-2);\n    padding-inline: 0;\n  }\n\n  @media print {\n    .e-appheader-nav {\n      display: none;\n    }\n  }\n\n  .e-appheader-nav .e-nav {\n    margin-inline-start: calc(-1 * var(--e-space-3));\n  }\n\n  .e-appheader-nav .e-nav > ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EAppHeader.js","names":["_sfc_main","EAppHeader_vue_vue_type_script_setup_true_lang_default","EAppHeader_default"],"sources":["../../../src/components/AppHeader/EAppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\nimport \"./shell.css\";\n\ndefineProps<{\n  /** Pins the header to the top while the page scrolls. */\n  sticky?: boolean;\n}>();\n\ndefineSlots<{\n  /** The logo or the name, usually a link to the home page. */\n  logo?(): unknown;\n  /** The person's menu or a sign-in Button, at the end of the bar. */\n  actions?(): unknown;\n  /** The navigation, usually an ENavList. It sits on its own row and scrolls sideways when it does not fit. */\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <header class=\"e-appheader\" :class=\"sticky && 'e-appheader--sticky'\">\n    <div class=\"e-appheader-bar e-shell-inner\">\n      <div class=\"e-appheader-logo\"><slot name=\"logo\" /></div>\n      <div v-if=\"$slots.actions\" class=\"e-appheader-actions\"><slot name=\"actions\" /></div>\n    </div>\n    <div v-if=\"$slots.default\" class=\"e-appheader-nav\">\n      <div class=\"e-shell-inner\"><slot /></div>\n    </div>\n  </header>\n</template>\n\n<style>\n@layer e.page {\n  .e-appheader {\n    background: var(--e-surface);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-appheader--sticky {\n    position: sticky;\n    top: 0;\n    z-index: var(--e-z-sticky);\n  }\n\n  .e-appheader-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-4);\n    min-height: calc(var(--e-control-height) + var(--e-space-4));\n    padding: 0 var(--e-space-4);\n  }\n\n  .e-appheader-logo {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    font: 600 var(--e-text-xl) / 1.2 var(--e-font-sans);\n  }\n\n  .e-appheader-logo a {\n    color: var(--e-ink);\n    text-decoration: none;\n  }\n\n  .e-appheader-logo a: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-appheader-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-appheader-nav {\n    padding: 0 var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    overflow-x: auto;\n    padding-block: var(--e-space-2);\n    padding-inline: 0;\n  }\n\n  @media print {\n    .e-appheader-nav {\n      display: none;\n    }\n  }\n\n  .e-appheader-nav .e-nav {\n    margin-inline-start: calc(-1 * var(--e-space-3));\n  }\n\n  .e-appheader-nav .e-nav > ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/AppHeader/EAppHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EAppHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EAppHeader_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","createElementVNode","renderSlot","_ctx","createCommentVNode"],"sources":["../../../src/components/AppHeader/EAppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\nimport \"./shell.css\";\n\ndefineProps<{\n  /** Pins the header to the top while the page scrolls. */\n  sticky?: boolean;\n}>();\n\ndefineSlots<{\n  /** The logo or the name, usually a link to the home page. */\n  logo?(): unknown;\n  /** The person's menu or a sign-in Button, at the end of the bar. */\n  actions?(): unknown;\n  /** The navigation, usually an ENavList. It sits on its own row and scrolls sideways when it does not fit. */\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <header class=\"e-appheader\" :class=\"sticky && 'e-appheader--sticky'\">\n    <div class=\"e-appheader-bar e-shell-inner\">\n      <div class=\"e-appheader-logo\"><slot name=\"logo\" /></div>\n      <div v-if=\"$slots.actions\" class=\"e-appheader-actions\"><slot name=\"actions\" /></div>\n    </div>\n    <div v-if=\"$slots.default\" class=\"e-appheader-nav\">\n      <div class=\"e-shell-inner\"><slot /></div>\n    </div>\n  </header>\n</template>\n\n<style>\n@layer e.page {\n  .e-appheader {\n    background: var(--e-surface);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-appheader--sticky {\n    position: sticky;\n    top: 0;\n    z-index: var(--e-z-sticky);\n  }\n\n  .e-appheader-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-4);\n    min-height: 64px;\n    padding: 0 var(--e-space-4);\n  }\n\n  .e-appheader-logo {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    font: 600 var(--e-text-xl) / 1.2 var(--e-font-sans);\n  }\n\n  .e-appheader-logo a {\n    color: var(--e-ink);\n    text-decoration: none;\n  }\n\n  .e-appheader-logo a: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-appheader-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-appheader-nav {\n    padding: 0 var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    overflow-x: auto;\n    padding-block: var(--e-space-2);\n    padding-inline: 0;\n  }\n\n  @media print {\n    .e-appheader-nav {\n      display: none;\n    }\n  }\n\n  .e-appheader-nav .e-nav {\n    margin-inline-start: calc(-1 * var(--e-space-3));\n  }\n\n  .e-appheader-nav .e-nav > ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;E,kBAoBEC,EAAA,GAAAC,EAQS,UAAA,EARD,OAAKC,EAAA,CAAC,eAAsBa,EAAA,UAAM,qBAAA,CAAA,E,IACxCZ,EAGM,OAHNG,GAGM,CAFJH,EAAwD,OAAxDI,GAAwD,CAA1BH,EAAoBc,EAAA,QAAA,MAAA,C,IACvCnB,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAAoF,OAApFO,GAAoF,CAA7BJ,EAAuBc,EAAA,QAAA,SAAA,C,mBAErEnB,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAEM,OAFNQ,GAEM,CADJN,EAAyC,OAAzCO,GAAyC,CAAdN,EAAQc,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EAppHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EAppHeader_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","createElementVNode","renderSlot","_ctx","createCommentVNode"],"sources":["../../../src/components/AppHeader/EAppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\nimport \"./shell.css\";\n\ndefineProps<{\n  /** Pins the header to the top while the page scrolls. */\n  sticky?: boolean;\n}>();\n\ndefineSlots<{\n  /** The logo or the name, usually a link to the home page. */\n  logo?(): unknown;\n  /** The person's menu or a sign-in Button, at the end of the bar. */\n  actions?(): unknown;\n  /** The navigation, usually an ENavList. It sits on its own row and scrolls sideways when it does not fit. */\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <header class=\"e-appheader\" :class=\"sticky && 'e-appheader--sticky'\">\n    <div class=\"e-appheader-bar e-shell-inner\">\n      <div class=\"e-appheader-logo\"><slot name=\"logo\" /></div>\n      <div v-if=\"$slots.actions\" class=\"e-appheader-actions\"><slot name=\"actions\" /></div>\n    </div>\n    <div v-if=\"$slots.default\" class=\"e-appheader-nav\">\n      <div class=\"e-shell-inner\"><slot /></div>\n    </div>\n  </header>\n</template>\n\n<style>\n@layer e.page {\n  .e-appheader {\n    background: var(--e-surface);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-appheader--sticky {\n    position: sticky;\n    top: 0;\n    z-index: var(--e-z-sticky);\n  }\n\n  .e-appheader-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-4);\n    min-height: calc(var(--e-control-height) + var(--e-space-4));\n    padding: 0 var(--e-space-4);\n  }\n\n  .e-appheader-logo {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    font: 600 var(--e-text-xl) / 1.2 var(--e-font-sans);\n  }\n\n  .e-appheader-logo a {\n    color: var(--e-ink);\n    text-decoration: none;\n  }\n\n  .e-appheader-logo a: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-appheader-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n  }\n\n  .e-appheader-nav {\n    padding: 0 var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    overflow-x: auto;\n    padding-block: var(--e-space-2);\n    padding-inline: 0;\n  }\n\n  @media print {\n    .e-appheader-nav {\n      display: none;\n    }\n  }\n\n  .e-appheader-nav .e-nav {\n    margin-inline-start: calc(-1 * var(--e-space-3));\n  }\n\n  .e-appheader-nav .e-nav > ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;E,kBAoBEC,EAAA,GAAAC,EAQS,UAAA,EARD,OAAKC,EAAA,CAAC,eAAsBa,EAAA,UAAM,qBAAA,CAAA,E,IACxCZ,EAGM,OAHNG,GAGM,CAFJH,EAAwD,OAAxDI,GAAwD,CAA1BH,EAAoBc,EAAA,QAAA,MAAA,C,IACvCnB,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAAoF,OAApFO,GAAoF,CAA7BJ,EAAuBc,EAAA,QAAA,SAAA,C,mBAErEnB,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAEM,OAFNQ,GAEM,CADJN,EAAyC,OAAzCO,GAAyC,CAAdN,EAAQc,EAAA,QAAA,SAAA,C"}

package/dist/components/AppShell/EAppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EAppShell.js","names":["_sfc_main","EAppShell_vue_vue_type_script_setup_true_lang_default","EAppShell_default"],"sources":["../../../src/components/AppShell/EAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ESkipLink from \"../SkipLink/ESkipLink.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The `id` of the main content, which the skip link targets. */\n    mainId?: string;\n    /** The sidebar landmark's name. Defaults to \"Main\". */\n    sidebarLabel?: string;\n  }>(),\n  { mainId: \"main\" },\n);\n\ndefineSlots<{\n  /** An EAppHeader. */\n  header?(): unknown;\n  /** The side navigation, usually an ENavList. Two columns from 48rem wide; above the content below that. */\n  sidebar?(): unknown;\n  /** An EAppFooter. */\n  footer?(): unknown;\n  /** The page: start it with an EPageHeader. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <div class=\"e-shell\" :class=\"$slots.sidebar && 'e-shell--side'\">\n    <ESkipLink :href=\"`#${mainId}`\" />\n    <slot name=\"header\" />\n    <div class=\"e-shell-body\">\n      <aside v-if=\"$slots.sidebar\" class=\"e-shell-side\" :aria-label=\"sidebarLabel || t('mainNav')\">\n        <slot name=\"sidebar\" />\n      </aside>\n      <main :id=\"mainId\" class=\"e-shell-main\" tabindex=\"-1\">\n        <slot />\n      </main>\n    </div>\n    <slot name=\"footer\" />\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-shell {\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    min-height: 100%;\n    background: var(--e-background);\n  }\n\n  .e-shell-body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--e-space-6);\n    width: 100%;\n    max-width: 72rem;\n    margin-inline: auto;\n    padding: var(--e-space-6) var(--e-space-4);\n  }\n\n  @media (min-width: 48rem) {\n    .e-shell--side .e-shell-body {\n      grid-template-columns: 15rem minmax(0, 1fr);\n    }\n  }\n\n  .e-shell-main {\n    min-width: 0;\n  }\n\n  .e-shell-main:focus {\n    outline: none;\n  }\n\n  @media print {\n    .e-root,\n    body {\n      background: #fff;\n      color: #000;\n    }\n\n    .e-shell-side {\n      display: none;\n    }\n\n    .e-shell-body {\n      max-width: none;\n      padding: 0;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EAppShell.js","names":["_sfc_main","EAppShell_vue_vue_type_script_setup_true_lang_default","EAppShell_default"],"sources":["../../../src/components/AppShell/EAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ESkipLink from \"../SkipLink/ESkipLink.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The `id` of the `main` element, which the skip link targets. Keep it unique. */\n    mainId?: string;\n    /** The name of the sidebar landmark. @default \"Main\" */\n    sidebarLabel?: string;\n  }>(),\n  { mainId: \"main\" },\n);\n\ndefineSlots<{\n  /** An EAppHeader. */\n  header?(): unknown;\n  /** The side navigation, usually an ENavList. Two columns from 48rem wide; above the content below that. */\n  sidebar?(): unknown;\n  /** An EAppFooter. */\n  footer?(): unknown;\n  /** The page: start it with an EPageHeader. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <div class=\"e-shell\" :class=\"$slots.sidebar && 'e-shell--side'\">\n    <ESkipLink :href=\"`#${mainId}`\" />\n    <slot name=\"header\" />\n    <div class=\"e-shell-body\">\n      <aside v-if=\"$slots.sidebar\" class=\"e-shell-side\" :aria-label=\"sidebarLabel || t('mainNav')\">\n        <slot name=\"sidebar\" />\n      </aside>\n      <main :id=\"mainId\" class=\"e-shell-main\" tabindex=\"-1\">\n        <slot />\n      </main>\n    </div>\n    <slot name=\"footer\" />\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-shell {\n    position: relative;\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    min-height: 100%;\n    background: var(--e-background);\n  }\n\n  .e-shell-body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--e-space-6);\n    width: 100%;\n    max-width: var(--e-shell-width, 72rem);\n    margin-inline: auto;\n    padding: var(--e-space-6) var(--e-space-4);\n  }\n\n  /* Hairlines down both edges of the page column, drawn over the header and footer. */\n  @media (min-width: 64rem) {\n    .e-shell::after {\n      content: \"\";\n      position: absolute;\n      inset-block: 0;\n      inset-inline: 0;\n      z-index: var(--e-z-sticky);\n      box-sizing: border-box;\n      width: min(100%, var(--e-shell-width, 72rem));\n      margin-inline: auto;\n      border-inline: var(--e-stroke-hair) solid var(--e-shell-rail, var(--e-border));\n      pointer-events: none;\n    }\n  }\n\n  @media (min-width: 48rem) {\n    .e-shell--side .e-shell-body {\n      grid-template-columns: 15rem minmax(0, 1fr);\n    }\n  }\n\n  .e-shell-main {\n    min-width: 0;\n  }\n\n  .e-shell-main:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  .e-shell-main:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  @media print {\n    .e-root,\n    body {\n      background: var(--e-print-paper, #fff);\n      color: var(--e-print-ink, #000);\n    }\n\n    .e-shell::after,\n    .e-shell-side {\n      display: none;\n    }\n\n    .e-shell-body {\n      max-width: none;\n      padding: 0;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/AppShell/EAppShell.vue.d.ts

@@ -1,7 +1,7 @@
 type __VLS_Props = {
-    /** The `id` of the main content, which the skip link targets. */
+    /** The `id` of the `main` element, which the skip link targets. Keep it unique. */
     mainId?: string;
-    /** The sidebar landmark's name. Defaults to "Main". */
+    /** The name of the sidebar landmark. @default "Main" */
     sidebarLabel?: string;
 };
 type __VLS_Slots = {

package/dist/components/AppShell/EAppShell.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EAppShell.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createVNode","ESkipLink","_renderSlot","_createElementVNode","_unref","_createCommentVNode","ESkipLink_default","_hoisted_1","_hoisted_2","_hoisted_3","EAppShell_vue_vue_type_script_setup_true_lang_default","t","useMessages","openBlock","createElementBlock","normalizeClass","_ctx","createVNode","__props","renderSlot","createElementVNode","unref","createCommentVNode"],"sources":["../../../src/components/AppShell/EAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ESkipLink from \"../SkipLink/ESkipLink.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The `id` of the main content, which the skip link targets. */\n    mainId?: string;\n    /** The sidebar landmark's name. Defaults to \"Main\". */\n    sidebarLabel?: string;\n  }>(),\n  { mainId: \"main\" },\n);\n\ndefineSlots<{\n  /** An EAppHeader. */\n  header?(): unknown;\n  /** The side navigation, usually an ENavList. Two columns from 48rem wide; above the content below that. */\n  sidebar?(): unknown;\n  /** An EAppFooter. */\n  footer?(): unknown;\n  /** The page: start it with an EPageHeader. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <div class=\"e-shell\" :class=\"$slots.sidebar && 'e-shell--side'\">\n    <ESkipLink :href=\"`#${mainId}`\" />\n    <slot name=\"header\" />\n    <div class=\"e-shell-body\">\n      <aside v-if=\"$slots.sidebar\" class=\"e-shell-side\" :aria-label=\"sidebarLabel || t('mainNav')\">\n        <slot name=\"sidebar\" />\n      </aside>\n      <main :id=\"mainId\" class=\"e-shell-main\" tabindex=\"-1\">\n        <slot />\n      </main>\n    </div>\n    <slot name=\"footer\" />\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-shell {\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    min-height: 100%;\n    background: var(--e-background);\n  }\n\n  .e-shell-body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--e-space-6);\n    width: 100%;\n    max-width: 72rem;\n    margin-inline: auto;\n    padding: var(--e-space-6) var(--e-space-4);\n  }\n\n  @media (min-width: 48rem) {\n    .e-shell--side .e-shell-body {\n      grid-template-columns: 15rem minmax(0, 1fr);\n    }\n  }\n\n  .e-shell-main {\n    min-width: 0;\n  }\n\n  .e-shell-main:focus {\n    outline: none;\n  }\n\n  @media print {\n    .e-root,\n    body {\n      background: #fff;\n      color: #000;\n    }\n\n    .e-shell-side {\n      display: none;\n    }\n\n    .e-shell-body {\n      max-width: none;\n      padding: 0;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EA0BA,IAAMe,IAAIC,EAAY;E,kBAIpBf,EAAA,GAAAC,EAYM,OAAA,EAZD,OAAKC,EAAA,CAAC,WAAkBH,EAAAA,OAAO,WAAO,eAAA,CAAA,E;GACzCI,EAAkCC,GAAA,EAAtB,MAAI,IAAMiB,EAAA,S;GACtBhB,EAAsBc,EAAA,QAAA,QAAA;GACtBb,EAOM,OAPNI,GAOM,CANSX,EAAAA,OAAO,WAApBC,EAAA,GAAAC,EAEQ,SAAA;;IAFqB,OAAM;IAAgB,cAAYoB,EAAA,gBAAgBd,EAAAO,CAAA,CAAC,CAAA,SAAA;G,IAC9ET,EAAuBc,EAAA,QAAA,SAAA,C,uBAEzBb,EAEO,QAAA;IAFA,IAAIe,EAAA;IAAQ,OAAM;IAAe,UAAS;G,IAC/ChB,EAAQc,EAAA,QAAA,SAAA,C;GAGZd,EAAsBc,EAAA,QAAA,QAAA"}
+{"version":3,"file":"EAppShell.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createVNode","ESkipLink","_renderSlot","_createElementVNode","_unref","_createCommentVNode","ESkipLink_default","_hoisted_1","_hoisted_2","_hoisted_3","EAppShell_vue_vue_type_script_setup_true_lang_default","t","useMessages","openBlock","createElementBlock","normalizeClass","_ctx","createVNode","__props","renderSlot","createElementVNode","unref","createCommentVNode"],"sources":["../../../src/components/AppShell/EAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ESkipLink from \"../SkipLink/ESkipLink.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The `id` of the `main` element, which the skip link targets. Keep it unique. */\n    mainId?: string;\n    /** The name of the sidebar landmark. @default \"Main\" */\n    sidebarLabel?: string;\n  }>(),\n  { mainId: \"main\" },\n);\n\ndefineSlots<{\n  /** An EAppHeader. */\n  header?(): unknown;\n  /** The side navigation, usually an ENavList. Two columns from 48rem wide; above the content below that. */\n  sidebar?(): unknown;\n  /** An EAppFooter. */\n  footer?(): unknown;\n  /** The page: start it with an EPageHeader. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <div class=\"e-shell\" :class=\"$slots.sidebar && 'e-shell--side'\">\n    <ESkipLink :href=\"`#${mainId}`\" />\n    <slot name=\"header\" />\n    <div class=\"e-shell-body\">\n      <aside v-if=\"$slots.sidebar\" class=\"e-shell-side\" :aria-label=\"sidebarLabel || t('mainNav')\">\n        <slot name=\"sidebar\" />\n      </aside>\n      <main :id=\"mainId\" class=\"e-shell-main\" tabindex=\"-1\">\n        <slot />\n      </main>\n    </div>\n    <slot name=\"footer\" />\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-shell {\n    position: relative;\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    min-height: 100%;\n    background: var(--e-background);\n  }\n\n  .e-shell-body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--e-space-6);\n    width: 100%;\n    max-width: var(--e-shell-width, 72rem);\n    margin-inline: auto;\n    padding: var(--e-space-6) var(--e-space-4);\n  }\n\n  /* Hairlines down both edges of the page column, drawn over the header and footer. */\n  @media (min-width: 64rem) {\n    .e-shell::after {\n      content: \"\";\n      position: absolute;\n      inset-block: 0;\n      inset-inline: 0;\n      z-index: var(--e-z-sticky);\n      box-sizing: border-box;\n      width: min(100%, var(--e-shell-width, 72rem));\n      margin-inline: auto;\n      border-inline: var(--e-stroke-hair) solid var(--e-shell-rail, var(--e-border));\n      pointer-events: none;\n    }\n  }\n\n  @media (min-width: 48rem) {\n    .e-shell--side .e-shell-body {\n      grid-template-columns: 15rem minmax(0, 1fr);\n    }\n  }\n\n  .e-shell-main {\n    min-width: 0;\n  }\n\n  .e-shell-main:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  .e-shell-main:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  @media print {\n    .e-root,\n    body {\n      background: var(--e-print-paper, #fff);\n      color: var(--e-print-ink, #000);\n    }\n\n    .e-shell::after,\n    .e-shell-side {\n      display: none;\n    }\n\n    .e-shell-body {\n      max-width: none;\n      padding: 0;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EA0BA,IAAMe,IAAIC,EAAY;E,kBAIpBf,EAAA,GAAAC,EAYM,OAAA,EAZD,OAAKC,EAAA,CAAC,WAAkBH,EAAAA,OAAO,WAAO,eAAA,CAAA,E;GACzCI,EAAkCC,GAAA,EAAtB,MAAI,IAAMiB,EAAA,S;GACtBhB,EAAsBc,EAAA,QAAA,QAAA;GACtBb,EAOM,OAPNI,GAOM,CANSX,EAAAA,OAAO,WAApBC,EAAA,GAAAC,EAEQ,SAAA;;IAFqB,OAAM;IAAgB,cAAYoB,EAAA,gBAAgBd,EAAAO,CAAA,CAAC,CAAA,SAAA;G,IAC9ET,EAAuBc,EAAA,QAAA,SAAA,C,uBAEzBb,EAEO,QAAA;IAFA,IAAIe,EAAA;IAAQ,OAAM;IAAe,UAAS;G,IAC/ChB,EAAQc,EAAA,QAAA,SAAA,C;GAGZd,EAAsBc,EAAA,QAAA,QAAA"}

package/dist/components/Avatar/EAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"EAvatar.js","names":["_sfc_main","EAvatar_vue_vue_type_script_setup_true_lang_default","EAvatar_default"],"sources":["../../../src/components/Avatar/EAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The person's name. Screen readers read it; the initials come from it. */\n    name: string;\n    /** A photo URL. If it fails to load, the initials appear. */\n    src?: string;\n    /** 28px, for rows. */\n    small?: boolean;\n    /** 56px, for a practitioner on an appointment card or a profile. */\n    large?: boolean;\n    /** `button` makes it a control named by `name`, such as the trigger of an account menu. Default `span`. */\n    as?: \"span\" | \"button\";\n  }>(),\n  { as: \"span\" },\n);\n\nconst failed = ref(false);\nwatch(\n  () => props.src,\n  () => (failed.value = false),\n);\n\nconst initials = computed(() => {\n  const parts = String(props.name || \"?\")\n    .split(/\\s+/)\n    .filter(Boolean);\n  const first = [...(parts[0] ?? \"?\")][0] ?? \"?\";\n  const last = parts.length > 1 ? ([...parts[parts.length - 1]!][0] ?? \"\") : \"\";\n  return (first + last).toUpperCase();\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-avatar\"\n    :class=\"{ 'e-avatar--s': small, 'e-avatar--l': large, 'e-avatar--button': as === 'button' }\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :role=\"as === 'button' ? undefined : 'img'\"\n    :aria-label=\"as === 'button' ? undefined : name\"\n  >\n    <img v-if=\"src && !failed\" class=\"e-avatar-img\" :src=\"src\" alt=\"\" @error=\"failed = true\" />\n    <span v-else-if=\"as === 'button'\" aria-hidden=\"true\">{{ initials }}</span>\n    <template v-else>{{ initials }}</template>\n    <span v-if=\"as === 'button'\" class=\"e-sr\">{{ name }}</span>\n  </component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-avatar {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    box-sizing: border-box;\n    width: 44px;\n    height: 44px;\n    overflow: hidden;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface-tint);\n    color: var(--e-primary);\n    font: 600 var(--e-text-sm) / 1 var(--e-font-mono);\n    letter-spacing: 0.02em;\n  }\n\n  .e-avatar--button {\n    position: relative;\n    padding: 0;\n    cursor: pointer;\n    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-avatar--button:hover {\n    border-color: var(--e-ink);\n  }\n\n  .e-avatar--button:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-avatar--button {\n      transition: none;\n    }\n  }\n\n  .e-avatar--s {\n    width: 32px;\n    height: 32px;\n    font-size: var(--e-text-xs);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-avatar--l {\n    width: 64px;\n    height: 64px;\n    font-size: var(--e-text-lg);\n  }\n\n  .e-avatar-img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EAvatar.js","names":["_sfc_main","EAvatar_vue_vue_type_script_setup_true_lang_default","EAvatar_default"],"sources":["../../../src/components/Avatar/EAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The person's name. Screen readers read it; the initials are the first letters of its first and last word. */\n    name: string;\n    /** A photo URL. If it fails to load, the initials appear. */\n    src?: string;\n    /** 32px, for rows and bars. */\n    small?: boolean;\n    /** 64px, for a profile or practitioner on an appointment card. The default is 44px. */\n    large?: boolean;\n    /** `button` renders a `button` with `type=\"button\"`, a pointer cursor and a focus ring, named by `name`, such as the `trigger` of an `EMenu`. Default `span`. */\n    as?: \"span\" | \"button\";\n  }>(),\n  { as: \"span\" },\n);\n\nconst failed = ref(false);\nwatch(\n  () => props.src,\n  () => (failed.value = false),\n);\n\nconst initials = computed(() => {\n  const parts = String(props.name || \"?\")\n    .split(/\\s+/)\n    .filter(Boolean);\n  const first = [...(parts[0] ?? \"?\")][0] ?? \"?\";\n  const last = parts.length > 1 ? ([...parts[parts.length - 1]!][0] ?? \"\") : \"\";\n  return (first + last).toUpperCase();\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-avatar\"\n    :class=\"{ 'e-avatar--s': small, 'e-avatar--l': large, 'e-avatar--button': as === 'button' }\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :role=\"as === 'button' ? undefined : 'img'\"\n    :aria-label=\"as === 'button' ? undefined : name\"\n  >\n    <img v-if=\"src && !failed\" class=\"e-avatar-img\" :src=\"src\" alt=\"\" @error=\"failed = true\" />\n    <span v-else-if=\"as === 'button'\" aria-hidden=\"true\">{{ initials }}</span>\n    <template v-else>{{ initials }}</template>\n    <span v-if=\"as === 'button'\" class=\"e-sr\">{{ name }}</span>\n  </component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-avatar {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    box-sizing: border-box;\n    width: var(--e-tap, 44px);\n    height: var(--e-tap, 44px);\n    overflow: hidden;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n\n    --e-bc: var(--e-border-strong);\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface-tint);\n    color: var(--e-primary);\n    font: 600 var(--e-text-sm) / 1 var(--e-font-mono);\n    letter-spacing: 0.02em;\n  }\n\n  .e-avatar--button {\n    position: relative;\n    padding: 0;\n    cursor: pointer;\n    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-avatar--button:hover {\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-avatar--button:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-avatar--button {\n      transition: none;\n    }\n  }\n\n  .e-avatar--s {\n    width: 32px;\n    height: 32px;\n    font-size: var(--e-text-xs);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-avatar--l {\n    width: 64px;\n    height: 64px;\n    font-size: var(--e-text-lg);\n  }\n\n  .e-avatar-img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  @media (forced-colors: active) {\n    .e-avatar {\n      border-color: CanvasText;\n      outline-color: CanvasText;\n      color: CanvasText;\n    }\n\n    .e-avatar--button:focus-visible {\n      outline-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Avatar/EAvatar.vue.d.ts

@@ -1,13 +1,13 @@
 type __VLS_Props = {
-    /** The person's name. Screen readers read it; the initials come from it. */
+    /** The person's name. Screen readers read it; the initials are the first letters of its first and last word. */
     name: string;
     /** A photo URL. If it fails to load, the initials appear. */
     src?: string;
-    /** 28px, for rows. */
+    /** 32px, for rows and bars. */
     small?: boolean;
-    /** 56px, for a practitioner on an appointment card or a profile. */
+    /** 64px, for a profile or practitioner on an appointment card. The default is 44px. */
     large?: boolean;
-    /** `button` makes it a control named by `name`, such as the trigger of an account menu. Default `span`. */
+    /** `button` renders a `button` with `type="button"`, a pointer cursor and a focus ring, named by `name`, such as the `trigger` of an `EMenu`. Default `span`. */
     as?: "span" | "button";
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {

package/dist/components/Avatar/EAvatar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EAvatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_toDisplayString","_Fragment","_createTextVNode","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","EAvatar_vue_vue_type_script_setup_true_lang_default","props","__props","failed","ref","initials","computed","parts","openBlock","createBlock","resolveDynamicComponent","normalizeClass","withCtx","createElementBlock","_cache","toDisplayString","Fragment","createTextVNode","createCommentVNode"],"sources":["../../../src/components/Avatar/EAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The person's name. Screen readers read it; the initials come from it. */\n    name: string;\n    /** A photo URL. If it fails to load, the initials appear. */\n    src?: string;\n    /** 28px, for rows. */\n    small?: boolean;\n    /** 56px, for a practitioner on an appointment card or a profile. */\n    large?: boolean;\n    /** `button` makes it a control named by `name`, such as the trigger of an account menu. Default `span`. */\n    as?: \"span\" | \"button\";\n  }>(),\n  { as: \"span\" },\n);\n\nconst failed = ref(false);\nwatch(\n  () => props.src,\n  () => (failed.value = false),\n);\n\nconst initials = computed(() => {\n  const parts = String(props.name || \"?\")\n    .split(/\\s+/)\n    .filter(Boolean);\n  const first = [...(parts[0] ?? \"?\")][0] ?? \"?\";\n  const last = parts.length > 1 ? ([...parts[parts.length - 1]!][0] ?? \"\") : \"\";\n  return (first + last).toUpperCase();\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-avatar\"\n    :class=\"{ 'e-avatar--s': small, 'e-avatar--l': large, 'e-avatar--button': as === 'button' }\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :role=\"as === 'button' ? undefined : 'img'\"\n    :aria-label=\"as === 'button' ? undefined : name\"\n  >\n    <img v-if=\"src && !failed\" class=\"e-avatar-img\" :src=\"src\" alt=\"\" @error=\"failed = true\" />\n    <span v-else-if=\"as === 'button'\" aria-hidden=\"true\">{{ initials }}</span>\n    <template v-else>{{ initials }}</template>\n    <span v-if=\"as === 'button'\" class=\"e-sr\">{{ name }}</span>\n  </component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-avatar {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    box-sizing: border-box;\n    width: 44px;\n    height: 44px;\n    overflow: hidden;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface-tint);\n    color: var(--e-primary);\n    font: 600 var(--e-text-sm) / 1 var(--e-font-mono);\n    letter-spacing: 0.02em;\n  }\n\n  .e-avatar--button {\n    position: relative;\n    padding: 0;\n    cursor: pointer;\n    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-avatar--button:hover {\n    border-color: var(--e-ink);\n  }\n\n  .e-avatar--button:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-avatar--button {\n      transition: none;\n    }\n  }\n\n  .e-avatar--s {\n    width: 32px;\n    height: 32px;\n    font-size: var(--e-text-xs);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-avatar--l {\n    width: 64px;\n    height: 64px;\n    font-size: var(--e-text-lg);\n  }\n\n  .e-avatar-img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAIA,IAAMc,IAAQC,GAgBRC,IAASC,EAAI,EAAK;EACxB,QACQH,EAAM,WACL,EAAO,QAAQ,EACxB;EAEA,IAAMI,IAAWC,QAAe;GAC9B,IAAMC,IAAQ,OAAON,EAAM,QAAQ,GAAG,CAAA,CACnC,MAAM,KAAK,CAAA,CACX,OAAO,OAAO;GAGjB,SAFc,CAAC,GAAIM,EAAM,MAAM,GAAI,CAAC,CAAC,MAAM,QAC9BA,EAAM,SAAS,IAAK,CAAC,GAAGA,EAAMA,EAAM,SAAS,EAAG,CAAC,CAAC,MAAM,KAAM,IAAA,CACrD,YAAY;EACpC,CAAC;E,kBAICpB,EAAA,GAAAC,EAYYC,EAXLa,EAAA,EAAE,GAAA;GACP,OAAKZ,EAAA,CAAC,YAAU;IAAA,eACSY,EAAA;IAAK,eAAiBA,EAAA;IAAK,oBAAsBA,EAAA,OAAE;GAAA,CAAA,CAAA;GAC3E,MAAMA,EAAA,OAAE,WAAA,WAA2B,KAAA;GACnC,MAAMA,EAAA,OAAE,WAAgB,KAAA,IAAS;GACjC,cAAYA,EAAA,OAAE,WAAgB,KAAA,IAAYA,EAAA;;GAE3C,SAAAX,QAA2F,CAAhFW,EAAA,OAAG,CAAKC,EAAA,SAAnBhB,EAAA,GAAAK,EAA2F,OAAA;;IAAhE,OAAM;IAAgB,KAAKU,EAAA;IAAK,KAAI;IAAI,SAAK,AAAAY,EAAA,QAAA,MAAE,EAAA,QAAM;G,mBAC/DZ,EAAA,OAAE,YAAnBf,EAAA,GAAAK,EAA0E,QAA1EM,GAA0EL,EAAlBY,EAAA,KAAQ,GAAA,CAAA,MAChElB,EAAA,GAAAK,EAA0CE,GAAA,EAAA,KAAA,EAAA,GAAA,CAAtBC,EAAAF,EAAAY,EAAA,KAAQ,GAAA,CAAA,C,SAChBH,EAAA,OAAE,YAAdf,EAAA,GAAAK,EAA2D,QAA3DO,GAA2DN,EAAdS,EAAA,IAAI,GAAA,CAAA,K"}
+{"version":3,"file":"EAvatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_toDisplayString","_Fragment","_createTextVNode","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","EAvatar_vue_vue_type_script_setup_true_lang_default","props","__props","failed","ref","initials","computed","parts","openBlock","createBlock","resolveDynamicComponent","normalizeClass","withCtx","createElementBlock","_cache","toDisplayString","Fragment","createTextVNode","createCommentVNode"],"sources":["../../../src/components/Avatar/EAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The person's name. Screen readers read it; the initials are the first letters of its first and last word. */\n    name: string;\n    /** A photo URL. If it fails to load, the initials appear. */\n    src?: string;\n    /** 32px, for rows and bars. */\n    small?: boolean;\n    /** 64px, for a profile or practitioner on an appointment card. The default is 44px. */\n    large?: boolean;\n    /** `button` renders a `button` with `type=\"button\"`, a pointer cursor and a focus ring, named by `name`, such as the `trigger` of an `EMenu`. Default `span`. */\n    as?: \"span\" | \"button\";\n  }>(),\n  { as: \"span\" },\n);\n\nconst failed = ref(false);\nwatch(\n  () => props.src,\n  () => (failed.value = false),\n);\n\nconst initials = computed(() => {\n  const parts = String(props.name || \"?\")\n    .split(/\\s+/)\n    .filter(Boolean);\n  const first = [...(parts[0] ?? \"?\")][0] ?? \"?\";\n  const last = parts.length > 1 ? ([...parts[parts.length - 1]!][0] ?? \"\") : \"\";\n  return (first + last).toUpperCase();\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-avatar\"\n    :class=\"{ 'e-avatar--s': small, 'e-avatar--l': large, 'e-avatar--button': as === 'button' }\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :role=\"as === 'button' ? undefined : 'img'\"\n    :aria-label=\"as === 'button' ? undefined : name\"\n  >\n    <img v-if=\"src && !failed\" class=\"e-avatar-img\" :src=\"src\" alt=\"\" @error=\"failed = true\" />\n    <span v-else-if=\"as === 'button'\" aria-hidden=\"true\">{{ initials }}</span>\n    <template v-else>{{ initials }}</template>\n    <span v-if=\"as === 'button'\" class=\"e-sr\">{{ name }}</span>\n  </component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-avatar {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    box-sizing: border-box;\n    width: var(--e-tap, 44px);\n    height: var(--e-tap, 44px);\n    overflow: hidden;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n\n    --e-bc: var(--e-border-strong);\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface-tint);\n    color: var(--e-primary);\n    font: 600 var(--e-text-sm) / 1 var(--e-font-mono);\n    letter-spacing: 0.02em;\n  }\n\n  .e-avatar--button {\n    position: relative;\n    padding: 0;\n    cursor: pointer;\n    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-avatar--button:hover {\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-avatar--button:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-avatar--button {\n      transition: none;\n    }\n  }\n\n  .e-avatar--s {\n    width: 32px;\n    height: 32px;\n    font-size: var(--e-text-xs);\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-avatar--l {\n    width: 64px;\n    height: 64px;\n    font-size: var(--e-text-lg);\n  }\n\n  .e-avatar-img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  @media (forced-colors: active) {\n    .e-avatar {\n      border-color: CanvasText;\n      outline-color: CanvasText;\n      color: CanvasText;\n    }\n\n    .e-avatar--button:focus-visible {\n      outline-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAIA,IAAMc,IAAQC,GAgBRC,IAASC,EAAI,EAAK;EACxB,QACQH,EAAM,WACL,EAAO,QAAQ,EACxB;EAEA,IAAMI,IAAWC,QAAe;GAC9B,IAAMC,IAAQ,OAAON,EAAM,QAAQ,GAAG,CAAA,CACnC,MAAM,KAAK,CAAA,CACX,OAAO,OAAO;GAGjB,SAFc,CAAC,GAAIM,EAAM,MAAM,GAAI,CAAC,CAAC,MAAM,QAC9BA,EAAM,SAAS,IAAK,CAAC,GAAGA,EAAMA,EAAM,SAAS,EAAG,CAAC,CAAC,MAAM,KAAM,IAAA,CACrD,YAAY;EACpC,CAAC;E,kBAICpB,EAAA,GAAAC,EAYYC,EAXLa,EAAA,EAAE,GAAA;GACP,OAAKZ,EAAA,CAAC,YAAU;IAAA,eACSY,EAAA;IAAK,eAAiBA,EAAA;IAAK,oBAAsBA,EAAA,OAAE;GAAA,CAAA,CAAA;GAC3E,MAAMA,EAAA,OAAE,WAAA,WAA2B,KAAA;GACnC,MAAMA,EAAA,OAAE,WAAgB,KAAA,IAAS;GACjC,cAAYA,EAAA,OAAE,WAAgB,KAAA,IAAYA,EAAA;;GAE3C,SAAAX,QAA2F,CAAhFW,EAAA,OAAG,CAAKC,EAAA,SAAnBhB,EAAA,GAAAK,EAA2F,OAAA;;IAAhE,OAAM;IAAgB,KAAKU,EAAA;IAAK,KAAI;IAAI,SAAK,AAAAY,EAAA,QAAA,MAAE,EAAA,QAAM;G,mBAC/DZ,EAAA,OAAE,YAAnBf,EAAA,GAAAK,EAA0E,QAA1EM,GAA0EL,EAAlBY,EAAA,KAAQ,GAAA,CAAA,MAChElB,EAAA,GAAAK,EAA0CE,GAAA,EAAA,KAAA,EAAA,GAAA,CAAtBC,EAAAF,EAAAY,EAAA,KAAQ,GAAA,CAAA,C,SAChBH,EAAA,OAAE,YAAdf,EAAA,GAAAK,EAA2D,QAA3DO,GAA2DN,EAAdS,EAAA,IAAI,GAAA,CAAA,K"}

package/dist/components/Breadcrumb/EBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"EBreadcrumb.js","names":["_sfc_main","EBreadcrumb_vue_vue_type_script_setup_true_lang_default","EBreadcrumb_default"],"sources":["../../../src/components/Breadcrumb/EBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface BreadcrumbItem {\n  /** The words for this level. */\n  label: string;\n  /** Where it goes. Omit it on the last item, which is the current page. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n}\n\nwithDefaults(\n  defineProps<{\n    /** The path, top level first. The last item is the current page and is not a link. */\n    items: BreadcrumbItem[];\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  { linkComponent: \"a\" },\n);\n\nconst t = useMessages();\n\nconst linkAttrs = (item: BreadcrumbItem) => ({\n  ...(item.href !== undefined && { href: item.href }),\n  ...(item.to !== undefined && { to: item.to }),\n});\n</script>\n\n<template>\n  <nav class=\"e-crumbs\" :aria-label=\"t('breadcrumb')\">\n    <ol>\n      <li v-for=\"(item, i) in items\" :key=\"i\">\n        <span v-if=\"i === items.length - 1\" class=\"e-crumb-current\" aria-current=\"page\">{{ item.label }}</span>\n        <component\n          :is=\"linkComponent\"\n          v-else-if=\"item.href !== undefined || item.to !== undefined\"\n          class=\"e-crumb\"\n          v-bind=\"linkAttrs(item)\"\n        >\n          {{ item.label }}\n        </component>\n        <span v-else class=\"e-crumb-current\">{{ item.label }}</span>\n        <EIcon v-if=\"i < items.length - 1\" name=\"chevron-right\" small />\n      </li>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer e.page {\n  .e-crumbs ol {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-1) var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm) / 20px var(--e-font-sans);\n  }\n\n  .e-crumbs li {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-crumb,\n  .e-crumb-current {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .e-crumb {\n    position: relative;\n    color: var(--e-primary);\n    text-decoration: underline;\n    text-decoration-color: var(--e-primary);\n    text-underline-offset: 3px;\n  }\n\n  .e-crumb::after {\n    content: \"\";\n    position: absolute;\n    inset: -12px -4px;\n  }\n\n  .e-crumb:hover {\n    color: var(--e-ink);\n    text-decoration-color: var(--e-ink);\n  }\n\n  .e-crumb: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-crumb-current {\n    color: var(--e-ink);\n    font-weight: 500;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EBreadcrumb.js","names":["_sfc_main","EBreadcrumb_vue_vue_type_script_setup_true_lang_default","EBreadcrumb_default"],"sources":["../../../src/components/Breadcrumb/EBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface BreadcrumbItem {\n  /** The words for this level. */\n  label: string;\n  /** Where it goes. Omit it on the last item, which is the current page. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n}\n\nwithDefaults(\n  defineProps<{\n    /** The path as `{ label, href?, to? }`, top level first. The last item is the current page and is not a link. */\n    items: BreadcrumbItem[];\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). With `RouterLink`, give items a `to` (items can mix `href` and `to`); it receives only the attributes the item has. */\n    linkComponent?: string | Component;\n  }>(),\n  { linkComponent: \"a\" },\n);\n\nconst t = useMessages();\n\nconst linkAttrs = (item: BreadcrumbItem) => ({\n  ...(item.href !== undefined && { href: item.href }),\n  ...(item.to !== undefined && { to: item.to }),\n});\n</script>\n\n<template>\n  <nav class=\"e-crumbs\" :aria-label=\"t('breadcrumb')\">\n    <ol>\n      <li v-for=\"(item, i) in items\" :key=\"i\">\n        <span v-if=\"i === items.length - 1\" class=\"e-crumb-current\" aria-current=\"page\">{{ item.label }}</span>\n        <component\n          :is=\"linkComponent\"\n          v-else-if=\"item.href !== undefined || item.to !== undefined\"\n          class=\"e-crumb\"\n          v-bind=\"linkAttrs(item)\"\n        >\n          {{ item.label }}\n        </component>\n        <span v-else class=\"e-crumb-current\">{{ item.label }}</span>\n        <EIcon v-if=\"i < items.length - 1\" name=\"chevron-right\" small />\n      </li>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer e.page {\n  .e-crumbs ol {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-1) var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm) / 20px var(--e-font-sans);\n  }\n\n  .e-crumbs li {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-crumb,\n  .e-crumb-current {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .e-crumb {\n    position: relative;\n    color: var(--e-primary);\n    text-decoration: underline;\n    text-decoration-color: var(--e-primary);\n    text-underline-offset: 3px;\n  }\n\n  .e-crumb::after {\n    content: \"\";\n    position: absolute;\n    inset: calc((var(--e-tap, 44px) - 20px) / -2) calc(-1 * var(--e-space-1));\n  }\n\n  .e-crumb:hover {\n    color: var(--e-ink);\n    text-decoration-color: var(--e-ink);\n  }\n\n  .e-crumb: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-crumb-current {\n    color: var(--e-ink);\n    font-weight: 500;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Breadcrumb/EBreadcrumb.vue.d.ts

@@ -8,9 +8,9 @@ export interface BreadcrumbItem {
     to?: unknown;
 }
 type __VLS_Props = {
-    /** The path, top level first. The last item is the current page and is not a link. */
+    /** The path as `{ label, href?, to? }`, top level first. The last item is the current page and is not a link. */
     items: BreadcrumbItem[];
-    /** What renders each link: `"a"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). */
+    /** What renders each link: `"a"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). With `RouterLink`, give items a `to` (items can mix `href` and `to`); it receives only the attributes the item has. */
     linkComponent?: string | Component;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {

package/dist/components/Breadcrumb/EBreadcrumb.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EBreadcrumb.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_createElementVNode","_Fragment","_renderList","_toDisplayString","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_createTextVNode","EIcon","_createCommentVNode","EIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","EBreadcrumb_vue_vue_type_script_setup_true_lang_default","t","useMessages","linkAttrs","item","openBlock","createElementBlock","unref","createElementVNode","Fragment","renderList","__props","i","toDisplayString","createBlock","resolveDynamicComponent","mergeProps","withCtx","createTextVNode","createCommentVNode"],"sources":["../../../src/components/Breadcrumb/EBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface BreadcrumbItem {\n  /** The words for this level. */\n  label: string;\n  /** Where it goes. Omit it on the last item, which is the current page. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n}\n\nwithDefaults(\n  defineProps<{\n    /** The path, top level first. The last item is the current page and is not a link. */\n    items: BreadcrumbItem[];\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  { linkComponent: \"a\" },\n);\n\nconst t = useMessages();\n\nconst linkAttrs = (item: BreadcrumbItem) => ({\n  ...(item.href !== undefined && { href: item.href }),\n  ...(item.to !== undefined && { to: item.to }),\n});\n</script>\n\n<template>\n  <nav class=\"e-crumbs\" :aria-label=\"t('breadcrumb')\">\n    <ol>\n      <li v-for=\"(item, i) in items\" :key=\"i\">\n        <span v-if=\"i === items.length - 1\" class=\"e-crumb-current\" aria-current=\"page\">{{ item.label }}</span>\n        <component\n          :is=\"linkComponent\"\n          v-else-if=\"item.href !== undefined || item.to !== undefined\"\n          class=\"e-crumb\"\n          v-bind=\"linkAttrs(item)\"\n        >\n          {{ item.label }}\n        </component>\n        <span v-else class=\"e-crumb-current\">{{ item.label }}</span>\n        <EIcon v-if=\"i < items.length - 1\" name=\"chevron-right\" small />\n      </li>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer e.page {\n  .e-crumbs ol {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-1) var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm) / 20px var(--e-font-sans);\n  }\n\n  .e-crumbs li {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-crumb,\n  .e-crumb-current {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .e-crumb {\n    position: relative;\n    color: var(--e-primary);\n    text-decoration: underline;\n    text-decoration-color: var(--e-primary);\n    text-underline-offset: 3px;\n  }\n\n  .e-crumb::after {\n    content: \"\";\n    position: absolute;\n    inset: -12px -4px;\n  }\n\n  .e-crumb:hover {\n    color: var(--e-ink);\n    text-decoration-color: var(--e-ink);\n  }\n\n  .e-crumb: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-crumb-current {\n    color: var(--e-ink);\n    font-weight: 500;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAyBA,IAAMmB,IAAIC,EAAY,GAEhBC,KAAa,OAA0B;GAC3C,GAAIC,EAAK,SAAS,KAAA,KAAa,EAAE,MAAMA,EAAK,KAAK;GACjD,GAAIA,EAAK,OAAO,KAAA,KAAa,EAAE,IAAIA,EAAK,GAAG;EAC7C;E,kBAIEtB,EAAA,GAAAC,EAgBM,OAAA;GAhBD,OAAM;GAAY,cAAYC,EAAAiB,CAAA,CAAC,CAAA,YAAA;E,IAClChB,EAcK,MAAA,MAAA,EAbHH,EAAA,EAAA,GAAAC,EAYKG,GAAA,MAAAC,EAZmBwB,EAAA,QAAZ,GAAM,OAAlB7B,EAAA,GAAAC,EAYK,MAAA,EAZ2B,KAAK6B,EAAC,GAAA,CACxBA,MAAMD,EAAA,MAAM,SAAM,KAA9B7B,EAAA,GAAAC,EAAuG,QAAvGe,GAAuGV,EAApBgB,EAAK,KAAK,GAAA,CAAA,KAGhFA,EAAK,SAAS,KAAA,KAAaA,EAAK,OAAO,KAAA,KAFpDtB,EAAA,GAAAO,EAOYC,EANLqB,EAAA,aAAa,GADpBpB,EAOY;;GAJV,OAAM;EACE,GAAA,EAAA,SAAA,GAAA,GAAAY,EAAUC,CAAI,CAAA,GAAA;GAEtB,SAAAZ,QAAgB,CAAbC,EAAAL,EAAAgB,EAAK,KAAK,GAAA,CAAA,C;;E,aAEftB,EAAA,GAAAC,EAA4D,QAA5DgB,GAA4DX,EAApBgB,EAAK,KAAK,GAAA,CAAA,IACrCQ,IAAID,EAAA,MAAM,SAAM,KAA7B7B,EAAA,GAAAO,EAAgEK,GAAA;;GAA7B,MAAK;GAAgB,OAAA"}
+{"version":3,"file":"EBreadcrumb.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_createElementVNode","_Fragment","_renderList","_toDisplayString","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_createTextVNode","EIcon","_createCommentVNode","EIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","EBreadcrumb_vue_vue_type_script_setup_true_lang_default","t","useMessages","linkAttrs","item","openBlock","createElementBlock","unref","createElementVNode","Fragment","renderList","__props","i","toDisplayString","createBlock","resolveDynamicComponent","mergeProps","withCtx","createTextVNode","createCommentVNode"],"sources":["../../../src/components/Breadcrumb/EBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface BreadcrumbItem {\n  /** The words for this level. */\n  label: string;\n  /** Where it goes. Omit it on the last item, which is the current page. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n}\n\nwithDefaults(\n  defineProps<{\n    /** The path as `{ label, href?, to? }`, top level first. The last item is the current page and is not a link. */\n    items: BreadcrumbItem[];\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). With `RouterLink`, give items a `to` (items can mix `href` and `to`); it receives only the attributes the item has. */\n    linkComponent?: string | Component;\n  }>(),\n  { linkComponent: \"a\" },\n);\n\nconst t = useMessages();\n\nconst linkAttrs = (item: BreadcrumbItem) => ({\n  ...(item.href !== undefined && { href: item.href }),\n  ...(item.to !== undefined && { to: item.to }),\n});\n</script>\n\n<template>\n  <nav class=\"e-crumbs\" :aria-label=\"t('breadcrumb')\">\n    <ol>\n      <li v-for=\"(item, i) in items\" :key=\"i\">\n        <span v-if=\"i === items.length - 1\" class=\"e-crumb-current\" aria-current=\"page\">{{ item.label }}</span>\n        <component\n          :is=\"linkComponent\"\n          v-else-if=\"item.href !== undefined || item.to !== undefined\"\n          class=\"e-crumb\"\n          v-bind=\"linkAttrs(item)\"\n        >\n          {{ item.label }}\n        </component>\n        <span v-else class=\"e-crumb-current\">{{ item.label }}</span>\n        <EIcon v-if=\"i < items.length - 1\" name=\"chevron-right\" small />\n      </li>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer e.page {\n  .e-crumbs ol {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-1) var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm) / 20px var(--e-font-sans);\n  }\n\n  .e-crumbs li {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-crumb,\n  .e-crumb-current {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .e-crumb {\n    position: relative;\n    color: var(--e-primary);\n    text-decoration: underline;\n    text-decoration-color: var(--e-primary);\n    text-underline-offset: 3px;\n  }\n\n  .e-crumb::after {\n    content: \"\";\n    position: absolute;\n    inset: calc((var(--e-tap, 44px) - 20px) / -2) calc(-1 * var(--e-space-1));\n  }\n\n  .e-crumb:hover {\n    color: var(--e-ink);\n    text-decoration-color: var(--e-ink);\n  }\n\n  .e-crumb: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-crumb-current {\n    color: var(--e-ink);\n    font-weight: 500;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAyBA,IAAMmB,IAAIC,EAAY,GAEhBC,KAAa,OAA0B;GAC3C,GAAIC,EAAK,SAAS,KAAA,KAAa,EAAE,MAAMA,EAAK,KAAK;GACjD,GAAIA,EAAK,OAAO,KAAA,KAAa,EAAE,IAAIA,EAAK,GAAG;EAC7C;E,kBAIEtB,EAAA,GAAAC,EAgBM,OAAA;GAhBD,OAAM;GAAY,cAAYC,EAAAiB,CAAA,CAAC,CAAA,YAAA;E,IAClChB,EAcK,MAAA,MAAA,EAbHH,EAAA,EAAA,GAAAC,EAYKG,GAAA,MAAAC,EAZmBwB,EAAA,QAAZ,GAAM,OAAlB7B,EAAA,GAAAC,EAYK,MAAA,EAZ2B,KAAK6B,EAAC,GAAA,CACxBA,MAAMD,EAAA,MAAM,SAAM,KAA9B7B,EAAA,GAAAC,EAAuG,QAAvGe,GAAuGV,EAApBgB,EAAK,KAAK,GAAA,CAAA,KAGhFA,EAAK,SAAS,KAAA,KAAaA,EAAK,OAAO,KAAA,KAFpDtB,EAAA,GAAAO,EAOYC,EANLqB,EAAA,aAAa,GADpBpB,EAOY;;GAJV,OAAM;EACE,GAAA,EAAA,SAAA,GAAA,GAAAY,EAAUC,CAAI,CAAA,GAAA;GAEtB,SAAAZ,QAAgB,CAAbC,EAAAL,EAAAgB,EAAK,KAAK,GAAA,CAAA,C;;E,aAEftB,EAAA,GAAAC,EAA4D,QAA5DgB,GAA4DX,EAApBgB,EAAK,KAAK,GAAA,CAAA,IACrCQ,IAAID,EAAA,MAAM,SAAM,KAA7B7B,EAAA,GAAAO,EAAgEK,GAAA;;GAA7B,MAAK;GAAgB,OAAA"}

package/dist/components/Button/EButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"EButton.js","names":["_sfc_main","EButton_vue_vue_type_script_setup_true_lang_default","EButton_default"],"sources":["../../../src/components/Button/EButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `primary` is the one main action on a screen; `secondary` confirms; `outline` is for the other actions beside it; `danger` cancels or removes; `quiet` is an underlined text action. */\n    variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"quiet\";\n    /** An icon before the label. */\n    icon?: IconProp;\n    /** Full width. */\n    block?: boolean;\n    disabled?: boolean;\n    type?: \"button\" | \"submit\" | \"reset\";\n    /** Renders a link that looks like the button, for a destination rather than an action. */\n    href?: string;\n    /** With `href`: opens in a new tab. */\n    external?: boolean;\n  }>(),\n  { variant: \"primary\", type: \"button\" },\n);\n\ndefineSlots<{\n  /** The label: a verb that says what happens, like \"Pay $162.40\". */\n  default(): unknown;\n}>();\n\nfunction blockWhenDisabled(event: Event) {\n  if (!props.disabled) return;\n  event.preventDefault();\n  event.stopImmediatePropagation();\n}\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    :href=\"href\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noreferrer' : undefined\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :tabindex=\"disabled ? -1 : undefined\"\n    @click.capture=\"blockWhenDisabled\"\n    @auxclick.capture=\"blockWhenDisabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </a>\n  <button\n    v-else\n    :type=\"type\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :disabled=\"disabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </button>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-btn {\n    --e-fill: var(--e-primary);\n    --e-on-fill: var(--e-on-primary);\n    --e-slab: color-mix(in srgb, var(--e-fill) 58%, #000);\n    --e-hover: color-mix(in srgb, var(--e-fill) 88%, #000);\n    --e-press: color-mix(in srgb, var(--e-fill) 78%, #000);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-2);\n    height: var(--e-control-height);\n    padding: var(--e-depth) var(--e-space-4) 0;\n    border: var(--e-stroke-edge) solid var(--e-slab);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-fill);\n    color: var(--e-on-fill);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    letter-spacing: 0.01em;\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      box-shadow var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-btn:hover {\n    background: var(--e-hover);\n  }\n\n  .e-btn:active {\n    background: var(--e-press);\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 rgb(0 0 0 / 0.22);\n  }\n\n  .e-btn--secondary {\n    --e-fill: var(--e-secondary);\n    --e-on-fill: var(--e-on-secondary);\n  }\n\n  .e-btn--danger {\n    --e-fill: var(--e-danger);\n    --e-on-fill: var(--e-on-danger);\n  }\n\n  .e-btn--outline {\n    --e-fill: var(--e-surface);\n    --e-on-fill: var(--e-ink);\n    --e-slab: var(--e-border-strong);\n  }\n\n  .e-btn--outline:hover {\n    background: color-mix(in srgb, var(--e-surface) 92%, #000);\n    border-color: var(--e-ink);\n  }\n\n  .e-btn--outline:active {\n    background: color-mix(in srgb, var(--e-surface) 84%, #000);\n    border-color: var(--e-ink);\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 rgb(0 0 0 / 0.14);\n  }\n\n  .e-btn--quiet {\n    border-color: transparent;\n    border-bottom-width: var(--e-stroke-edge);\n    background: transparent;\n    color: var(--e-ink);\n    box-shadow: none;\n    padding-top: 0;\n    padding-inline: var(--e-space-3);\n    text-decoration: underline;\n    text-underline-offset: 5px;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-decoration-color: var(--e-border-strong);\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):hover {\n    border-color: var(--e-wash-ring);\n    background: var(--e-wash-hover);\n    text-decoration-color: currentcolor;\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):active {\n    border-color: var(--e-ink);\n    background: var(--e-wash-press);\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  .e-btn .e-icon {\n    margin-inline-start: -2px;\n  }\n\n  .e-btn--block {\n    width: 100%;\n  }\n\n  .e-btn[disabled],\n  .e-btn[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    background: transparent;\n    color: var(--e-muted);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-btn {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-btn {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-btn {\n      border: 2px solid ButtonText;\n    }\n\n    .e-btn[disabled],\n    .e-btn[aria-disabled=\"true\"] {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EButton.js","names":["_sfc_main","EButton_vue_vue_type_script_setup_true_lang_default","EButton_default"],"sources":["../../../src/components/Button/EButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `primary` is the one main action on a screen; `secondary` confirms; `outline` is for the other actions beside it; `danger` cancels or removes; `quiet` is an underlined text action. */\n    variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"quiet\";\n    /** An icon before the label: a name such as `download`, or a component. */\n    icon?: IconProp;\n    /** Full width. */\n    block?: boolean;\n    /** Dashed and unfilled; not focusable, ignores clicks. With `href` the link gets `aria-disabled=\"true\"` and `tabindex=\"-1\"` and does not navigate. */\n    disabled?: boolean;\n    /** Set `submit` on the one that submits a form. */\n    type?: \"button\" | \"submit\" | \"reset\";\n    /** Renders a link that looks like the button, for a destination rather than an action (a call to action that goes to a page). Space does not follow it. */\n    href?: string;\n    /** With `href`: opens in a new tab. */\n    external?: boolean;\n  }>(),\n  { variant: \"primary\", type: \"button\" },\n);\n\ndefineSlots<{\n  /** The label: a verb that says what happens, like \"Pay $162.40\". */\n  default(): unknown;\n}>();\n\nfunction blockWhenDisabled(event: Event) {\n  if (!props.disabled) return;\n  event.preventDefault();\n  event.stopImmediatePropagation();\n}\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    :href=\"href\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noreferrer' : undefined\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :tabindex=\"disabled ? -1 : undefined\"\n    @click.capture=\"blockWhenDisabled\"\n    @auxclick.capture=\"blockWhenDisabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </a>\n  <button\n    v-else\n    :type=\"type\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :disabled=\"disabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </button>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-btn {\n    --e-fill: var(--e-primary);\n    --e-on-fill: var(--e-on-primary);\n    --e-slab: color-mix(in srgb, var(--e-fill), var(--e-shade-slab));\n    --e-hover: color-mix(in srgb, var(--e-fill), var(--e-shade-hover));\n    --e-press: color-mix(in srgb, var(--e-fill), var(--e-shade-press));\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-2);\n    height: var(--e-control-height);\n    padding: var(--e-depth) var(--e-space-4) 0;\n    border: var(--e-stroke-edge) solid var(--e-slab);\n\n    --e-bc: var(--e-slab);\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-fill);\n    color: var(--e-on-fill);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    letter-spacing: 0.01em;\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      box-shadow var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-btn:hover {\n    background: var(--e-hover);\n  }\n\n  .e-btn:active {\n    background: var(--e-press);\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 color-mix(in srgb, transparent, var(--e-shade-press));\n  }\n\n  .e-btn--secondary {\n    --e-fill: var(--e-secondary);\n    --e-on-fill: var(--e-on-secondary);\n  }\n\n  .e-btn--danger {\n    --e-fill: var(--e-danger);\n    --e-on-fill: var(--e-on-danger);\n  }\n\n  .e-btn--outline {\n    --e-fill: var(--e-surface);\n    --e-on-fill: var(--e-ink);\n    --e-slab: var(--e-border-strong);\n  }\n\n  .e-btn--outline:hover {\n    background: color-mix(in srgb, var(--e-surface), var(--e-shade-hover));\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-btn--outline:active {\n    background: color-mix(in srgb, var(--e-surface), var(--e-shade-press));\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 color-mix(in srgb, transparent, var(--e-shade-press));\n  }\n\n  .e-btn--quiet {\n    border-color: transparent;\n\n    --e-bc: transparent;\n\n    border-bottom-width: var(--e-stroke-edge);\n    background: transparent;\n    color: var(--e-ink);\n    box-shadow: none;\n    padding-top: 0;\n    padding-inline: var(--e-space-3);\n    text-decoration: underline;\n    text-underline-offset: 5px;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-decoration-color: var(--e-border-strong);\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):hover {\n    border-color: var(--e-wash-ring);\n\n    --e-bc: var(--e-wash-ring);\n\n    background: var(--e-wash-hover);\n    text-decoration-color: currentcolor;\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):active {\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n\n    background: var(--e-wash-press);\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  .e-btn .e-icon {\n    margin-inline-start: calc(-0.5 * var(--e-space-1));\n  }\n\n  .e-btn--block {\n    width: 100%;\n  }\n\n  /* A toggle: any button with aria-pressed=\"true\" reads as selected. */\n  .e-btn[aria-pressed=\"true\"],\n  .e-btn[aria-pressed=\"true\"]:hover,\n  .e-btn[aria-pressed=\"true\"]:active {\n    --e-slab: var(--e-primary);\n    --e-bc: var(--e-primary);\n\n    border-color: var(--e-primary);\n    background: var(--e-surface-hover);\n    color: var(--e-primary);\n  }\n\n  .e-btn[disabled],\n  .e-btn[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    background: transparent;\n    color: var(--e-muted);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline: 0;\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-btn {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-btn {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-btn {\n      border: var(--e-stroke-focus) solid ButtonText;\n    }\n\n    .e-btn[aria-pressed=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .e-btn[disabled],\n    .e-btn[aria-disabled=\"true\"] {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Button/EButton.vue.d.ts

@@ -2,13 +2,15 @@ import { IconProp } from '../../icons/types.js';
 type __VLS_Props = {
     /** `primary` is the one main action on a screen; `secondary` confirms; `outline` is for the other actions beside it; `danger` cancels or removes; `quiet` is an underlined text action. */
     variant?: "primary" | "secondary" | "outline" | "danger" | "quiet";
-    /** An icon before the label. */
+    /** An icon before the label: a name such as `download`, or a component. */
     icon?: IconProp;
     /** Full width. */
     block?: boolean;
+    /** Dashed and unfilled; not focusable, ignores clicks. With `href` the link gets `aria-disabled="true"` and `tabindex="-1"` and does not navigate. */
     disabled?: boolean;
+    /** Set `submit` on the one that submits a form. */
     type?: "button" | "submit" | "reset";
-    /** Renders a link that looks like the button, for a destination rather than an action. */
+    /** Renders a link that looks like the button, for a destination rather than an action (a call to action that goes to a page). Space does not follow it. */
     href?: string;
     /** With `href`: opens in a new tab. */
     external?: boolean;
@@ -18,8 +20,8 @@ type __VLS_Slots = {
     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<{}>, {
+    type: "button" | "submit" | "reset";
     variant: "danger" | "primary" | "secondary" | "outline" | "quiet";
-    type: "button" | "reset" | "submit";
 }, {}, {}, {}, 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/Button/EButton.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_renderSlot","EIcon_default","_hoisted_1","_hoisted_2","EButton_vue_vue_type_script_setup_true_lang_default","props","__props","blockWhenDisabled","event","openBlock","createElementBlock","normalizeClass","createBlock","createCommentVNode","renderSlot","_ctx"],"sources":["../../../src/components/Button/EButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `primary` is the one main action on a screen; `secondary` confirms; `outline` is for the other actions beside it; `danger` cancels or removes; `quiet` is an underlined text action. */\n    variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"quiet\";\n    /** An icon before the label. */\n    icon?: IconProp;\n    /** Full width. */\n    block?: boolean;\n    disabled?: boolean;\n    type?: \"button\" | \"submit\" | \"reset\";\n    /** Renders a link that looks like the button, for a destination rather than an action. */\n    href?: string;\n    /** With `href`: opens in a new tab. */\n    external?: boolean;\n  }>(),\n  { variant: \"primary\", type: \"button\" },\n);\n\ndefineSlots<{\n  /** The label: a verb that says what happens, like \"Pay $162.40\". */\n  default(): unknown;\n}>();\n\nfunction blockWhenDisabled(event: Event) {\n  if (!props.disabled) return;\n  event.preventDefault();\n  event.stopImmediatePropagation();\n}\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    :href=\"href\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noreferrer' : undefined\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :tabindex=\"disabled ? -1 : undefined\"\n    @click.capture=\"blockWhenDisabled\"\n    @auxclick.capture=\"blockWhenDisabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </a>\n  <button\n    v-else\n    :type=\"type\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :disabled=\"disabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </button>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-btn {\n    --e-fill: var(--e-primary);\n    --e-on-fill: var(--e-on-primary);\n    --e-slab: color-mix(in srgb, var(--e-fill) 58%, #000);\n    --e-hover: color-mix(in srgb, var(--e-fill) 88%, #000);\n    --e-press: color-mix(in srgb, var(--e-fill) 78%, #000);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-2);\n    height: var(--e-control-height);\n    padding: var(--e-depth) var(--e-space-4) 0;\n    border: var(--e-stroke-edge) solid var(--e-slab);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-fill);\n    color: var(--e-on-fill);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    letter-spacing: 0.01em;\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      box-shadow var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-btn:hover {\n    background: var(--e-hover);\n  }\n\n  .e-btn:active {\n    background: var(--e-press);\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 rgb(0 0 0 / 0.22);\n  }\n\n  .e-btn--secondary {\n    --e-fill: var(--e-secondary);\n    --e-on-fill: var(--e-on-secondary);\n  }\n\n  .e-btn--danger {\n    --e-fill: var(--e-danger);\n    --e-on-fill: var(--e-on-danger);\n  }\n\n  .e-btn--outline {\n    --e-fill: var(--e-surface);\n    --e-on-fill: var(--e-ink);\n    --e-slab: var(--e-border-strong);\n  }\n\n  .e-btn--outline:hover {\n    background: color-mix(in srgb, var(--e-surface) 92%, #000);\n    border-color: var(--e-ink);\n  }\n\n  .e-btn--outline:active {\n    background: color-mix(in srgb, var(--e-surface) 84%, #000);\n    border-color: var(--e-ink);\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 rgb(0 0 0 / 0.14);\n  }\n\n  .e-btn--quiet {\n    border-color: transparent;\n    border-bottom-width: var(--e-stroke-edge);\n    background: transparent;\n    color: var(--e-ink);\n    box-shadow: none;\n    padding-top: 0;\n    padding-inline: var(--e-space-3);\n    text-decoration: underline;\n    text-underline-offset: 5px;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-decoration-color: var(--e-border-strong);\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):hover {\n    border-color: var(--e-wash-ring);\n    background: var(--e-wash-hover);\n    text-decoration-color: currentcolor;\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):active {\n    border-color: var(--e-ink);\n    background: var(--e-wash-press);\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  .e-btn .e-icon {\n    margin-inline-start: -2px;\n  }\n\n  .e-btn--block {\n    width: 100%;\n  }\n\n  .e-btn[disabled],\n  .e-btn[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    background: transparent;\n    color: var(--e-muted);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-btn {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-btn {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-btn {\n      border: 2px solid ButtonText;\n    }\n\n    .e-btn[disabled],\n    .e-btn[aria-disabled=\"true\"] {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAKA,IAAMW,IAAQC;EAuBd,SAASC,EAAkB,GAAc;GACvC,AAAKF,EAAM,aACXG,EAAM,eAAe,GACrBA,EAAM,yBAAyB;EACjC;E,iBAKUF,EAAA,QADRZ,EAAA,GAAAC,EAcI,KAAA;;GAZD,MAAMW,EAAA;GACP,OAAKV,EAAA,CAAC,SAAO,CACJU,EAAA,YAAO,aAAA,UAA4BA,EAAA,WAAWA,EAAA,SAAK,cAAA,CAAA,CAAA;GAC3D,QAAQA,EAAA,WAAQ,WAAc,KAAA;GAC9B,KAAKA,EAAA,WAAQ,eAAkB,KAAA;GAC/B,iBAAeA,EAAA,WAAQ,SAAY,KAAA;GACnC,UAAUA,EAAA,WAAQ,KAAQ,KAAA;GACX,gBAAAC;GACG,mBAAAA;E,IAEND,EAAA,QAAbZ,EAAA,GAAAG,EAAkCC,GAAA;;GAAd,MAAMQ,EAAA;E,oCAC1BN,EAAQe,EAAA,QAAA,SAAA,C,cAEVrB,EAAA,GAAAC,EASS,UAAA;;GAPN,MAAMW,EAAA;GACP,OAAKV,EAAA,CAAC,SAAO,CACJU,EAAA,YAAO,aAAA,UAA4BA,EAAA,WAAWA,EAAA,SAAK,cAAA,CAAA,CAAA;GAC3D,UAAUA,EAAA;E,IAEEA,EAAA,QAAbZ,EAAA,GAAAG,EAAkCC,GAAA;;GAAd,MAAMQ,EAAA;E,oCAC1BN,EAAQe,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_renderSlot","EIcon_default","_hoisted_1","_hoisted_2","EButton_vue_vue_type_script_setup_true_lang_default","props","__props","blockWhenDisabled","event","openBlock","createElementBlock","normalizeClass","createBlock","createCommentVNode","renderSlot","_ctx"],"sources":["../../../src/components/Button/EButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `primary` is the one main action on a screen; `secondary` confirms; `outline` is for the other actions beside it; `danger` cancels or removes; `quiet` is an underlined text action. */\n    variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"quiet\";\n    /** An icon before the label: a name such as `download`, or a component. */\n    icon?: IconProp;\n    /** Full width. */\n    block?: boolean;\n    /** Dashed and unfilled; not focusable, ignores clicks. With `href` the link gets `aria-disabled=\"true\"` and `tabindex=\"-1\"` and does not navigate. */\n    disabled?: boolean;\n    /** Set `submit` on the one that submits a form. */\n    type?: \"button\" | \"submit\" | \"reset\";\n    /** Renders a link that looks like the button, for a destination rather than an action (a call to action that goes to a page). Space does not follow it. */\n    href?: string;\n    /** With `href`: opens in a new tab. */\n    external?: boolean;\n  }>(),\n  { variant: \"primary\", type: \"button\" },\n);\n\ndefineSlots<{\n  /** The label: a verb that says what happens, like \"Pay $162.40\". */\n  default(): unknown;\n}>();\n\nfunction blockWhenDisabled(event: Event) {\n  if (!props.disabled) return;\n  event.preventDefault();\n  event.stopImmediatePropagation();\n}\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    :href=\"href\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noreferrer' : undefined\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :tabindex=\"disabled ? -1 : undefined\"\n    @click.capture=\"blockWhenDisabled\"\n    @auxclick.capture=\"blockWhenDisabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </a>\n  <button\n    v-else\n    :type=\"type\"\n    class=\"e-btn\"\n    :class=\"[variant !== 'primary' && `e-btn--${variant}`, block && 'e-btn--block']\"\n    :disabled=\"disabled\"\n  >\n    <EIcon v-if=\"icon\" :name=\"icon\" />\n    <slot />\n  </button>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-btn {\n    --e-fill: var(--e-primary);\n    --e-on-fill: var(--e-on-primary);\n    --e-slab: color-mix(in srgb, var(--e-fill), var(--e-shade-slab));\n    --e-hover: color-mix(in srgb, var(--e-fill), var(--e-shade-hover));\n    --e-press: color-mix(in srgb, var(--e-fill), var(--e-shade-press));\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-2);\n    height: var(--e-control-height);\n    padding: var(--e-depth) var(--e-space-4) 0;\n    border: var(--e-stroke-edge) solid var(--e-slab);\n\n    --e-bc: var(--e-slab);\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-fill);\n    color: var(--e-on-fill);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    letter-spacing: 0.01em;\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      box-shadow var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-btn:hover {\n    background: var(--e-hover);\n  }\n\n  .e-btn:active {\n    background: var(--e-press);\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 color-mix(in srgb, transparent, var(--e-shade-press));\n  }\n\n  .e-btn--secondary {\n    --e-fill: var(--e-secondary);\n    --e-on-fill: var(--e-on-secondary);\n  }\n\n  .e-btn--danger {\n    --e-fill: var(--e-danger);\n    --e-on-fill: var(--e-on-danger);\n  }\n\n  .e-btn--outline {\n    --e-fill: var(--e-surface);\n    --e-on-fill: var(--e-ink);\n    --e-slab: var(--e-border-strong);\n  }\n\n  .e-btn--outline:hover {\n    background: color-mix(in srgb, var(--e-surface), var(--e-shade-hover));\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-btn--outline:active {\n    background: color-mix(in srgb, var(--e-surface), var(--e-shade-press));\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n\n    border-bottom-width: var(--e-stroke-edge);\n    box-shadow: inset 0 var(--e-depth) 0 0 color-mix(in srgb, transparent, var(--e-shade-press));\n  }\n\n  .e-btn--quiet {\n    border-color: transparent;\n\n    --e-bc: transparent;\n\n    border-bottom-width: var(--e-stroke-edge);\n    background: transparent;\n    color: var(--e-ink);\n    box-shadow: none;\n    padding-top: 0;\n    padding-inline: var(--e-space-3);\n    text-decoration: underline;\n    text-underline-offset: 5px;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-decoration-color: var(--e-border-strong);\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):hover {\n    border-color: var(--e-wash-ring);\n\n    --e-bc: var(--e-wash-ring);\n\n    background: var(--e-wash-hover);\n    text-decoration-color: currentcolor;\n  }\n\n  .e-btn--quiet:not([disabled], [aria-disabled=\"true\"]):active {\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n\n    background: var(--e-wash-press);\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  .e-btn .e-icon {\n    margin-inline-start: calc(-0.5 * var(--e-space-1));\n  }\n\n  .e-btn--block {\n    width: 100%;\n  }\n\n  /* A toggle: any button with aria-pressed=\"true\" reads as selected. */\n  .e-btn[aria-pressed=\"true\"],\n  .e-btn[aria-pressed=\"true\"]:hover,\n  .e-btn[aria-pressed=\"true\"]:active {\n    --e-slab: var(--e-primary);\n    --e-bc: var(--e-primary);\n\n    border-color: var(--e-primary);\n    background: var(--e-surface-hover);\n    color: var(--e-primary);\n  }\n\n  .e-btn[disabled],\n  .e-btn[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    background: transparent;\n    color: var(--e-muted);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline: 0;\n    box-shadow: none;\n    padding-top: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-btn {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-btn {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-btn {\n      border: var(--e-stroke-focus) solid ButtonText;\n    }\n\n    .e-btn[aria-pressed=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .e-btn[disabled],\n    .e-btn[aria-disabled=\"true\"] {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAKA,IAAMW,IAAQC;EAyBd,SAASC,EAAkB,GAAc;GACvC,AAAKF,EAAM,aACXG,EAAM,eAAe,GACrBA,EAAM,yBAAyB;EACjC;E,iBAKUF,EAAA,QADRZ,EAAA,GAAAC,EAcI,KAAA;;GAZD,MAAMW,EAAA;GACP,OAAKV,EAAA,CAAC,SAAO,CACJU,EAAA,YAAO,aAAA,UAA4BA,EAAA,WAAWA,EAAA,SAAK,cAAA,CAAA,CAAA;GAC3D,QAAQA,EAAA,WAAQ,WAAc,KAAA;GAC9B,KAAKA,EAAA,WAAQ,eAAkB,KAAA;GAC/B,iBAAeA,EAAA,WAAQ,SAAY,KAAA;GACnC,UAAUA,EAAA,WAAQ,KAAQ,KAAA;GACX,gBAAAC;GACG,mBAAAA;E,IAEND,EAAA,QAAbZ,EAAA,GAAAG,EAAkCC,GAAA;;GAAd,MAAMQ,EAAA;E,oCAC1BN,EAAQe,EAAA,QAAA,SAAA,C,cAEVrB,EAAA,GAAAC,EASS,UAAA;;GAPN,MAAMW,EAAA;GACP,OAAKV,EAAA,CAAC,SAAO,CACJU,EAAA,YAAO,aAAA,UAA4BA,EAAA,WAAWA,EAAA,SAAK,cAAA,CAAA,CAAA;GAC3D,UAAUA,EAAA;E,IAEEA,EAAA,QAAbZ,EAAA,GAAAG,EAAkCC,GAAA;;GAAd,MAAMQ,EAAA;E,oCAC1BN,EAAQe,EAAA,QAAA,SAAA,C"}

package/dist/components/Calendar/ECalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ECalendar.js","names":["_sfc_main","ECalendar_vue_vue_type_script_setup_true_lang_default","ECalendar_default"],"sources":["../../../src/components/Calendar/ECalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, getCurrentInstance, nextTick, ref, watch } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport { addDays, addMonths, compareDays, dayKey, sameDay, startOfDay } from \"./dates.js\";\nimport \"../../styles/base.css\";\n\nexport interface CalendarRange {\n  start: Date | null;\n  end: Date | null;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** `single` chooses one day (`v-model`); `range` chooses a span (`v-model:start` and `v-model:end`). */\n    mode?: \"single\" | \"range\";\n    /** Days that cannot be chosen or focused, such as days with nothing to book. */\n    disabledDate?: (date: Date) => boolean;\n    /** Days that get a dot: a list of dates or a function. Screen readers hear `markLabel`. */\n    marked?: Date[] | ((date: Date) => boolean);\n    /** What screen readers hear on a marked day. Default \"times available\". */\n    markLabel?: string;\n    /** The earliest day that can be chosen. */\n    min?: Date;\n    /** The latest day that can be chosen. */\n    max?: Date;\n    /** The month to open on, when nothing is chosen. */\n    month?: Date;\n    /** `false` hides the Today and Clear buttons. */\n    footer?: boolean;\n    /** Forces the Clear button on or off. Left out, it shows when a `@clear` listener is attached. */\n    clearable?: boolean;\n  }>(),\n  { mode: \"single\", footer: true, clearable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** In range mode, after every click that changes the span. */\n  rangeChange: [range: CalendarRange];\n  /** The Clear button. It is only shown when a `@clear` listener is attached. */\n  clear: [];\n}>();\n\nconst value = defineModel<Date | null>({ default: null });\nconst start = defineModel<Date | null>(\"start\", { default: null });\nconst end = defineModel<Date | null>(\"end\", { default: null });\n\ntype View = \"days\" | \"months\" | \"years\";\n\nconst t = useMessages();\nconst config = useConfig();\nconst loc = useLocale();\nconst uid = useUid();\nconst root = ref<HTMLElement | null>(null);\nconst range = computed(() => props.mode === \"range\");\nconst instance = getCurrentInstance();\nconst hasClear = () => props.clearable ?? !!instance?.vnode.props?.onClear;\n\nconst today = startOfDay(new Date());\nconst focus = ref(startOfDay((range.value ? start.value : value.value) || props.month || new Date()));\nconst hover = ref<Date | null>(null);\nconst view = ref<View>(\"days\");\nconst pick = ref(0);\n\nconst cy = computed(() => focus.value.getFullYear());\nconst cm = computed(() => focus.value.getMonth());\nconst yearLow = computed(() => Math.min(cy.value, props.min ? props.min.getFullYear() : today.getFullYear() - 120));\nconst yearHigh = computed(() => Math.max(cy.value, props.max ? props.max.getFullYear() : today.getFullYear() + 20));\nconst years = computed(() => Array.from({ length: yearHigh.value - yearLow.value + 1 }, (_, i) => yearLow.value + i));\n\nfunction off(d: Date): boolean {\n  return (\n    (!!props.min && compareDays(d, props.min) < 0) ||\n    (!!props.max && compareDays(d, props.max) > 0) ||\n    !!props.disabledDate?.(d)\n  );\n}\nfunction isMarked(d: Date): boolean {\n  const m = props.marked;\n  if (!m) return false;\n  return typeof m === \"function\" ? !!m(d) : m.some((x) => sameDay(x, d));\n}\nfunction monthOff(y: number, m: number): boolean {\n  return (\n    (!!props.min && compareDays(new Date(y, m + 1, 0, 12), props.min) < 0) ||\n    (!!props.max && compareDays(new Date(y, m, 1, 12), props.max) > 0)\n  );\n}\nconst yearOff = (y: number) =>\n  (!!props.min && y < props.min.getFullYear()) || (!!props.max && y > props.max.getFullYear());\nfunction clamp(d: Date): Date {\n  if (props.min && compareDays(d, props.min) < 0) return startOfDay(props.min);\n  if (props.max && compareDays(d, props.max) > 0) return startOfDay(props.max);\n  return d;\n}\nfunction settle(d: Date, step: number): Date | null {\n  let n = d;\n  for (let i = 0; i < 400 && off(n); i++) n = addDays(n, step);\n  return off(n) ? null : n;\n}\nfunction withMonthYear(y: number, m: number): Date {\n  const last = new Date(y, m + 1, 0, 12).getDate();\n  return clamp(new Date(y, m, Math.min(focus.value.getDate(), last), 12));\n}\n\nif (off(focus.value)) focus.value = settle(focus.value, 1) ?? settle(focus.value, -1) ?? focus.value;\n\nlet want: string | null = null;\nasync function focusWanted() {\n  await nextTick();\n  if (!want) return;\n  const el = root.value?.querySelector<HTMLElement>(`[id=\"${want}\"]`);\n  if (!el) return;\n  el.focus();\n  if (want.includes(\"-y-\")) el.scrollIntoView?.({ block: \"center\" });\n  want = null;\n}\nfunction focusId(id: string) {\n  want = id;\n  void focusWanted();\n}\nconst dayId = (d: Date) => `${uid.value}-${dayKey(d)}`;\n\nwatch(\n  () => props.month?.getTime(),\n  () => {\n    if (props.month) focus.value = clamp(startOfDay(props.month));\n  },\n);\nwatch(\n  () => (range.value ? start.value : value.value)?.getTime(),\n  () => {\n    const chosen = range.value ? start.value : value.value;\n    if (chosen && !sameDay(chosen, focus.value)) focus.value = startOfDay(chosen);\n  },\n);\n\nconst weeks = computed(() => {\n  const first = new Date(cy.value, cm.value, 1, 12);\n  const from = addDays(first, -((first.getDay() - loc.weekStart.value + 7) % 7));\n  return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, i) => addDays(from, w * 7 + i)));\n});\nconst columns = computed(() => Array.from({ length: 7 }, (_, k) => (loc.weekStart.value + k) % 7));\nconst rangeEnd = computed(() => {\n  if (!range.value) return null;\n  return end.value || (start.value && hover.value && compareDays(hover.value, start.value) >= 0 ? hover.value : null);\n});\n\nfunction isSelected(d: Date): boolean {\n  return range.value ? sameDay(d, start.value) || sameDay(d, end.value) : sameDay(d, value.value);\n}\nfunction inRange(d: Date): boolean {\n  return !!(\n    range.value &&\n    start.value &&\n    rangeEnd.value &&\n    compareDays(d, start.value) > 0 &&\n    compareDays(d, rangeEnd.value) < 0\n  );\n}\nfunction dayLabel(d: Date, marked: boolean): string {\n  return (\n    loc.formatLong(d) +\n    (sameDay(d, today) ? \", \" + t(\"todaySuffix\") : \"\") +\n    (marked ? \", \" + (props.markLabel || t(\"timesAvailable\")) : \"\")\n  );\n}\n\nfunction pickDay(d: Date) {\n  if (off(d)) return;\n  if (!range.value) {\n    value.value = d;\n    return;\n  }\n  const s = start.value;\n  if (!s || end.value || compareDays(d, s) < 0) {\n    start.value = d;\n    end.value = null;\n    emit(\"rangeChange\", { start: d, end: null });\n  } else {\n    end.value = d;\n    emit(\"rangeChange\", { start: s, end: d });\n  }\n}\nfunction clickDay(d: Date) {\n  focus.value = d;\n  focusId(dayId(d));\n  pickDay(d);\n}\n\nfunction openView(v: \"months\" | \"years\") {\n  view.value = v;\n  if (v === \"months\") {\n    pick.value = cm.value;\n    focusId(`${uid.value}-m-${cm.value}`);\n  } else {\n    pick.value = cy.value;\n    focusId(`${uid.value}-y-${cy.value}`);\n  }\n}\nfunction backToDays() {\n  view.value = \"days\";\n  focusId(dayId(focus.value));\n}\nfunction back() {\n  if (view.value === \"months\") openView(\"years\");\n  else backToDays();\n}\nfunction chooseMonth(m: number) {\n  if (monthOff(cy.value, m)) return;\n  const nd = withMonthYear(cy.value, m);\n  focus.value = nd;\n  view.value = \"days\";\n  focusId(dayId(nd));\n}\nfunction chooseYear(y: number) {\n  if (yearOff(y)) return;\n  const nd = withMonthYear(y, cm.value);\n  focus.value = nd;\n  view.value = \"months\";\n  pick.value = nd.getMonth();\n  focusId(`${uid.value}-m-${nd.getMonth()}`);\n}\nfunction step(n: number) {\n  focus.value = clamp(addMonths(focus.value, n));\n}\n\nfunction sign(): number {\n  if (config.dir) return config.dir === \"rtl\" ? -1 : 1;\n  return root.value && getComputedStyle(root.value).direction === \"rtl\" ? -1 : 1;\n}\n\nfunction onDayKey(e: KeyboardEvent) {\n  const f = focus.value;\n  const dow = (f.getDay() - loc.weekStart.value + 7) % 7;\n  const s = sign();\n  let next: Date;\n  let walk: number;\n  switch (e.key) {\n    case \"ArrowLeft\":\n      walk = -s;\n      next = addDays(f, walk);\n      break;\n    case \"ArrowRight\":\n      walk = s;\n      next = addDays(f, walk);\n      break;\n    case \"ArrowUp\":\n      walk = -7;\n      next = addDays(f, walk);\n      break;\n    case \"ArrowDown\":\n      walk = 7;\n      next = addDays(f, walk);\n      break;\n    case \"Home\":\n      walk = 1;\n      next = addDays(f, -dow);\n      break;\n    case \"End\":\n      walk = -1;\n      next = addDays(f, 6 - dow);\n      break;\n    case \"PageUp\":\n      walk = -1;\n      next = addMonths(f, e.shiftKey ? -12 : -1);\n      break;\n    case \"PageDown\":\n      walk = 1;\n      next = addMonths(f, e.shiftKey ? 12 : 1);\n      break;\n    default:\n      return;\n  }\n  e.preventDefault();\n  const target = settle(next, walk);\n  if (!target) return;\n  focus.value = target;\n  focusId(dayId(target));\n  if (range.value && start.value && !end.value) hover.value = target;\n}\n\nfunction onPickKey(e: KeyboardEvent) {\n  const months = view.value === \"months\";\n  const lo = months ? 0 : yearLow.value;\n  const hi = months ? 11 : yearHigh.value;\n  const s = sign();\n  let next: number | null = null;\n  switch (e.key) {\n    case \"ArrowLeft\":\n      next = pick.value - s;\n      break;\n    case \"ArrowRight\":\n      next = pick.value + s;\n      break;\n    case \"ArrowUp\":\n      next = pick.value - 3;\n      break;\n    case \"ArrowDown\":\n      next = pick.value + 3;\n      break;\n    case \"Home\":\n      next = lo;\n      break;\n    case \"End\":\n      next = hi;\n      break;\n    case \"PageUp\":\n      if (!months) next = pick.value - 12;\n      break;\n    case \"PageDown\":\n      if (!months) next = pick.value + 12;\n      break;\n  }\n  if (next === null) return;\n  e.preventDefault();\n  next = Math.max(lo, Math.min(hi, next));\n  pick.value = next;\n  focusId(`${uid.value}-${months ? \"m\" : \"y\"}-${next}`);\n}\n\nfunction onRootKey(e: KeyboardEvent) {\n  if (e.key !== \"Escape\" || view.value === \"days\") return;\n  e.preventDefault();\n  e.stopPropagation();\n  backToDays();\n}\n\nfunction goToday() {\n  const tc = clamp(today);\n  focus.value = tc;\n  focusId(dayId(tc));\n  if (!range.value && !off(today)) pickDay(today);\n}\n\nconst shortDate = (d: Date) => `${loc.monthsShort.value[d.getMonth()]} ${d.getDate()}`;\nconst help = computed(() => {\n  if (!range.value || view.value !== \"days\") return \"\";\n  if (!start.value) return t(\"rangeStart\");\n  if (!end.value) return t(\"rangeEnd\", { start: shortDate(start.value) });\n  return t(\"rangeDone\", {\n    start: shortDate(start.value),\n    end: shortDate(end.value),\n    days: Math.round(compareDays(end.value, start.value) / 864e5) + 1,\n  });\n});\n\nconst picking = computed(() => view.value !== \"days\");\nconst prevOff = computed(() => !!props.min && compareDays(new Date(cy.value, cm.value, 0, 12), props.min) < 0);\nconst nextOff = computed(() => !!props.max && compareDays(new Date(cy.value, cm.value + 1, 1, 12), props.max) > 0);\nconst nowYear = today.getFullYear();\nconst nowMonth = today.getMonth();\n\ndefineExpose({\n  view,\n  focusDay: () => focusId(dayId(focus.value)),\n});\n</script>\n\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div ref=\"root\" class=\"e-cal\" :dir=\"config.dir ?? undefined\" @keydown=\"onRootKey\">\n    <div class=\"e-cal-head\">\n      <EIconButton\n        v-if=\"picking\"\n        icon=\"chevron-left\"\n        :label=\"t(view === 'months' ? 'backToYears' : 'backToDays')\"\n        @click=\"back\"\n      />\n      <EIconButton v-else icon=\"chevron-left\" :label=\"t('prevMonth')\" :disabled=\"prevOff\" @click=\"step(-1)\" />\n      <div class=\"e-cal-title\" aria-live=\"polite\">\n        <span v-if=\"picking\" class=\"e-cal-range\">{{\n          t(view === \"months\" ? \"chooseAMonth\" : \"chooseAYear\", { year: cy })\n        }}</span>\n        <button\n          v-else\n          type=\"button\"\n          class=\"e-cal-pick\"\n          aria-expanded=\"false\"\n          :aria-label=\"t('chooseDateNow', { month: loc.months.value[cm] ?? '', year: cy })\"\n          @click=\"openView('years')\"\n        >\n          {{ loc.months.value[cm] }} {{ cy }}\n          <EIcon name=\"chevron-down\" small />\n        </button>\n      </div>\n      <span v-if=\"picking\" class=\"e-cal-gap\" />\n      <EIconButton v-else icon=\"chevron-right\" :label=\"t('nextMonth')\" :disabled=\"nextOff\" @click=\"step(1)\" />\n    </div>\n\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -- the day buttons carry the roving tabindex -->\n    <table\n      v-if=\"view === 'days'\"\n      class=\"e-cal-grid\"\n      role=\"grid\"\n      :aria-label=\"`${loc.months.value[cm]} ${cy}`\"\n      @keydown=\"onDayKey\"\n    >\n      <thead>\n        <tr>\n          <th v-for=\"ix in columns\" :key=\"ix\" scope=\"col\" :abbr=\"loc.weekdays.value[ix]\">\n            {{ loc.weekdaysShort.value[ix] }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-for=\"(row, w) in weeks\" :key=\"w\">\n          <td\n            v-for=\"d in row\"\n            :key=\"dayKey(d)\"\n            role=\"gridcell\"\n            :aria-selected=\"isSelected(d) || inRange(d) ? 'true' : 'false'\"\n            :class=\"inRange(d) && 'e-cal-in'\"\n          >\n            <button\n              :id=\"dayId(d)\"\n              type=\"button\"\n              class=\"e-day\"\n              :class=\"[\n                d.getMonth() !== cm && 'e-day--out',\n                sameDay(d, today) && 'e-day--today',\n                isSelected(d) && 'e-day--sel',\n                !off(d) && isMarked(d) && 'e-day--mark',\n              ]\"\n              :tabindex=\"sameDay(d, focus) ? 0 : -1\"\n              :disabled=\"off(d)\"\n              :aria-label=\"dayLabel(d, !off(d) && isMarked(d))\"\n              @click=\"clickDay(d)\"\n              @mouseenter=\"range && start && !end && (hover = d)\"\n              @focus=\"range && start && !end && (hover = d)\"\n            >\n              {{ d.getDate() }}\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <div\n      v-else-if=\"view === 'months'\"\n      class=\"e-cal-cells\"\n      role=\"group\"\n      :aria-label=\"t('monthsOf', { year: cy })\"\n      @keydown=\"onPickKey\"\n    >\n      <button\n        v-for=\"(name, m) in loc.months.value\"\n        :id=\"`${uid}-m-${m}`\"\n        :key=\"m\"\n        type=\"button\"\n        class=\"e-cal-cell\"\n        :class=\"[m === cm && 'e-day--sel', cy === nowYear && m === nowMonth && 'e-day--today']\"\n        :tabindex=\"m === pick ? 0 : -1\"\n        :disabled=\"monthOff(cy, m)\"\n        :aria-pressed=\"m === cm ? 'true' : 'false'\"\n        :aria-current=\"cy === nowYear && m === nowMonth ? 'date' : undefined\"\n        @click=\"chooseMonth(m)\"\n      >\n        <span aria-hidden=\"true\">{{ loc.monthsShort.value[m] }}</span>\n        <span class=\"e-sr\">{{ name }} {{ cy }}</span>\n      </button>\n    </div>\n\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <div\n      v-else\n      class=\"e-cal-cells e-cal-years\"\n      role=\"group\"\n      :aria-label=\"t('yearsRange', { from: yearLow, to: yearHigh })\"\n      @keydown=\"onPickKey\"\n    >\n      <button\n        v-for=\"y in years\"\n        :id=\"`${uid}-y-${y}`\"\n        :key=\"y\"\n        type=\"button\"\n        class=\"e-cal-cell\"\n        :class=\"[y === cy && 'e-day--sel', y === nowYear && 'e-day--today']\"\n        :tabindex=\"y === pick ? 0 : -1\"\n        :disabled=\"yearOff(y)\"\n        :aria-pressed=\"y === cy ? 'true' : 'false'\"\n        :aria-current=\"y === nowYear ? 'date' : undefined\"\n        @click=\"chooseYear(y)\"\n      >\n        {{ y }}\n      </button>\n    </div>\n\n    <p v-if=\"range\" class=\"e-cal-help\" aria-live=\"polite\">{{ help }}</p>\n\n    <EActions v-if=\"footer\" class=\"e-cal-foot\" :class=\"view !== 'days' && 'e-cal-foot--idle'\" :inert=\"view !== 'days'\">\n      <EButton variant=\"quiet\" @click=\"goToday\">{{ t(\"today\") }}</EButton>\n      <EButton v-if=\"hasClear()\" variant=\"quiet\" @click=\"emit('clear')\">{{ t(\"clear\") }}</EButton>\n    </EActions>\n  </div>\n</template>\n\n<style>\n@layer e.composites {\n  .e-cal {\n    width: 20.5rem;\n    max-width: 100%;\n    font-family: var(--e-font-sans);\n  }\n\n  .e-cal-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    margin-bottom: var(--e-space-2);\n    padding-bottom: var(--e-space-2);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-cal-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-1);\n    flex: 1;\n    min-width: 0;\n    margin: 0;\n    font: 600 var(--e-text-lg) / 1.2 var(--e-font-sans);\n    text-align: center;\n  }\n\n  .e-cal-pick {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-2);\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 600 var(--e-text-lg) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-cal-pick:hover {\n    background: var(--e-surface-tint);\n    border-color: var(--e-border-strong);\n  }\n\n  .e-cal-pick:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: 1px;\n  }\n\n  .e-cal-pick .e-icon {\n    transition: transform var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-cal-pick[aria-expanded=\"true\"] .e-icon {\n    transform: rotate(180deg);\n  }\n\n  .e-cal-range {\n    font: 600 var(--e-text-lg) / 1.2 var(--e-font-sans);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .e-cal-gap {\n    display: block;\n    width: 44px;\n    height: 44px;\n  }\n\n  .e-cal-head .e-icon-btn:disabled {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-cal-head .e-icon-btn:disabled:hover {\n    background: transparent;\n    box-shadow: none;\n  }\n\n  .e-cal-grid {\n    width: 100%;\n    height: 312px;\n    border-collapse: collapse;\n    table-layout: fixed;\n  }\n\n  .e-cal-grid th {\n    height: 32px;\n    font: 600 var(--e-text-sm) / 1 var(--e-font-sans);\n    color: var(--e-muted);\n    text-align: center;\n  }\n\n  .e-cal-grid td {\n    padding: 1px 3px;\n    text-align: center;\n  }\n\n  .e-cal-in {\n    background: var(--e-surface-tint);\n  }\n\n  .e-day {\n    position: relative;\n    width: 100%;\n    height: 44px;\n    padding: 0;\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm) / 1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation -- the selector stays in this form */\n  .e-day:hover:not(:disabled):not(.e-day--sel) {\n    background: var(--e-surface-tint);\n    border-color: var(--e-border-strong);\n  }\n\n  .e-day:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-day--out {\n    color: var(--e-muted);\n    font-weight: 400;\n  }\n\n  .e-day--today {\n    box-shadow: inset 0 0 0 1.5px var(--e-ink);\n  }\n\n  .e-day--sel {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    font-weight: 700;\n    color: var(--e-on-primary);\n  }\n\n  .e-day:disabled {\n    color: var(--e-border-strong);\n    font-weight: 400;\n    cursor: not-allowed;\n    opacity: 1;\n  }\n\n  .e-day--mark::after {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: 50%;\n    bottom: 5px;\n    width: 5px;\n    height: 5px;\n    margin-inline-start: -2.5px;\n    border-radius: 50%;\n    background: var(--e-primary);\n  }\n\n  .e-day--sel.e-day--mark::after {\n    background: var(--e-on-primary);\n  }\n\n  .e-cal-cells {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-auto-rows: 1fr;\n    gap: 6px;\n    height: 312px;\n    padding-top: 4px;\n  }\n\n  .e-cal-years {\n    overflow-y: auto;\n    grid-auto-rows: 44px;\n    padding-inline-end: 2px;\n    align-content: start;\n  }\n\n  .e-cal-cell {\n    width: 100%;\n    height: 100%;\n    min-height: 44px;\n    padding: 0;\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 500 var(--e-text-md) / 1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-cal-years .e-cal-cell {\n    height: 44px;\n  }\n\n  /* stylelint-disable-next-line selector-not-notation -- the selector stays in this form */\n  .e-cal-cell:hover:not(:disabled):not(.e-day--sel) {\n    background: var(--e-surface-tint);\n    border-color: var(--e-border-strong);\n  }\n\n  .e-cal-cell:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-cal-cell:disabled {\n    color: var(--e-border-strong);\n    font-weight: 400;\n    cursor: not-allowed;\n  }\n\n  .e-cal-cell.e-day--sel {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    font-weight: 700;\n    color: var(--e-on-primary);\n  }\n\n  .e-cal-help {\n    min-height: calc(var(--e-text-sm) * 1.4);\n    margin: var(--e-space-2) 0 0;\n    font: 500 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n    text-align: center;\n  }\n\n  .e-cal-foot {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(--e-space-2);\n    margin-top: var(--e-space-2);\n    padding-top: var(--e-space-2);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-cal-foot--idle {\n    visibility: hidden;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-day,\n    .e-cal-pick,\n    .e-cal-cell,\n    .e-cal-pick .e-icon {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-day--sel,\n    .e-cal-cell.e-day--sel {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .e-day--mark::after {\n      background: CanvasText;\n    }\n\n    .e-day--sel.e-day--mark::after {\n      background: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ECalendar.js","names":["_sfc_main","ECalendar_vue_vue_type_script_setup_true_lang_default","ECalendar_default"],"sources":["../../../src/components/Calendar/ECalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, getCurrentInstance, nextTick, ref, watch } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport { addDays, addMonths, compareDays, dayKey, sameDay, startOfDay } from \"./dates.js\";\nimport \"../../styles/base.css\";\n\nexport interface CalendarRange {\n  start: Date | null;\n  end: Date | null;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** `single` chooses one day (`v-model`); `range` chooses a span (`v-model:start` and `v-model:end`): the first click sets the start, the second the end, and a click before the start restarts. */\n    mode?: \"single\" | \"range\";\n    /** Days that cannot be chosen or focused, such as days with nothing to book. Arrow keys skip them. */\n    disabledDate?: (date: Date) => boolean;\n    /** Days that get a dot: a list of dates or a function. Screen readers hear `markLabel`. */\n    marked?: Date[] | ((date: Date) => boolean);\n    /** What screen readers hear on a marked day. @default times available */\n    markLabel?: string;\n    /** The earliest day that can be chosen. Earlier days cannot be focused or chosen; navigation stops there. */\n    min?: Date;\n    /** The latest day that can be chosen. Later days cannot be focused or chosen; navigation stops there. */\n    max?: Date;\n    /** The month to open on, when nothing is chosen. Changing it moves the view. */\n    month?: Date;\n    /** `false` hides the Today and Clear buttons. */\n    footer?: boolean;\n    /** Forces the Clear button on or off. Left out, it shows when a `@clear` listener is attached. */\n    clearable?: boolean;\n  }>(),\n  { mode: \"single\", footer: true, clearable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** In range mode, after every click that changes the span. */\n  rangeChange: [range: CalendarRange];\n  /** The Clear button. It is only shown when a `@clear` listener is attached. */\n  clear: [];\n}>();\n\n/** The chosen day (`single` mode). */\nconst value = defineModel<Date | null>({ default: null });\n/** The first day of the span (`range` mode). */\nconst start = defineModel<Date | null>(\"start\", { default: null });\n/** The last day of the span (`range` mode). */\nconst end = defineModel<Date | null>(\"end\", { default: null });\n\ntype View = \"days\" | \"months\" | \"years\";\n\nconst t = useMessages();\nconst config = useConfig();\nconst loc = useLocale();\nconst uid = useUid();\nconst root = ref<HTMLElement | null>(null);\nconst range = computed(() => props.mode === \"range\");\nconst instance = getCurrentInstance();\nconst hasClear = () => props.clearable ?? !!instance?.vnode.props?.onClear;\n\nconst today = startOfDay(new Date());\nconst focus = ref(startOfDay((range.value ? start.value : value.value) || props.month || new Date()));\nconst hover = ref<Date | null>(null);\nconst view = ref<View>(\"days\");\nconst pick = ref(0);\n\nconst cy = computed(() => focus.value.getFullYear());\nconst cm = computed(() => focus.value.getMonth());\nconst yearLow = computed(() => Math.min(cy.value, props.min ? props.min.getFullYear() : today.getFullYear() - 120));\nconst yearHigh = computed(() => Math.max(cy.value, props.max ? props.max.getFullYear() : today.getFullYear() + 20));\nconst years = computed(() => Array.from({ length: yearHigh.value - yearLow.value + 1 }, (_, i) => yearLow.value + i));\n\nfunction off(d: Date): boolean {\n  return (\n    (!!props.min && compareDays(d, props.min) < 0) ||\n    (!!props.max && compareDays(d, props.max) > 0) ||\n    !!props.disabledDate?.(d)\n  );\n}\nfunction isMarked(d: Date): boolean {\n  const m = props.marked;\n  if (!m) return false;\n  return typeof m === \"function\" ? !!m(d) : m.some((x) => sameDay(x, d));\n}\nfunction monthOff(y: number, m: number): boolean {\n  return (\n    (!!props.min && compareDays(new Date(y, m + 1, 0, 12), props.min) < 0) ||\n    (!!props.max && compareDays(new Date(y, m, 1, 12), props.max) > 0)\n  );\n}\nconst yearOff = (y: number) =>\n  (!!props.min && y < props.min.getFullYear()) || (!!props.max && y > props.max.getFullYear());\nfunction clamp(d: Date): Date {\n  if (props.min && compareDays(d, props.min) < 0) return startOfDay(props.min);\n  if (props.max && compareDays(d, props.max) > 0) return startOfDay(props.max);\n  return d;\n}\nfunction settle(d: Date, step: number): Date | null {\n  let n = d;\n  for (let i = 0; i < 400 && off(n); i++) n = addDays(n, step);\n  return off(n) ? null : n;\n}\nfunction withMonthYear(y: number, m: number): Date {\n  const last = new Date(y, m + 1, 0, 12).getDate();\n  return clamp(new Date(y, m, Math.min(focus.value.getDate(), last), 12));\n}\n\nif (off(focus.value)) focus.value = settle(focus.value, 1) ?? settle(focus.value, -1) ?? focus.value;\n\nlet want: string | null = null;\nasync function focusWanted() {\n  await nextTick();\n  if (!want) return;\n  const el = root.value?.querySelector<HTMLElement>(`[id=\"${want}\"]`);\n  if (!el) return;\n  el.focus();\n  if (want.includes(\"-y-\")) el.scrollIntoView?.({ block: \"center\" });\n  want = null;\n}\nfunction focusId(id: string) {\n  want = id;\n  void focusWanted();\n}\nconst dayId = (d: Date) => `${uid.value}-${dayKey(d)}`;\n\nwatch(\n  () => props.month?.getTime(),\n  () => {\n    if (props.month) focus.value = clamp(startOfDay(props.month));\n  },\n);\nwatch(\n  () => (range.value ? start.value : value.value)?.getTime(),\n  () => {\n    const chosen = range.value ? start.value : value.value;\n    if (chosen && !sameDay(chosen, focus.value)) focus.value = startOfDay(chosen);\n  },\n);\n\nconst weeks = computed(() => {\n  const first = new Date(cy.value, cm.value, 1, 12);\n  const from = addDays(first, -((first.getDay() - loc.weekStart.value + 7) % 7));\n  return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, i) => addDays(from, w * 7 + i)));\n});\nconst columns = computed(() => Array.from({ length: 7 }, (_, k) => (loc.weekStart.value + k) % 7));\nconst rangeEnd = computed(() => {\n  if (!range.value) return null;\n  return end.value || (start.value && hover.value && compareDays(hover.value, start.value) >= 0 ? hover.value : null);\n});\n\nfunction isSelected(d: Date): boolean {\n  return range.value ? sameDay(d, start.value) || sameDay(d, end.value) : sameDay(d, value.value);\n}\nfunction inRange(d: Date): boolean {\n  return !!(\n    range.value &&\n    start.value &&\n    rangeEnd.value &&\n    compareDays(d, start.value) > 0 &&\n    compareDays(d, rangeEnd.value) < 0\n  );\n}\nfunction dayLabel(d: Date, marked: boolean): string {\n  return (\n    loc.formatLong(d) +\n    (sameDay(d, today) ? \", \" + t(\"todaySuffix\") : \"\") +\n    (marked ? \", \" + (props.markLabel || t(\"timesAvailable\")) : \"\")\n  );\n}\n\nfunction pickDay(d: Date) {\n  if (off(d)) return;\n  if (!range.value) {\n    value.value = d;\n    return;\n  }\n  const s = start.value;\n  if (!s || end.value || compareDays(d, s) < 0) {\n    start.value = d;\n    end.value = null;\n    emit(\"rangeChange\", { start: d, end: null });\n  } else {\n    end.value = d;\n    emit(\"rangeChange\", { start: s, end: d });\n  }\n}\nfunction clickDay(d: Date) {\n  focus.value = d;\n  focusId(dayId(d));\n  pickDay(d);\n}\n\nfunction openView(v: \"months\" | \"years\") {\n  view.value = v;\n  if (v === \"months\") {\n    pick.value = cm.value;\n    focusId(`${uid.value}-m-${cm.value}`);\n  } else {\n    pick.value = cy.value;\n    focusId(`${uid.value}-y-${cy.value}`);\n  }\n}\nfunction backToDays() {\n  view.value = \"days\";\n  focusId(dayId(focus.value));\n}\nfunction back() {\n  if (view.value === \"months\") openView(\"years\");\n  else backToDays();\n}\nfunction chooseMonth(m: number) {\n  if (monthOff(cy.value, m)) return;\n  const nd = withMonthYear(cy.value, m);\n  focus.value = nd;\n  view.value = \"days\";\n  focusId(dayId(nd));\n}\nfunction chooseYear(y: number) {\n  if (yearOff(y)) return;\n  const nd = withMonthYear(y, cm.value);\n  focus.value = nd;\n  view.value = \"months\";\n  pick.value = nd.getMonth();\n  focusId(`${uid.value}-m-${nd.getMonth()}`);\n}\nfunction step(n: number) {\n  focus.value = clamp(addMonths(focus.value, n));\n}\n\nfunction sign(): number {\n  if (config.dir) return config.dir === \"rtl\" ? -1 : 1;\n  return root.value && getComputedStyle(root.value).direction === \"rtl\" ? -1 : 1;\n}\n\nfunction onDayKey(e: KeyboardEvent) {\n  const f = focus.value;\n  const dow = (f.getDay() - loc.weekStart.value + 7) % 7;\n  const s = sign();\n  let next: Date;\n  let walk: number;\n  switch (e.key) {\n    case \"ArrowLeft\":\n      walk = -s;\n      next = addDays(f, walk);\n      break;\n    case \"ArrowRight\":\n      walk = s;\n      next = addDays(f, walk);\n      break;\n    case \"ArrowUp\":\n      walk = -7;\n      next = addDays(f, walk);\n      break;\n    case \"ArrowDown\":\n      walk = 7;\n      next = addDays(f, walk);\n      break;\n    case \"Home\":\n      walk = 1;\n      next = addDays(f, -dow);\n      break;\n    case \"End\":\n      walk = -1;\n      next = addDays(f, 6 - dow);\n      break;\n    case \"PageUp\":\n      walk = -1;\n      next = addMonths(f, e.shiftKey ? -12 : -1);\n      break;\n    case \"PageDown\":\n      walk = 1;\n      next = addMonths(f, e.shiftKey ? 12 : 1);\n      break;\n    default:\n      return;\n  }\n  e.preventDefault();\n  const target = settle(next, walk);\n  if (!target) return;\n  focus.value = target;\n  focusId(dayId(target));\n  if (range.value && start.value && !end.value) hover.value = target;\n}\n\nfunction onPickKey(e: KeyboardEvent) {\n  const months = view.value === \"months\";\n  const lo = months ? 0 : yearLow.value;\n  const hi = months ? 11 : yearHigh.value;\n  const s = sign();\n  let next: number | null = null;\n  switch (e.key) {\n    case \"ArrowLeft\":\n      next = pick.value - s;\n      break;\n    case \"ArrowRight\":\n      next = pick.value + s;\n      break;\n    case \"ArrowUp\":\n      next = pick.value - 3;\n      break;\n    case \"ArrowDown\":\n      next = pick.value + 3;\n      break;\n    case \"Home\":\n      next = lo;\n      break;\n    case \"End\":\n      next = hi;\n      break;\n    case \"PageUp\":\n      if (!months) next = pick.value - 12;\n      break;\n    case \"PageDown\":\n      if (!months) next = pick.value + 12;\n      break;\n  }\n  if (next === null) return;\n  e.preventDefault();\n  next = Math.max(lo, Math.min(hi, next));\n  pick.value = next;\n  focusId(`${uid.value}-${months ? \"m\" : \"y\"}-${next}`);\n}\n\nfunction onRootKey(e: KeyboardEvent) {\n  if (e.key !== \"Escape\" || view.value === \"days\") return;\n  e.preventDefault();\n  e.stopPropagation();\n  backToDays();\n}\n\nfunction goToday() {\n  const tc = clamp(today);\n  focus.value = tc;\n  focusId(dayId(tc));\n  if (!range.value && !off(today)) pickDay(today);\n}\n\nconst shortDate = (d: Date) => `${loc.monthsShort.value[d.getMonth()]} ${d.getDate()}`;\nconst help = computed(() => {\n  if (!range.value || view.value !== \"days\") return \"\";\n  if (!start.value) return t(\"rangeStart\");\n  if (!end.value) return t(\"rangeEnd\", { start: shortDate(start.value) });\n  return t(\"rangeDone\", {\n    start: shortDate(start.value),\n    end: shortDate(end.value),\n    days: Math.round(compareDays(end.value, start.value) / 864e5) + 1,\n  });\n});\n\nconst picking = computed(() => view.value !== \"days\");\nconst prevOff = computed(() => !!props.min && compareDays(new Date(cy.value, cm.value, 0, 12), props.min) < 0);\nconst nextOff = computed(() => !!props.max && compareDays(new Date(cy.value, cm.value + 1, 1, 12), props.max) > 0);\nconst nowYear = today.getFullYear();\nconst nowMonth = today.getMonth();\n\ndefineExpose({\n  view,\n  focusDay: () => focusId(dayId(focus.value)),\n});\n</script>\n\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div ref=\"root\" class=\"e-cal\" :dir=\"config.dir ?? undefined\" @keydown=\"onRootKey\">\n    <div class=\"e-cal-head\">\n      <EIconButton\n        v-if=\"picking\"\n        icon=\"chevron-left\"\n        :label=\"t(view === 'months' ? 'backToYears' : 'backToDays')\"\n        @click=\"back\"\n      />\n      <EIconButton v-else icon=\"chevron-left\" :label=\"t('prevMonth')\" :disabled=\"prevOff\" @click=\"step(-1)\" />\n      <div class=\"e-cal-title\" aria-live=\"polite\">\n        <span v-if=\"picking\" class=\"e-cal-range\">{{\n          t(view === \"months\" ? \"chooseAMonth\" : \"chooseAYear\", { year: cy })\n        }}</span>\n        <button\n          v-else\n          type=\"button\"\n          class=\"e-cal-pick\"\n          aria-expanded=\"false\"\n          :aria-label=\"t('chooseDateNow', { month: loc.months.value[cm] ?? '', year: cy })\"\n          @click=\"openView('years')\"\n        >\n          {{ loc.months.value[cm] }} {{ cy }}\n          <EIcon name=\"chevron-down\" small />\n        </button>\n      </div>\n      <span v-if=\"picking\" class=\"e-cal-gap\" />\n      <EIconButton v-else icon=\"chevron-right\" :label=\"t('nextMonth')\" :disabled=\"nextOff\" @click=\"step(1)\" />\n    </div>\n\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -- the day buttons carry the roving tabindex -->\n    <table\n      v-if=\"view === 'days'\"\n      class=\"e-cal-grid\"\n      role=\"grid\"\n      :aria-label=\"`${loc.months.value[cm]} ${cy}`\"\n      @keydown=\"onDayKey\"\n    >\n      <thead>\n        <tr>\n          <th v-for=\"ix in columns\" :key=\"ix\" scope=\"col\" :abbr=\"loc.weekdays.value[ix]\">\n            {{ loc.weekdaysShort.value[ix] }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-for=\"(row, w) in weeks\" :key=\"w\">\n          <td\n            v-for=\"d in row\"\n            :key=\"dayKey(d)\"\n            role=\"gridcell\"\n            :aria-selected=\"isSelected(d) || inRange(d) ? 'true' : 'false'\"\n            :class=\"inRange(d) && 'e-cal-in'\"\n          >\n            <button\n              :id=\"dayId(d)\"\n              type=\"button\"\n              class=\"e-day\"\n              :class=\"[\n                d.getMonth() !== cm && 'e-day--out',\n                sameDay(d, today) && 'e-day--today',\n                isSelected(d) && 'e-day--sel',\n                !off(d) && isMarked(d) && 'e-day--mark',\n              ]\"\n              :tabindex=\"sameDay(d, focus) ? 0 : -1\"\n              :disabled=\"off(d)\"\n              :aria-label=\"dayLabel(d, !off(d) && isMarked(d))\"\n              @click=\"clickDay(d)\"\n              @mouseenter=\"range && start && !end && (hover = d)\"\n              @focus=\"range && start && !end && (hover = d)\"\n            >\n              {{ d.getDate() }}\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <div\n      v-else-if=\"view === 'months'\"\n      class=\"e-cal-cells\"\n      role=\"group\"\n      :aria-label=\"t('monthsOf', { year: cy })\"\n      @keydown=\"onPickKey\"\n    >\n      <button\n        v-for=\"(name, m) in loc.months.value\"\n        :id=\"`${uid}-m-${m}`\"\n        :key=\"m\"\n        type=\"button\"\n        class=\"e-cal-cell\"\n        :class=\"[m === cm && 'e-day--sel', cy === nowYear && m === nowMonth && 'e-day--today']\"\n        :tabindex=\"m === pick ? 0 : -1\"\n        :disabled=\"monthOff(cy, m)\"\n        :aria-pressed=\"m === cm ? 'true' : 'false'\"\n        :aria-current=\"cy === nowYear && m === nowMonth ? 'date' : undefined\"\n        @click=\"chooseMonth(m)\"\n      >\n        <span aria-hidden=\"true\">{{ loc.monthsShort.value[m] }}</span>\n        <span class=\"e-sr\">{{ name }} {{ cy }}</span>\n      </button>\n    </div>\n\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <div\n      v-else\n      class=\"e-cal-cells e-cal-years\"\n      role=\"group\"\n      :aria-label=\"t('yearsRange', { from: yearLow, to: yearHigh })\"\n      @keydown=\"onPickKey\"\n    >\n      <button\n        v-for=\"y in years\"\n        :id=\"`${uid}-y-${y}`\"\n        :key=\"y\"\n        type=\"button\"\n        class=\"e-cal-cell\"\n        :class=\"[y === cy && 'e-day--sel', y === nowYear && 'e-day--today']\"\n        :tabindex=\"y === pick ? 0 : -1\"\n        :disabled=\"yearOff(y)\"\n        :aria-pressed=\"y === cy ? 'true' : 'false'\"\n        :aria-current=\"y === nowYear ? 'date' : undefined\"\n        @click=\"chooseYear(y)\"\n      >\n        {{ y }}\n      </button>\n    </div>\n\n    <p v-if=\"range\" class=\"e-cal-help\" aria-live=\"polite\">{{ help }}</p>\n\n    <EActions v-if=\"footer\" class=\"e-cal-foot\" :class=\"view !== 'days' && 'e-cal-foot--idle'\" :inert=\"view !== 'days'\">\n      <EButton variant=\"quiet\" @click=\"goToday\">{{ t(\"today\") }}</EButton>\n      <EButton v-if=\"hasClear()\" variant=\"quiet\" @click=\"emit('clear')\">{{ t(\"clear\") }}</EButton>\n    </EActions>\n  </div>\n</template>\n\n<style>\n@layer e.composites {\n  .e-cal {\n    width: 20.5rem;\n    max-width: 100%;\n    font-family: var(--e-font-sans);\n  }\n\n  .e-cal-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    margin-bottom: var(--e-space-2);\n    padding-bottom: var(--e-space-2);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-cal-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-1);\n    flex: 1;\n    min-width: 0;\n    margin: 0;\n    font: 600 var(--e-text-lg) / 1.2 var(--e-font-sans);\n    text-align: center;\n  }\n\n  .e-cal-pick {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-2);\n    border: var(--e-stroke-edge) solid transparent;\n\n    --e-bc: transparent;\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 600 var(--e-text-lg) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-cal-pick:hover {\n    background: var(--e-surface-hover);\n    border-color: var(--e-border-strong);\n\n    --e-bc: var(--e-border-strong);\n  }\n\n  .e-cal-pick:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-cal-pick .e-icon {\n    transition: transform var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-cal-pick[aria-expanded=\"true\"] .e-icon {\n    transform: rotate(180deg);\n  }\n\n  .e-cal-range {\n    font: 600 var(--e-text-lg) / 1.2 var(--e-font-sans);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .e-cal-gap {\n    display: block;\n    width: var(--e-tap);\n    height: var(--e-tap);\n  }\n\n  .e-cal-head .e-icon-btn:disabled {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-cal-head .e-icon-btn:disabled:hover {\n    background: transparent;\n    box-shadow: none;\n  }\n\n  .e-cal-grid {\n    width: 100%;\n    height: calc(6 * var(--e-tap) + var(--e-space-8) + var(--e-space-4));\n    border-collapse: collapse;\n    table-layout: fixed;\n  }\n\n  .e-cal-grid th {\n    height: var(--e-space-8);\n    font: 600 var(--e-text-sm) / 1 var(--e-font-sans);\n    color: var(--e-muted);\n    text-align: center;\n  }\n\n  .e-cal-grid td {\n    padding: 1px 3px;\n    text-align: center;\n  }\n\n  .e-cal-in {\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n  }\n\n  .e-day {\n    position: relative;\n    width: 100%;\n    height: var(--e-tap);\n    padding: 0;\n    border: var(--e-stroke-edge) solid transparent;\n\n    --e-bc: transparent;\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm) / 1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation -- the selector stays in this form */\n  .e-day:hover:not(:disabled):not(.e-day--sel) {\n    background: var(--e-surface-hover);\n    border-color: var(--e-border-strong);\n\n    --e-bc: var(--e-border-strong);\n  }\n\n  .e-day:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-day--out {\n    color: var(--e-muted);\n    font-weight: 400;\n  }\n\n  .e-day--today {\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-primary);\n  }\n\n  .e-day--sel {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n    --e-bc: var(--e-primary);\n\n    font-weight: 700;\n    color: var(--e-on-primary);\n  }\n\n  .e-day:disabled {\n    color: var(--e-border-strong);\n    font-weight: 400;\n    cursor: not-allowed;\n    opacity: 1;\n  }\n\n  .e-day--mark::after {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: 50%;\n    bottom: 5px;\n    width: 5px;\n    height: 5px;\n    margin-inline-start: -2.5px;\n    border-radius: 50%;\n    background: var(--e-primary);\n  }\n\n  .e-day--sel.e-day--mark::after {\n    background: var(--e-on-primary);\n  }\n\n  .e-cal-cells {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-auto-rows: 1fr;\n    gap: 6px;\n    height: calc(6 * var(--e-tap) + var(--e-space-8) + var(--e-space-4));\n    padding-top: var(--e-space-1);\n  }\n\n  .e-cal-years {\n    overflow-y: auto;\n    grid-auto-rows: var(--e-tap);\n    padding-inline-end: 2px;\n    align-content: start;\n  }\n\n  .e-cal-cell {\n    width: 100%;\n    height: 100%;\n    min-height: var(--e-tap);\n    padding: 0;\n    border: var(--e-stroke-edge) solid transparent;\n\n    --e-bc: transparent;\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 500 var(--e-text-md) / 1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-cal-years .e-cal-cell {\n    height: var(--e-tap);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation -- the selector stays in this form */\n  .e-cal-cell:hover:not(:disabled):not(.e-day--sel) {\n    background: var(--e-surface-hover);\n    border-color: var(--e-border-strong);\n\n    --e-bc: var(--e-border-strong);\n  }\n\n  .e-cal-cell:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-cal-cell:disabled {\n    color: var(--e-border-strong);\n    font-weight: 400;\n    cursor: not-allowed;\n  }\n\n  .e-cal-cell.e-day--sel {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n    --e-bc: var(--e-primary);\n\n    font-weight: 700;\n    color: var(--e-on-primary);\n  }\n\n  .e-cal-help {\n    min-height: calc(var(--e-text-sm) * 1.4);\n    margin: var(--e-space-2) 0 0;\n    font: 500 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n    text-align: center;\n  }\n\n  .e-cal-foot {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(--e-space-2);\n    margin-top: var(--e-space-2);\n    padding-top: var(--e-space-2);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-cal-foot--idle {\n    visibility: hidden;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-day,\n    .e-cal-pick,\n    .e-cal-cell,\n    .e-cal-pick .e-icon {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-day--sel,\n    .e-cal-cell.e-day--sel {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .e-day--mark::after {\n      background: CanvasText;\n    }\n\n    .e-day--sel.e-day--mark::after {\n      background: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}