@eos-ui/vue 0.5.0 → 0.5.2

package/dist/components/Stepper/EStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStepper.js","names":["_sfc_main","EStepper_vue_vue_type_script_setup_true_lang_default","EStepper_default"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n  /** The name of the step. */\n  label: string;\n  /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n  state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n  /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n  steps: Step[];\n  /** The list's accessible name. @default \"Progress\" */\n  label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n    <li\n      v-for=\"(step, i) in steps\"\n      :key=\"i\"\n      class=\"e-step\"\n      :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n      :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n    >\n      <span class=\"e-step-dot\">\n        <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n        <template v-else>{{ i + 1 }}</template>\n      </span>\n      <span class=\"e-step-label\">\n        {{ step.label }}\n        <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n      </span>\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer e.page {\n  .e-steps {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    counter-reset: s;\n  }\n\n  .e-step {\n    --e-dot: 28px;\n\n    display: grid;\n    justify-items: center;\n    align-content: start;\n    gap: var(--e-space-2);\n    position: relative;\n    text-align: center;\n    min-width: 0;\n  }\n\n  .e-step::before {\n    content: \"\";\n    position: absolute;\n    top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n    z-index: 0;\n  }\n\n  .e-step:first-child::before {\n    display: none;\n  }\n\n  .e-step[data-state=\"done\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step[data-state=\"current\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step-dot {\n    position: relative;\n    z-index: var(--e-z-raised);\n    display: grid;\n    place-items: center;\n    width: var(--e-dot);\n    height: var(--e-dot);\n    border-radius: 50%;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface);\n    color: var(--e-muted);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n  }\n\n  .e-step[data-state=\"done\"] .e-step-dot {\n    outline: 0;\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n  }\n\n  .e-step[data-state=\"current\"] .e-step-dot {\n    outline: 0;\n    box-shadow: inset 0 0 0 var(--e-stroke-focus) var(--e-primary);\n    color: var(--e-primary);\n    background: var(--e-surface);\n  }\n\n  .e-step-label {\n    font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-step[data-state=\"current\"] .e-step-label {\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-step[data-state=\"done\"] .e-step-label {\n    color: var(--e-ink);\n  }\n\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n  @media (max-width: 32rem) {\n    .e-steps {\n      grid-auto-flow: row;\n      gap: var(--e-space-3);\n    }\n\n    .e-step {\n      grid-template-columns: auto 1fr;\n      justify-items: start;\n      align-items: center;\n      text-align: start;\n    }\n\n    .e-step::before {\n      display: block;\n      top: calc(-1 * var(--e-space-3));\n      inset-inline-end: auto;\n      inset-inline-start: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: var(--e-stroke-focus) solid var(--e-border-strong);\n    }\n\n    .e-step:first-child::before {\n      display: none;\n    }\n\n    .e-step[data-state=\"done\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n\n    .e-step[data-state=\"current\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n  }\n\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n  @media (forced-colors: active) {\n    .e-step[data-state=\"done\"] .e-step-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EStepper.js","names":["_sfc_main","EStepper_vue_vue_type_script_setup_true_lang_default","EStepper_default"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n  /** The name of the step. */\n  label: string;\n  /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n  state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n  /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n  steps: Step[];\n  /** The list's accessible name. @default \"Progress\" */\n  label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n    <li\n      v-for=\"(step, i) in steps\"\n      :key=\"i\"\n      class=\"e-step\"\n      :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n      :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n    >\n      <span class=\"e-step-dot\">\n        <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n        <template v-else>{{ i + 1 }}</template>\n      </span>\n      <span class=\"e-step-label\">\n        {{ step.label }}\n        <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n      </span>\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer e.page {\n  .e-steps {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    counter-reset: s;\n  }\n\n  .e-step {\n    --e-dot: 28px;\n\n    display: grid;\n    justify-items: center;\n    align-content: start;\n    gap: var(--e-space-2);\n    position: relative;\n    text-align: center;\n    min-width: 0;\n  }\n\n  .e-step::before {\n    content: \"\";\n    position: absolute;\n    top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n    z-index: 0;\n  }\n\n  .e-step:first-child::before {\n    display: none;\n  }\n\n  .e-step[data-state=\"done\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step[data-state=\"current\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step-dot {\n    position: relative;\n    z-index: var(--e-z-raised);\n    display: grid;\n    place-items: center;\n    width: var(--e-dot);\n    height: var(--e-dot);\n    box-sizing: border-box;\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: 50%;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface);\n    background-clip: padding-box;\n    color: var(--e-muted);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n  }\n\n  .e-step[data-state=\"done\"] .e-step-dot {\n    outline: 0;\n    border-color: var(--e-primary);\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n  }\n\n  .e-step[data-state=\"current\"] .e-step-dot {\n    outline: 0;\n    border: var(--e-stroke-focus) solid var(--e-primary);\n    color: var(--e-primary);\n    background: var(--e-surface);\n    background-clip: padding-box;\n  }\n\n  .e-step-label {\n    font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-step[data-state=\"current\"] .e-step-label {\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-step[data-state=\"done\"] .e-step-label {\n    color: var(--e-ink);\n  }\n\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n  @media (max-width: 32rem) {\n    .e-steps {\n      grid-auto-flow: row;\n      gap: var(--e-space-3);\n    }\n\n    .e-step {\n      grid-template-columns: auto 1fr;\n      justify-items: start;\n      align-items: center;\n      text-align: start;\n    }\n\n    .e-step::before {\n      display: block;\n      top: calc(-1 * var(--e-space-3));\n      inset-inline-end: auto;\n      inset-inline-start: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: var(--e-stroke-focus) solid var(--e-border-strong);\n    }\n\n    .e-step:first-child::before {\n      display: none;\n    }\n\n    .e-step[data-state=\"done\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n\n    .e-step[data-state=\"current\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n  }\n\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n  @media (forced-colors: active) {\n    .e-step[data-state=\"done\"] .e-step-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Stepper/EStepper.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStepper.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_createElementVNode","_createBlock","EIcon","_createTextVNode","_toDisplayString","_createCommentVNode","EIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EStepper_vue_vue_type_script_setup_true_lang_default","t","useMessages","openBlock","createElementBlock","__props","unref","Fragment","renderList","i","step","createElementVNode","createBlock","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n  /** The name of the step. */\n  label: string;\n  /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n  state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n  /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n  steps: Step[];\n  /** The list's accessible name. @default \"Progress\" */\n  label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n    <li\n      v-for=\"(step, i) in steps\"\n      :key=\"i\"\n      class=\"e-step\"\n      :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n      :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n    >\n      <span class=\"e-step-dot\">\n        <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n        <template v-else>{{ i + 1 }}</template>\n      </span>\n      <span class=\"e-step-label\">\n        {{ step.label }}\n        <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n      </span>\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer e.page {\n  .e-steps {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    counter-reset: s;\n  }\n\n  .e-step {\n    --e-dot: 28px;\n\n    display: grid;\n    justify-items: center;\n    align-content: start;\n    gap: var(--e-space-2);\n    position: relative;\n    text-align: center;\n    min-width: 0;\n  }\n\n  .e-step::before {\n    content: \"\";\n    position: absolute;\n    top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n    z-index: 0;\n  }\n\n  .e-step:first-child::before {\n    display: none;\n  }\n\n  .e-step[data-state=\"done\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step[data-state=\"current\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step-dot {\n    position: relative;\n    z-index: var(--e-z-raised);\n    display: grid;\n    place-items: center;\n    width: var(--e-dot);\n    height: var(--e-dot);\n    border-radius: 50%;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface);\n    color: var(--e-muted);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n  }\n\n  .e-step[data-state=\"done\"] .e-step-dot {\n    outline: 0;\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n  }\n\n  .e-step[data-state=\"current\"] .e-step-dot {\n    outline: 0;\n    box-shadow: inset 0 0 0 var(--e-stroke-focus) var(--e-primary);\n    color: var(--e-primary);\n    background: var(--e-surface);\n  }\n\n  .e-step-label {\n    font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-step[data-state=\"current\"] .e-step-label {\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-step[data-state=\"done\"] .e-step-label {\n    color: var(--e-ink);\n  }\n\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n  @media (max-width: 32rem) {\n    .e-steps {\n      grid-auto-flow: row;\n      gap: var(--e-space-3);\n    }\n\n    .e-step {\n      grid-template-columns: auto 1fr;\n      justify-items: start;\n      align-items: center;\n      text-align: start;\n    }\n\n    .e-step::before {\n      display: block;\n      top: calc(-1 * var(--e-space-3));\n      inset-inline-end: auto;\n      inset-inline-start: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: var(--e-stroke-focus) solid var(--e-border-strong);\n    }\n\n    .e-step:first-child::before {\n      display: none;\n    }\n\n    .e-step[data-state=\"done\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n\n    .e-step[data-state=\"current\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n  }\n\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n  @media (forced-colors: active) {\n    .e-step[data-state=\"done\"] .e-step-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAmBA,IAAMkB,IAAIC,EAAY;E,kBAIpBnB,EAAA,GAAAC,EAiBK,MAAA;GAjBD,OAAM;GAAW,cAAYqB,EAAA,SAASpB,EAAAgB,CAAA,CAAC,CAAA,UAAA;E,KACzClB,EAAA,EAAA,GAAAC,EAeKE,GAAA,MAAAC,EAdiBkB,EAAA,QAAZ,GAAM,OADhBtB,EAAA,GAAAC,EAeK,MAAA;GAbF,KAAKyB;GACN,OAAM;GACL,cAAYC,EAAK,UAAK,SAAA,aAA2BA,EAAK;GACtD,gBAAcA,EAAK,UAAK,YAAA,SAA0B,KAAA;E,IAEnDtB,EAGO,QAHPS,GAGO,CAFQa,EAAK,UAAK,UAAvB3B,EAAA,GAAAM,EAAyDC,GAAA;;GAArB,MAAK;GAAQ,OAAA;E,OACjDP,EAAA,GAAAC,EAAuCE,GAAA,EAAA,KAAA,EAAA,GAAA,CAAnBK,EAAAC,EAAAiB,IAAC,CAAA,GAAA,CAAA,C,WAEvBrB,EAGO,QAHPU,GAGO,CAFFP,EAAAC,EAAAkB,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,UAAK,UAAtB3B,EAAA,GAAAC,EAAyE,QAAzEe,GAAgD,OAAEP,EAAGP,EAAAgB,CAAA,CAAC,CAAA,MAAA,CAAA,IAAW,KAAC,CAAA,K"}
+{"version":3,"file":"EStepper.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_createElementVNode","_createBlock","EIcon","_createTextVNode","_toDisplayString","_createCommentVNode","EIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EStepper_vue_vue_type_script_setup_true_lang_default","t","useMessages","openBlock","createElementBlock","__props","unref","Fragment","renderList","i","step","createElementVNode","createBlock","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n  /** The name of the step. */\n  label: string;\n  /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n  state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n  /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n  steps: Step[];\n  /** The list's accessible name. @default \"Progress\" */\n  label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n    <li\n      v-for=\"(step, i) in steps\"\n      :key=\"i\"\n      class=\"e-step\"\n      :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n      :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n    >\n      <span class=\"e-step-dot\">\n        <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n        <template v-else>{{ i + 1 }}</template>\n      </span>\n      <span class=\"e-step-label\">\n        {{ step.label }}\n        <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n      </span>\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer e.page {\n  .e-steps {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    counter-reset: s;\n  }\n\n  .e-step {\n    --e-dot: 28px;\n\n    display: grid;\n    justify-items: center;\n    align-content: start;\n    gap: var(--e-space-2);\n    position: relative;\n    text-align: center;\n    min-width: 0;\n  }\n\n  .e-step::before {\n    content: \"\";\n    position: absolute;\n    top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n    z-index: 0;\n  }\n\n  .e-step:first-child::before {\n    display: none;\n  }\n\n  .e-step[data-state=\"done\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step[data-state=\"current\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step-dot {\n    position: relative;\n    z-index: var(--e-z-raised);\n    display: grid;\n    place-items: center;\n    width: var(--e-dot);\n    height: var(--e-dot);\n    box-sizing: border-box;\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: 50%;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface);\n    background-clip: padding-box;\n    color: var(--e-muted);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n  }\n\n  .e-step[data-state=\"done\"] .e-step-dot {\n    outline: 0;\n    border-color: var(--e-primary);\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n  }\n\n  .e-step[data-state=\"current\"] .e-step-dot {\n    outline: 0;\n    border: var(--e-stroke-focus) solid var(--e-primary);\n    color: var(--e-primary);\n    background: var(--e-surface);\n    background-clip: padding-box;\n  }\n\n  .e-step-label {\n    font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-step[data-state=\"current\"] .e-step-label {\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-step[data-state=\"done\"] .e-step-label {\n    color: var(--e-ink);\n  }\n\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n  @media (max-width: 32rem) {\n    .e-steps {\n      grid-auto-flow: row;\n      gap: var(--e-space-3);\n    }\n\n    .e-step {\n      grid-template-columns: auto 1fr;\n      justify-items: start;\n      align-items: center;\n      text-align: start;\n    }\n\n    .e-step::before {\n      display: block;\n      top: calc(-1 * var(--e-space-3));\n      inset-inline-end: auto;\n      inset-inline-start: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: var(--e-stroke-focus) solid var(--e-border-strong);\n    }\n\n    .e-step:first-child::before {\n      display: none;\n    }\n\n    .e-step[data-state=\"done\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n\n    .e-step[data-state=\"current\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n  }\n\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n  @media (forced-colors: active) {\n    .e-step[data-state=\"done\"] .e-step-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAmBA,IAAMkB,IAAIC,EAAY;E,kBAIpBnB,EAAA,GAAAC,EAiBK,MAAA;GAjBD,OAAM;GAAW,cAAYqB,EAAA,SAASpB,EAAAgB,CAAA,CAAC,CAAA,UAAA;E,KACzClB,EAAA,EAAA,GAAAC,EAeKE,GAAA,MAAAC,EAdiBkB,EAAA,QAAZ,GAAM,OADhBtB,EAAA,GAAAC,EAeK,MAAA;GAbF,KAAKyB;GACN,OAAM;GACL,cAAYC,EAAK,UAAK,SAAA,aAA2BA,EAAK;GACtD,gBAAcA,EAAK,UAAK,YAAA,SAA0B,KAAA;E,IAEnDtB,EAGO,QAHPS,GAGO,CAFQa,EAAK,UAAK,UAAvB3B,EAAA,GAAAM,EAAyDC,GAAA;;GAArB,MAAK;GAAQ,OAAA;E,OACjDP,EAAA,GAAAC,EAAuCE,GAAA,EAAA,KAAA,EAAA,GAAA,CAAnBK,EAAAC,EAAAiB,IAAC,CAAA,GAAA,CAAA,C,WAEvBrB,EAGO,QAHPU,GAGO,CAFFP,EAAAC,EAAAkB,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,UAAK,UAAtB3B,EAAA,GAAAC,EAAyE,QAAzEe,GAAgD,OAAEP,EAAGP,EAAAgB,CAAA,CAAC,CAAA,MAAA,CAAA,IAAW,KAAC,CAAA,K"}

package/dist/components/Switch/ESwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESwitch.js","names":["_sfc_main","ESwitch_vue_vue_type_script_setup_true_lang_default","ESwitch_default"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: var(--e-space-1);\n    --e-thumb-travel: calc(var(--e-switch-w) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n    --e-ring: var(--e-border-strong);\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    --e-ring: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    --e-ring: var(--e-primary);\n\n    background: var(--e-primary);\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    box-shadow: none;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESwitch.js","names":["_sfc_main","ESwitch_vue_vue_type_script_setup_true_lang_default","ESwitch_default"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: var(--e-space-1);\n    --e-thumb-travel: calc(var(--e-switch-w) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n    --e-ring: var(--e-border-strong);\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    box-sizing: border-box;\n    border: var(--e-stroke-edge) solid var(--e-ring);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    background-clip: padding-box;\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-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: calc(var(--e-thumb-inset) - var(--e-stroke-edge));\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    --e-ring: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    --e-ring: var(--e-primary);\n\n    background-color: var(--e-primary);\n    background-clip: border-box;\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-color: transparent;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background-color: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Switch/ESwitch.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESwitch.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESwitch_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","id","useUid","input","ref","attrs","useFieldAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","_cache","$event","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: var(--e-space-1);\n    --e-thumb-travel: calc(var(--e-switch-w) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n    --e-ring: var(--e-border-strong);\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    --e-ring: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    --e-ring: var(--e-primary);\n\n    background: var(--e-primary);\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    box-shadow: none;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMmB,IAAQC,GAgBRC,IAAQrB,EAAoBoB,GAAA,YAAmB,GAE/CG,IAAKC,QAAaL,EAAM,EAAE,GAC1BM,IAAQC,EAA6B,IAAI,GACzCC,IAAQC,EAAc;E,OAE5BV,EAAa;GACX;GACA,aAAaO,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICxB,EAAA,GAAAC,EAwBQ,SAAA;GAvBN,OAAKC,EAAA,CAAC,qBAAmB,CAAA,EAAA,sBACQiB,EAAA,SAAQ,GAAIhB,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK,CAAA,CAAA;GACjE,OAAKtB,EAAED,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;GAC5B,KAAKvB,EAAAmB,CAAA;;GAENjB,EAYE,SAZFC,EAYE;IAXC,IAAIH,EAAAmB,CAAA;IACD,SAAA;IAAJ,KAAIE;IACJ,MAAK;IACL,MAAK;IACL,OAAM;IACL,MAAML,EAAA;IACN,OAAOA,EAAA;IACP,SAASC,EAAA;IACT,UAAUD,EAAA;GACH,GAAAhB,EAAAuB,CAAA,CAAK,CAAC,MAAK,GAAA,EAClB,UAAM,AAAAS,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA4B,Q;GAEvD,AAAAD,EAAA,OAAA9B,EAAkD,QAAA;IAA5C,OAAM;IAAiB,eAAY;;GACzCA,EAGO,QAHPO,GAGO,CAFFL,EAAAC,EAAAW,EAAA,KAAK,IAAG,KACX,CAAA,GAAYA,EAAA,eAAZnB,EAAA,GAAAC,EAAuE,QAAvEY,GAAuEL,EAArBW,EAAA,WAAW,GAAA,CAAA,K"}
+{"version":3,"file":"ESwitch.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESwitch_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","id","useUid","input","ref","attrs","useFieldAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","_cache","$event","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: var(--e-space-1);\n    --e-thumb-travel: calc(var(--e-switch-w) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n    --e-ring: var(--e-border-strong);\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    box-sizing: border-box;\n    border: var(--e-stroke-edge) solid var(--e-ring);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    background-clip: padding-box;\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-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: calc(var(--e-thumb-inset) - var(--e-stroke-edge));\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    --e-ring: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    --e-ring: var(--e-primary);\n\n    background-color: var(--e-primary);\n    background-clip: border-box;\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-color: transparent;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background-color: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMmB,IAAQC,GAgBRC,IAAQrB,EAAoBoB,GAAA,YAAmB,GAE/CG,IAAKC,QAAaL,EAAM,EAAE,GAC1BM,IAAQC,EAA6B,IAAI,GACzCC,IAAQC,EAAc;E,OAE5BV,EAAa;GACX;GACA,aAAaO,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICxB,EAAA,GAAAC,EAwBQ,SAAA;GAvBN,OAAKC,EAAA,CAAC,qBAAmB,CAAA,EAAA,sBACQiB,EAAA,SAAQ,GAAIhB,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK,CAAA,CAAA;GACjE,OAAKtB,EAAED,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;GAC5B,KAAKvB,EAAAmB,CAAA;;GAENjB,EAYE,SAZFC,EAYE;IAXC,IAAIH,EAAAmB,CAAA;IACD,SAAA;IAAJ,KAAIE;IACJ,MAAK;IACL,MAAK;IACL,OAAM;IACL,MAAML,EAAA;IACN,OAAOA,EAAA;IACP,SAASC,EAAA;IACT,UAAUD,EAAA;GACH,GAAAhB,EAAAuB,CAAA,CAAK,CAAC,MAAK,GAAA,EAClB,UAAM,AAAAS,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA4B,Q;GAEvD,AAAAD,EAAA,OAAA9B,EAAkD,QAAA;IAA5C,OAAM;IAAiB,eAAY;;GACzCA,EAGO,QAHPO,GAGO,CAFFL,EAAAC,EAAAW,EAAA,KAAK,IAAG,KACX,CAAA,GAAYA,EAAA,eAAZnB,EAAA,GAAAC,EAAuE,QAAvEY,GAAuEL,EAArBW,EAAA,WAAW,GAAA,CAAA,K"}

package/dist/components/Tabs/ETabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETabs.js","names":["_sfc_main","ETabs_vue_vue_type_script_setup_true_lang_default","ETabs_default"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five across, with short labels; a vertical list can be longer. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\n  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n  /** `vertical` stacks the tabs in a column beside their panel, for a long list of sections. Use it when there are more tabs than fit across; `fill` has no effect. @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Joins the tabs to their panel so the two read as one card: the panel is outlined, the row of tabs sits on its edge like folder tabs, and the chosen tab opens into the panel with no line between. The edge stays open where there are no tabs. @default false */\n  framed?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: TabItem }) => unknown) | undefined;\n  /** The panel of any tab that has no slot of its own. */\n  panel?(props: { item: TabItem }): unknown;\n}>();\n\nconst flat = computed(() => props.items ?? []);\n\n/** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */\nconst model = defineModel<string>();\n\nconst config = useConfig();\nconst current = computed(() => model.value ?? flat.value[0]?.id);\nconst dir = computed<\"ltr\" | \"rtl\">(\n  () => config.dir ?? (typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\" ? \"rtl\" : \"ltr\"),\n);\n\nconst list = ref<{ $el: HTMLElement } | null>(null);\n\nasync function reveal(smooth: boolean) {\n  await nextTick();\n  const el = list.value?.$el;\n  const tab = el?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n  if (props.orientation === \"vertical\" || !el || !tab || el.scrollWidth <= el.clientWidth) return;\n  const calm = typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const a = tab.getBoundingClientRect();\n  const b = el.getBoundingClientRect();\n  el.scrollBy({ left: a.left + a.width / 2 - (b.left + b.width / 2), behavior: smooth && !calm ? \"smooth\" : \"auto\" });\n}\n\nonMounted(() => reveal(false));\nwatch(current, () => reveal(true));\n</script>\n\n<template>\n  <TabsRoot\n    class=\"e-tabs\"\n    :class=\"{ 'e-tabs--fill': fill, 'e-tabs--vertical': orientation === 'vertical', 'e-tabs--framed': framed }\"\n    :orientation=\"orientation ?? 'horizontal'\"\n    :model-value=\"current\"\n    :dir=\"dir\"\n    @update:model-value=\"model = String($event)\"\n  >\n    <TabsList ref=\"list\" class=\"e-tablist\">\n      <TabsTrigger v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tab\">\n        {{ item.label }}\n        <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tabpanel\">\n      <slot :name=\"item.id\" :item=\"item\"><slot name=\"panel\" :item=\"item\" /></slot>\n    </TabsContent>\n  </TabsRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tablist {\n    display: flex;\n    flex: none;\n    gap: 0;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- the two axes are set apart */\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab along its bottom. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\n\n    /* A selected tab rises: the slab is a band the tab paints along one edge itself, so there is no second shape behind the corners. Every tab is one control height tall either way. */\n    --e-lift: 0px;\n    --e-band: calc(var(--e-lift) + var(--e-stroke-edge));\n    --e-slab: var(--e-primary);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    flex: none;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-4) var(--e-lift);\n    border: 0;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-bc);\n    color: var(--e-muted);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition:\n      color var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  /* Only the outer ends of the row are rounded. */\n  .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tab + .e-tab {\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tab:hover {\n    --e-bc: var(--e-ink);\n\n    z-index: var(--e-z-raised);\n    color: var(--e-ink);\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    z-index: var(--e-z-sticky);\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset 0 calc(-1 * var(--e-band)) 0 0 var(--e-slab);\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  /* The slab answers the pointer too: it darkens under the cursor, in step with the face. */\n  .e-tab[aria-selected=\"true\"]:hover {\n    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n  }\n\n  .e-tab:focus-visible {\n    z-index: var(--e-z-focus);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-tabs--fill .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: var(--e-space-1);\n  }\n\n  /* Vertical: the tabs stack beside the panel, flush and sharing edges. The selected tab rises towards the panel, so its slab is a band down the inline-start side, away from the panel, instead of along the bottom, and only the top and bottom ends of the column are rounded. */\n  .e-tabs--vertical {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-4);\n  }\n\n  .e-tabs--vertical .e-tablist {\n    flex-direction: column;\n    flex: none;\n    overflow: visible;\n  }\n\n  .e-tabs--vertical .e-tab {\n    --e-lift: 0px;\n\n    height: var(--e-control-height);\n    padding-block-end: 0;\n    justify-content: flex-start;\n    border-radius: 0;\n  }\n\n  .e-tabs--vertical .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical .e-tab:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical .e-tab + .e-tab {\n    margin-inline-start: 0;\n    margin-block-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    --e-lift: var(--e-depth);\n\n    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset var(--e-band) 0 0 0 var(--e-slab);\n  }\n\n  .e-tabs--vertical .e-tabpanel {\n    flex: 1 1 0;\n    min-width: 0;\n    padding-top: 0;\n  }\n\n  :dir(rtl) .e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);\n  }\n\n  /* Framed: tabs and panel are one outlined card. The tab row sits over the panel's edge by one stroke, so a tab's lower edge and the panel's upper edge are the same line; the chosen tab has no edge on that side and its fill covers the panel's, opening into it. Tabs sit flush with their neighbours, square where they meet; only the card's outer corner at the first tab is rounded, and the panel's own corner beside it is square. The row always leaves a corner's width of open edge past the last tab, so the panel's curve never lands against a tab's straight edge. */\n  .e-tabs--framed .e-tablist {\n    position: relative;\n    z-index: var(--e-z-raised);\n    margin-block-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed .e-tab {\n    --e-bc: var(--e-border-strong);\n    --e-lift: 0px;\n\n    border-radius: 0;\n    background-color: var(--e-surface-tint);\n  }\n\n  .e-tabs--framed .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--fill .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs:not(.e-tabs--fill, .e-tabs--vertical).e-tabs--framed .e-tablist {\n    padding-inline-end: var(--e-radius-md);\n  }\n\n  .e-tabs--framed .e-tab:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  /* The chosen tab rises like a button does, with its primary slab as a band on the edge away from the panel, and its open sides outlined in the primary colour. */\n  .e-tabs--framed .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    padding-block: var(--e-lift) 0;\n    background-color: var(--e-surface);\n    box-shadow:\n      inset var(--e-stroke-edge) 0 0 0 var(--e-bc),\n      inset calc(-1 * var(--e-stroke-edge)) 0 0 0 var(--e-bc),\n      inset 0 var(--e-band) 0 0 var(--e-slab);\n  }\n\n  .e-tabs--framed .e-tabpanel {\n    padding: var(--e-space-4);\n    border-radius: var(--e-radius-md);\n    border-start-start-radius: 0;\n    background: var(--e-surface);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);\n  }\n\n  .e-tabs--framed.e-tabs--fill .e-tabpanel {\n    border-start-end-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical {\n    gap: 0;\n    align-items: stretch;\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tablist {\n    align-self: flex-start;\n    margin-block-end: var(--e-radius-md);\n    margin-inline-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab {\n    border-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    margin-block: calc(-1 * var(--e-stroke-edge)) 0;\n    padding-block: 0;\n    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));\n    box-shadow:\n      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),\n      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),\n      inset var(--e-band) 0 0 0 var(--e-slab);\n  }\n\n  :dir(rtl) .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    box-shadow:\n      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),\n      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),\n      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected=\"true\"]:first-child {\n    margin-block-start: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tabpanel {\n    padding: var(--e-space-4);\n  }\n\n  .e-tab-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    color: var(--e-ink);\n  }\n\n  .e-tabpanel {\n    padding-top: var(--e-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-tab {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-tab[aria-selected=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ETabs.js","names":["_sfc_main","ETabs_vue_vue_type_script_setup_true_lang_default","ETabs_default"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five across, with short labels; a vertical list can be longer. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\n  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n  /** `vertical` stacks the tabs in a column beside their panel, for a long list of sections. Use it when there are more tabs than fit across; `fill` has no effect. @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Joins the tabs to their panel so the two read as one card: the panel is outlined, the row of tabs sits on its edge like folder tabs, and the chosen tab opens into the panel with no line between. The edge stays open where there are no tabs. @default false */\n  framed?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: TabItem }) => unknown) | undefined;\n  /** The panel of any tab that has no slot of its own. */\n  panel?(props: { item: TabItem }): unknown;\n}>();\n\nconst flat = computed(() => props.items ?? []);\n\n/** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */\nconst model = defineModel<string>();\n\nconst config = useConfig();\nconst current = computed(() => model.value ?? flat.value[0]?.id);\nconst dir = computed<\"ltr\" | \"rtl\">(\n  () => config.dir ?? (typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\" ? \"rtl\" : \"ltr\"),\n);\n\nconst list = ref<{ $el: HTMLElement } | null>(null);\n\nasync function reveal(smooth: boolean) {\n  await nextTick();\n  const el = list.value?.$el;\n  const tab = el?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n  if (props.orientation === \"vertical\" || !el || !tab || el.scrollWidth <= el.clientWidth) return;\n  const calm = typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const a = tab.getBoundingClientRect();\n  const b = el.getBoundingClientRect();\n  el.scrollBy({ left: a.left + a.width / 2 - (b.left + b.width / 2), behavior: smooth && !calm ? \"smooth\" : \"auto\" });\n}\n\nonMounted(() => reveal(false));\nwatch(current, () => reveal(true));\n</script>\n\n<template>\n  <TabsRoot\n    class=\"e-tabs\"\n    :class=\"{ 'e-tabs--fill': fill, 'e-tabs--vertical': orientation === 'vertical', 'e-tabs--framed': framed }\"\n    :orientation=\"orientation ?? 'horizontal'\"\n    :model-value=\"current\"\n    :dir=\"dir\"\n    @update:model-value=\"model = String($event)\"\n  >\n    <TabsList ref=\"list\" class=\"e-tablist\">\n      <TabsTrigger v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tab\">\n        {{ item.label }}\n        <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tabpanel\">\n      <slot :name=\"item.id\" :item=\"item\"><slot name=\"panel\" :item=\"item\" /></slot>\n    </TabsContent>\n  </TabsRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tablist {\n    display: flex;\n    flex: none;\n    gap: 0;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- the two axes are set apart */\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab along its bottom. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\n\n    /* A selected tab rises: the slab is a band the tab paints along one edge itself, so there is no second shape behind the corners. Every tab is one control height tall either way. */\n    --e-lift: 0px;\n    --e-slab: var(--e-primary);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    flex: none;\n    height: var(--e-control-height);\n    padding: 0 calc(var(--e-space-4) - var(--e-stroke-edge));\n    border: var(--e-stroke-edge) solid var(--e-bc);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-lift));\n    border-radius: 0;\n    background: transparent;\n    background-clip: padding-box;\n    color: var(--e-muted);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition:\n      color var(--e-duration-tap) var(--e-easing-out),\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  /* Only the outer ends of the row are rounded. */\n  .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tab + .e-tab {\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tab:hover {\n    --e-bc: var(--e-ink);\n\n    z-index: var(--e-z-raised);\n    color: var(--e-ink);\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    z-index: var(--e-z-sticky);\n    border-bottom-color: var(--e-slab);\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  /* The slab answers the pointer too: it darkens under the cursor, in step with the face. */\n  .e-tab[aria-selected=\"true\"]:hover {\n    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n  }\n\n  .e-tab:focus-visible {\n    z-index: var(--e-z-focus);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-tabs--fill > .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill > .e-tablist > .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: max(0px, calc(var(--e-space-1) - var(--e-stroke-edge)));\n  }\n\n  /* Vertical: the tabs stack beside the panel, flush and sharing edges. The selected tab rises towards the panel, so its slab is a band down the inline-start side, away from the panel, instead of along the bottom, and only the top and bottom ends of the column are rounded. */\n  .e-tabs--vertical {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-4);\n  }\n\n  .e-tabs--vertical > .e-tablist {\n    flex-direction: column;\n    flex: none;\n    overflow: visible;\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab {\n    --e-lift: 0px;\n\n    height: var(--e-control-height);\n    justify-content: flex-start;\n    border-radius: 0;\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab + .e-tab {\n    margin-inline-start: 0;\n    margin-block-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    --e-lift: var(--e-depth);\n\n    border-bottom-width: var(--e-stroke-edge);\n    border-bottom-color: var(--e-bc);\n    border-inline-start-width: calc(var(--e-stroke-edge) + var(--e-lift));\n    border-inline-start-color: var(--e-slab);\n  }\n\n  .e-tabs--vertical > .e-tabpanel {\n    flex: 1 1 0;\n    min-width: 0;\n    padding-top: 0;\n  }\n\n  /* Framed: tabs and panel are one outlined card. The tab row sits over the panel's edge by one stroke, so a tab's lower edge and the panel's upper edge are the same line; the chosen tab has no edge on that side and its fill covers the panel's, opening into it. Tabs sit flush with their neighbours, square where they meet; only the card's outer corner at the first tab is rounded, and the panel's own corner beside it is square. The row always leaves a corner's width of open edge past the last tab, so the panel's curve never lands against a tab's straight edge. */\n  .e-tabs--framed > .e-tablist {\n    position: relative;\n    z-index: var(--e-z-raised);\n    margin-block-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed > .e-tablist > .e-tab {\n    --e-bc: var(--e-border-strong);\n    --e-lift: 0px;\n\n    border-radius: 0;\n    background-color: var(--e-surface-tint);\n  }\n\n  .e-tabs--framed > .e-tablist > .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--fill > .e-tablist > .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs:not(.e-tabs--fill, .e-tabs--vertical).e-tabs--framed > .e-tablist {\n    padding-inline-end: var(--e-radius-md);\n  }\n\n  .e-tabs--framed > .e-tablist > .e-tab:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  /* The chosen tab rises like a button does, with its primary slab as a band on the edge away from the panel, and its open sides outlined in the primary colour. */\n  .e-tabs--framed > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    padding-block-end: var(--e-stroke-edge);\n    border-bottom-width: 0;\n    border-top-width: calc(var(--e-stroke-edge) + var(--e-lift));\n    border-top-color: var(--e-slab);\n    background-color: var(--e-surface);\n  }\n\n  .e-tabs--framed > .e-tabpanel {\n    padding: calc(var(--e-space-4) - var(--e-stroke-edge));\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    border-start-start-radius: 0;\n    background: var(--e-surface);\n    background-clip: padding-box;\n  }\n\n  .e-tabs--framed.e-tabs--fill > .e-tabpanel {\n    border-start-end-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical {\n    gap: 0;\n    align-items: stretch;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist {\n    align-self: flex-start;\n    margin-block-end: var(--e-radius-md);\n    margin-inline-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab {\n    border-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    margin-block: calc(-1 * var(--e-stroke-edge)) 0;\n    padding-block: 0;\n    border-block-start-width: var(--e-stroke-edge);\n    border-block-start-color: var(--e-bc);\n    border-block-end-width: var(--e-stroke-edge);\n    border-block-end-color: var(--e-bc);\n    border-inline-start-width: calc(var(--e-stroke-edge) + var(--e-lift));\n    border-inline-start-color: var(--e-slab);\n    border-inline-end-width: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"]:first-child {\n    margin-block-start: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tabpanel {\n    padding: calc(var(--e-space-4) - var(--e-stroke-edge));\n  }\n\n  .e-tab-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    color: var(--e-ink);\n  }\n\n  .e-tabpanel {\n    padding-top: var(--e-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-tab {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-tab[aria-selected=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Tabs/ETabs.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETabs.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createVNode","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","_renderSlot","_hoisted_1","ETabs_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","flat","computed","model","useModel","config","useConfig","current","dir","list","ref","reveal","nextTick","el","tab","calm","a","b","smooth","onMounted","watch","openBlock","createBlock","unref","TabsRoot","normalizeClass","_cache","$event","withCtx","createVNode","TabsList","createElementBlock","Fragment","renderList","TabsTrigger","item","createTextVNode","toDisplayString","createCommentVNode","TabsContent","renderSlot","_ctx"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five across, with short labels; a vertical list can be longer. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\n  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n  /** `vertical` stacks the tabs in a column beside their panel, for a long list of sections. Use it when there are more tabs than fit across; `fill` has no effect. @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Joins the tabs to their panel so the two read as one card: the panel is outlined, the row of tabs sits on its edge like folder tabs, and the chosen tab opens into the panel with no line between. The edge stays open where there are no tabs. @default false */\n  framed?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: TabItem }) => unknown) | undefined;\n  /** The panel of any tab that has no slot of its own. */\n  panel?(props: { item: TabItem }): unknown;\n}>();\n\nconst flat = computed(() => props.items ?? []);\n\n/** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */\nconst model = defineModel<string>();\n\nconst config = useConfig();\nconst current = computed(() => model.value ?? flat.value[0]?.id);\nconst dir = computed<\"ltr\" | \"rtl\">(\n  () => config.dir ?? (typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\" ? \"rtl\" : \"ltr\"),\n);\n\nconst list = ref<{ $el: HTMLElement } | null>(null);\n\nasync function reveal(smooth: boolean) {\n  await nextTick();\n  const el = list.value?.$el;\n  const tab = el?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n  if (props.orientation === \"vertical\" || !el || !tab || el.scrollWidth <= el.clientWidth) return;\n  const calm = typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const a = tab.getBoundingClientRect();\n  const b = el.getBoundingClientRect();\n  el.scrollBy({ left: a.left + a.width / 2 - (b.left + b.width / 2), behavior: smooth && !calm ? \"smooth\" : \"auto\" });\n}\n\nonMounted(() => reveal(false));\nwatch(current, () => reveal(true));\n</script>\n\n<template>\n  <TabsRoot\n    class=\"e-tabs\"\n    :class=\"{ 'e-tabs--fill': fill, 'e-tabs--vertical': orientation === 'vertical', 'e-tabs--framed': framed }\"\n    :orientation=\"orientation ?? 'horizontal'\"\n    :model-value=\"current\"\n    :dir=\"dir\"\n    @update:model-value=\"model = String($event)\"\n  >\n    <TabsList ref=\"list\" class=\"e-tablist\">\n      <TabsTrigger v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tab\">\n        {{ item.label }}\n        <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tabpanel\">\n      <slot :name=\"item.id\" :item=\"item\"><slot name=\"panel\" :item=\"item\" /></slot>\n    </TabsContent>\n  </TabsRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tablist {\n    display: flex;\n    flex: none;\n    gap: 0;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- the two axes are set apart */\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab along its bottom. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\n\n    /* A selected tab rises: the slab is a band the tab paints along one edge itself, so there is no second shape behind the corners. Every tab is one control height tall either way. */\n    --e-lift: 0px;\n    --e-band: calc(var(--e-lift) + var(--e-stroke-edge));\n    --e-slab: var(--e-primary);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    flex: none;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-4) var(--e-lift);\n    border: 0;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-bc);\n    color: var(--e-muted);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition:\n      color var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  /* Only the outer ends of the row are rounded. */\n  .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tab + .e-tab {\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tab:hover {\n    --e-bc: var(--e-ink);\n\n    z-index: var(--e-z-raised);\n    color: var(--e-ink);\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    z-index: var(--e-z-sticky);\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset 0 calc(-1 * var(--e-band)) 0 0 var(--e-slab);\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  /* The slab answers the pointer too: it darkens under the cursor, in step with the face. */\n  .e-tab[aria-selected=\"true\"]:hover {\n    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n  }\n\n  .e-tab:focus-visible {\n    z-index: var(--e-z-focus);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-tabs--fill .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: var(--e-space-1);\n  }\n\n  /* Vertical: the tabs stack beside the panel, flush and sharing edges. The selected tab rises towards the panel, so its slab is a band down the inline-start side, away from the panel, instead of along the bottom, and only the top and bottom ends of the column are rounded. */\n  .e-tabs--vertical {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-4);\n  }\n\n  .e-tabs--vertical .e-tablist {\n    flex-direction: column;\n    flex: none;\n    overflow: visible;\n  }\n\n  .e-tabs--vertical .e-tab {\n    --e-lift: 0px;\n\n    height: var(--e-control-height);\n    padding-block-end: 0;\n    justify-content: flex-start;\n    border-radius: 0;\n  }\n\n  .e-tabs--vertical .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical .e-tab:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical .e-tab + .e-tab {\n    margin-inline-start: 0;\n    margin-block-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    --e-lift: var(--e-depth);\n\n    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset var(--e-band) 0 0 0 var(--e-slab);\n  }\n\n  .e-tabs--vertical .e-tabpanel {\n    flex: 1 1 0;\n    min-width: 0;\n    padding-top: 0;\n  }\n\n  :dir(rtl) .e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);\n  }\n\n  /* Framed: tabs and panel are one outlined card. The tab row sits over the panel's edge by one stroke, so a tab's lower edge and the panel's upper edge are the same line; the chosen tab has no edge on that side and its fill covers the panel's, opening into it. Tabs sit flush with their neighbours, square where they meet; only the card's outer corner at the first tab is rounded, and the panel's own corner beside it is square. The row always leaves a corner's width of open edge past the last tab, so the panel's curve never lands against a tab's straight edge. */\n  .e-tabs--framed .e-tablist {\n    position: relative;\n    z-index: var(--e-z-raised);\n    margin-block-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed .e-tab {\n    --e-bc: var(--e-border-strong);\n    --e-lift: 0px;\n\n    border-radius: 0;\n    background-color: var(--e-surface-tint);\n  }\n\n  .e-tabs--framed .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--fill .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs:not(.e-tabs--fill, .e-tabs--vertical).e-tabs--framed .e-tablist {\n    padding-inline-end: var(--e-radius-md);\n  }\n\n  .e-tabs--framed .e-tab:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  /* The chosen tab rises like a button does, with its primary slab as a band on the edge away from the panel, and its open sides outlined in the primary colour. */\n  .e-tabs--framed .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    padding-block: var(--e-lift) 0;\n    background-color: var(--e-surface);\n    box-shadow:\n      inset var(--e-stroke-edge) 0 0 0 var(--e-bc),\n      inset calc(-1 * var(--e-stroke-edge)) 0 0 0 var(--e-bc),\n      inset 0 var(--e-band) 0 0 var(--e-slab);\n  }\n\n  .e-tabs--framed .e-tabpanel {\n    padding: var(--e-space-4);\n    border-radius: var(--e-radius-md);\n    border-start-start-radius: 0;\n    background: var(--e-surface);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);\n  }\n\n  .e-tabs--framed.e-tabs--fill .e-tabpanel {\n    border-start-end-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical {\n    gap: 0;\n    align-items: stretch;\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tablist {\n    align-self: flex-start;\n    margin-block-end: var(--e-radius-md);\n    margin-inline-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab {\n    border-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    margin-block: calc(-1 * var(--e-stroke-edge)) 0;\n    padding-block: 0;\n    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));\n    box-shadow:\n      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),\n      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),\n      inset var(--e-band) 0 0 0 var(--e-slab);\n  }\n\n  :dir(rtl) .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected=\"true\"] {\n    box-shadow:\n      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),\n      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),\n      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected=\"true\"]:first-child {\n    margin-block-start: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical .e-tabpanel {\n    padding: var(--e-space-4);\n  }\n\n  .e-tab-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    color: var(--e-ink);\n  }\n\n  .e-tabpanel {\n    padding-top: var(--e-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-tab {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-tab[aria-selected=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAiBA,IAAMkB,IAAQC,GAiBRC,IAAOC,QAAeH,EAAM,SAAS,CAAC,CAAC,GAGvCI,IAAQtB,EAAmBmB,GAAA,YAAC,GAE5BK,IAASC,EAAU,GACnBC,IAAUL,QAAeC,EAAM,SAASF,EAAK,MAAM,EAAE,EAAE,EAAE,GACzDO,IAAMN,QACJG,EAAO,QAAQ,OAAO,WAAa,OAAe,SAAS,gBAAgB,QAAQ,QAAQ,QAAQ,MAC3G,GAEMI,IAAOC,EAAiC,IAAI;EAElD,eAAeC,EAAO,GAAiB;GACrC,MAAMC,EAAS;GACf,IAAMC,IAAKJ,EAAK,OAAO,KACjBK,IAAMD,GAAI,cAA2B,0BAAwB;GACnE,IAAId,EAAM,gBAAgB,cAAc,CAACc,KAAM,CAACC,KAAOD,EAAG,eAAeA,EAAG,aAAa;GACzF,IAAME,IAAO,OAAO,aAAe,OAAe,WAAW,kCAAkC,CAAC,CAAC,SAC3FC,IAAIF,EAAI,sBAAsB,GAC9BG,IAAIJ,EAAG,sBAAsB;GACnC,EAAG,SAAS;IAAE,MAAMG,EAAE,OAAOA,EAAE,QAAQ,KAAKC,EAAE,OAAOA,EAAE,QAAQ;IAAI,UAAUC,KAAU,CAACH,IAAO,WAAW;GAAO,CAAC;EACpH;E,OAEAI,QAAgBR,EAAO,EAAK,CAAC,GAC7BS,EAAMb,SAAeI,EAAO,EAAI,CAAC,I,UAI/B7B,EAAA,GAAAC,EAiBWC,EAAAwC,CAAA,GAAA;GAhBT,OAAKvC,EAAA,CAAC,UAAQ;IAAA,gBACYe,EAAA;IAAI,oBAAsBA,EAAA,gBAAW;IAAA,kBAAmCA,EAAA;GAAM,CAAA,CAAA;GACvG,aAAaA,EAAA,eAAW;GACxB,eAAaO,EAAA;GACb,KAAKC,EAAA;GACL,uBAAkB,AAAAkB,EAAA,QAAA,MAAE,EAAA,QAAQ,OAAOC,CAAM;;GAE1C,SAAAzC,QAKW,CALXC,EAKWH,EAAA8C,CAAA,GAAA;IALG,SAAA;IAAJ,KAAIrB;IAAO,OAAM;;IACZ,SAAAvB,QAAoB,EAAjCJ,EAAA,EAAA,GAAAM,EAGcC,GAAA,MAAAC,EAHcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAGcC,EAAAkD,CAAA,GAAA;KAHqB,KAAKC,EAAK;KAAK,OAAOA,EAAK;KAAI,OAAM;;KACtE,SAAAjD,QAAgB,CAAbK,EAAAC,EAAA2C,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,SAAK,O,aAAtBrD,EAAA,GAAAM,EAA2E,QAA3EO,GAA2EH,EAApB2C,EAAK,KAAK,GAAA,CAAA,E;;;;G,UAGrErD,EAAA,EAAA,GAAAM,EAEcC,GAAA,MAAAC,EAFcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAEcC,EAAAuD,CAAA,GAAA;IAFqB,KAAKJ,EAAK;IAAK,OAAOA,EAAK;IAAI,OAAM;;IACtE,SAAAjD,QAA4E,CAA5EQ,EAA4E+C,EAAA,QAA/DN,EAAK,IAAE,EAAS,QAAI,SAA2C,CAAzCzC,EAAkC+C,EAAA,QAAA,SAAA,EAAR,QAAI,CAAA,C"}
+{"version":3,"file":"ETabs.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createVNode","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","_renderSlot","_hoisted_1","ETabs_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","flat","computed","model","useModel","config","useConfig","current","dir","list","ref","reveal","nextTick","el","tab","calm","a","b","smooth","onMounted","watch","openBlock","createBlock","unref","TabsRoot","normalizeClass","_cache","$event","withCtx","createVNode","TabsList","createElementBlock","Fragment","renderList","TabsTrigger","item","createTextVNode","toDisplayString","createCommentVNode","TabsContent","renderSlot","_ctx"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five across, with short labels; a vertical list can be longer. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\n  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n  /** `vertical` stacks the tabs in a column beside their panel, for a long list of sections. Use it when there are more tabs than fit across; `fill` has no effect. @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Joins the tabs to their panel so the two read as one card: the panel is outlined, the row of tabs sits on its edge like folder tabs, and the chosen tab opens into the panel with no line between. The edge stays open where there are no tabs. @default false */\n  framed?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: TabItem }) => unknown) | undefined;\n  /** The panel of any tab that has no slot of its own. */\n  panel?(props: { item: TabItem }): unknown;\n}>();\n\nconst flat = computed(() => props.items ?? []);\n\n/** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */\nconst model = defineModel<string>();\n\nconst config = useConfig();\nconst current = computed(() => model.value ?? flat.value[0]?.id);\nconst dir = computed<\"ltr\" | \"rtl\">(\n  () => config.dir ?? (typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\" ? \"rtl\" : \"ltr\"),\n);\n\nconst list = ref<{ $el: HTMLElement } | null>(null);\n\nasync function reveal(smooth: boolean) {\n  await nextTick();\n  const el = list.value?.$el;\n  const tab = el?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n  if (props.orientation === \"vertical\" || !el || !tab || el.scrollWidth <= el.clientWidth) return;\n  const calm = typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const a = tab.getBoundingClientRect();\n  const b = el.getBoundingClientRect();\n  el.scrollBy({ left: a.left + a.width / 2 - (b.left + b.width / 2), behavior: smooth && !calm ? \"smooth\" : \"auto\" });\n}\n\nonMounted(() => reveal(false));\nwatch(current, () => reveal(true));\n</script>\n\n<template>\n  <TabsRoot\n    class=\"e-tabs\"\n    :class=\"{ 'e-tabs--fill': fill, 'e-tabs--vertical': orientation === 'vertical', 'e-tabs--framed': framed }\"\n    :orientation=\"orientation ?? 'horizontal'\"\n    :model-value=\"current\"\n    :dir=\"dir\"\n    @update:model-value=\"model = String($event)\"\n  >\n    <TabsList ref=\"list\" class=\"e-tablist\">\n      <TabsTrigger v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tab\">\n        {{ item.label }}\n        <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tabpanel\">\n      <slot :name=\"item.id\" :item=\"item\"><slot name=\"panel\" :item=\"item\" /></slot>\n    </TabsContent>\n  </TabsRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tablist {\n    display: flex;\n    flex: none;\n    gap: 0;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- the two axes are set apart */\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab along its bottom. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\n\n    /* A selected tab rises: the slab is a band the tab paints along one edge itself, so there is no second shape behind the corners. Every tab is one control height tall either way. */\n    --e-lift: 0px;\n    --e-slab: var(--e-primary);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    flex: none;\n    height: var(--e-control-height);\n    padding: 0 calc(var(--e-space-4) - var(--e-stroke-edge));\n    border: var(--e-stroke-edge) solid var(--e-bc);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-lift));\n    border-radius: 0;\n    background: transparent;\n    background-clip: padding-box;\n    color: var(--e-muted);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition:\n      color var(--e-duration-tap) var(--e-easing-out),\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  /* Only the outer ends of the row are rounded. */\n  .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tab + .e-tab {\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tab:hover {\n    --e-bc: var(--e-ink);\n\n    z-index: var(--e-z-raised);\n    color: var(--e-ink);\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    z-index: var(--e-z-sticky);\n    border-bottom-color: var(--e-slab);\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  /* The slab answers the pointer too: it darkens under the cursor, in step with the face. */\n  .e-tab[aria-selected=\"true\"]:hover {\n    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n  }\n\n  .e-tab:focus-visible {\n    z-index: var(--e-z-focus);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-tabs--fill > .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill > .e-tablist > .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: max(0px, calc(var(--e-space-1) - var(--e-stroke-edge)));\n  }\n\n  /* Vertical: the tabs stack beside the panel, flush and sharing edges. The selected tab rises towards the panel, so its slab is a band down the inline-start side, away from the panel, instead of along the bottom, and only the top and bottom ends of the column are rounded. */\n  .e-tabs--vertical {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-4);\n  }\n\n  .e-tabs--vertical > .e-tablist {\n    flex-direction: column;\n    flex: none;\n    overflow: visible;\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab {\n    --e-lift: 0px;\n\n    height: var(--e-control-height);\n    justify-content: flex-start;\n    border-radius: 0;\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab + .e-tab {\n    margin-inline-start: 0;\n    margin-block-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    --e-lift: var(--e-depth);\n\n    border-bottom-width: var(--e-stroke-edge);\n    border-bottom-color: var(--e-bc);\n    border-inline-start-width: calc(var(--e-stroke-edge) + var(--e-lift));\n    border-inline-start-color: var(--e-slab);\n  }\n\n  .e-tabs--vertical > .e-tabpanel {\n    flex: 1 1 0;\n    min-width: 0;\n    padding-top: 0;\n  }\n\n  /* Framed: tabs and panel are one outlined card. The tab row sits over the panel's edge by one stroke, so a tab's lower edge and the panel's upper edge are the same line; the chosen tab has no edge on that side and its fill covers the panel's, opening into it. Tabs sit flush with their neighbours, square where they meet; only the card's outer corner at the first tab is rounded, and the panel's own corner beside it is square. The row always leaves a corner's width of open edge past the last tab, so the panel's curve never lands against a tab's straight edge. */\n  .e-tabs--framed > .e-tablist {\n    position: relative;\n    z-index: var(--e-z-raised);\n    margin-block-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed > .e-tablist > .e-tab {\n    --e-bc: var(--e-border-strong);\n    --e-lift: 0px;\n\n    border-radius: 0;\n    background-color: var(--e-surface-tint);\n  }\n\n  .e-tabs--framed > .e-tablist > .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--fill > .e-tablist > .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs:not(.e-tabs--fill, .e-tabs--vertical).e-tabs--framed > .e-tablist {\n    padding-inline-end: var(--e-radius-md);\n  }\n\n  .e-tabs--framed > .e-tablist > .e-tab:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  /* The chosen tab rises like a button does, with its primary slab as a band on the edge away from the panel, and its open sides outlined in the primary colour. */\n  .e-tabs--framed > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    padding-block-end: var(--e-stroke-edge);\n    border-bottom-width: 0;\n    border-top-width: calc(var(--e-stroke-edge) + var(--e-lift));\n    border-top-color: var(--e-slab);\n    background-color: var(--e-surface);\n  }\n\n  .e-tabs--framed > .e-tabpanel {\n    padding: calc(var(--e-space-4) - var(--e-stroke-edge));\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    border-start-start-radius: 0;\n    background: var(--e-surface);\n    background-clip: padding-box;\n  }\n\n  .e-tabs--framed.e-tabs--fill > .e-tabpanel {\n    border-start-end-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical {\n    gap: 0;\n    align-items: stretch;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist {\n    align-self: flex-start;\n    margin-block-end: var(--e-radius-md);\n    margin-inline-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab {\n    border-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    margin-block: calc(-1 * var(--e-stroke-edge)) 0;\n    padding-block: 0;\n    border-block-start-width: var(--e-stroke-edge);\n    border-block-start-color: var(--e-bc);\n    border-block-end-width: var(--e-stroke-edge);\n    border-block-end-color: var(--e-bc);\n    border-inline-start-width: calc(var(--e-stroke-edge) + var(--e-lift));\n    border-inline-start-color: var(--e-slab);\n    border-inline-end-width: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"]:first-child {\n    margin-block-start: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tabpanel {\n    padding: calc(var(--e-space-4) - var(--e-stroke-edge));\n  }\n\n  .e-tab-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    color: var(--e-ink);\n  }\n\n  .e-tabpanel {\n    padding-top: var(--e-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-tab {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-tab[aria-selected=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAiBA,IAAMkB,IAAQC,GAiBRC,IAAOC,QAAeH,EAAM,SAAS,CAAC,CAAC,GAGvCI,IAAQtB,EAAmBmB,GAAA,YAAC,GAE5BK,IAASC,EAAU,GACnBC,IAAUL,QAAeC,EAAM,SAASF,EAAK,MAAM,EAAE,EAAE,EAAE,GACzDO,IAAMN,QACJG,EAAO,QAAQ,OAAO,WAAa,OAAe,SAAS,gBAAgB,QAAQ,QAAQ,QAAQ,MAC3G,GAEMI,IAAOC,EAAiC,IAAI;EAElD,eAAeC,EAAO,GAAiB;GACrC,MAAMC,EAAS;GACf,IAAMC,IAAKJ,EAAK,OAAO,KACjBK,IAAMD,GAAI,cAA2B,0BAAwB;GACnE,IAAId,EAAM,gBAAgB,cAAc,CAACc,KAAM,CAACC,KAAOD,EAAG,eAAeA,EAAG,aAAa;GACzF,IAAME,IAAO,OAAO,aAAe,OAAe,WAAW,kCAAkC,CAAC,CAAC,SAC3FC,IAAIF,EAAI,sBAAsB,GAC9BG,IAAIJ,EAAG,sBAAsB;GACnC,EAAG,SAAS;IAAE,MAAMG,EAAE,OAAOA,EAAE,QAAQ,KAAKC,EAAE,OAAOA,EAAE,QAAQ;IAAI,UAAUC,KAAU,CAACH,IAAO,WAAW;GAAO,CAAC;EACpH;E,OAEAI,QAAgBR,EAAO,EAAK,CAAC,GAC7BS,EAAMb,SAAeI,EAAO,EAAI,CAAC,I,UAI/B7B,EAAA,GAAAC,EAiBWC,EAAAwC,CAAA,GAAA;GAhBT,OAAKvC,EAAA,CAAC,UAAQ;IAAA,gBACYe,EAAA;IAAI,oBAAsBA,EAAA,gBAAW;IAAA,kBAAmCA,EAAA;GAAM,CAAA,CAAA;GACvG,aAAaA,EAAA,eAAW;GACxB,eAAaO,EAAA;GACb,KAAKC,EAAA;GACL,uBAAkB,AAAAkB,EAAA,QAAA,MAAE,EAAA,QAAQ,OAAOC,CAAM;;GAE1C,SAAAzC,QAKW,CALXC,EAKWH,EAAA8C,CAAA,GAAA;IALG,SAAA;IAAJ,KAAIrB;IAAO,OAAM;;IACZ,SAAAvB,QAAoB,EAAjCJ,EAAA,EAAA,GAAAM,EAGcC,GAAA,MAAAC,EAHcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAGcC,EAAAkD,CAAA,GAAA;KAHqB,KAAKC,EAAK;KAAK,OAAOA,EAAK;KAAI,OAAM;;KACtE,SAAAjD,QAAgB,CAAbK,EAAAC,EAAA2C,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,SAAK,O,aAAtBrD,EAAA,GAAAM,EAA2E,QAA3EO,GAA2EH,EAApB2C,EAAK,KAAK,GAAA,CAAA,E;;;;G,UAGrErD,EAAA,EAAA,GAAAM,EAEcC,GAAA,MAAAC,EAFcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAEcC,EAAAuD,CAAA,GAAA;IAFqB,KAAKJ,EAAK;IAAK,OAAOA,EAAK;IAAI,OAAM;;IACtE,SAAAjD,QAA4E,CAA5EQ,EAA4E+C,EAAA,QAA/DN,EAAK,IAAE,EAAS,QAAI,SAA2C,CAAzCzC,EAAkC+C,EAAA,QAAA,SAAA,EAAR,QAAI,CAAA,C"}

package/dist/components/Textarea/ETextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETextarea.js","names":["_sfc_main","ETextarea_vue_vue_type_script_setup_true_lang_default","ETextarea_default"],"sources":["../../../src/components/Textarea/ETextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label, a mono kicker above the text well. */\n    label: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** Help that stays under the text well. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the textarea invalid and is announced. */\n    error?: string;\n    /** An example, never the label. */\n    placeholder?: string;\n    /** Visible lines. */\n    rows?: number;\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 id of the textarea; the label points at it. @default generated */\n    id?: string;\n  }>(),\n  { rows: 4 },\n);\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLTextAreaElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input e-textarea\",\n    rows: props.rows,\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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\"\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/form-control-has-label -->\n      <textarea ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLTextAreaElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-textarea {\n    height: auto;\n    min-height: 6.5rem;\n    padding: var(--e-space-3) var(--e-space-4);\n    line-height: 1.5;\n    resize: vertical;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ETextarea.js","names":["_sfc_main","ETextarea_vue_vue_type_script_setup_true_lang_default","ETextarea_default"],"sources":["../../../src/components/Textarea/ETextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label, a mono kicker above the text well. */\n    label: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** Help that stays under the text well. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the textarea invalid and is announced. */\n    error?: string;\n    /** An example, never the label. */\n    placeholder?: string;\n    /** Visible lines. */\n    rows?: number;\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 id of the textarea; the label points at it. @default generated */\n    id?: string;\n  }>(),\n  { rows: 4 },\n);\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLTextAreaElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input e-textarea\",\n    rows: props.rows,\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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\"\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/form-control-has-label -->\n      <textarea ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLTextAreaElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-textarea {\n    height: auto;\n    min-height: 6.5rem;\n    padding: calc(var(--e-space-3) - var(--e-stroke-edge)) calc(var(--e-space-4) - var(--e-stroke-edge));\n    line-height: 1.5;\n    resize: vertical;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Textarea/ETextarea.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETextarea.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","EField_default","ETextarea_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","input","ref","attrs","useFieldAttrs","inputBind","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","_cache","$event"],"sources":["../../../src/components/Textarea/ETextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label, a mono kicker above the text well. */\n    label: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** Help that stays under the text well. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the textarea invalid and is announced. */\n    error?: string;\n    /** An example, never the label. */\n    placeholder?: string;\n    /** Visible lines. */\n    rows?: number;\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 id of the textarea; the label points at it. @default generated */\n    id?: string;\n  }>(),\n  { rows: 4 },\n);\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLTextAreaElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input e-textarea\",\n    rows: props.rows,\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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\"\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/form-control-has-label -->\n      <textarea ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLTextAreaElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-textarea {\n    height: auto;\n    min-height: 6.5rem;\n    padding: var(--e-space-3) var(--e-space-4);\n    line-height: 1.5;\n    resize: vertical;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMa,IAAQC,GA2BRC,IAAQf,EAAmBc,GAAA,YAAgB,GAE3CG,IAAQC,EAAgC,IAAI,GAC5CC,IAAQC,EAAc;EAC5B,SAASC,EAAU,GAA6F;GAC9G,OAAO;IACL,IAAIC,EAAM;IACV,OAAO;IACP,MAAMT,EAAM;IACZ,aAAaA,EAAM;IACnB,OAAOE,EAAM;IACb,UAAUF,EAAM;IAChB,UAAUA,EAAM;IAChB,gBAAgBS,EAAM;IACtB,GAAGH,EAAM,MAAMG,EAAM,eAAe;GACtC;EACF;E,OACAV,EAAa;GACX;GACA,aAAaK,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAIChB,EAAA,GAAAC,EAcSC,GAdTC,EACUC,EAaDc,CAAA,CAbM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOR,GAAE,MAAK,CAEvBC,EAAgH,YAAhHH,EAAgH;IAAlG,SAAA;IAAJ,KAAIa;GAAgB,GAAAI,EAAUC,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA+B,M"}
+{"version":3,"file":"ETextarea.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","EField_default","ETextarea_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","input","ref","attrs","useFieldAttrs","inputBind","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","_cache","$event"],"sources":["../../../src/components/Textarea/ETextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label, a mono kicker above the text well. */\n    label: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** Help that stays under the text well. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the textarea invalid and is announced. */\n    error?: string;\n    /** An example, never the label. */\n    placeholder?: string;\n    /** Visible lines. */\n    rows?: number;\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 id of the textarea; the label points at it. @default generated */\n    id?: string;\n  }>(),\n  { rows: 4 },\n);\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLTextAreaElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input e-textarea\",\n    rows: props.rows,\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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\"\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/form-control-has-label -->\n      <textarea ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLTextAreaElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-textarea {\n    height: auto;\n    min-height: 6.5rem;\n    padding: calc(var(--e-space-3) - var(--e-stroke-edge)) calc(var(--e-space-4) - var(--e-stroke-edge));\n    line-height: 1.5;\n    resize: vertical;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMa,IAAQC,GA2BRC,IAAQf,EAAmBc,GAAA,YAAgB,GAE3CG,IAAQC,EAAgC,IAAI,GAC5CC,IAAQC,EAAc;EAC5B,SAASC,EAAU,GAA6F;GAC9G,OAAO;IACL,IAAIC,EAAM;IACV,OAAO;IACP,MAAMT,EAAM;IACZ,aAAaA,EAAM;IACnB,OAAOE,EAAM;IACb,UAAUF,EAAM;IAChB,UAAUA,EAAM;IAChB,gBAAgBS,EAAM;IACtB,GAAGH,EAAM,MAAMG,EAAM,eAAe;GACtC;EACF;E,OACAV,EAAa;GACX;GACA,aAAaK,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAIChB,EAAA,GAAAC,EAcSC,GAdTC,EACUC,EAaDc,CAAA,CAbM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOR,GAAE,MAAK,CAEvBC,EAAgH,YAAhHH,EAAgH;IAAlG,SAAA;IAAJ,KAAIa;GAAgB,GAAAI,EAAUC,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA+B,M"}