@eos-ui/vue 0.1.0 → 0.2.0

package/dist/components/PageHeader/EPageHeader.vue.d.ts

@@ -3,7 +3,7 @@ type __VLS_Props = {
     title: string;
     /** A short line under the title. */
     description?: string;
-    /** The heading level, 1 by default. A page has exactly one h1. */
+    /** The heading level of the title, 1 by default. A page has exactly one h1; change it only when the header is not the page's title. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 };
 type __VLS_Slots = {

package/dist/components/PageHeader/EPageHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EPageHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","EActions","EActions_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EPageHeader_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","renderSlot","_ctx","createElementVNode","createBlock","resolveDynamicComponent","__props","withCtx","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/PageHeader/EPageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The page's title: where the person is, in their words (\"Visit on Oct 2\"). */\n    title: string;\n    /** A short line under the title. */\n    description?: string;\n    /** The heading level, 1 by default. A page has exactly one h1. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 1 },\n);\n\ndefineSlots<{\n  /** An EBreadcrumb above the title. */\n  breadcrumb?(): unknown;\n  /** An EStamp beside the title. */\n  status?(): unknown;\n  /** The page's Buttons, the main one first. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-pagehead\">\n    <slot name=\"breadcrumb\" />\n    <div class=\"e-pagehead-row\">\n      <div class=\"e-pagehead-text\">\n        <div class=\"e-pagehead-titlerow\">\n          <component :is=\"`h${headingLevel}`\" class=\"e-pagehead-title\">{{ title }}</component>\n          <slot name=\"status\" />\n        </div>\n        <p v-if=\"description\" class=\"e-pagehead-desc\">{{ description }}</p>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-pagehead-actions\"><slot name=\"actions\" /></EActions>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-pagehead {\n    display: grid;\n    gap: var(--e-space-3);\n    margin-bottom: var(--e-space-6);\n  }\n\n  .e-pagehead-row {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-pagehead-text {\n    flex: 1 1 18rem;\n    min-width: 0;\n  }\n\n  .e-pagehead-title {\n    margin: 0;\n    font: 500 var(--e-text-4xl) / 1.1 var(--e-font-sans);\n    text-wrap: balance;\n  }\n\n  .e-pagehead-desc {\n    margin: var(--e-space-2) 0 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-lg) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pagehead-title {\n      font-size: var(--e-text-2xl);\n    }\n  }\n\n  .e-pagehead-titlerow {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pagehead-titlerow > :not(.e-pagehead-title) {\n    margin-top: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;E,kBA2BEC,EAAA,GAAAC,EAYM,OAZNW,GAYM,CAXJV,EAA0BmB,EAAA,QAAA,YAAA,GAC1BlB,EASM,OATNU,GASM,CARJV,EAMM,OANNW,GAMM,CALJX,EAGM,OAHNY,GAGM,EAFJf,EAAA,GAAAI,EAAoFC,EAAA,IAAhEoB,EAAA,cAAY,GAAA,EAAI,OAAM,mBAAkB,GAAA;GAAC,SAAAnB,QAAW,CAARC,EAAAC,EAAAiB,EAAA,KAAK,GAAA,CAAA,C;;E,KACrEvB,EAAsBmB,EAAA,QAAA,QAAA,C,IAEfI,EAAA,eAATzB,EAAA,GAAAC,EAAmE,KAAnEe,GAAmER,EAAlBiB,EAAA,WAAW,GAAA,CAAA,K,aAE9C1B,EAAAA,OAAO,WAAvBC,EAAA,GAAAI,EAA6FM,GAAA;;GAA7D,OAAM;;GAAqB,SAAAJ,QAAuB,CAAvBJ,EAAuBmB,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EPageHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","EActions","EActions_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EPageHeader_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","renderSlot","_ctx","createElementVNode","createBlock","resolveDynamicComponent","__props","withCtx","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/PageHeader/EPageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The page's title: where the person is, in their words (\"Visit on Oct 2\"). */\n    title: string;\n    /** A short line under the title. */\n    description?: string;\n    /** The heading level of the title, 1 by default. A page has exactly one h1; change it only when the header is not the page's title. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 1 },\n);\n\ndefineSlots<{\n  /** An EBreadcrumb above the title. */\n  breadcrumb?(): unknown;\n  /** An EStamp beside the title. */\n  status?(): unknown;\n  /** The page's Buttons, the main one first. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-pagehead\">\n    <slot name=\"breadcrumb\" />\n    <div class=\"e-pagehead-row\">\n      <div class=\"e-pagehead-text\">\n        <div class=\"e-pagehead-titlerow\">\n          <component :is=\"`h${headingLevel}`\" class=\"e-pagehead-title\">{{ title }}</component>\n          <slot name=\"status\" />\n        </div>\n        <p v-if=\"description\" class=\"e-pagehead-desc\">{{ description }}</p>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-pagehead-actions\"><slot name=\"actions\" /></EActions>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-pagehead {\n    display: grid;\n    gap: var(--e-space-3);\n    margin-bottom: var(--e-space-6);\n  }\n\n  .e-pagehead-row {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-pagehead-text {\n    flex: 1 1 18rem;\n    min-width: 0;\n  }\n\n  .e-pagehead-title {\n    margin: 0;\n    font: 500 var(--e-text-4xl) / 1.1 var(--e-font-sans);\n    text-wrap: balance;\n  }\n\n  .e-pagehead-desc {\n    margin: var(--e-space-2) 0 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-lg) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pagehead-title {\n      font-size: var(--e-text-2xl);\n    }\n  }\n\n  .e-pagehead-titlerow {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pagehead-titlerow > :not(.e-pagehead-title) {\n    margin-top: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;E,kBA2BEC,EAAA,GAAAC,EAYM,OAZNW,GAYM,CAXJV,EAA0BmB,EAAA,QAAA,YAAA,GAC1BlB,EASM,OATNU,GASM,CARJV,EAMM,OANNW,GAMM,CALJX,EAGM,OAHNY,GAGM,EAFJf,EAAA,GAAAI,EAAoFC,EAAA,IAAhEoB,EAAA,cAAY,GAAA,EAAI,OAAM,mBAAkB,GAAA;GAAC,SAAAnB,QAAW,CAARC,EAAAC,EAAAiB,EAAA,KAAK,GAAA,CAAA,C;;E,KACrEvB,EAAsBmB,EAAA,QAAA,QAAA,C,IAEfI,EAAA,eAATzB,EAAA,GAAAC,EAAmE,KAAnEe,GAAmER,EAAlBiB,EAAA,WAAW,GAAA,CAAA,K,aAE9C1B,EAAAA,OAAO,WAAvBC,EAAA,GAAAI,EAA6FM,GAAA;;GAA7D,OAAM;;GAAqB,SAAAJ,QAAuB,CAAvBJ,EAAuBmB,EAAA,QAAA,SAAA,C"}

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\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-tint);\n    border-color: 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    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: 28px;\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\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":""}

package/dist/components/Pagination/EPagination.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     pageCount: number;
 };
 type __VLS_ModelProps = {
+    /** The current page, from 1. */
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

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\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-tint);\n    border-color: 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    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: 28px;\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,GAKRC,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\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"}

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 the autocomplete token so a password manager can fill or suggest. */\n  mode?: \"current\" | \"new\";\n  /** A checklist 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  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\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  .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":""}
+{"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":""}

package/dist/components/PasswordField/EPasswordField.vue.d.ts

@@ -7,26 +7,28 @@ export interface PasswordRule {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import('vue').DefineComponent<{
-    /** The visible label, a mono kicker above the field. Default "Password". */
+    /** The visible label, a mono kicker above the field. @default "Password" */
     label?: string;
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
-    /** `current` for signing in, `new` for choosing one. Sets the autocomplete token so a password manager can fill or suggest. */
+    /** `current` for signing in, `new` for choosing one. Sets `autocomplete` (`current-password` or `new-password`) so a password manager can fill or suggest. */
     mode?: "current" | "new";
-    /** A checklist that updates as the person types. Each rule shows a tick or an empty circle and says "met" or "not met yet". */
+    /** `{ 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". */
     rules?: PasswordRule[];
     /** Help that stays under the field. */
     hint?: string;
     /** What to fix. Replaces the hint, marks the input invalid and is announced. */
     error?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables the input and the toggle. */
     disabled?: boolean;
-    /** The id of the input; the label points at it. Generated when left out. */
+    /** The id of the input; the label points at it. @default generated */
     id?: string;
 } & {
+    /** The password. */
     modelValue?: string;
 }, {
     input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
@@ -34,26 +36,28 @@ declare const __VLS_export: import('vue').DefineComponent<{
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<{
-    /** The visible label, a mono kicker above the field. Default "Password". */
+    /** The visible label, a mono kicker above the field. @default "Password" */
     label?: string;
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
-    /** `current` for signing in, `new` for choosing one. Sets the autocomplete token so a password manager can fill or suggest. */
+    /** `current` for signing in, `new` for choosing one. Sets `autocomplete` (`current-password` or `new-password`) so a password manager can fill or suggest. */
     mode?: "current" | "new";
-    /** A checklist that updates as the person types. Each rule shows a tick or an empty circle and says "met" or "not met yet". */
+    /** `{ 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". */
     rules?: PasswordRule[];
     /** Help that stays under the field. */
     hint?: string;
     /** What to fix. Replaces the hint, marks the input invalid and is announced. */
     error?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables the input and the toggle. */
     disabled?: boolean;
-    /** The id of the input; the label points at it. Generated when left out. */
+    /** The id of the input; the label points at it. @default generated */
     id?: string;
 } & {
+    /** The password. */
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;

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 the autocomplete token so a password manager can fill or suggest. */\n  mode?: \"current\" | \"new\";\n  /** A checklist 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  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\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  .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,GAsBRC,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\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"}

package/dist/components/PhoneField/EPhoneField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EPhoneField.js","names":["_sfc_main","EPhoneField_vue_vue_type_script_setup_true_lang_default","EPhoneField_default"],"sources":["../../../src/components/PhoneField/EPhoneField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from \"vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. Default \"Phone number\". */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `us` groups the digits as you type, (555) 123-4567; `none` leaves them alone. Default `us` for the en-US locale, `none` otherwise. */\n  format?: \"us\" | \"none\";\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ETextField> | null>(null);\n\nconst style = computed(() => props.format || (/^en-US/i.test(config.locale) ? \"us\" : \"none\"));\n\nfunction formatPhone(raw: string | null | undefined): string {\n  let digits = String(raw || \"\").replace(/\\D/g, \"\");\n  if (style.value !== \"us\") return String(raw || \"\");\n  if (digits.length > 10 && digits.charAt(0) === \"1\") digits = digits.slice(1);\n  digits = digits.slice(0, 10);\n  if (digits.length < 4) return digits;\n  if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;\n  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;\n}\n\nconst shown = computed(() => formatPhone(model.value));\n\nasync function onInput(value: string) {\n  model.value = formatPhone(value);\n  await nextTick();\n  const el = field.value?.input;\n  if (el && el.value !== shown.value) el.value = shown.value;\n}\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ETextField\n    :id=\"id\"\n    ref=\"field\"\n    class=\"e-phone\"\n    type=\"tel\"\n    inputmode=\"tel\"\n    autocomplete=\"tel\"\n    :label=\"label || t('phone')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :placeholder=\"placeholder\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n    :name=\"name\"\n    :model-value=\"shown\"\n    @update:model-value=\"onInput\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-phone .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EPhoneField.js","names":["_sfc_main","EPhoneField_vue_vue_type_script_setup_true_lang_default","EPhoneField_default"],"sources":["../../../src/components/PhoneField/EPhoneField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from \"vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The field's label. @default \"Phone number\" */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `us` gives (555) 123-4567, drops a leading 1 and keeps ten digits. No validation. @default us for the en-US locale, else none */\n  format?: \"us\" | \"none\";\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: 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 field. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The formatted number. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ETextField> | null>(null);\n\nconst style = computed(() => props.format || (/^en-US/i.test(config.locale) ? \"us\" : \"none\"));\n\nfunction formatPhone(raw: string | null | undefined): string {\n  let digits = String(raw || \"\").replace(/\\D/g, \"\");\n  if (style.value !== \"us\") return String(raw || \"\");\n  if (digits.length > 10 && digits.charAt(0) === \"1\") digits = digits.slice(1);\n  digits = digits.slice(0, 10);\n  if (digits.length < 4) return digits;\n  if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;\n  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;\n}\n\nconst shown = computed(() => formatPhone(model.value));\n\nasync function onInput(value: string) {\n  model.value = formatPhone(value);\n  await nextTick();\n  const el = field.value?.input;\n  if (el && el.value !== shown.value) el.value = shown.value;\n}\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ETextField\n    :id=\"id\"\n    ref=\"field\"\n    class=\"e-phone\"\n    type=\"tel\"\n    inputmode=\"tel\"\n    autocomplete=\"tel\"\n    :label=\"label || t('phone')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :placeholder=\"placeholder\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n    :name=\"name\"\n    :model-value=\"shown\"\n    @update:model-value=\"onInput\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-phone .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PhoneField/EPhoneField.vue.d.ts

@@ -1,9 +1,9 @@
 type __VLS_Props = {
-    /** The visible label, a mono kicker above the input. Default "Phone number". */
+    /** The field's label. @default "Phone number" */
     label?: string;
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
-    /** `us` groups the digits as you type, (555) 123-4567; `none` leaves them alone. Default `us` for the en-US locale, `none` otherwise. */
+    /** `us` gives (555) 123-4567, drops a leading 1 and keeps ten digits. No validation. @default us for the en-US locale, else none */
     format?: "us" | "none";
     /** Help that stays under the input. */
     hint?: string;
@@ -11,17 +11,19 @@ type __VLS_Props = {
     error?: string;
     /** An example, never the label. */
     placeholder?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables the field. */
     disabled?: boolean;
     /** The name submitted with a form. */
     name?: string;
-    /** The id of the input; the label points at it. Generated when left out. */
+    /** The id of the input; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** The formatted number. */
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/PhoneField/EPhoneField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EPhoneField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","ETextField","_unref","ETextField_default","EPhoneField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","config","useConfig","field","ref","style","computed","formatPhone","digits","raw","shown","onInput","value","nextTick","el","openBlock","createBlock","unref"],"sources":["../../../src/components/PhoneField/EPhoneField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from \"vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. Default \"Phone number\". */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `us` groups the digits as you type, (555) 123-4567; `none` leaves them alone. Default `us` for the en-US locale, `none` otherwise. */\n  format?: \"us\" | \"none\";\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ETextField> | null>(null);\n\nconst style = computed(() => props.format || (/^en-US/i.test(config.locale) ? \"us\" : \"none\"));\n\nfunction formatPhone(raw: string | null | undefined): string {\n  let digits = String(raw || \"\").replace(/\\D/g, \"\");\n  if (style.value !== \"us\") return String(raw || \"\");\n  if (digits.length > 10 && digits.charAt(0) === \"1\") digits = digits.slice(1);\n  digits = digits.slice(0, 10);\n  if (digits.length < 4) return digits;\n  if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;\n  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;\n}\n\nconst shown = computed(() => formatPhone(model.value));\n\nasync function onInput(value: string) {\n  model.value = formatPhone(value);\n  await nextTick();\n  const el = field.value?.input;\n  if (el && el.value !== shown.value) el.value = shown.value;\n}\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ETextField\n    :id=\"id\"\n    ref=\"field\"\n    class=\"e-phone\"\n    type=\"tel\"\n    inputmode=\"tel\"\n    autocomplete=\"tel\"\n    :label=\"label || t('phone')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :placeholder=\"placeholder\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n    :name=\"name\"\n    :model-value=\"shown\"\n    @update:model-value=\"onInput\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-phone .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAMU,IAAQC,GAwBRC,IAAQZ,EAAmBW,GAAA,YAAgB,GAE3CG,IAAIC,EAAY,GAChBC,IAASC,EAAU,GACnBC,IAAQC,EAA4C,IAAI,GAExDC,IAAQC,QAAeX,EAAM,WAAW,UAAU,KAAKM,EAAO,MAAM,IAAI,OAAO,OAAO;EAE5F,SAASM,EAAY,GAAwC;GAC3D,IAAIC,IAAS,OAAOC,KAAO,EAAE,CAAC,CAAC,QAAQ,OAAO,EAAE;GAMhD,OALIJ,EAAM,UAAU,QAChBG,EAAO,SAAS,MAAMA,EAAO,OAAO,CAAC,MAAM,QAAK,IAASA,EAAO,MAAM,CAAC,IAC3E,IAASA,EAAO,MAAM,GAAG,EAAE,GACvBA,EAAO,SAAS,IAAUA,IAC1BA,EAAO,SAAS,IAAU,IAAIA,EAAO,MAAM,GAAG,CAAC,EAAE,IAAIA,EAAO,MAAM,CAAC,MAChE,IAAIA,EAAO,MAAM,GAAG,CAAC,EAAE,IAAIA,EAAO,MAAM,GAAG,CAAC,EAAE,GAAGA,EAAO,MAAM,CAAC,OALrC,OAAOC,KAAO,EAAE;EAMnD;EAEA,IAAMC,IAAQJ,QAAeC,EAAYV,EAAM,KAAK,CAAC;EAErD,eAAec,EAAQ,GAAe;GAEpC,AADA,EAAM,QAAQJ,EAAYK,CAAK,GAC/B,MAAMC,EAAS;GACf,IAAMC,IAAKX,EAAM,OAAO;GACxB,AAAIW,KAAMA,EAAG,UAAUJ,EAAM,UAAO,EAAG,QAAQA,EAAM;EACvD;E,OAEAhB,EAAa;GACX,OAAOY,QAAeH,EAAM,OAAO,SAAS,IAAI;GAChD,aAAaA,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICjB,EAAA,GAAAC,EAkBEC,GAAA;GAjBC,IAAIQ,EAAA;GACD,SAAA;GAAJ,KAAIO;GACJ,OAAM;GACN,MAAK;GACL,WAAU;GACV,cAAa;GACZ,OAAOP,EAAA,SAASP,EAAAU,CAAA,CAAC,CAAA,OAAA;GACjB,cAAYH,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,aAAaA,EAAA;GACb,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,MAAMA,EAAA;GACN,eAAac,EAAA;GACb,uBAAoBC"}
+{"version":3,"file":"EPhoneField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","ETextField","_unref","ETextField_default","EPhoneField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","config","useConfig","field","ref","style","computed","formatPhone","digits","raw","shown","onInput","value","nextTick","el","openBlock","createBlock","unref"],"sources":["../../../src/components/PhoneField/EPhoneField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from \"vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The field's label. @default \"Phone number\" */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `us` gives (555) 123-4567, drops a leading 1 and keeps ten digits. No validation. @default us for the en-US locale, else none */\n  format?: \"us\" | \"none\";\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: 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 field. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The formatted number. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ETextField> | null>(null);\n\nconst style = computed(() => props.format || (/^en-US/i.test(config.locale) ? \"us\" : \"none\"));\n\nfunction formatPhone(raw: string | null | undefined): string {\n  let digits = String(raw || \"\").replace(/\\D/g, \"\");\n  if (style.value !== \"us\") return String(raw || \"\");\n  if (digits.length > 10 && digits.charAt(0) === \"1\") digits = digits.slice(1);\n  digits = digits.slice(0, 10);\n  if (digits.length < 4) return digits;\n  if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;\n  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;\n}\n\nconst shown = computed(() => formatPhone(model.value));\n\nasync function onInput(value: string) {\n  model.value = formatPhone(value);\n  await nextTick();\n  const el = field.value?.input;\n  if (el && el.value !== shown.value) el.value = shown.value;\n}\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ETextField\n    :id=\"id\"\n    ref=\"field\"\n    class=\"e-phone\"\n    type=\"tel\"\n    inputmode=\"tel\"\n    autocomplete=\"tel\"\n    :label=\"label || t('phone')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :placeholder=\"placeholder\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n    :name=\"name\"\n    :model-value=\"shown\"\n    @update:model-value=\"onInput\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-phone .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAMU,IAAQC,GA0BRC,IAAQZ,EAAmBW,GAAA,YAAgB,GAE3CG,IAAIC,EAAY,GAChBC,IAASC,EAAU,GACnBC,IAAQC,EAA4C,IAAI,GAExDC,IAAQC,QAAeX,EAAM,WAAW,UAAU,KAAKM,EAAO,MAAM,IAAI,OAAO,OAAO;EAE5F,SAASM,EAAY,GAAwC;GAC3D,IAAIC,IAAS,OAAOC,KAAO,EAAE,CAAC,CAAC,QAAQ,OAAO,EAAE;GAMhD,OALIJ,EAAM,UAAU,QAChBG,EAAO,SAAS,MAAMA,EAAO,OAAO,CAAC,MAAM,QAAK,IAASA,EAAO,MAAM,CAAC,IAC3E,IAASA,EAAO,MAAM,GAAG,EAAE,GACvBA,EAAO,SAAS,IAAUA,IAC1BA,EAAO,SAAS,IAAU,IAAIA,EAAO,MAAM,GAAG,CAAC,EAAE,IAAIA,EAAO,MAAM,CAAC,MAChE,IAAIA,EAAO,MAAM,GAAG,CAAC,EAAE,IAAIA,EAAO,MAAM,GAAG,CAAC,EAAE,GAAGA,EAAO,MAAM,CAAC,OALrC,OAAOC,KAAO,EAAE;EAMnD;EAEA,IAAMC,IAAQJ,QAAeC,EAAYV,EAAM,KAAK,CAAC;EAErD,eAAec,EAAQ,GAAe;GAEpC,AADA,EAAM,QAAQJ,EAAYK,CAAK,GAC/B,MAAMC,EAAS;GACf,IAAMC,IAAKX,EAAM,OAAO;GACxB,AAAIW,KAAMA,EAAG,UAAUJ,EAAM,UAAO,EAAG,QAAQA,EAAM;EACvD;E,OAEAhB,EAAa;GACX,OAAOY,QAAeH,EAAM,OAAO,SAAS,IAAI;GAChD,aAAaA,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICjB,EAAA,GAAAC,EAkBEC,GAAA;GAjBC,IAAIQ,EAAA;GACD,SAAA;GAAJ,KAAIO;GACJ,OAAM;GACN,MAAK;GACL,WAAU;GACV,cAAa;GACZ,OAAOP,EAAA,SAASP,EAAAU,CAAA,CAAC,CAAA,OAAA;GACjB,cAAYH,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,aAAaA,EAAA;GACb,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,MAAMA,EAAA;GACN,eAAac,EAAA;GACb,uBAAoBC"}

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 \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What is progressing. Also the bar's accessible name. */\n    label: string;\n    /** How far along, from 0 to `max`. */\n    value: number;\n    /** The value that means finished. */\n    max?: number;\n    /** Text shown at the end of the row. Defaults to a percentage. */\n    valueText?: string;\n  }>(),\n  { max: 100 },\n);\n\nconst percent = computed(() => Math.max(0, Math.min(100, (props.value / (props.max || 100)) * 100)));\n</script>\n\n<template>\n  <div class=\"e-progress\">\n    <div class=\"e-progress-head\">\n      <span class=\"e-progress-label\">{{ label }}</span>\n      <span class=\"e-progress-value\">{{ valueText || Math.round(percent) + \"%\" }}</span>\n    </div>\n    <div\n      class=\"e-progress-track\"\n      role=\"progressbar\"\n      :aria-label=\"label\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"max || 100\"\n      :aria-valuenow=\"value\"\n    >\n      <div class=\"e-progress-fill\" :style=\"{ 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    height: 10px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px 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 1px var(--e-primary);\n    transition: width var(--e-duration-move) var(--e-easing-out);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-progress-fill {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-progress-fill {\n      forced-color-adjust: none;\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    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":""}

package/dist/components/Progress/EProgress.vue.d.ts

@@ -1,11 +1,11 @@
 type __VLS_Props = {
-    /** What is progressing. Also the bar's accessible name. */
-    label: string;
-    /** How far along, from 0 to `max`. */
-    value: number;
+    /** What is progressing. Also the bar's accessible name. @default "Loading" */
+    label?: string;
+    /** 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). */
+    value?: number;
     /** The value that means finished. */
     max?: number;
-    /** Text shown at the end of the row. Defaults to a percentage. */
+    /** Text shown at the end of the row. @default percent */
     valueText?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {

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

@@ -1,11 +1,16 @@
 /* empty css                */
-import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeStyle as i, openBlock as a, toDisplayString as o } from "vue";
+import { useMessages as e } from "../../config.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, toDisplayString as l, unref as u } from "vue";
 //#region src/components/Progress/EProgress.vue?vue&type=script&setup=true&lang.ts
-var s = { class: "e-progress" }, c = { class: "e-progress-head" }, l = { class: "e-progress-label" }, u = { class: "e-progress-value" }, d = [
+var d = {
+	key: 0,
+	class: "e-progress-head"
+}, f = { class: "e-progress-label" }, p = { class: "e-progress-value" }, m = [
 	"aria-label",
 	"aria-valuemax",
-	"aria-valuenow"
-], f = /*@__PURE__*/ r({
+	"aria-valuenow",
+	"aria-busy"
+], h = /*@__PURE__*/ a({
 	__name: "EProgress",
 	props: {
 		label: {},
@@ -13,22 +18,23 @@ var s = { class: "e-progress" }, c = { class: "e-progress-head" }, l = { class:
 		max: { default: 100 },
 		valueText: {}
 	},
-	setup(r) {
-		let f = r, p = e(() => Math.max(0, Math.min(100, f.value / (f.max || 100) * 100)));
-		return (e, f) => (a(), t("div", s, [n("div", c, [n("span", l, o(r.label), 1), n("span", u, o(r.valueText || Math.round(p.value) + "%"), 1)]), n("div", {
+	setup(a) {
+		let h = a, g = e(), _ = t(() => h.value === void 0), v = t(() => Math.max(0, Math.min(100, (h.value ?? 0) / (h.max || 100) * 100))), y = t(() => !!h.label || !_.value || !!h.valueText);
+		return (e, t) => (c(), r("div", { class: o(["e-progress", _.value && "e-progress--indeterminate"]) }, [y.value ? (c(), r("div", d, [i("span", f, l(a.label || u(g)("loading")), 1), i("span", p, l(a.valueText || (_.value ? "" : Math.round(v.value) + "%")), 1)])) : n("", !0), i("div", {
 			class: "e-progress-track",
 			role: "progressbar",
-			"aria-label": r.label,
+			"aria-label": a.label || u(g)("loading"),
 			"aria-valuemin": "0",
-			"aria-valuemax": r.max || 100,
-			"aria-valuenow": r.value
-		}, [n("div", {
+			"aria-valuemax": _.value ? void 0 : a.max || 100,
+			"aria-valuenow": _.value ? void 0 : a.value,
+			"aria-busy": _.value ? "true" : void 0
+		}, [i("div", {
 			class: "e-progress-fill",
-			style: i({ width: p.value + "%" })
-		}, null, 4)], 8, d)]));
+			style: s(_.value ? void 0 : { width: v.value + "%" })
+		}, null, 4)], 8, m)], 2));
 	}
 });
 //#endregion
-export { f as default };
+export { h as default };
 
 //# sourceMappingURL=EProgress.vue_vue_type_script_setup_true_lang.js.map

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","_createElementVNode","_toDisplayString","_normalizeStyle","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EProgress_vue_vue_type_script_setup_true_lang_default","props","__props","percent","computed","openBlock","createElementBlock","createElementVNode","toDisplayString","normalizeStyle"],"sources":["../../../src/components/Progress/EProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What is progressing. Also the bar's accessible name. */\n    label: string;\n    /** How far along, from 0 to `max`. */\n    value: number;\n    /** The value that means finished. */\n    max?: number;\n    /** Text shown at the end of the row. Defaults to a percentage. */\n    valueText?: string;\n  }>(),\n  { max: 100 },\n);\n\nconst percent = computed(() => Math.max(0, Math.min(100, (props.value / (props.max || 100)) * 100)));\n</script>\n\n<template>\n  <div class=\"e-progress\">\n    <div class=\"e-progress-head\">\n      <span class=\"e-progress-label\">{{ label }}</span>\n      <span class=\"e-progress-value\">{{ valueText || Math.round(percent) + \"%\" }}</span>\n    </div>\n    <div\n      class=\"e-progress-track\"\n      role=\"progressbar\"\n      :aria-label=\"label\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"max || 100\"\n      :aria-valuenow=\"value\"\n    >\n      <div class=\"e-progress-fill\" :style=\"{ 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    height: 10px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px 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 1px var(--e-primary);\n    transition: width var(--e-duration-move) var(--e-easing-out);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-progress-fill {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-progress-fill {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAIA,IAAMW,IAAQC,GAcRC,IAAUC,QAAe,KAAK,IAAI,GAAG,KAAK,IAAI,KAAMH,EAAM,SAASA,EAAM,OAAO,OAAQ,GAAG,CAAC,CAAC;E,kBAIjGX,EAAA,GAAAC,EAeM,OAfNI,GAeM,CAdJH,EAGM,OAHNI,GAGM,CAFJJ,EAAiD,QAAjDK,GAAiDJ,EAAfS,EAAA,KAAK,GAAA,CAAA,GACvCV,EAAkF,QAAlFM,GAAkFL,EAAhDS,EAAA,aAAa,KAAK,MAAMC,EAAA,KAAO,IAAA,GAAA,GAAA,CAAA,C,IAEnEX,EASM,OAAA;GARJ,OAAM;GACN,MAAK;GACJ,cAAYU,EAAA;GACb,iBAAc;GACb,iBAAeA,EAAA,OAAG;GAClB,iBAAeA,EAAA;E,IAEhBV,EAAqE,OAAA;GAAhE,OAAM;GAAmB,OAAKE,EAAA,EAAA,OAAWS,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    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"}

package/dist/components/RadioGroup/ERadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ERadioGroup.js","names":["_sfc_main","ERadioGroup_vue_vue_type_script_setup_true_lang_default","ERadioGroup_default"],"sources":["../../../src/components/RadioGroup/ERadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface RadioOption {\n  value: string;\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, Fragment, useSlots, type FunctionalComponent, type VNode } from \"vue\";\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\nconst props = defineProps<{\n  /** The question, as the group's legend. */\n  label: string;\n  /** Keep the legend for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Five or fewer. A string is both value and label. */\n  options: (string | RadioOption)[];\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  required?: boolean;\n  /** A word beside the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. Generated when left out. */\n  name?: string;\n}>();\n\ndefineSlots<{\n  /** A control shown under its option while that option is chosen, such as an amount field under \"Another amount\". Render nothing for an option that has none. */\n  reveal(props: { option: RadioOption }): unknown;\n}>();\n\nconst model = defineModel<string>();\n\nconst name = useUid(() => props.name);\nconst slots = useSlots();\n\nconst normalised = (): RadioOption[] => props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o));\n\nfunction hasContent(nodes: VNode[]): boolean {\n  return nodes.some((n) =>\n    n.type === Comment ? false : n.type === Fragment ? hasContent((n.children as VNode[] | null) ?? []) : true,\n  );\n}\n\nfunction rows() {\n  return normalised().map((option) => {\n    const chosen = model.value === option.value;\n    const nodes = chosen ? slots.reveal?.({ option }) : undefined;\n    return { option, chosen, reveal: nodes && hasContent(nodes) ? nodes : null };\n  });\n}\n\nconst Nodes: FunctionalComponent<{ nodes: VNode[] }> = (p) => p.nodes;\nNodes.props = [\"nodes\"];\n</script>\n\n<template>\n  <EFieldset\n    :id=\"`${name}-fs`\"\n    class=\"e-radiogroup\"\n    legend-class=\"e-radiogroup-legend\"\n    bare\n    :legend=\"label\"\n    :hide-legend=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  >\n    <template v-for=\"row in rows()\" :key=\"row.option.value\">\n      <label class=\"e-choice\" :class=\"{ 'e-choice--disabled': row.option.disabled, 'e-choice--open': row.reveal }\">\n        <input\n          type=\"radio\"\n          class=\"e-radio\"\n          :name=\"name\"\n          :value=\"row.option.value\"\n          :required=\"required\"\n          :checked=\"row.chosen\"\n          :disabled=\"row.option.disabled\"\n          @change=\"model = row.option.value\"\n        />\n        <span class=\"e-choice-text\">\n          {{ row.option.label }}\n          <span v-if=\"row.option.description\" class=\"e-choice-desc\">{{ row.option.description }}</span>\n        </span>\n      </label>\n      <div v-if=\"row.reveal\" class=\"e-choice-reveal\"><Nodes :nodes=\"row.reveal\" /></div>\n    </template>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-radiogroup {\n    display: grid;\n    gap: 0;\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-radiogroup-legend {\n    padding: 0;\n  }\n\n  .e-radiogroup > .e-field-hint,\n  .e-radiogroup > .e-field-error {\n    margin-top: -6px;\n  }\n\n  .e-choice--open {\n    min-height: 0;\n    padding-bottom: var(--e-space-1);\n  }\n\n  .e-choice-reveal {\n    padding: var(--e-space-1) 0 var(--e-space-2);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ERadioGroup.js","names":["_sfc_main","ERadioGroup_vue_vue_type_script_setup_true_lang_default","ERadioGroup_default"],"sources":["../../../src/components/RadioGroup/ERadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface RadioOption {\n  value: string;\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, Fragment, useSlots, type FunctionalComponent, type VNode } from \"vue\";\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\nconst props = defineProps<{\n  /** The question, as the group's legend. */\n  label: string;\n  /** Keep the legend for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Five or fewer. A string is both value and label. `RadioOption`: `{ value, label, description?, disabled? }`. */\n  options: (string | RadioOption)[];\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  /** A word beside the legend, and `required` on the radios. */\n  required?: boolean;\n  /** A word beside the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** Shared by the radios, submitted with a form. @default generated */\n  name?: string;\n}>();\n\ndefineSlots<{\n  /** A control shown under its option while that option is chosen, such as an amount field under \"Another amount\". Render nothing for an option that has none. */\n  reveal(props: { option: RadioOption }): unknown;\n}>();\n\n/** The chosen value. */\nconst model = defineModel<string>();\n\nconst name = useUid(() => props.name);\nconst slots = useSlots();\n\nconst normalised = (): RadioOption[] => props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o));\n\nfunction hasContent(nodes: VNode[]): boolean {\n  return nodes.some((n) =>\n    n.type === Comment ? false : n.type === Fragment ? hasContent((n.children as VNode[] | null) ?? []) : true,\n  );\n}\n\nfunction rows() {\n  return normalised().map((option) => {\n    const chosen = model.value === option.value;\n    const nodes = chosen ? slots.reveal?.({ option }) : undefined;\n    return { option, chosen, reveal: nodes && hasContent(nodes) ? nodes : null };\n  });\n}\n\nconst Nodes: FunctionalComponent<{ nodes: VNode[] }> = (p) => p.nodes;\nNodes.props = [\"nodes\"];\n</script>\n\n<template>\n  <EFieldset\n    :id=\"`${name}-fs`\"\n    class=\"e-radiogroup\"\n    legend-class=\"e-radiogroup-legend\"\n    bare\n    :legend=\"label\"\n    :hide-legend=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  >\n    <template v-for=\"row in rows()\" :key=\"row.option.value\">\n      <label class=\"e-choice\" :class=\"{ 'e-choice--disabled': row.option.disabled, 'e-choice--open': row.reveal }\">\n        <input\n          type=\"radio\"\n          class=\"e-radio\"\n          :name=\"name\"\n          :value=\"row.option.value\"\n          :required=\"required\"\n          :checked=\"row.chosen\"\n          :disabled=\"row.option.disabled\"\n          @change=\"model = row.option.value\"\n        />\n        <span class=\"e-choice-text\">\n          {{ row.option.label }}\n          <span v-if=\"row.option.description\" class=\"e-choice-desc\">{{ row.option.description }}</span>\n        </span>\n      </label>\n      <div v-if=\"row.reveal\" class=\"e-choice-reveal\"><Nodes :nodes=\"row.reveal\" /></div>\n    </template>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-radiogroup {\n    display: grid;\n    gap: 0;\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-radiogroup-legend {\n    padding: 0;\n  }\n\n  .e-radiogroup > .e-field-hint,\n  .e-radiogroup > .e-field-error {\n    margin-top: calc(var(--e-space-1) - var(--e-space-2) - var(--e-focus-gap));\n  }\n\n  .e-choice--open {\n    min-height: 0;\n    padding-bottom: var(--e-space-1);\n  }\n\n  .e-choice-reveal {\n    padding: var(--e-space-1) 0 var(--e-space-2);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/RadioGroup/ERadioGroup.vue.d.ts

@@ -12,20 +12,22 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     label: string;
     /** Keep the legend for screen readers and remove it from the page. */
     hideLabel?: boolean;
-    /** Five or fewer. A string is both value and label. */
+    /** Five or fewer. A string is both value and label. `RadioOption`: `{ value, label, description?, disabled? }`. */
     options: (string | RadioOption)[];
     /** Help that is announced with the group. */
     hint?: string;
     /** What to fix. Replaces the hint and is announced with the group. */
     error?: string;
+    /** A word beside the legend, and `required` on the radios. */
     required?: boolean;
     /** A word beside the legend. Flag whichever is rarer. */
     optional?: boolean;
     /** Disables every option. */
     disabled?: boolean;
-    /** The name the radios share, submitted with a form. Generated when left out. */
+    /** Shared by the radios, submitted with a form. @default generated */
     name?: string;
 } & {
+    /** The chosen value. */
     modelValue?: string;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
@@ -34,20 +36,22 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     label: string;
     /** Keep the legend for screen readers and remove it from the page. */
     hideLabel?: boolean;
-    /** Five or fewer. A string is both value and label. */
+    /** Five or fewer. A string is both value and label. `RadioOption`: `{ value, label, description?, disabled? }`. */
     options: (string | RadioOption)[];
     /** Help that is announced with the group. */
     hint?: string;
     /** What to fix. Replaces the hint and is announced with the group. */
     error?: string;
+    /** A word beside the legend, and `required` on the radios. */
     required?: boolean;
     /** A word beside the legend. Flag whichever is rarer. */
     optional?: boolean;
     /** Disables every option. */
     disabled?: boolean;
-    /** The name the radios share, submitted with a form. Generated when left out. */
+    /** Shared by the radios, submitted with a form. @default generated */
     name?: string;
 } & {
+    /** The chosen value. */
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;

package/dist/components/RadioGroup/ERadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 /* empty css                */
 import { useUid as e } from "../../composables/useUid.js";
-import t from "../Fieldset/EFieldset.js";
 /* empty css                 */
+import t from "../Fieldset/EFieldset.js";
 import { Comment as n, Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, renderList as m, toDisplayString as h, unref as g, useModel as _, useSlots as v, withCtx as y } from "vue";
 //#region src/components/RadioGroup/ERadioGroup.vue?vue&type=script&setup=true&lang.ts
 var b = [