@eos-ui/vue 0.1.1 → 0.2.1

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';

package/dist/components/Text/EText.js.map

@@ -1 +1 @@
-{"version":3,"file":"EText.js","names":["_sfc_main","EText_vue_vue_type_script_setup_true_lang_default","EText_default"],"sources":["../../../src/components/Text/EText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** `body` 16px, `deck` 18px for the one-sentence reading of a statement, `small` 14px. */\n    variant?: \"body\" | \"deck\" | \"small\";\n    /** Secondary copy, in the muted colour. */\n    muted?: boolean;\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { variant: \"body\", as: \"p\" },\n);\n\ndefineSlots<{\n  /** The text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-text\" :class=\"[`e-text--${variant}`, muted && 'e-text--muted']\"><slot /></component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-text {\n    margin: 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md) / 24px var(--e-font-sans);\n    color: var(--e-ink);\n    text-wrap: pretty;\n  }\n\n  .e-text--deck {\n    font-size: var(--e-text-lg);\n    line-height: 26px;\n  }\n\n  .e-text--small {\n    font-size: var(--e-text-sm);\n    line-height: 20px;\n  }\n\n  .e-text--muted {\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EText.js","names":["_sfc_main","EText_vue_vue_type_script_setup_true_lang_default","EText_default"],"sources":["../../../src/components/Text/EText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** 14px, for captions and fine print. */\n    small?: boolean;\n    /** 18px, for the one-sentence reading of a statement. */\n    large?: boolean;\n    /** Secondary copy, in the muted colour. */\n    muted?: boolean;\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { as: \"p\" },\n);\n\ndefineSlots<{\n  /** The text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-text\" :class=\"[small && 'e-text--small', large && 'e-text--large', muted && 'e-text--muted']\"><slot /></component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-text {\n    margin: 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md) / 24px var(--e-font-sans);\n    color: var(--e-ink);\n    text-wrap: pretty;\n  }\n\n  .e-text--large {\n    font-size: var(--e-text-lg);\n    line-height: 26px;\n  }\n\n  .e-text--small {\n    font-size: var(--e-text-sm);\n    line-height: 20px;\n  }\n\n  .e-text--muted {\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Text/EText.vue.d.ts

@@ -1,6 +1,8 @@
 type __VLS_Props = {
-    /** `body` 16px, `deck` 18px for the one-sentence reading of a statement, `small` 14px. */
-    variant?: "body" | "deck" | "small";
+    /** 14px, for captions and fine print. */
+    small?: boolean;
+    /** 18px, for the one-sentence reading of a statement. */
+    large?: boolean;
     /** Secondary copy, in the muted colour. */
     muted?: boolean;
     /** The element to render. */
@@ -11,7 +13,6 @@ type __VLS_Slots = {
     default(): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "body" | "small" | "deck";
     as: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/Text/EText.vue_vue_type_script_setup_true_lang.js

@@ -4,12 +4,17 @@ import { createBlock as e, defineComponent as t, normalizeClass as n, openBlock
 var s = /*@__PURE__*/ t({
 	__name: "EText",
 	props: {
-		variant: { default: "body" },
+		small: { type: Boolean },
+		large: { type: Boolean },
 		muted: { type: Boolean },
 		as: { default: "p" }
 	},
 	setup(t) {
-		return (s, c) => (r(), e(a(t.as), { class: n(["e-text", [`e-text--${t.variant}`, t.muted && "e-text--muted"]]) }, {
+		return (s, c) => (r(), e(a(t.as), { class: n(["e-text", [
+			t.small && "e-text--small",
+			t.large && "e-text--large",
+			t.muted && "e-text--muted"
+		]]) }, {
 			default: o(() => [i(s.$slots, "default")]),
 			_: 3
 		}, 8, ["class"]));

package/dist/components/Text/EText.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EText.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","EText_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","resolveDynamicComponent","__props","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Text/EText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** `body` 16px, `deck` 18px for the one-sentence reading of a statement, `small` 14px. */\n    variant?: \"body\" | \"deck\" | \"small\";\n    /** Secondary copy, in the muted colour. */\n    muted?: boolean;\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { variant: \"body\", as: \"p\" },\n);\n\ndefineSlots<{\n  /** The text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-text\" :class=\"[`e-text--${variant}`, muted && 'e-text--muted']\"><slot /></component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-text {\n    margin: 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md) / 24px var(--e-font-sans);\n    color: var(--e-ink);\n    text-wrap: pretty;\n  }\n\n  .e-text--deck {\n    font-size: var(--e-text-lg);\n    line-height: 26px;\n  }\n\n  .e-text--small {\n    font-size: var(--e-text-sm);\n    line-height: 20px;\n  }\n\n  .e-text--muted {\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;E,kBAsBEA,EAAA,GAAAC,EAAiHC,EAAjGQ,EAAA,EAAE,GAAA,EAAE,OAAKP,EAAA,CAAC,UAAQ,CAAA,WAAqBO,EAAA,WAAWA,EAAA,SAAK,eAAA,CAAA,CAAA,E;GAAsB,SAAAN,QAAQ,CAARC,EAAQS,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EText.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","EText_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","resolveDynamicComponent","__props","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Text/EText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** 14px, for captions and fine print. */\n    small?: boolean;\n    /** 18px, for the one-sentence reading of a statement. */\n    large?: boolean;\n    /** Secondary copy, in the muted colour. */\n    muted?: boolean;\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { as: \"p\" },\n);\n\ndefineSlots<{\n  /** The text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-text\" :class=\"[small && 'e-text--small', large && 'e-text--large', muted && 'e-text--muted']\"><slot /></component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-text {\n    margin: 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md) / 24px var(--e-font-sans);\n    color: var(--e-ink);\n    text-wrap: pretty;\n  }\n\n  .e-text--large {\n    font-size: var(--e-text-lg);\n    line-height: 26px;\n  }\n\n  .e-text--small {\n    font-size: var(--e-text-sm);\n    line-height: 20px;\n  }\n\n  .e-text--muted {\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;E,kBAwBEA,EAAA,GAAAC,EAA+IC,EAA/HQ,EAAA,EAAE,GAAA,EAAE,OAAKP,EAAA,CAAC,UAAQ;GAAUO,EAAA,SAAK;GAAqBA,EAAA,SAAK;GAAqBA,EAAA,SAAK;EAAA,CAAA,CAAA,E;GAAsB,SAAAN,QAAQ,CAARC,EAAQS,EAAA,QAAA,SAAA,C"}

package/dist/components/TextField/ETextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETextField.js","names":["_sfc_main","ETextField_vue_vue_type_script_setup_true_lang_default","ETextField_default"],"sources":["../../../src/components/TextField/ETextField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"./input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** The input type. */\n  type?: string;\n  /** A unit before the value, such as $. */\n  prefix?: string;\n  /** A unit after the value, such as USD. */\n  suffix?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: props.type || \"text\",\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        v-if=\"prefix || suffix\"\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post\" aria-hidden=\"true\">{{ suffix }}</span>\n      </div>\n      <input v-else ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-input[type=\"number\"],\n  .e-input[inputmode=\"numeric\"],\n  .e-input[inputmode=\"decimal\"] {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ETextField.js","names":["_sfc_main","ETextField_vue_vue_type_script_setup_true_lang_default","ETextField_default"],"sources":["../../../src/components/TextField/ETextField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"./input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. The placeholder is an example, never the label. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** The input type. @default \"text\" */\n  type?: string;\n  /** A unit before the value, such as `$`. Hidden from screen readers. */\n  prefix?: string;\n  /** A unit after the value, such as `USD`. Hidden from screen readers. */\n  suffix?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the field. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: props.type || \"text\",\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        v-if=\"prefix || suffix\"\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post\" aria-hidden=\"true\">{{ suffix }}</span>\n      </div>\n      <input v-else ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-input[type=\"number\"],\n  .e-input[inputmode=\"numeric\"],\n  .e-input[inputmode=\"decimal\"] {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/TextField/ETextField.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    /** The visible label, a mono kicker above the input. */
+    /** The visible label, a mono kicker above the input. The placeholder is an example, never the label. */
     label: string;
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
@@ -9,21 +9,23 @@ type __VLS_Props = {
     error?: string;
     /** An example, never the label. */
     placeholder?: string;
-    /** The input type. */
+    /** The input type. @default "text" */
     type?: string;
-    /** A unit before the value, such as $. */
+    /** A unit before the value, such as `$`. Hidden from screen readers. */
     prefix?: string;
-    /** A unit after the value, such as USD. */
+    /** A unit after the value, such as `USD`. Hidden from screen readers. */
     suffix?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables the field. */
     disabled?: boolean;
-    /** The id of the input; the label points at it. Generated when left out. */
+    /** The id of the input; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** The text. */
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;