@eos-ui/vue 0.3.0 → 0.4.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/Pagination/EPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"EPagination.js","names":["_sfc_main","EPagination_vue_vue_type_script_setup_true_lang_default","EPagination_default"],"sources":["../../../src/components/Pagination/EPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** How many pages there are. */\n  pageCount: number;\n}>();\n\n/** The current page, from 1. */\nconst page = defineModel<number>({ default: 1 });\n\nconst t = useMessages();\n\nconst items = computed<(number | \"gap\")[]>(() => {\n  const list: (number | \"gap\")[] = [];\n  for (let i = 1; i <= props.pageCount; i++) {\n    if (i === 1 || i === props.pageCount || Math.abs(i - page.value) <= 1) list.push(i);\n    else if (list[list.length - 1] !== \"gap\") list.push(\"gap\");\n  }\n  return list.map((n, k) => {\n    const before = list[k - 1];\n    const after = list[k + 1];\n    return n === \"gap\" && typeof before === \"number\" && typeof after === \"number\" && after - before === 2\n      ? before + 1\n      : n;\n  });\n});\n</script>\n\n<template>\n  <nav class=\"e-pager\" :aria-label=\"t('pagination')\">\n    <EButton variant=\"outline\" icon=\"chevron-left\" :disabled=\"page <= 1\" @click=\"page = page - 1\">\n      {{ t(\"previous\") }}\n    </EButton>\n    <ul class=\"e-pages\">\n      <li v-for=\"(n, i) in items\" :key=\"i\">\n        <span v-if=\"n === 'gap'\" class=\"e-page-gap\" aria-hidden=\"true\">&hellip;</span>\n        <button\n          v-else\n          type=\"button\"\n          class=\"e-page\"\n          :aria-current=\"n === page ? 'page' : undefined\"\n          :aria-label=\"t('pageN', { n })\"\n          @click=\"page = n\"\n        >\n          {{ n }}\n        </button>\n      </li>\n    </ul>\n    <EButton variant=\"outline\" :disabled=\"page >= pageCount\" @click=\"page = page + 1\">\n      {{ t(\"next\") }}\n      <EIcon name=\"chevron-right\" />\n    </EButton>\n  </nav>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pager {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-3);\n  }\n\n  .e-pages {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-page {\n    display: inline-grid;\n    place-items: center;\n    min-width: var(--e-control-height);\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: 500 var(--e-text-sm)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-page: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-page:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-page[aria-current=\"page\"] {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n    --e-bc: var(--e-primary);\n\n    color: var(--e-on-primary);\n    font-weight: 600;\n    cursor: default;\n  }\n\n  .e-page-gap {\n    display: inline-grid;\n    place-items: center;\n    min-width: calc(var(--e-space-6) + var(--e-space-1));\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pages {\n      display: none;\n    }\n\n    .e-pager {\n      justify-content: space-between;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-page {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-page[aria-current=\"page\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media print {\n    .e-pager {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EPagination.js","names":["_sfc_main","EPagination_vue_vue_type_script_setup_true_lang_default","EPagination_default"],"sources":["../../../src/components/Pagination/EPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** How many pages there are. */\n  pageCount: number;\n}>();\n\n/** The current page, from 1. */\nconst page = defineModel<number>({ default: 1 });\n\nconst t = useMessages();\n\nconst items = computed<(number | \"gap\")[]>(() => {\n  const list: (number | \"gap\")[] = [];\n  for (let i = 1; i <= props.pageCount; i++) {\n    if (i === 1 || i === props.pageCount || Math.abs(i - page.value) <= 1) list.push(i);\n    else if (list[list.length - 1] !== \"gap\") list.push(\"gap\");\n  }\n  return list.map((n, k) => {\n    const before = list[k - 1];\n    const after = list[k + 1];\n    return n === \"gap\" && typeof before === \"number\" && typeof after === \"number\" && after - before === 2\n      ? before + 1\n      : n;\n  });\n});\n</script>\n\n<template>\n  <nav class=\"e-pager\" :aria-label=\"t('pagination')\">\n    <EButton variant=\"outline\" icon=\"chevron-left\" :disabled=\"page <= 1\" @click=\"page = page - 1\">\n      {{ t(\"previous\") }}\n    </EButton>\n    <ul class=\"e-pages\">\n      <li v-for=\"(n, i) in items\" :key=\"i\">\n        <span v-if=\"n === 'gap'\" class=\"e-page-gap\" aria-hidden=\"true\">&hellip;</span>\n        <button\n          v-else\n          type=\"button\"\n          class=\"e-page\"\n          :aria-current=\"n === page ? 'page' : undefined\"\n          :aria-label=\"t('pageN', { n })\"\n          @click=\"page = n\"\n        >\n          {{ n }}\n        </button>\n      </li>\n    </ul>\n    <EButton variant=\"outline\" :disabled=\"page >= pageCount\" @click=\"page = page + 1\">\n      {{ t(\"next\") }}\n      <EIcon name=\"chevron-right\" />\n    </EButton>\n  </nav>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pager {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-3);\n  }\n\n  .e-pages {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-page {\n    display: inline-grid;\n    place-items: center;\n    min-width: var(--e-control-height);\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: 500 var(--e-text-sm)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-page:hover {\n    background: var(--e-surface-hover);\n    border-color: var(--e-border-strong);\n\n  }\n\n  .e-page:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-page[aria-current=\"page\"] {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    color: var(--e-on-primary);\n    font-weight: 600;\n    cursor: default;\n  }\n\n  .e-page-gap {\n    display: inline-grid;\n    place-items: center;\n    min-width: calc(var(--e-space-6) + var(--e-space-1));\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pages {\n      display: none;\n    }\n\n    .e-pager {\n      justify-content: space-between;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-page {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-page[aria-current=\"page\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media print {\n    .e-pager {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Pagination/EPagination.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EPagination.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_unref","_createVNode","EButton","_withCtx","_createTextVNode","_toDisplayString","_createElementVNode","_Fragment","_renderList","EIcon","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EPagination_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","page","useModel","t","useMessages","items","computed","list","i","before","k","after","n","openBlock","createElementBlock","unref","createVNode","_cache","withCtx","createTextVNode","toDisplayString","createElementVNode","Fragment","renderList"],"sources":["../../../src/components/Pagination/EPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** How many pages there are. */\n  pageCount: number;\n}>();\n\n/** The current page, from 1. */\nconst page = defineModel<number>({ default: 1 });\n\nconst t = useMessages();\n\nconst items = computed<(number | \"gap\")[]>(() => {\n  const list: (number | \"gap\")[] = [];\n  for (let i = 1; i <= props.pageCount; i++) {\n    if (i === 1 || i === props.pageCount || Math.abs(i - page.value) <= 1) list.push(i);\n    else if (list[list.length - 1] !== \"gap\") list.push(\"gap\");\n  }\n  return list.map((n, k) => {\n    const before = list[k - 1];\n    const after = list[k + 1];\n    return n === \"gap\" && typeof before === \"number\" && typeof after === \"number\" && after - before === 2\n      ? before + 1\n      : n;\n  });\n});\n</script>\n\n<template>\n  <nav class=\"e-pager\" :aria-label=\"t('pagination')\">\n    <EButton variant=\"outline\" icon=\"chevron-left\" :disabled=\"page <= 1\" @click=\"page = page - 1\">\n      {{ t(\"previous\") }}\n    </EButton>\n    <ul class=\"e-pages\">\n      <li v-for=\"(n, i) in items\" :key=\"i\">\n        <span v-if=\"n === 'gap'\" class=\"e-page-gap\" aria-hidden=\"true\">&hellip;</span>\n        <button\n          v-else\n          type=\"button\"\n          class=\"e-page\"\n          :aria-current=\"n === page ? 'page' : undefined\"\n          :aria-label=\"t('pageN', { n })\"\n          @click=\"page = n\"\n        >\n          {{ n }}\n        </button>\n      </li>\n    </ul>\n    <EButton variant=\"outline\" :disabled=\"page >= pageCount\" @click=\"page = page + 1\">\n      {{ t(\"next\") }}\n      <EIcon name=\"chevron-right\" />\n    </EButton>\n  </nav>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pager {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-3);\n  }\n\n  .e-pages {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-page {\n    display: inline-grid;\n    place-items: center;\n    min-width: var(--e-control-height);\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: 500 var(--e-text-sm)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-page: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-page:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-page[aria-current=\"page\"] {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n    --e-bc: var(--e-primary);\n\n    color: var(--e-on-primary);\n    font-weight: 600;\n    cursor: default;\n  }\n\n  .e-page-gap {\n    display: inline-grid;\n    place-items: center;\n    min-width: calc(var(--e-space-6) + var(--e-space-1));\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pages {\n      display: none;\n    }\n\n    .e-pager {\n      justify-content: space-between;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-page {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-page[aria-current=\"page\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media print {\n    .e-pager {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMsB,IAAQC,GAMRC,IAAOxB,EAAmBuB,GAAA,YAAe,GAEzCG,IAAIC,EAAY,GAEhBC,IAAQC,QAAmC;GAC/C,IAAMC,IAA2B,CAAC;GAClC,KAAK,IAAIC,IAAI,GAAGA,KAAKT,EAAM,WAAW,KACpC,AAAIS,MAAM,KAAKA,MAAMT,EAAM,aAAa,KAAK,IAAIS,IAAIP,EAAK,KAAK,KAAK,IAAGM,EAAK,KAAKC,CAAC,IACzED,EAAKA,EAAK,SAAS,OAAO,SAAOA,EAAK,KAAK,KAAK;GAE3D,OAAOA,EAAK,KAAK,GAAG,MAAM;IACxB,IAAME,IAASF,EAAKG,IAAI,IAClBC,IAAQJ,EAAKG,IAAI;IACvB,OAAOE,MAAM,SAAS,OAAOH,KAAW,YAAY,OAAOE,KAAU,YAAYA,IAAQF,MAAW,IAChGA,IAAS,IACTG;GACN,CAAC;EACH,CAAC;E,kBAIClC,EAAA,GAAAC,EAuBM,OAAA;GAvBD,OAAM;GAAW,cAAYC,EAAAuB,CAAA,CAAC,CAAA,YAAA;;GACjCtB,EAEUC,GAAA;IAFD,SAAQ;IAAU,MAAK;IAAgB,UAAUmB,EAAA,SAAI;IAAQ,SAAK,AAAAgB,EAAA,QAAA,MAAE,IAAA;;IAC3E,SAAAlC,QAAmB,CAAhBC,EAAAC,EAAAL,EAAAuB,CAAA,CAAC,CAAA,UAAA,CAAA,GAAA,CAAA,C;;;GAENjB,EAcK,MAdLO,GAcK,EAbHf,EAAA,EAAA,GAAAC,EAYKQ,GAAA,MAAAC,EAZgBiB,EAAA,QAAT,GAAG,OAAf3B,EAAA,GAAAC,EAYK,MAAA,EAZwB,KAAK6B,EAAC,GAAA,CACrBI,MAAC,SAAblC,EAAA,GAAAC,EAA8E,QAA9Ee,GAA+D,GAAQ,MACvEhB,EAAA,GAAAC,EASS,UAAA;;IAPP,MAAK;IACL,OAAM;IACL,gBAAciC,MAAMX,EAAA,QAAI,SAAY,KAAA;IACpC,cAAYrB,EAAAuB,CAAA,CAAC,CAAA,SAAA,EAAY,KAAC,CAAA;IAC1B,UAAK,MAAE,EAAA,QAAOS;GAEZ,GAAA3B,EAAA2B,CAAC,GAAA,GAAAjB,CAAA,E;GAIVd,EAGUC,GAAA;IAHD,SAAQ;IAAW,UAAUmB,EAAA,SAAQD,EAAA;IAAY,SAAK,AAAAiB,EAAA,QAAA,MAAE,EAAA,SAAW;;IAC1E,SAAAlC,QAAe,CAAZC,EAAAC,EAAAL,EAAAuB,CAAA,CAAC,CAAA,MAAA,CAAA,IAAW,KACf,CAAA,GAAAtB,EAA8BQ,GAAA,EAAvB,MAAK,gBAAe,CAAA,C"}
+{"version":3,"file":"EPagination.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_unref","_createVNode","EButton","_withCtx","_createTextVNode","_toDisplayString","_createElementVNode","_Fragment","_renderList","EIcon","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EPagination_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","page","useModel","t","useMessages","items","computed","list","i","before","k","after","n","openBlock","createElementBlock","unref","createVNode","_cache","withCtx","createTextVNode","toDisplayString","createElementVNode","Fragment","renderList"],"sources":["../../../src/components/Pagination/EPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** How many pages there are. */\n  pageCount: number;\n}>();\n\n/** The current page, from 1. */\nconst page = defineModel<number>({ default: 1 });\n\nconst t = useMessages();\n\nconst items = computed<(number | \"gap\")[]>(() => {\n  const list: (number | \"gap\")[] = [];\n  for (let i = 1; i <= props.pageCount; i++) {\n    if (i === 1 || i === props.pageCount || Math.abs(i - page.value) <= 1) list.push(i);\n    else if (list[list.length - 1] !== \"gap\") list.push(\"gap\");\n  }\n  return list.map((n, k) => {\n    const before = list[k - 1];\n    const after = list[k + 1];\n    return n === \"gap\" && typeof before === \"number\" && typeof after === \"number\" && after - before === 2\n      ? before + 1\n      : n;\n  });\n});\n</script>\n\n<template>\n  <nav class=\"e-pager\" :aria-label=\"t('pagination')\">\n    <EButton variant=\"outline\" icon=\"chevron-left\" :disabled=\"page <= 1\" @click=\"page = page - 1\">\n      {{ t(\"previous\") }}\n    </EButton>\n    <ul class=\"e-pages\">\n      <li v-for=\"(n, i) in items\" :key=\"i\">\n        <span v-if=\"n === 'gap'\" class=\"e-page-gap\" aria-hidden=\"true\">&hellip;</span>\n        <button\n          v-else\n          type=\"button\"\n          class=\"e-page\"\n          :aria-current=\"n === page ? 'page' : undefined\"\n          :aria-label=\"t('pageN', { n })\"\n          @click=\"page = n\"\n        >\n          {{ n }}\n        </button>\n      </li>\n    </ul>\n    <EButton variant=\"outline\" :disabled=\"page >= pageCount\" @click=\"page = page + 1\">\n      {{ t(\"next\") }}\n      <EIcon name=\"chevron-right\" />\n    </EButton>\n  </nav>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pager {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-3);\n  }\n\n  .e-pages {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-page {\n    display: inline-grid;\n    place-items: center;\n    min-width: var(--e-control-height);\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: 500 var(--e-text-sm)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-page:hover {\n    background: var(--e-surface-hover);\n    border-color: var(--e-border-strong);\n\n  }\n\n  .e-page:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-page[aria-current=\"page\"] {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    color: var(--e-on-primary);\n    font-weight: 600;\n    cursor: default;\n  }\n\n  .e-page-gap {\n    display: inline-grid;\n    place-items: center;\n    min-width: calc(var(--e-space-6) + var(--e-space-1));\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pages {\n      display: none;\n    }\n\n    .e-pager {\n      justify-content: space-between;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-page {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-page[aria-current=\"page\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media print {\n    .e-pager {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMsB,IAAQC,GAMRC,IAAOxB,EAAmBuB,GAAA,YAAe,GAEzCG,IAAIC,EAAY,GAEhBC,IAAQC,QAAmC;GAC/C,IAAMC,IAA2B,CAAC;GAClC,KAAK,IAAIC,IAAI,GAAGA,KAAKT,EAAM,WAAW,KACpC,AAAIS,MAAM,KAAKA,MAAMT,EAAM,aAAa,KAAK,IAAIS,IAAIP,EAAK,KAAK,KAAK,IAAGM,EAAK,KAAKC,CAAC,IACzED,EAAKA,EAAK,SAAS,OAAO,SAAOA,EAAK,KAAK,KAAK;GAE3D,OAAOA,EAAK,KAAK,GAAG,MAAM;IACxB,IAAME,IAASF,EAAKG,IAAI,IAClBC,IAAQJ,EAAKG,IAAI;IACvB,OAAOE,MAAM,SAAS,OAAOH,KAAW,YAAY,OAAOE,KAAU,YAAYA,IAAQF,MAAW,IAChGA,IAAS,IACTG;GACN,CAAC;EACH,CAAC;E,kBAIClC,EAAA,GAAAC,EAuBM,OAAA;GAvBD,OAAM;GAAW,cAAYC,EAAAuB,CAAA,CAAC,CAAA,YAAA;;GACjCtB,EAEUC,GAAA;IAFD,SAAQ;IAAU,MAAK;IAAgB,UAAUmB,EAAA,SAAI;IAAQ,SAAK,AAAAgB,EAAA,QAAA,MAAE,IAAA;;IAC3E,SAAAlC,QAAmB,CAAhBC,EAAAC,EAAAL,EAAAuB,CAAA,CAAC,CAAA,UAAA,CAAA,GAAA,CAAA,C;;;GAENjB,EAcK,MAdLO,GAcK,EAbHf,EAAA,EAAA,GAAAC,EAYKQ,GAAA,MAAAC,EAZgBiB,EAAA,QAAT,GAAG,OAAf3B,EAAA,GAAAC,EAYK,MAAA,EAZwB,KAAK6B,EAAC,GAAA,CACrBI,MAAC,SAAblC,EAAA,GAAAC,EAA8E,QAA9Ee,GAA+D,GAAQ,MACvEhB,EAAA,GAAAC,EASS,UAAA;;IAPP,MAAK;IACL,OAAM;IACL,gBAAciC,MAAMX,EAAA,QAAI,SAAY,KAAA;IACpC,cAAYrB,EAAAuB,CAAA,CAAC,CAAA,SAAA,EAAY,KAAC,CAAA;IAC1B,UAAK,MAAE,EAAA,QAAOS;GAEZ,GAAA3B,EAAA2B,CAAC,GAAA,GAAAjB,CAAA,E;GAIVd,EAGUC,GAAA;IAHD,SAAQ;IAAW,UAAUmB,EAAA,SAAQD,EAAA;IAAY,SAAK,AAAAiB,EAAA,QAAA,MAAE,EAAA,SAAW;;IAC1E,SAAAlC,QAAe,CAAZC,EAAAC,EAAAL,EAAAuB,CAAA,CAAC,CAAA,MAAA,CAAA,IAAW,KACf,CAAA,GAAAtB,EAA8BQ,GAAA,EAAvB,MAAK,gBAAe,CAAA,C"}

package/dist/components/PasswordField/EPasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EPasswordField.js","names":["_sfc_main","EPasswordField_vue_vue_type_script_setup_true_lang_default","EPasswordField_default"],"sources":["../../../src/components/PasswordField/EPasswordField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface PasswordRule {\n  /** What the password needs, such as \"At least 10 characters\". */\n  label: string;\n  /** Whether the password meets the rule. */\n  test: (value: string) => boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. @default \"Password\" */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `current` for signing in, `new` for choosing one. Sets `autocomplete` (`current-password` or `new-password`) so a password manager can fill or suggest. */\n  mode?: \"current\" | \"new\";\n  /** `{ label, test(value) }`. A checklist under the field that updates as the person types. Each rule shows a tick or an empty circle and says \"met\" or \"not met yet\". */\n  rules?: PasswordRule[];\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the input and the toggle. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The password. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\nconst shown = ref(false);\n\nconst list = computed(() => props.rules ?? []);\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  const describedby = [field.ariaDescribedby, list.value.length ? `${field.id}-rules` : \"\"].filter(Boolean).join(\" \");\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: shown.value ? \"text\" : \"password\",\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    autocomplete: props.mode === \"new\" ? \"new-password\" : \"current-password\",\n    autocapitalize: \"none\",\n    spellcheck: false,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(describedby || undefined),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('password')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <button\n          type=\"button\"\n          class=\"e-combo-btn\"\n          :aria-pressed=\"shown ? 'true' : 'false'\"\n          :aria-label=\"shown ? t('hidePassword') : t('showPassword')\"\n          :disabled=\"disabled\"\n          @click=\"shown = !shown\"\n        >\n          <EIcon :name=\"shown ? 'eye-slash' : 'eye'\" />\n        </button>\n      </div>\n      <ul v-if=\"list.length\" :id=\"`${field.id}-rules`\" class=\"e-rules\" :aria-label=\"t('passwordRules')\">\n        <li v-for=\"r in list\" :key=\"r.label\" class=\"e-rule\" :data-met=\"r.test(model) ? '' : undefined\">\n          <EIcon v-if=\"r.test(model)\" name=\"check\" small />\n          <span v-else class=\"e-rule-dot\" aria-hidden=\"true\" />\n          {{ r.label }}\n          <span class=\"e-sr\"> ({{ t(r.test(model) ? \"ruleMet\" : \"ruleNotMet\") }})</span>\n        </li>\n      </ul>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  /* The hidden-character dots keep the size of plain text so the caret matches when they are shown. */\n  .e-input-wrap .e-input[type=\"password\"] {\n    letter-spacing: 0.12em;\n  }\n\n  .e-rules {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n  }\n\n  .e-rule {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-rule[data-met] {\n    color: var(--e-secondary);\n  }\n\n  .e-rule .e-icon {\n    flex: none;\n  }\n\n  .e-rule-dot {\n    flex: none;\n    width: 14px;\n    height: 14px;\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: 50%;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EPasswordField.js","names":["_sfc_main","EPasswordField_vue_vue_type_script_setup_true_lang_default","EPasswordField_default"],"sources":["../../../src/components/PasswordField/EPasswordField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface PasswordRule {\n  /** What the password needs, such as \"At least 10 characters\". */\n  label: string;\n  /** Whether the password meets the rule. */\n  test: (value: string) => boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. @default \"Password\" */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `current` for signing in, `new` for choosing one. Sets `autocomplete` (`current-password` or `new-password`) so a password manager can fill or suggest. */\n  mode?: \"current\" | \"new\";\n  /** `{ label, test(value) }`. A checklist under the field that updates as the person types. Each rule shows a tick or an empty circle and says \"met\" or \"not met yet\". */\n  rules?: PasswordRule[];\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the input and the toggle. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The password. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\nconst shown = ref(false);\n\nconst list = computed(() => props.rules ?? []);\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  const describedby = [field.ariaDescribedby, list.value.length ? `${field.id}-rules` : \"\"].filter(Boolean).join(\" \");\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: shown.value ? \"text\" : \"password\",\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    autocomplete: props.mode === \"new\" ? \"new-password\" : \"current-password\",\n    autocapitalize: \"none\",\n    spellcheck: false,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(describedby || undefined),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('password')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <button\n          type=\"button\"\n          class=\"e-combo-btn\"\n          :aria-pressed=\"shown ? 'true' : 'false'\"\n          :aria-label=\"shown ? t('hidePassword') : t('showPassword')\"\n          :disabled=\"disabled\"\n          @click=\"shown = !shown\"\n        >\n          <EIcon :name=\"shown ? 'eye-slash' : 'eye'\" />\n        </button>\n      </div>\n      <ul v-if=\"list.length\" :id=\"`${field.id}-rules`\" class=\"e-rules\" :aria-label=\"t('passwordRules')\">\n        <li v-for=\"r in list\" :key=\"r.label\" class=\"e-rule\" :data-met=\"r.test(model) ? '' : undefined\">\n          <EIcon v-if=\"r.test(model)\" name=\"check\" small />\n          <span v-else class=\"e-rule-dot\" aria-hidden=\"true\" />\n          {{ r.label }}\n          <span class=\"e-sr\"> ({{ t(r.test(model) ? \"ruleMet\" : \"ruleNotMet\") }})</span>\n        </li>\n      </ul>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  /* The hidden-character dots keep the size of plain text so the caret matches when they are shown. */\n  .e-input-wrap .e-input[type=\"password\"] {\n    letter-spacing: 0.12em;\n  }\n\n  .e-rules {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n  }\n\n  .e-rule {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-rule[data-met] {\n    color: var(--e-secondary);\n  }\n\n  .e-rule .e-icon {\n    flex: none;\n  }\n\n  .e-rule-dot {\n    flex: none;\n    width: 14px;\n    height: 14px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: 50%;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PasswordField/EPasswordField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EPasswordField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_createVNode","EIcon","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","EIcon_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","EPasswordField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","attrs","useFieldAttrs","input","ref","shown","list","computed","inputBind","describedby","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","_cache","args","focusInside","$event","createVNode","createElementBlock","Fragment","renderList","r","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/PasswordField/EPasswordField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface PasswordRule {\n  /** What the password needs, such as \"At least 10 characters\". */\n  label: string;\n  /** Whether the password meets the rule. */\n  test: (value: string) => boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. @default \"Password\" */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `current` for signing in, `new` for choosing one. Sets `autocomplete` (`current-password` or `new-password`) so a password manager can fill or suggest. */\n  mode?: \"current\" | \"new\";\n  /** `{ label, test(value) }`. A checklist under the field that updates as the person types. Each rule shows a tick or an empty circle and says \"met\" or \"not met yet\". */\n  rules?: PasswordRule[];\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the input and the toggle. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The password. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\nconst shown = ref(false);\n\nconst list = computed(() => props.rules ?? []);\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  const describedby = [field.ariaDescribedby, list.value.length ? `${field.id}-rules` : \"\"].filter(Boolean).join(\" \");\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: shown.value ? \"text\" : \"password\",\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    autocomplete: props.mode === \"new\" ? \"new-password\" : \"current-password\",\n    autocapitalize: \"none\",\n    spellcheck: false,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(describedby || undefined),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('password')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <button\n          type=\"button\"\n          class=\"e-combo-btn\"\n          :aria-pressed=\"shown ? 'true' : 'false'\"\n          :aria-label=\"shown ? t('hidePassword') : t('showPassword')\"\n          :disabled=\"disabled\"\n          @click=\"shown = !shown\"\n        >\n          <EIcon :name=\"shown ? 'eye-slash' : 'eye'\" />\n        </button>\n      </div>\n      <ul v-if=\"list.length\" :id=\"`${field.id}-rules`\" class=\"e-rules\" :aria-label=\"t('passwordRules')\">\n        <li v-for=\"r in list\" :key=\"r.label\" class=\"e-rule\" :data-met=\"r.test(model) ? '' : undefined\">\n          <EIcon v-if=\"r.test(model)\" name=\"check\" small />\n          <span v-else class=\"e-rule-dot\" aria-hidden=\"true\" />\n          {{ r.label }}\n          <span class=\"e-sr\"> ({{ t(r.test(model) ? \"ruleMet\" : \"ruleNotMet\") }})</span>\n        </li>\n      </ul>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  /* The hidden-character dots keep the size of plain text so the caret matches when they are shown. */\n  .e-input-wrap .e-input[type=\"password\"] {\n    letter-spacing: 0.12em;\n  }\n\n  .e-rules {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n  }\n\n  .e-rule {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-rule[data-met] {\n    color: var(--e-secondary);\n  }\n\n  .e-rule .e-icon {\n    flex: none;\n  }\n\n  .e-rule-dot {\n    flex: none;\n    width: 14px;\n    height: 14px;\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: 50%;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,IAAM4B,IAAQC,GAwBRC,IAAQ9B,EAAmB6B,GAAA,YAAgB,GAE3CG,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAQC,EAA6B,IAAI,GACzCC,IAAQD,EAAI,EAAK,GAEjBE,IAAOC,QAAeZ,EAAM,SAAS,CAAC,CAAC;EAE7C,SAASa,EAAU,GAA6F;GAC9G,IAAMC,IAAc,CAACC,EAAM,iBAAiBJ,EAAK,MAAM,SAAS,GAAGI,EAAM,GAAG,UAAU,EAAE,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClH,OAAO;IACL,IAAIA,EAAM;IACV,OAAO;IACP,MAAML,EAAM,QAAQ,SAAS;IAC7B,OAAOR,EAAM;IACb,UAAUF,EAAM;IAChB,UAAUA,EAAM;IAChB,cAAcA,EAAM,SAAS,QAAQ,iBAAiB;IACtD,gBAAgB;IAChB,YAAY;IACZ,gBAAgBe,EAAM;IACtB,GAAGT,EAAM,MAAMQ,KAAe,KAAA,CAAS;GACzC;EACF;E,OAEAf,EAAa;GACX;GACA,aAAaS,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICnC,EAAA,GAAAC,EAuCSC,GAvCTC,EACUC,EAsCD6B,CAAA,CAtCM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA,SAASxB,EAAA2B,CAAA,CAAC,CAAA,UAAA;GACjB,cAAYH,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOvB,GAAE,MAAK,CAEvBC,EAiBM,OAAA;IAhBJ,OAAM;IACL,gBAAcsB,EAAA,QAAK,KAAQ,KAAA;IAC3B,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;IAC/B,SAAK,AAAAqB,EAAA,QAAE,GAAAC,MAAA9C,EAAA+C,CAAA,KAAA/C,EAAA+C,CAAA,CAAA,CAAA,GAAAD,CAAA;G,IAER5C,EAA0G,SAA1GH,EAA0G;IAA/F,SAAA;IAAJ,KAAIgC;GAAgB,GAAAK,EAAUE,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASG,EAAO,OAA4B,M,eACjG9C,EASS,UAAA;IARP,MAAK;IACL,OAAM;IACL,gBAAc+B,EAAA,QAAK,SAAA;IACnB,cAAYA,EAAA,QAAQjC,EAAA2B,CAAA,CAAC,CAAA,cAAA,IAAmB3B,EAAA2B,CAAA,CAAC,CAAA,cAAA;IACzC,UAAUH,EAAA;IACV,SAAK,AAAAqB,EAAA,QAAA,MAAE,EAAA,QAAK,CAAIZ,EAAA;G,IAEjB9B,EAA6CC,GAAA,EAArC,MAAM6B,EAAA,QAAK,cAAA,M,uCAGbC,EAAA,MAAK,UAAftC,EAAA,GAAAS,EAOK,MAAA;;IAPmB,IAAE,GAAKiC,EAAM,GAAE;IAAU,OAAM;IAAW,cAAYtC,EAAA2B,CAAA,CAAC,CAAA,eAAA;G,KAC7E/B,EAAA,EAAA,GAAAS,EAKKC,GAAA,MAAAC,EALW2B,EAAA,QAAL,OAAXtC,EAAA,GAAAS,EAKK,MAAA;IALkB,KAAKgD,EAAE;IAAO,OAAM;IAAU,YAAUA,EAAE,KAAK5B,EAAA,KAAK,IAAA,KAAS,KAAA;;IACrE4B,EAAE,KAAK5B,EAAA,KAAK,KAAzB7B,EAAA,GAAAC,EAAiDO,GAAA;;KAArB,MAAK;KAAQ,OAAA;I,OACzCR,EAAA,GAAAS,EAAqD,QAArDY,CAAqD;IAAAT,EAAA,MACrDC,EAAG4C,EAAE,KAAK,IAAG,KACb,CAAA;IAAAnD,EAA8E,QAA9EgB,GAAmB,OAAET,EAAGT,EAAA2B,CAAA,CAAC,CAAC0B,EAAE,KAAK5B,EAAA,KAAK,IAAA,YAAA,YAAA,CAAA,IAAgC,KAAC,CAAA"}
+{"version":3,"file":"EPasswordField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_createVNode","EIcon","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","EIcon_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","EPasswordField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","attrs","useFieldAttrs","input","ref","shown","list","computed","inputBind","describedby","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","_cache","args","focusInside","$event","createVNode","createElementBlock","Fragment","renderList","r","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/PasswordField/EPasswordField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface PasswordRule {\n  /** What the password needs, such as \"At least 10 characters\". */\n  label: string;\n  /** Whether the password meets the rule. */\n  test: (value: string) => boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. @default \"Password\" */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `current` for signing in, `new` for choosing one. Sets `autocomplete` (`current-password` or `new-password`) so a password manager can fill or suggest. */\n  mode?: \"current\" | \"new\";\n  /** `{ label, test(value) }`. A checklist under the field that updates as the person types. Each rule shows a tick or an empty circle and says \"met\" or \"not met yet\". */\n  rules?: PasswordRule[];\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the input and the toggle. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The password. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\nconst shown = ref(false);\n\nconst list = computed(() => props.rules ?? []);\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  const describedby = [field.ariaDescribedby, list.value.length ? `${field.id}-rules` : \"\"].filter(Boolean).join(\" \");\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: shown.value ? \"text\" : \"password\",\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    autocomplete: props.mode === \"new\" ? \"new-password\" : \"current-password\",\n    autocapitalize: \"none\",\n    spellcheck: false,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(describedby || undefined),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('password')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <button\n          type=\"button\"\n          class=\"e-combo-btn\"\n          :aria-pressed=\"shown ? 'true' : 'false'\"\n          :aria-label=\"shown ? t('hidePassword') : t('showPassword')\"\n          :disabled=\"disabled\"\n          @click=\"shown = !shown\"\n        >\n          <EIcon :name=\"shown ? 'eye-slash' : 'eye'\" />\n        </button>\n      </div>\n      <ul v-if=\"list.length\" :id=\"`${field.id}-rules`\" class=\"e-rules\" :aria-label=\"t('passwordRules')\">\n        <li v-for=\"r in list\" :key=\"r.label\" class=\"e-rule\" :data-met=\"r.test(model) ? '' : undefined\">\n          <EIcon v-if=\"r.test(model)\" name=\"check\" small />\n          <span v-else class=\"e-rule-dot\" aria-hidden=\"true\" />\n          {{ r.label }}\n          <span class=\"e-sr\"> ({{ t(r.test(model) ? \"ruleMet\" : \"ruleNotMet\") }})</span>\n        </li>\n      </ul>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  /* The hidden-character dots keep the size of plain text so the caret matches when they are shown. */\n  .e-input-wrap .e-input[type=\"password\"] {\n    letter-spacing: 0.12em;\n  }\n\n  .e-rules {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n  }\n\n  .e-rule {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-rule[data-met] {\n    color: var(--e-secondary);\n  }\n\n  .e-rule .e-icon {\n    flex: none;\n  }\n\n  .e-rule-dot {\n    flex: none;\n    width: 14px;\n    height: 14px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: 50%;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,IAAM4B,IAAQC,GAwBRC,IAAQ9B,EAAmB6B,GAAA,YAAgB,GAE3CG,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAQC,EAA6B,IAAI,GACzCC,IAAQD,EAAI,EAAK,GAEjBE,IAAOC,QAAeZ,EAAM,SAAS,CAAC,CAAC;EAE7C,SAASa,EAAU,GAA6F;GAC9G,IAAMC,IAAc,CAACC,EAAM,iBAAiBJ,EAAK,MAAM,SAAS,GAAGI,EAAM,GAAG,UAAU,EAAE,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClH,OAAO;IACL,IAAIA,EAAM;IACV,OAAO;IACP,MAAML,EAAM,QAAQ,SAAS;IAC7B,OAAOR,EAAM;IACb,UAAUF,EAAM;IAChB,UAAUA,EAAM;IAChB,cAAcA,EAAM,SAAS,QAAQ,iBAAiB;IACtD,gBAAgB;IAChB,YAAY;IACZ,gBAAgBe,EAAM;IACtB,GAAGT,EAAM,MAAMQ,KAAe,KAAA,CAAS;GACzC;EACF;E,OAEAf,EAAa;GACX;GACA,aAAaS,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICnC,EAAA,GAAAC,EAuCSC,GAvCTC,EACUC,EAsCD6B,CAAA,CAtCM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA,SAASxB,EAAA2B,CAAA,CAAC,CAAA,UAAA;GACjB,cAAYH,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOvB,GAAE,MAAK,CAEvBC,EAiBM,OAAA;IAhBJ,OAAM;IACL,gBAAcsB,EAAA,QAAK,KAAQ,KAAA;IAC3B,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;IAC/B,SAAK,AAAAqB,EAAA,QAAE,GAAAC,MAAA9C,EAAA+C,CAAA,KAAA/C,EAAA+C,CAAA,CAAA,CAAA,GAAAD,CAAA;G,IAER5C,EAA0G,SAA1GH,EAA0G;IAA/F,SAAA;IAAJ,KAAIgC;GAAgB,GAAAK,EAAUE,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASG,EAAO,OAA4B,M,eACjG9C,EASS,UAAA;IARP,MAAK;IACL,OAAM;IACL,gBAAc+B,EAAA,QAAK,SAAA;IACnB,cAAYA,EAAA,QAAQjC,EAAA2B,CAAA,CAAC,CAAA,cAAA,IAAmB3B,EAAA2B,CAAA,CAAC,CAAA,cAAA;IACzC,UAAUH,EAAA;IACV,SAAK,AAAAqB,EAAA,QAAA,MAAE,EAAA,QAAK,CAAIZ,EAAA;G,IAEjB9B,EAA6CC,GAAA,EAArC,MAAM6B,EAAA,QAAK,cAAA,M,uCAGbC,EAAA,MAAK,UAAftC,EAAA,GAAAS,EAOK,MAAA;;IAPmB,IAAE,GAAKiC,EAAM,GAAE;IAAU,OAAM;IAAW,cAAYtC,EAAA2B,CAAA,CAAC,CAAA,eAAA;G,KAC7E/B,EAAA,EAAA,GAAAS,EAKKC,GAAA,MAAAC,EALW2B,EAAA,QAAL,OAAXtC,EAAA,GAAAS,EAKK,MAAA;IALkB,KAAKgD,EAAE;IAAO,OAAM;IAAU,YAAUA,EAAE,KAAK5B,EAAA,KAAK,IAAA,KAAS,KAAA;;IACrE4B,EAAE,KAAK5B,EAAA,KAAK,KAAzB7B,EAAA,GAAAC,EAAiDO,GAAA;;KAArB,MAAK;KAAQ,OAAA;I,OACzCR,EAAA,GAAAS,EAAqD,QAArDY,CAAqD;IAAAT,EAAA,MACrDC,EAAG4C,EAAE,KAAK,IAAG,KACb,CAAA;IAAAnD,EAA8E,QAA9EgB,GAAmB,OAAET,EAAGT,EAAA2B,CAAA,CAAC,CAAC0B,EAAE,KAAK5B,EAAA,KAAK,IAAA,YAAA,YAAA,CAAA,IAAgC,KAAC,CAAA"}

package/dist/components/Progress/EProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"EProgress.js","names":["_sfc_main","EProgress_vue_vue_type_script_setup_true_lang_default","EProgress_default"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What is progressing. Also the bar's accessible name. @default \"Loading\" */\n    label?: string;\n    /** How far along, from 0 to `max`; the fill is clamped. Leave it out while the length is unknown: the bar slides back and forth instead (indeterminate). */\n    value?: number;\n    /** The value that means finished. */\n    max?: number;\n    /** Text shown at the end of the row. @default percent */\n    valueText?: string;\n  }>(),\n  { max: 100 },\n);\n\nconst t = useMessages();\nconst indeterminate = computed(() => props.value === undefined);\nconst percent = computed(() => Math.max(0, Math.min(100, ((props.value ?? 0) / (props.max || 100)) * 100)));\nconst showHead = computed(() => !!props.label || !indeterminate.value || !!props.valueText);\n</script>\n\n<template>\n  <div class=\"e-progress\" :class=\"indeterminate && 'e-progress--indeterminate'\">\n    <div v-if=\"showHead\" class=\"e-progress-head\">\n      <span class=\"e-progress-label\">{{ label || t(\"loading\") }}</span>\n      <span class=\"e-progress-value\">{{ valueText || (indeterminate ? \"\" : Math.round(percent) + \"%\") }}</span>\n    </div>\n    <div\n      class=\"e-progress-track\"\n      role=\"progressbar\"\n      :aria-label=\"label || t('loading')\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"indeterminate ? undefined : max || 100\"\n      :aria-valuenow=\"indeterminate ? undefined : value\"\n      :aria-busy=\"indeterminate ? 'true' : undefined\"\n    >\n      <div class=\"e-progress-fill\" :style=\"indeterminate ? undefined : { width: percent + '%' }\"></div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-progress {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-progress-head {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n\n  .e-progress-label {\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n  }\n\n  .e-progress-value {\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--e-muted);\n  }\n\n  .e-progress-track {\n    position: relative;\n    height: 10px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-card));\n    overflow: hidden;\n  }\n\n  .e-progress-fill {\n    height: 100%;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-primary);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);\n    outline: var(--e-stroke-card) solid var(--e-primary);\n    outline-offset: calc(-1 * var(--e-stroke-card));\n    transition: width var(--e-duration-move) var(--e-easing-out);\n  }\n\n  .e-progress--indeterminate .e-progress-fill {\n    position: absolute;\n    inset: 0 auto 0 0;\n    width: 40%;\n    transition: none;\n    animation: e-progress-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n\n  @keyframes e-progress-slide {\n    from {\n      transform: translateX(-100%);\n    }\n\n    to {\n      transform: translateX(250%);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-progress-fill {\n      transition: none;\n    }\n\n    .e-progress--indeterminate .e-progress-fill {\n      width: 100%;\n      animation: none;\n      background: repeating-linear-gradient(\n        135deg,\n        var(--e-primary) 0 var(--e-space-2),\n        transparent var(--e-space-2) calc(2 * var(--e-space-2))\n      );\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-progress-track {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n\n    .e-progress-fill {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-progress--indeterminate .e-progress-fill {\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EProgress.js","names":["_sfc_main","EProgress_vue_vue_type_script_setup_true_lang_default","EProgress_default"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What is progressing. Also the bar's accessible name. @default \"Loading\" */\n    label?: string;\n    /** How far along, from 0 to `max`; the fill is clamped. Leave it out while the length is unknown: the bar slides back and forth instead (indeterminate). */\n    value?: number;\n    /** The value that means finished. */\n    max?: number;\n    /** Text shown at the end of the row. @default percent */\n    valueText?: string;\n  }>(),\n  { max: 100 },\n);\n\nconst t = useMessages();\nconst indeterminate = computed(() => props.value === undefined);\nconst percent = computed(() => Math.max(0, Math.min(100, ((props.value ?? 0) / (props.max || 100)) * 100)));\nconst showHead = computed(() => !!props.label || !indeterminate.value || !!props.valueText);\n</script>\n\n<template>\n  <div class=\"e-progress\" :class=\"indeterminate && 'e-progress--indeterminate'\">\n    <div v-if=\"showHead\" class=\"e-progress-head\">\n      <span class=\"e-progress-label\">{{ label || t(\"loading\") }}</span>\n      <span class=\"e-progress-value\">{{ valueText || (indeterminate ? \"\" : Math.round(percent) + \"%\") }}</span>\n    </div>\n    <div\n      class=\"e-progress-track\"\n      role=\"progressbar\"\n      :aria-label=\"label || t('loading')\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"indeterminate ? undefined : max || 100\"\n      :aria-valuenow=\"indeterminate ? undefined : value\"\n      :aria-busy=\"indeterminate ? 'true' : undefined\"\n    >\n      <div class=\"e-progress-fill\" :style=\"indeterminate ? undefined : { width: percent + '%' }\"></div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-progress {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-progress-head {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n\n  .e-progress-label {\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n  }\n\n  .e-progress-value {\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--e-muted);\n  }\n\n  .e-progress-track {\n    position: relative;\n    height: 10px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    overflow: hidden;\n  }\n\n  .e-progress-fill {\n    height: 100%;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-primary);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);\n    transition: width var(--e-duration-move) var(--e-easing-out);\n  }\n\n  .e-progress--indeterminate .e-progress-fill {\n    position: absolute;\n    inset: 0 auto 0 0;\n    width: 40%;\n    transition: none;\n    animation: e-progress-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n\n  @keyframes e-progress-slide {\n    from {\n      transform: translateX(-100%);\n    }\n\n    to {\n      transform: translateX(250%);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-progress-fill {\n      transition: none;\n    }\n\n    .e-progress--indeterminate .e-progress-fill {\n      width: 100%;\n      animation: none;\n      background: repeating-linear-gradient(\n        135deg,\n        var(--e-primary) 0 var(--e-space-2),\n        transparent var(--e-space-2) calc(2 * var(--e-space-2))\n      );\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-progress-track {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n\n    .e-progress-fill {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-progress--indeterminate .e-progress-fill {\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Progress/EProgress.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EProgress.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_unref","_createCommentVNode","_normalizeStyle","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EProgress_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","indeterminate","computed","percent","showHead","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","unref","createCommentVNode","normalizeStyle"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What is progressing. Also the bar's accessible name. @default \"Loading\" */\n    label?: string;\n    /** How far along, from 0 to `max`; the fill is clamped. Leave it out while the length is unknown: the bar slides back and forth instead (indeterminate). */\n    value?: number;\n    /** The value that means finished. */\n    max?: number;\n    /** Text shown at the end of the row. @default percent */\n    valueText?: string;\n  }>(),\n  { max: 100 },\n);\n\nconst t = useMessages();\nconst indeterminate = computed(() => props.value === undefined);\nconst percent = computed(() => Math.max(0, Math.min(100, ((props.value ?? 0) / (props.max || 100)) * 100)));\nconst showHead = computed(() => !!props.label || !indeterminate.value || !!props.valueText);\n</script>\n\n<template>\n  <div class=\"e-progress\" :class=\"indeterminate && 'e-progress--indeterminate'\">\n    <div v-if=\"showHead\" class=\"e-progress-head\">\n      <span class=\"e-progress-label\">{{ label || t(\"loading\") }}</span>\n      <span class=\"e-progress-value\">{{ valueText || (indeterminate ? \"\" : Math.round(percent) + \"%\") }}</span>\n    </div>\n    <div\n      class=\"e-progress-track\"\n      role=\"progressbar\"\n      :aria-label=\"label || t('loading')\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"indeterminate ? undefined : max || 100\"\n      :aria-valuenow=\"indeterminate ? undefined : value\"\n      :aria-busy=\"indeterminate ? 'true' : undefined\"\n    >\n      <div class=\"e-progress-fill\" :style=\"indeterminate ? undefined : { width: percent + '%' }\"></div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-progress {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-progress-head {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n\n  .e-progress-label {\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n  }\n\n  .e-progress-value {\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--e-muted);\n  }\n\n  .e-progress-track {\n    position: relative;\n    height: 10px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-card));\n    overflow: hidden;\n  }\n\n  .e-progress-fill {\n    height: 100%;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-primary);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);\n    outline: var(--e-stroke-card) solid var(--e-primary);\n    outline-offset: calc(-1 * var(--e-stroke-card));\n    transition: width var(--e-duration-move) var(--e-easing-out);\n  }\n\n  .e-progress--indeterminate .e-progress-fill {\n    position: absolute;\n    inset: 0 auto 0 0;\n    width: 40%;\n    transition: none;\n    animation: e-progress-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n\n  @keyframes e-progress-slide {\n    from {\n      transform: translateX(-100%);\n    }\n\n    to {\n      transform: translateX(250%);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-progress-fill {\n      transition: none;\n    }\n\n    .e-progress--indeterminate .e-progress-fill {\n      width: 100%;\n      animation: none;\n      background: repeating-linear-gradient(\n        135deg,\n        var(--e-primary) 0 var(--e-space-2),\n        transparent var(--e-space-2) calc(2 * var(--e-space-2))\n      );\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-progress-track {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n\n    .e-progress-fill {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-progress--indeterminate .e-progress-fill {\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAKA,IAAMa,IAAQC,GAcRC,IAAIC,EAAY,GAChBC,IAAgBC,QAAeL,EAAM,UAAU,KAAA,CAAS,GACxDM,IAAUD,QAAe,KAAK,IAAI,GAAG,KAAK,IAAI,MAAOL,EAAM,SAAS,MAAMA,EAAM,OAAO,OAAQ,GAAG,CAAC,CAAC,GACpGO,IAAWF,QAAe,CAAC,CAACL,EAAM,SAAS,CAACI,EAAc,SAAS,CAAC,CAACJ,EAAM,SAAS;E,kBAIxFb,EAAA,GAAAC,EAgBM,OAAA,EAhBD,OAAKC,EAAA,CAAC,cAAqBe,EAAA,SAAa,2BAAA,CAAA,E,IAChCG,EAAA,SAAXpB,EAAA,GAAAC,EAGM,OAHNO,GAGM,CAFJL,EAAiE,QAAjEM,GAAiEL,EAA/BU,EAAA,SAAST,EAAAU,CAAA,CAAC,CAAA,SAAA,CAAA,GAAA,CAAA,GAC5CZ,EAAyG,QAAzGO,GAAyGN,EAAvEU,EAAA,cAAcG,EAAA,QAAa,KAAQ,KAAK,MAAME,EAAA,KAAO,IAAA,IAAA,GAAA,CAAA,C,iBAEzFhB,EAUM,OAAA;GATJ,OAAM;GACN,MAAK;GACJ,cAAYW,EAAA,SAAST,EAAAU,CAAA,CAAC,CAAA,SAAA;GACvB,iBAAc;GACb,iBAAeE,EAAA,QAAgB,KAAA,IAAYH,EAAA,OAAG;GAC9C,iBAAeG,EAAA,QAAgB,KAAA,IAAYH,EAAA;GAC3C,aAAWG,EAAA,QAAa,SAAY,KAAA;E,IAErCd,EAAiG,OAAA;GAA5F,OAAM;GAAmB,OAAKI,EAAEU,EAAA,QAAgB,KAAA,IAAS,EAAA,OAAYE,EAAA,QAAO,IAAA,CAAA"}
+{"version":3,"file":"EProgress.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_unref","_createCommentVNode","_normalizeStyle","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EProgress_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","indeterminate","computed","percent","showHead","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","unref","createCommentVNode","normalizeStyle"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What is progressing. Also the bar's accessible name. @default \"Loading\" */\n    label?: string;\n    /** How far along, from 0 to `max`; the fill is clamped. Leave it out while the length is unknown: the bar slides back and forth instead (indeterminate). */\n    value?: number;\n    /** The value that means finished. */\n    max?: number;\n    /** Text shown at the end of the row. @default percent */\n    valueText?: string;\n  }>(),\n  { max: 100 },\n);\n\nconst t = useMessages();\nconst indeterminate = computed(() => props.value === undefined);\nconst percent = computed(() => Math.max(0, Math.min(100, ((props.value ?? 0) / (props.max || 100)) * 100)));\nconst showHead = computed(() => !!props.label || !indeterminate.value || !!props.valueText);\n</script>\n\n<template>\n  <div class=\"e-progress\" :class=\"indeterminate && 'e-progress--indeterminate'\">\n    <div v-if=\"showHead\" class=\"e-progress-head\">\n      <span class=\"e-progress-label\">{{ label || t(\"loading\") }}</span>\n      <span class=\"e-progress-value\">{{ valueText || (indeterminate ? \"\" : Math.round(percent) + \"%\") }}</span>\n    </div>\n    <div\n      class=\"e-progress-track\"\n      role=\"progressbar\"\n      :aria-label=\"label || t('loading')\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"indeterminate ? undefined : max || 100\"\n      :aria-valuenow=\"indeterminate ? undefined : value\"\n      :aria-busy=\"indeterminate ? 'true' : undefined\"\n    >\n      <div class=\"e-progress-fill\" :style=\"indeterminate ? undefined : { width: percent + '%' }\"></div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-progress {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-progress-head {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n\n  .e-progress-label {\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n  }\n\n  .e-progress-value {\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--e-muted);\n  }\n\n  .e-progress-track {\n    position: relative;\n    height: 10px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);\n    overflow: hidden;\n  }\n\n  .e-progress-fill {\n    height: 100%;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-primary);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);\n    transition: width var(--e-duration-move) var(--e-easing-out);\n  }\n\n  .e-progress--indeterminate .e-progress-fill {\n    position: absolute;\n    inset: 0 auto 0 0;\n    width: 40%;\n    transition: none;\n    animation: e-progress-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n\n  @keyframes e-progress-slide {\n    from {\n      transform: translateX(-100%);\n    }\n\n    to {\n      transform: translateX(250%);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-progress-fill {\n      transition: none;\n    }\n\n    .e-progress--indeterminate .e-progress-fill {\n      width: 100%;\n      animation: none;\n      background: repeating-linear-gradient(\n        135deg,\n        var(--e-primary) 0 var(--e-space-2),\n        transparent var(--e-space-2) calc(2 * var(--e-space-2))\n      );\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-progress-track {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n\n    .e-progress-fill {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-progress--indeterminate .e-progress-fill {\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAKA,IAAMa,IAAQC,GAcRC,IAAIC,EAAY,GAChBC,IAAgBC,QAAeL,EAAM,UAAU,KAAA,CAAS,GACxDM,IAAUD,QAAe,KAAK,IAAI,GAAG,KAAK,IAAI,MAAOL,EAAM,SAAS,MAAMA,EAAM,OAAO,OAAQ,GAAG,CAAC,CAAC,GACpGO,IAAWF,QAAe,CAAC,CAACL,EAAM,SAAS,CAACI,EAAc,SAAS,CAAC,CAACJ,EAAM,SAAS;E,kBAIxFb,EAAA,GAAAC,EAgBM,OAAA,EAhBD,OAAKC,EAAA,CAAC,cAAqBe,EAAA,SAAa,2BAAA,CAAA,E,IAChCG,EAAA,SAAXpB,EAAA,GAAAC,EAGM,OAHNO,GAGM,CAFJL,EAAiE,QAAjEM,GAAiEL,EAA/BU,EAAA,SAAST,EAAAU,CAAA,CAAC,CAAA,SAAA,CAAA,GAAA,CAAA,GAC5CZ,EAAyG,QAAzGO,GAAyGN,EAAvEU,EAAA,cAAcG,EAAA,QAAa,KAAQ,KAAK,MAAME,EAAA,KAAO,IAAA,IAAA,GAAA,CAAA,C,iBAEzFhB,EAUM,OAAA;GATJ,OAAM;GACN,MAAK;GACJ,cAAYW,EAAA,SAAST,EAAAU,CAAA,CAAC,CAAA,SAAA;GACvB,iBAAc;GACb,iBAAeE,EAAA,QAAgB,KAAA,IAAYH,EAAA,OAAG;GAC9C,iBAAeG,EAAA,QAAgB,KAAA,IAAYH,EAAA;GAC3C,aAAWG,EAAA,QAAa,SAAY,KAAA;E,IAErCd,EAAiG,OAAA;GAA5F,OAAM;GAAmB,OAAKI,EAAEU,EAAA,QAAgB,KAAA,IAAS,EAAA,OAAYE,EAAA,QAAO,IAAA,CAAA"}