@eos-ui/vue 0.1.0 → 0.2.0

package/dist/components/Stamp/EStamp.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStamp.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createVNode","EIcon","_createElementVNode","_toDisplayString","_createCommentVNode","EIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","EStamp_vue_vue_type_script_setup_true_lang_default","props","__props","PRESETS","TONE_ICON","t","useMessages","preset","computed","tone","text","glyph","openBlock","createElementBlock","normalizeClass","createVNode","createElementVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Stamp/EStamp.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconName } from \"../../icons/phosphor.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport type StampTone = \"success\" | \"info\" | \"warning\" | \"danger\";\nexport type StampStatus =\n  \"paid\" | \"due\" | \"overdue\" | \"action\" | \"scheduled\" | \"confirmed\" | \"cancelled\" | \"signed\" | \"pending\" | \"complete\";\n\nconst props = withDefaults(\n  defineProps<{\n  /** A preset: sets the tone, the word and the glyph. */\n  status?: StampStatus;\n  /** Overrides the preset's tone. Without a status, defaults to `info`. */\n  tone?: StampTone;\n  /** The word. Overrides the preset's. */\n  label?: string;\n  /** Overrides the preset's glyph. */\n  icon?: IconProp;\n  /** A date or day count, set after the word. */\n  detail?: string;\n  /** Smaller, for rows. */\n  small?: boolean;\n  /** `solid` is a filled badge with light text (the default); `subtle` is a soft tint with a tone-coloured outline and text. */\n  variant?: \"solid\" | \"subtle\";\n}>(),\n  { variant: \"solid\" },\n);\n\nconst PRESETS: Record<StampStatus, [StampTone, IconName]> = {\n  paid: [\"success\", \"check\"],\n  due: [\"info\", \"clock\"],\n  overdue: [\"danger\", \"alert\"],\n  action: [\"warning\", \"alert\"],\n  scheduled: [\"info\", \"calendar\"],\n  confirmed: [\"success\", \"check\"],\n  cancelled: [\"danger\", \"x\"],\n  signed: [\"success\", \"check\"],\n  pending: [\"info\", \"clock\"],\n  complete: [\"success\", \"check\"],\n};\nconst TONE_ICON: Record<StampTone, IconName> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\n\nconst t = useMessages();\nconst preset = computed(() => (props.status ? PRESETS[props.status] : undefined));\nconst tone = computed<StampTone>(() => props.tone || preset.value?.[0] || \"info\");\nconst text = computed(() => props.label || (preset.value ? t(`status.${props.status}`) : t(\"status\")));\nconst glyph = computed(() => props.icon || preset.value?.[1] || TONE_ICON[tone.value]);\n</script>\n\n<template>\n  <div\n    class=\"e-stamp\"\n    :class=\"[`e-stamp--${tone}`, small && 'e-stamp--s', variant === 'subtle' && 'e-stamp--subtle']\"\n    role=\"img\"\n    :aria-label=\"text + (detail ? ', ' + detail : '')\"\n  >\n    <EIcon :name=\"glyph\" bold />\n    <span class=\"e-stamp-word\">{{ text }}</span>\n    <span v-if=\"detail\" class=\"e-stamp-detail\">{{ detail }}</span>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-stamp {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-ink);\n    --e-on: var(--e-surface);\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-height: 28px;\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-strong);\n    color: var(--e-on);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-strong);\n    cursor: default;\n    justify-self: start;\n  }\n\n  .e-stamp--success {\n    --e-soft: var(--e-secondary-soft);\n    --e-strong: var(--e-secondary);\n    --e-on: var(--e-on-secondary);\n  }\n\n  .e-stamp--info {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-primary);\n    --e-on: var(--e-on-primary);\n  }\n\n  .e-stamp--danger {\n    --e-soft: var(--e-danger-soft);\n    --e-strong: var(--e-danger);\n    --e-on: var(--e-on-danger);\n  }\n\n  .e-stamp--warning {\n    --e-soft: var(--e-warning-soft);\n    --e-strong: var(--e-warning-strong);\n    --e-on: var(--e-surface);\n  }\n\n  .e-stamp--subtle {\n    background: var(--e-soft);\n    color: var(--e-strong);\n  }\n\n  .e-stamp:not(.e-stamp--subtle) .e-stamp-detail {\n    border-inline-start-color: color-mix(in srgb, var(--e-on) 55%, transparent);\n  }\n\n  .e-stamp-word {\n    font: 600 var(--e-text-xs) / 16px var(--e-font-mono);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n  }\n\n  .e-stamp-detail {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n    padding-inline-start: var(--e-space-2);\n    border-inline-start: 1px solid currentColor;\n  }\n\n  .e-stamp .e-icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  .e-stamp--s {\n    min-height: 24px;\n    gap: 6px;\n    padding: 0 10px;\n    align-self: flex-start;\n  }\n\n  .e-stamp--s .e-icon {\n    width: 13px;\n    height: 13px;\n  }\n\n  .e-stamp--s .e-stamp-word {\n    font-size: var(--e-text-xs);\n    line-height: 14px;\n    letter-spacing: 0.06em;\n  }\n\n  @media (forced-colors: active) {\n    .e-stamp {\n      border: 1px solid CanvasText;\n    }\n  }\n\n  @media print {\n    .e-stamp {\n      border: 1px solid #000;\n      background: none;\n      color: #000;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAYA,IAAMa,IAAQC,GAoBRC,IAAsD;GAC1D,MAAM,CAAC,WAAW,OAAO;GACzB,KAAK,CAAC,QAAQ,OAAO;GACrB,SAAS,CAAC,UAAU,OAAO;GAC3B,QAAQ,CAAC,WAAW,OAAO;GAC3B,WAAW,CAAC,QAAQ,UAAU;GAC9B,WAAW,CAAC,WAAW,OAAO;GAC9B,WAAW,CAAC,UAAU,GAAG;GACzB,QAAQ,CAAC,WAAW,OAAO;GAC3B,SAAS,CAAC,QAAQ,OAAO;GACzB,UAAU,CAAC,WAAW,OAAO;EAC/B,GACMC,IAAyC;GAAE,MAAM;GAAQ,SAAS;GAAS,SAAS;GAAS,QAAQ;EAAQ,GAE7GC,IAAIC,EAAY,GAChBC,IAASC,QAAgBP,EAAM,SAASE,EAAQF,EAAM,UAAU,KAAA,CAAU,GAC1EQ,IAAOD,QAA0BP,EAAM,QAAQM,EAAO,QAAQ,MAAM,MAAM,GAC1EG,IAAOF,QAAeP,EAAM,UAAUM,EAAO,QAAQF,EAAE,UAAUJ,EAAM,QAAQ,IAAII,EAAE,QAAQ,EAAE,GAC/FM,IAAQH,QAAeP,EAAM,QAAQM,EAAO,QAAQ,MAAMH,EAAUK,EAAK,MAAM;E,kBAInFrB,EAAA,GAAAC,EASM,OAAA;GARJ,OAAKC,EAAA,CAAC,WAAS;IAAA,YACMmB,EAAA;IAAQP,EAAA,SAAK;IAAkBA,EAAA,YAAO,YAAA;GAAA,CAAA,CAAA;GAC3D,MAAK;GACJ,cAAYQ,EAAA,SAAQR,EAAA,SAAM,OAAUA,EAAA,SAAM;;GAE3CX,EAA4BC,GAAA;IAApB,MAAMmB,EAAA;IAAO,MAAA;;GACrBlB,EAA4C,QAA5CK,GAA4CJ,EAAdgB,EAAA,KAAI,GAAA,CAAA;GACtBR,EAAA,UAAZd,EAAA,GAAAC,EAA8D,QAA9DU,GAA8DL,EAAhBQ,EAAA,MAAM,GAAA,CAAA,K"}
+{"version":3,"file":"EStamp.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","EIcon_default","_hoisted_1","_hoisted_2","EStamp_vue_vue_type_script_setup_true_lang_default","props","__props","PRESETS","t","useMessages","preset","computed","tone","toneClass","text","openBlock","createElementBlock","normalizeClass","createBlock","createCommentVNode","createElementVNode","renderSlot","_ctx","createTextVNode","toDisplayString"],"sources":["../../../src/components/Stamp/EStamp.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport type StampTone = \"neutral\" | \"ink\" | \"success\" | \"info\" | \"warning\" | \"danger\";\nexport type StampStatus =\n  \"paid\" | \"due\" | \"overdue\" | \"action\" | \"scheduled\" | \"confirmed\" | \"cancelled\" | \"signed\" | \"pending\" | \"complete\";\n\nconst props = defineProps<{\n  /** A preset: sets the tone and the word (message `status.<name>`). */\n  status?: StampStatus;\n  /** Overrides the preset's tone. Without a status it is `neutral` (ink; `ink` is the same). `success`: paid, confirmed. `info`: due, scheduled. `warning`: needs attention. `danger`: overdue, failed. @default \"ink\" */\n  tone?: StampTone;\n  /** The word. Overrides the preset's; the default slot overrides both. @default preset's word, else Status */\n  label?: string;\n  /** A glyph before the word. None by default. */\n  icon?: IconProp;\n  /** A date or day count, set after the word. */\n  detail?: string;\n  /** `sm` is shorter, for rows and tables. @default \"md\" */\n  size?: \"sm\" | \"md\";\n}>();\n\ndefineSlots<{\n  /** The word, instead of `label` or the preset's. Write sentence case; the stamp sets it in capitals. */\n  default?(): unknown;\n}>();\n\nconst PRESETS: Record<StampStatus, StampTone> = {\n  paid: \"success\",\n  due: \"info\",\n  overdue: \"danger\",\n  action: \"warning\",\n  scheduled: \"info\",\n  confirmed: \"success\",\n  cancelled: \"danger\",\n  signed: \"success\",\n  pending: \"info\",\n  complete: \"success\",\n};\n\nconst t = useMessages();\nconst preset = computed(() => (props.status ? PRESETS[props.status] : undefined));\nconst tone = computed<StampTone>(() => props.tone || preset.value || \"neutral\");\nconst toneClass = computed(() => (tone.value === \"neutral\" || tone.value === \"ink\" ? null : `e-stamp--${tone.value}`));\nconst text = computed(() => props.label || (preset.value ? t(`status.${props.status}`) : t(\"status\")));\n</script>\n\n<template>\n  <span class=\"e-stamp\" :class=\"[toneClass, size === 'sm' && 'e-stamp--sm']\">\n    <EIcon v-if=\"icon\" :name=\"icon\" bold />\n    <span class=\"e-stamp-word\"><slot>{{ text }}</slot></span>\n    <span v-if=\"detail\" class=\"e-stamp-detail\">{{ detail }}</span>\n  </span>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-stamp {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-ink);\n    --e-on: var(--e-surface);\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--e-space-2);\n\n    --e-bc: var(--e-strong);\n\n    min-height: calc(var(--e-chip-height) + var(--e-space-1));\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-strong);\n    color: var(--e-on);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-bc);\n    outline: var(--e-stroke-card) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-card));\n    cursor: default;\n    justify-self: start;\n  }\n\n  .e-stamp--success {\n    --e-soft: var(--e-secondary-soft);\n    --e-strong: var(--e-secondary);\n    --e-on: var(--e-on-secondary);\n  }\n\n  .e-stamp--info {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-primary);\n    --e-on: var(--e-on-primary);\n  }\n\n  .e-stamp--danger {\n    --e-soft: var(--e-danger-soft);\n    --e-strong: var(--e-danger);\n    --e-on: var(--e-on-danger);\n  }\n\n  .e-stamp--warning {\n    --e-soft: var(--e-warning-soft);\n    --e-strong: var(--e-warning-strong);\n    --e-on: var(--e-surface);\n  }\n\n  .e-stamp .e-stamp-detail {\n    border-inline-start-color: color-mix(in srgb, var(--e-on) 55%, transparent);\n  }\n\n  .e-stamp-word {\n    font: 600 var(--e-text-xs) / 16px var(--e-font-mono);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n  }\n\n  .e-stamp-detail {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n    padding-inline-start: var(--e-space-2);\n    border-inline-start: var(--e-stroke-hair) solid currentColor;\n  }\n\n  .e-stamp .e-icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  .e-stamp--sm {\n    min-height: var(--e-chip-height);\n    gap: var(--e-space-1);\n    align-self: flex-start;\n  }\n\n  .e-stamp--sm .e-icon {\n    width: 13px;\n    height: 13px;\n  }\n\n  .e-stamp--sm .e-stamp-word {\n    font-size: var(--e-text-xs);\n    line-height: 14px;\n    letter-spacing: 0.06em;\n  }\n\n  @media (forced-colors: active) {\n    .e-stamp {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n  }\n\n  @media print {\n    .e-stamp {\n      border: var(--e-stroke-card) solid var(--e-print-ink);\n      outline: 0;\n      background: none;\n      box-shadow: none;\n      color: var(--e-print-ink);\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAWA,IAAMc,IAAQC,GAoBRC,IAA0C;GAC9C,MAAM;GACN,KAAK;GACL,SAAS;GACT,QAAQ;GACR,WAAW;GACX,WAAW;GACX,WAAW;GACX,QAAQ;GACR,SAAS;GACT,UAAU;EACZ,GAEMC,IAAIC,EAAY,GAChBC,IAASC,QAAgBN,EAAM,SAASE,EAAQF,EAAM,UAAU,KAAA,CAAU,GAC1EO,IAAOD,QAA0BN,EAAM,QAAQK,EAAO,SAAS,SAAS,GACxEG,IAAYF,QAAgBC,EAAK,UAAU,aAAaA,EAAK,UAAU,QAAQ,OAAO,YAAYA,EAAK,OAAQ,GAC/GE,IAAOH,QAAeN,EAAM,UAAUK,EAAO,QAAQF,EAAE,UAAUH,EAAM,QAAQ,IAAIG,EAAE,QAAQ,EAAE;E,kBAInGjB,EAAA,GAAAC,EAIO,QAAA,EAJD,OAAKC,EAAA,CAAC,WAAS,CAAUoB,EAAA,OAAWP,EAAA,SAAI,QAAA,aAAA,CAAA,CAAA,E;GAC/BA,EAAA,QAAbf,EAAA,GAAAG,EAAuCC,GAAA;;IAAnB,MAAMW,EAAA;IAAM,MAAA;;GAChCT,EAAyD,QAAzDK,GAAyD,CAA9BJ,EAAuBwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdvB,EAAAC,EAAAc,EAAA,KAAI,GAAA,CAAA,C;GAC5BR,EAAA,UAAZf,EAAA,GAAAC,EAA8D,QAA9DW,GAA8DH,EAAhBM,EAAA,MAAM,GAAA,CAAA,K"}

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. Exactly one is normally `current`. */\n  steps: Step[];\n  /** The list's name for assistive technology, such as \"Registration\". Defaults to \"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    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: 13px;\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: 2px 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  .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: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\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    border: var(--e-stroke-edge) solid 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    border: 2px solid var(--e-ink);\n    color: var(--e-ink);\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: 13px;\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: 2px 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    .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      border-color: 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    border-radius: 50%;\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\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    border: var(--e-stroke-edge) solid 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    border: var(--e-stroke-focus) solid 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      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Stepper/EStepper.vue.d.ts

@@ -5,9 +5,9 @@ export interface Step {
     state: "done" | "current" | "upcoming" | "todo";
 }
 type __VLS_Props = {
-    /** The steps in order. Exactly one is normally `current`. */
+    /** 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. */
     steps: Step[];
-    /** The list's name for assistive technology, such as "Registration". Defaults to "Progress". */
+    /** The list's accessible name. @default "Progress" */
     label?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/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. Exactly one is normally `current`. */\n  steps: Step[];\n  /** The list's name for assistive technology, such as \"Registration\". Defaults to \"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    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: 13px;\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: 2px 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  .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: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\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    border: var(--e-stroke-edge) solid 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    border: 2px solid var(--e-ink);\n    color: var(--e-ink);\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: 13px;\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: 2px 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    .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      border-color: 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    border-radius: 50%;\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\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    border: var(--e-stroke-edge) solid 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    border: var(--e-stroke-focus) solid 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      border-color: 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/Surface/ESurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESurface.js","names":["_sfc_main","ESurface_vue_vue_type_script_setup_true_lang_default","ESurface_default"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. Omit for none. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** `default`, `tint` (the tinted look) or `float` (the lifted look of a Toast). */\n    tone?: \"default\" | \"tint\" | \"float\";\n    /** Hides what overflows the rounded corners. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst tone = computed(() => (props.tone && props.tone !== \"default\" ? `e-surface--${props.tone}` : null));\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[tone, $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-surface--tint {\n    background: var(--e-surface-tint);\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--float {\n    box-shadow: var(--e-float);\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESurface.js","names":["_sfc_main","ESurface_vue_vue_type_script_setup_true_lang_default","ESurface_default"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Surface/ESurface.vue.d.ts

@@ -1,11 +1,11 @@
 type __VLS_Props = {
-    /** The element to render, `div` by default. */
+    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */
     as?: string;
-    /** Padding: `sm`, `md` or `lg`. Omit for none. */
+    /** Padding: `sm`, `md` or `lg`. None by default. */
     pad?: "sm" | "md" | "lg";
-    /** `default`, `tint` (the tinted look) or `float` (the lifted look of a Toast). */
-    tone?: "default" | "tint" | "float";
-    /** Hides what overflows the rounded corners. */
+    /** The lifted shadow of something floating above the page, such as a Toast. */
+    raised?: boolean;
+    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */
     clip?: boolean;
 };
 type __VLS_Slots = {

package/dist/components/Surface/ESurface.vue_vue_type_script_setup_true_lang.js

@@ -7,14 +7,14 @@ var p = /*@__PURE__*/ s({
 	props: {
 		as: { default: "div" },
 		pad: {},
-		tone: {},
+		raised: { type: Boolean },
 		clip: { type: Boolean }
 	},
 	setup(s) {
-		let p = s, m = n(() => p.tone && p.tone !== "default" ? `e-surface--${p.tone}` : null), h = n(() => p.pad ? `e-surface--pad-${p.pad}` : null), g = n(() => /^(article|section|aside)$/.test(p.as) ? "footer" : "div");
-		return (n, p) => (l(), r(d(s.as), { class: c(["e-surface", [m.value, n.$slots.actions ? "e-surface--actions" : [h.value, s.clip && "e-surface--clip"]]]) }, {
-			default: f(() => [n.$slots.actions ? (l(), i(t, { key: 0 }, [a("div", { class: c(["e-surface-body", h.value]) }, [u(n.$slots, "default")], 2), o(e, {
-				as: g.value,
+		let p = s, m = n(() => p.pad ? `e-surface--pad-${p.pad}` : null), h = n(() => /^(article|section|aside)$/.test(p.as) ? "footer" : "div");
+		return (n, p) => (l(), r(d(s.as), { class: c(["e-surface", [s.raised && "e-surface--raised", n.$slots.actions ? "e-surface--actions" : [m.value, s.clip && "e-surface--clip"]]]) }, {
+			default: f(() => [n.$slots.actions ? (l(), i(t, { key: 0 }, [a("div", { class: c(["e-surface-body", m.value]) }, [u(n.$slots, "default")], 2), o(e, {
+				as: h.value,
 				bar: ""
 			}, {
 				default: f(() => [u(n.$slots, "actions")]),

package/dist/components/Surface/ESurface.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESurface.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_Fragment","_createElementVNode","_renderSlot","_createVNode","EActions","EActions_default","ESurface_vue_vue_type_script_setup_true_lang_default","props","__props","tone","computed","pad","barElement","openBlock","createBlock","resolveDynamicComponent","normalizeClass","_ctx","withCtx","createElementBlock","Fragment","createElementVNode","renderSlot","createVNode"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. Omit for none. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** `default`, `tint` (the tinted look) or `float` (the lifted look of a Toast). */\n    tone?: \"default\" | \"tint\" | \"float\";\n    /** Hides what overflows the rounded corners. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst tone = computed(() => (props.tone && props.tone !== \"default\" ? `e-surface--${props.tone}` : null));\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[tone, $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-surface--tint {\n    background: var(--e-surface-tint);\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--float {\n    box-shadow: var(--e-float);\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAKA,IAAMc,IAAQC,GAqBRC,IAAOC,QAAgBH,EAAM,QAAQA,EAAM,SAAS,YAAY,cAAcA,EAAM,SAAS,IAAK,GAClGI,IAAMD,QAAgBH,EAAM,MAAM,kBAAkBA,EAAM,QAAQ,IAAK,GACvEK,IAAaF,QAAgB,4BAA4B,KAAKH,EAAM,EAAE,IAAI,WAAW,KAAM;E,kBAI/Fb,EAAA,GAAAC,EAcYC,EAbLY,EAAA,EAAE,GAAA,EACP,OAAKX,EAAA,CAAC,aAAW,CACRY,EAAA,OAAMhB,EAAAA,OAAO,UAAO,uBAAA,CAA2BkB,EAAA,OAAKH,EAAA,QAAI,iBAAA,CAAA,CAAA,CAAA,E;GAEjE,SAAAV,QAOW,CAPKL,EAAAA,OAAO,WAAvBC,EAAA,GAAAK,EAOWC,GAAA,EAAA,KAAA,EAAA,GAAA,CANTC,EAEM,OAAA,EAFD,OAAKJ,EAAA,CAAC,kBAAyBc,EAAA,KAAG,CAAA,E,IACrCT,EAAQe,EAAA,QAAA,SAAA,C,OAEVd,EAEWC,GAAA;IAFA,IAAIQ,EAAA;IAAY,KAAA;;IACzB,SAAAd,QAAuB,CAAvBI,EAAuBe,EAAA,QAAA,SAAA,C;;G,uBAG3Bf,EAAee,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,C"}
+{"version":3,"file":"ESurface.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_Fragment","_createElementVNode","_renderSlot","_createVNode","EActions","EActions_default","ESurface_vue_vue_type_script_setup_true_lang_default","props","__props","pad","computed","barElement","openBlock","createBlock","resolveDynamicComponent","normalizeClass","_ctx","withCtx","createElementBlock","Fragment","createElementVNode","renderSlot","createVNode"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAKA,IAAMc,IAAQC,GAqBRC,IAAMC,QAAgBH,EAAM,MAAM,kBAAkBA,EAAM,QAAQ,IAAK,GACvEI,IAAaD,QAAgB,4BAA4B,KAAKH,EAAM,EAAE,IAAI,WAAW,KAAM;E,kBAI/Fb,EAAA,GAAAC,EAcYC,EAbLY,EAAA,EAAE,GAAA,EACP,OAAKX,EAAA,CAAC,aAAW,CACRW,EAAA,UAAM,qBAAyBf,EAAAA,OAAO,UAAO,uBAAA,CAA2BgB,EAAA,OAAKD,EAAA,QAAI,iBAAA,CAAA,CAAA,CAAA,E;GAE1F,SAAAV,QAOW,CAPKL,EAAAA,OAAO,WAAvBC,EAAA,GAAAK,EAOWC,GAAA,EAAA,KAAA,EAAA,GAAA,CANTC,EAEM,OAAA,EAFD,OAAKJ,EAAA,CAAC,kBAAyBY,EAAA,KAAG,CAAA,E,IACrCP,EAAQc,EAAA,QAAA,SAAA,C,OAEVb,EAEWC,GAAA;IAFA,IAAIO,EAAA;IAAY,KAAA;;IACzB,SAAAb,QAAuB,CAAvBI,EAAuBc,EAAA,QAAA,SAAA,C;;G,uBAG3Bd,EAAec,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,C"}

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  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. Generated when left out. */\n  id?: string;\n}>();\n\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    position: relative;\n    flex: none;\n    width: 44px;\n    height: 24px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\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: 3px;\n    width: 14px;\n    height: 14px;\n    margin-top: -7px;\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    border-color: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(20px);\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-style: dashed;\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(-20px);\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: calc(var(--e-space-1) - var(--e-stroke-card));\n    --e-thumb-travel: calc(var(--e-switch-w) - 2 * var(--e-stroke-edge) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n\n    --e-bc: var(--e-border-strong);\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\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: 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    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n    --e-bc: 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    border-style: dashed;\n    outline: 0;\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":""}

package/dist/components/Switch/ESwitch.vue.d.ts

@@ -3,15 +3,17 @@ type __VLS_Props = {
     label: string;
     /** A line of detail under the label. */
     description?: string;
+    /** Disables the switch. */
     disabled?: boolean;
     /** The name submitted with a form. */
     name?: string;
     /** The value submitted with a form when on. */
     value?: string;
-    /** The id of the input; the label points at it. Generated when left out. */
+    /** The id of the input; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** On or off. */
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

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  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. Generated when left out. */\n  id?: string;\n}>();\n\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    position: relative;\n    flex: none;\n    width: 44px;\n    height: 24px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\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: 3px;\n    width: 14px;\n    height: 14px;\n    margin-top: -7px;\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    border-color: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(20px);\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-style: dashed;\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(-20px);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMmB,IAAQC,GAcRC,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: calc(var(--e-space-1) - var(--e-stroke-card));\n    --e-thumb-travel: calc(var(--e-switch-w) - 2 * var(--e-stroke-edge) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n\n    --e-bc: var(--e-border-strong);\n\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\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: 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    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n    --e-bc: 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    border-style: dashed;\n    outline: 0;\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"}

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\">\nimport type { LinkItem, LinkSection } from \"./LinkNav.vue\";\n\nexport interface TabItem extends LinkItem {\n  /** Names the tab's slot, and is the value of `v-model`. Not needed for a link. */\n  id?: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n\nexport type TabSection = LinkSection<TabItem>;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch, type Component } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport LinkNav from \"./LinkNav.vue\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The tabs, in order. Two to five for panels; give them `href` or `to` to make a row or column of links. */\n    items?: TabItem[];\n    /** Links in labelled groups, instead of `items`. */\n    sections?: TabSection[];\n    /** `vertical` stacks the links with a rule down the start edge, for a sidebar or an outline. Links only. */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Shorter rows and smaller words, for a long list of links. */\n    dense?: boolean;\n    /** The landmark's name when the tabs are links. Defaults to \"Main\". */\n    label?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink`. */\n    linkComponent?: string | Component;\n  }>(),\n  { orientation: \"horizontal\", linkComponent: \"a\" },\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 groups = computed<TabSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\nconst flat = computed(() => groups.value.flatMap((g) => g.items));\nconst isNav = computed(() => flat.value.some((i) => i.href !== undefined || i.to !== undefined));\n\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 (!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  <LinkNav\n    v-if=\"isNav\"\n    class=\"e-tabs e-tabs--links\"\n    :class=\"[orientation === 'vertical' && 'e-tabs--vertical', dense && 'e-tabs--dense']\"\n    :groups=\"groups\"\n    :label=\"label\"\n    :link-component=\"linkComponent\"\n    item-class=\"e-tab\"\n    heading-class=\"e-tabs-heading\"\n    list-class=\"e-tablist\"\n  >\n    <template #item=\"{ item }\">\n      {{ item.label }}\n      <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n    </template>\n  </LinkNav>\n  <TabsRoot v-else class=\"e-tabs\" :model-value=\"current\" :dir=\"dir\" @update:model-value=\"model = String($event)\">\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    gap: var(--e-space-1);\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    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  .e-tab + .e-tab::before,\n  .e-tablist > li + li > .e-tab::before {\n    content: \"\";\n    position: absolute;\n    inset-block: 30%;\n    inset-inline-start: calc(var(--e-space-1) * -0.5);\n    border-inline-start: var(--e-stroke-hair) solid color-mix(in srgb, var(--e-border) 40%, transparent);\n  }\n\n  .e-tablist:has(> li) {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-tablist > li {\n    display: contents;\n  }\n\n  a.e-tab {\n    text-decoration: none;\n  }\n\n  .e-tabs--dense .e-tab {\n    height: 2.25rem;\n    font-size: var(--e-text-sm);\n  }\n\n  .e-tabs--vertical .e-tablist {\n    flex-direction: column;\n    gap: 0;\n    overflow: visible;\n    border-bottom: 0;\n    border-inline-start: var(--e-stroke-edge) solid var(--e-border);\n  }\n\n  .e-tabs--vertical .e-tab {\n    background-clip: padding-box;\n    justify-content: flex-start;\n    height: auto;\n    min-height: 2rem;\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n    padding-block: var(--e-space-1);\n    border-bottom: 0;\n    border-inline-start: 3px solid transparent;\n    line-height: 1.35;\n    text-align: start;\n  }\n\n  .e-tabs--vertical .e-tablist > li > .e-tab::before {\n    content: none;\n  }\n\n  .e-tabs--vertical.e-tabs--dense .e-tab {\n    min-height: 2.25rem;\n  }\n\n  .e-tabs--vertical .e-tab[aria-current=\"page\"] {\n    border-inline-start-color: var(--e-primary);\n    background: var(--e-surface-tint);\n  }\n\n  .e-tab {\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);\n    border: 0;\n    border-bottom: 3px solid transparent;\n    background: transparent;\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  }\n\n  .e-tab:hover {\n    color: var(--e-ink);\n    background: var(--e-surface-tint);\n  }\n\n  .e-tab[aria-selected=\"true\"],\n  .e-tab[aria-current=\"page\"] {\n    color: var(--e-ink);\n    border-bottom-color: var(--e-primary);\n    font-weight: 600;\n  }\n\n  .e-tab:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-tab-count {\n    min-width: 22px;\n    padding: 0 6px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n    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    .e-tab[aria-current=\"page\"] {\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, with short labels. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\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 (!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 class=\"e-tabs\" :model-value=\"current\" :dir=\"dir\" @update:model-value=\"model = String($event)\">\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    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 underneath. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\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);\n    border: var(--e-stroke-edge) solid var(--e-bc);\n    border-radius: 0;\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: transparent;\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  }\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\n    z-index: var(--e-z-sticky);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\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  .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-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    outline: var(--e-stroke-hair) solid var(--e-primary);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    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.d.ts

@@ -1,52 +1,30 @@
-import { Component } from 'vue';
-import { LinkItem, LinkSection } from './LinkNav.vue.js';
-export interface TabItem extends LinkItem {
-    /** Names the tab's slot, and is the value of `v-model`. Not needed for a link. */
-    id?: string;
+export interface TabItem {
+    /** Names the tab's slot, and is the value of `v-model`. */
+    id: string;
+    /** The tab's words. */
+    label: string;
     /** A number or short word in a small badge after the label. */
     count?: number | string;
 }
-export type TabSection = LinkSection<TabItem>;
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
-    /** The tabs, in order. Two to five for panels; give them `href` or `to` to make a row or column of links. */
+    /** The tabs, in order: `{ id, label, count? }`. Two to five, with short labels. `id` names the slot and is the `v-model` value. */
     items?: TabItem[];
-    /** Links in labelled groups, instead of `items`. */
-    sections?: TabSection[];
-    /** `vertical` stacks the links with a rule down the start edge, for a sidebar or an outline. Links only. */
-    orientation?: "horizontal" | "vertical";
-    /** Shorter rows and smaller words, for a long list of links. */
-    dense?: boolean;
-    /** The landmark's name when the tabs are links. Defaults to "Main". */
-    label?: string;
-    /** What renders each link: `"a"` by default, or `RouterLink`. */
-    linkComponent?: string | Component;
 } & {
+    /** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */
     modelValue?: string;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<{
-    /** The tabs, in order. Two to five for panels; give them `href` or `to` to make a row or column of links. */
+    /** The tabs, in order: `{ id, label, count? }`. Two to five, with short labels. `id` names the slot and is the `v-model` value. */
     items?: TabItem[];
-    /** Links in labelled groups, instead of `items`. */
-    sections?: TabSection[];
-    /** `vertical` stacks the links with a rule down the start edge, for a sidebar or an outline. Links only. */
-    orientation?: "horizontal" | "vertical";
-    /** Shorter rows and smaller words, for a long list of links. */
-    dense?: boolean;
-    /** The landmark's name when the tabs are links. Defaults to "Main". */
-    label?: string;
-    /** What renders each link: `"a"` by default, or `RouterLink`. */
-    linkComponent?: string | Component;
 } & {
+    /** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {
-    orientation: "vertical" | "horizontal";
-    linkComponent: string | Component;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     [id: string]: ((props: {
         item: TabItem;
     }) => unknown) | undefined;

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

@@ -1,34 +1,23 @@
 /* empty css                */
 import { useConfig as e } from "../../config.js";
-import t from "./LinkNav.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, nextTick as d, normalizeClass as f, onMounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, useModel as b, watch as x, withCtx as S } from "vue";
-import { TabsContent as C, TabsList as w, TabsRoot as T, TabsTrigger as E } from "reka-ui";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, nextTick as u, onMounted as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useModel as v, watch as y, withCtx as b } from "vue";
+import { TabsContent as x, TabsList as S, TabsRoot as C, TabsTrigger as w } from "reka-ui";
 //#region src/components/Tabs/ETabs.vue?vue&type=script&setup=true&lang.ts
-var D = {
+var T = {
 	key: 0,
 	class: "e-tab-count"
-}, O = {
-	key: 0,
-	class: "e-tab-count"
-}, k = /*@__PURE__*/ l({
+}, E = /*@__PURE__*/ c({
 	__name: "ETabs",
-	props: /*@__PURE__*/ u({
-		items: {},
-		sections: {},
-		orientation: { default: "horizontal" },
-		dense: { type: Boolean },
-		label: {},
-		linkComponent: { default: "a" }
-	}, {
+	props: /*@__PURE__*/ l({ items: {} }, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(l) {
-		let u = l, k = r(() => u.sections ?? [{ items: u.items ?? [] }]), A = r(() => k.value.flatMap((e) => e.items)), j = r(() => A.value.some((e) => e.href !== void 0 || e.to !== void 0)), M = b(l, "modelValue"), N = e(), P = r(() => M.value ?? A.value[0]?.id), F = r(() => N.dir ?? (typeof document < "u" && document.documentElement.dir === "rtl" ? "rtl" : "ltr")), I = h(null);
-		async function L(e) {
-			await d();
-			let t = I.value?.$el, n = t?.querySelector("[aria-selected=\"true\"]");
+	setup(c) {
+		let l = c, E = n(() => l.items ?? []), D = v(c, "modelValue"), O = e(), k = n(() => D.value ?? E.value[0]?.id), A = n(() => O.dir ?? (typeof document < "u" && document.documentElement.dir === "rtl" ? "rtl" : "ltr")), j = p(null);
+		async function M(e) {
+			await u();
+			let t = j.value?.$el, n = t?.querySelector("[aria-selected=\"true\"]");
 			if (!t || !n || t.scrollWidth <= t.clientWidth) return;
 			let r = typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches, i = n.getBoundingClientRect(), a = t.getBoundingClientRect();
 			t.scrollBy({
@@ -36,50 +25,32 @@ var D = {
 				behavior: e && !r ? "smooth" : "auto"
 			});
 		}
-		return p(() => L(!1)), x(P, () => L(!0)), (e, r) => j.value ? (m(), i(t, {
-			key: 0,
-			class: f(["e-tabs e-tabs--links", [l.orientation === "vertical" && "e-tabs--vertical", l.dense && "e-tabs--dense"]]),
-			groups: k.value,
-			label: l.label,
-			"link-component": l.linkComponent,
-			"item-class": "e-tab",
-			"heading-class": "e-tabs-heading",
-			"list-class": "e-tablist"
-		}, {
-			item: S(({ item: e }) => [s(v(e.label) + " ", 1), e.count == null ? a("", !0) : (m(), o("span", D, v(e.count), 1))]),
-			_: 1
-		}, 8, [
-			"class",
-			"groups",
-			"label",
-			"link-component"
-		])) : (m(), i(y(T), {
-			key: 1,
+		return d(() => M(!1)), y(k, () => M(!0)), (e, n) => (f(), r(_(C), {
 			class: "e-tabs",
-			"model-value": P.value,
-			dir: F.value,
-			"onUpdate:modelValue": r[0] ||= (e) => M.value = String(e)
+			"model-value": k.value,
+			dir: A.value,
+			"onUpdate:modelValue": n[0] ||= (e) => D.value = String(e)
 		}, {
-			default: S(() => [c(y(w), {
+			default: b(() => [s(_(S), {
 				ref_key: "list",
-				ref: I,
+				ref: j,
 				class: "e-tablist"
 			}, {
-				default: S(() => [(m(!0), o(n, null, g(A.value, (e) => (m(), i(y(E), {
+				default: b(() => [(f(!0), a(t, null, m(E.value, (e) => (f(), r(_(w), {
 					key: e.id,
 					value: e.id,
 					class: "e-tab"
 				}, {
-					default: S(() => [s(v(e.label) + " ", 1), e.count == null ? a("", !0) : (m(), o("span", O, v(e.count), 1))]),
+					default: b(() => [o(g(e.label) + " ", 1), e.count == null ? i("", !0) : (f(), a("span", T, g(e.count), 1))]),
 					_: 2
 				}, 1032, ["value"]))), 128))]),
 				_: 1
-			}, 512), (m(!0), o(n, null, g(A.value, (t) => (m(), i(y(C), {
+			}, 512), (f(!0), a(t, null, m(E.value, (t) => (f(), r(_(x), {
 				key: t.id,
 				value: t.id,
 				class: "e-tabpanel"
 			}, {
-				default: S(() => [_(e.$slots, t.id, { item: t }, () => [_(e.$slots, "panel", { item: t })])]),
+				default: b(() => [h(e.$slots, t.id, { item: t }, () => [h(e.$slots, "panel", { item: t })])]),
 				_: 2
 			}, 1032, ["value"]))), 128))]),
 			_: 3
@@ -87,6 +58,6 @@ var D = {
 	}
 });
 //#endregion
-export { k as default };
+export { E as default };
 
 //# sourceMappingURL=ETabs.vue_vue_type_script_setup_true_lang.js.map

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","LinkNav","_normalizeClass","_withCtx","_createTextVNode","_toDisplayString","_createElementBlock","_createCommentVNode","_unref","_createVNode","_Fragment","_renderList","_renderSlot","LinkNav_default","_hoisted_1","_hoisted_2","ETabs_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","groups","computed","flat","g","isNav","i","model","useModel","config","useConfig","current","dir","list","ref","reveal","nextTick","el","tab","calm","a","b","smooth","onMounted","watch","openBlock","createBlock","normalizeClass","withCtx","createTextVNode","toDisplayString","item","createCommentVNode","createElementBlock","unref","TabsRoot","_cache","$event","createVNode","TabsList","Fragment","renderList","TabsTrigger","TabsContent","renderSlot","_ctx"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { LinkItem, LinkSection } from \"./LinkNav.vue\";\n\nexport interface TabItem extends LinkItem {\n  /** Names the tab's slot, and is the value of `v-model`. Not needed for a link. */\n  id?: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n\nexport type TabSection = LinkSection<TabItem>;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch, type Component } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport LinkNav from \"./LinkNav.vue\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The tabs, in order. Two to five for panels; give them `href` or `to` to make a row or column of links. */\n    items?: TabItem[];\n    /** Links in labelled groups, instead of `items`. */\n    sections?: TabSection[];\n    /** `vertical` stacks the links with a rule down the start edge, for a sidebar or an outline. Links only. */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Shorter rows and smaller words, for a long list of links. */\n    dense?: boolean;\n    /** The landmark's name when the tabs are links. Defaults to \"Main\". */\n    label?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink`. */\n    linkComponent?: string | Component;\n  }>(),\n  { orientation: \"horizontal\", linkComponent: \"a\" },\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 groups = computed<TabSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\nconst flat = computed(() => groups.value.flatMap((g) => g.items));\nconst isNav = computed(() => flat.value.some((i) => i.href !== undefined || i.to !== undefined));\n\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 (!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  <LinkNav\n    v-if=\"isNav\"\n    class=\"e-tabs e-tabs--links\"\n    :class=\"[orientation === 'vertical' && 'e-tabs--vertical', dense && 'e-tabs--dense']\"\n    :groups=\"groups\"\n    :label=\"label\"\n    :link-component=\"linkComponent\"\n    item-class=\"e-tab\"\n    heading-class=\"e-tabs-heading\"\n    list-class=\"e-tablist\"\n  >\n    <template #item=\"{ item }\">\n      {{ item.label }}\n      <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n    </template>\n  </LinkNav>\n  <TabsRoot v-else class=\"e-tabs\" :model-value=\"current\" :dir=\"dir\" @update:model-value=\"model = String($event)\">\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    gap: var(--e-space-1);\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    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  .e-tab + .e-tab::before,\n  .e-tablist > li + li > .e-tab::before {\n    content: \"\";\n    position: absolute;\n    inset-block: 30%;\n    inset-inline-start: calc(var(--e-space-1) * -0.5);\n    border-inline-start: var(--e-stroke-hair) solid color-mix(in srgb, var(--e-border) 40%, transparent);\n  }\n\n  .e-tablist:has(> li) {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-tablist > li {\n    display: contents;\n  }\n\n  a.e-tab {\n    text-decoration: none;\n  }\n\n  .e-tabs--dense .e-tab {\n    height: 2.25rem;\n    font-size: var(--e-text-sm);\n  }\n\n  .e-tabs--vertical .e-tablist {\n    flex-direction: column;\n    gap: 0;\n    overflow: visible;\n    border-bottom: 0;\n    border-inline-start: var(--e-stroke-edge) solid var(--e-border);\n  }\n\n  .e-tabs--vertical .e-tab {\n    background-clip: padding-box;\n    justify-content: flex-start;\n    height: auto;\n    min-height: 2rem;\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n    padding-block: var(--e-space-1);\n    border-bottom: 0;\n    border-inline-start: 3px solid transparent;\n    line-height: 1.35;\n    text-align: start;\n  }\n\n  .e-tabs--vertical .e-tablist > li > .e-tab::before {\n    content: none;\n  }\n\n  .e-tabs--vertical.e-tabs--dense .e-tab {\n    min-height: 2.25rem;\n  }\n\n  .e-tabs--vertical .e-tab[aria-current=\"page\"] {\n    border-inline-start-color: var(--e-primary);\n    background: var(--e-surface-tint);\n  }\n\n  .e-tab {\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);\n    border: 0;\n    border-bottom: 3px solid transparent;\n    background: transparent;\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  }\n\n  .e-tab:hover {\n    color: var(--e-ink);\n    background: var(--e-surface-tint);\n  }\n\n  .e-tab[aria-selected=\"true\"],\n  .e-tab[aria-current=\"page\"] {\n    color: var(--e-ink);\n    border-bottom-color: var(--e-primary);\n    font-weight: 600;\n  }\n\n  .e-tab:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n    border-radius: var(--e-radius-sm);\n  }\n\n  .e-tab-count {\n    min-width: 22px;\n    padding: 0 6px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n    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    .e-tab[aria-current=\"page\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,IAAMqB,IAAQC,GAwBRC,IAASC,QAA6BH,EAAM,YAAY,CAAC,EAAE,OAAOA,EAAM,SAAS,CAAC,EAAE,CAAC,CAAC,GACtFI,IAAOD,QAAeD,EAAO,MAAM,SAAS,MAAMG,EAAE,KAAK,CAAC,GAC1DC,IAAQH,QAAeC,EAAK,MAAM,MAAM,MAAMG,EAAE,SAAS,KAAA,KAAaA,EAAE,OAAO,KAAA,CAAS,CAAC,GAEzFC,IAAQ7B,EAAmBsB,GAAA,YAAC,GAE5BS,IAASC,EAAU,GACnBC,IAAUT,QAAeK,EAAM,SAASJ,EAAK,MAAM,EAAE,EAAE,EAAE,GACzDS,IAAMV,QACJO,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,IAAI,CAACA,KAAM,CAACC,KAAOD,EAAG,eAAeA,EAAG,aAAa;GACrD,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,SAKvBV,EAAA,SADR1B,EAAA,GAAAC,EAeUC,GAAA;;GAbR,OAAKC,EAAA,CAAC,wBAAsB,CACnBkB,EAAA,gBAAW,cAAA,oBAAuCA,EAAA,SAAK,eAAA,CAAA,CAAA;GAC/D,QAAQC,EAAA;GACR,OAAOD,EAAA;GACP,kBAAgBA,EAAA;GACjB,cAAW;GACX,iBAAc;GACd,cAAW;;GAEA,MAAIjB,GACG,EADC,cAAI,CAClBC,EAAAC,EAAA8C,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,SAAK,O,aAAtBpD,EAAA,GAAAO,EAA2E,QAA3EQ,GAA2ET,EAApB8C,EAAK,KAAK,GAAA,CAAA,E;;;;;;;E,OAGrEpD,EAAA,GAAAC,EAUWQ,EAAA+C,CAAA,GAAA;;GAVM,OAAM;GAAU,eAAaxB,EAAA;GAAU,KAAKC,EAAA;GAAM,uBAAkB,AAAAwB,EAAA,QAAA,MAAE,EAAA,QAAQ,OAAOC,CAAM;;GAC1G,SAAAtD,QAKW,CALXM,EAKWD,EAAAmD,CAAA,GAAA;IALG,SAAA;IAAJ,KAAI1B;IAAO,OAAM;;IACZ,SAAA9B,QAAoB,EAAjCJ,EAAA,EAAA,GAAAO,EAGcI,GAAA,MAAAC,EAHcY,EAAA,QAAR,OAApBxB,EAAA,GAAAC,EAGcQ,EAAAsD,CAAA,GAAA;KAHqB,KAAKX,EAAK;KAAK,OAAOA,EAAK;KAAK,OAAM;;KACvE,SAAAhD,QAAgB,CAAbC,EAAAC,EAAA8C,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,SAAK,O,aAAtBpD,EAAA,GAAAO,EAA2E,QAA3ES,GAA2EV,EAApB8C,EAAK,KAAK,GAAA,CAAA,E;;;;G,UAGrEpD,EAAA,EAAA,GAAAO,EAEcI,GAAA,MAAAC,EAFcY,EAAA,QAAR,OAApBxB,EAAA,GAAAC,EAEcQ,EAAAuD,CAAA,GAAA;IAFqB,KAAKZ,EAAK;IAAK,OAAOA,EAAK;IAAK,OAAM;;IACvE,SAAAhD,QAA6E,CAA7ES,EAA6EqD,EAAA,QAAhEd,EAAK,IAAE,EAAU,QAAI,SAA2C,CAAzCvC,EAAkCqD,EAAA,QAAA,SAAA,EAAR,QAAI,CAAA,C"}
+{"version":3,"file":"ETabs.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_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","_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, with short labels. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\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 (!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 class=\"e-tabs\" :model-value=\"current\" :dir=\"dir\" @update:model-value=\"model = String($event)\">\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    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 underneath. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\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);\n    border: var(--e-stroke-edge) solid var(--e-bc);\n    border-radius: 0;\n    outline: var(--e-stroke-edge) solid var(--e-bc);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: transparent;\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  }\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\n    z-index: var(--e-z-sticky);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\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  .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-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    outline: var(--e-stroke-hair) solid var(--e-primary);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    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,IAAMiB,IAAQC,GAWRC,IAAOC,QAAeH,EAAM,SAAS,CAAC,CAAC,GAGvCI,IAAQrB,EAAmBkB,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,IAAI,CAACA,KAAM,CAACC,KAAOD,EAAG,eAAeA,EAAG,aAAa;GACrD,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/B5B,EAAA,GAAAC,EAUWC,EAAAuC,CAAA,GAAA;GAVD,OAAM;GAAU,eAAajB,EAAA;GAAU,KAAKC,EAAA;GAAM,uBAAkB,AAAAiB,EAAA,QAAA,MAAE,EAAA,QAAQ,OAAOC,CAAM;;GACnG,SAAAxC,QAKW,CALXC,EAKWF,EAAA4C,CAAA,GAAA;IALG,SAAA;IAAJ,KAAIpB;IAAO,OAAM;;IACZ,SAAAvB,QAAoB,EAAjCH,EAAA,EAAA,GAAAK,EAGcC,GAAA,MAAAC,EAHcW,EAAA,QAAR,OAApBlB,EAAA,GAAAC,EAGcC,EAAAgD,CAAA,GAAA;KAHqB,KAAKC,EAAK;KAAK,OAAOA,EAAK;KAAI,OAAM;;KACtE,SAAAhD,QAAgB,CAAbK,EAAAC,EAAA0C,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,SAAK,O,aAAtBnD,EAAA,GAAAK,EAA2E,QAA3EO,GAA2EH,EAApB0C,EAAK,KAAK,GAAA,CAAA,E;;;;G,UAGrEnD,EAAA,EAAA,GAAAK,EAEcC,GAAA,MAAAC,EAFcW,EAAA,QAAR,OAApBlB,EAAA,GAAAC,EAEcC,EAAAqD,CAAA,GAAA;IAFqB,KAAKJ,EAAK;IAAK,OAAOA,EAAK;IAAI,OAAM;;IACtE,SAAAhD,QAA4E,CAA5EQ,EAA4E8C,EAAA,QAA/DN,EAAK,IAAE,EAAS,QAAI,SAA2C,CAAzCxC,EAAkC8C,EAAA,QAAA,SAAA,EAAR,QAAI,CAAA,C"}

package/dist/components/Tabs/index.d.ts

@@ -1,2 +1,2 @@
 export { default as ETabs } from './ETabs.vue.js';
-export type { TabItem, TabSection } from './ETabs.vue.js';
+export type { TabItem } from './ETabs.vue.js';