@eos-ui/vue 0.0.0-stage → 0.1.1

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

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

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

@@ -0,0 +1,2 @@
+export { default as EStepper } from './EStepper.vue.js';
+export type { Step } from './EStepper.vue.js';

package/dist/components/Surface/ESurface.js

@@ -0,0 +1,8 @@
+import e from "./ESurface.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                         */
+//#region src/components/Surface/ESurface.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ESurface.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    /** The element to render, `div` by default. */
+    as?: string;
+    /** Padding: `sm`, `md` or `lg`. Omit for none. */
+    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. */
+    clip?: boolean;
+};
+type __VLS_Slots = {
+    /** The content of the card. */
+    default(): unknown;
+    /** 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. */
+    actions(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,30 @@
+/* empty css                */
+import e from "../Actions/EActions.js";
+import { Fragment as t, computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, withCtx as f } from "vue";
+//#region src/components/Surface/ESurface.vue?vue&type=script&setup=true&lang.ts
+var p = /*@__PURE__*/ s({
+	__name: "ESurface",
+	props: {
+		as: { default: "div" },
+		pad: {},
+		tone: {},
+		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,
+				bar: ""
+			}, {
+				default: f(() => [u(n.$slots, "actions")]),
+				_: 3
+			}, 8, ["as"])], 64)) : u(n.$slots, "default", {}, void 0, void 0, 1)]),
+			_: 3
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=ESurface.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+export { default as ESurface } from './ESurface.vue.js';

package/dist/components/Switch/ESwitch.js

@@ -0,0 +1,8 @@
+import e from "./ESwitch.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                        */
+//#region src/components/Switch/ESwitch.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ESwitch.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    /** The setting, named by what it does. */
+    label: string;
+    /** A line of detail under the label. */
+    description?: string;
+    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. */
+    id?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,67 @@
+/* empty css                */
+import { useFieldAttrs as e } from "../../composables/useFieldAttrs.js";
+import { useUid as t } from "../../composables/useUid.js";
+/* empty css                 */
+import { createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useModel as h } from "vue";
+//#region src/components/Switch/ESwitch.vue?vue&type=script&setup=true&lang.ts
+var g = ["for"], _ = [
+	"id",
+	"name",
+	"value",
+	"checked",
+	"disabled"
+], v = { class: "e-choice-text" }, y = {
+	key: 0,
+	class: "e-choice-desc"
+}, b = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "ESwitch",
+	props: /*@__PURE__*/ s({
+		label: {},
+		description: {},
+		disabled: { type: Boolean },
+		name: {},
+		value: {},
+		id: {}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(o, { expose: s }) {
+		let b = o, x = h(o, "modelValue"), S = t(() => b.id), C = f(null), w = e();
+		return s({
+			input: C,
+			focus: () => C.value?.focus()
+		}), (e, t) => (d(), r("label", {
+			class: l(["e-choice e-switch", [{ "e-choice--disabled": o.disabled }, m(w).wrapper().class]]),
+			style: u(m(w).wrapper().style),
+			for: m(S)
+		}, [
+			i("input", c({
+				id: m(S),
+				ref_key: "input",
+				ref: C,
+				type: "checkbox",
+				role: "switch",
+				class: "e-switch-input",
+				name: o.name,
+				value: o.value,
+				checked: x.value,
+				disabled: o.disabled
+			}, m(w).input(), { onChange: t[0] ||= (e) => x.value = e.target.checked }), null, 16, _),
+			t[1] ||= i("span", {
+				class: "e-switch-track",
+				"aria-hidden": "true"
+			}, null, -1),
+			i("span", v, [a(p(o.label) + " ", 1), o.description ? (d(), r("span", y, p(o.description), 1)) : n("", !0)])
+		], 14, g));
+	}
+});
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=ESwitch.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+export { default as ESwitch } from './ESwitch.vue.js';

package/dist/components/Tabs/ETabs.js

@@ -0,0 +1,8 @@
+import e from "./ETabs.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                      */
+//#region src/components/Tabs/ETabs.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ETabs.js.map

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

@@ -0,0 +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":""}

package/dist/components/Tabs/ETabs.vue.d.ts

@@ -0,0 +1,62 @@
+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;
+    /** 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. */
+    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;
+} & {
+    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. */
+    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;
+} & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    orientation: "vertical" | "horizontal";
+    linkComponent: string | Component;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    [id: string]: ((props: {
+        item: TabItem;
+    }) => unknown) | undefined;
+    /** The panel of any tab that has no slot of its own. */
+    panel?(props: {
+        item: TabItem;
+    }): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,92 @@
+/* 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";
+//#region src/components/Tabs/ETabs.vue?vue&type=script&setup=true&lang.ts
+var D = {
+	key: 0,
+	class: "e-tab-count"
+}, O = {
+	key: 0,
+	class: "e-tab-count"
+}, k = /*@__PURE__*/ l({
+	__name: "ETabs",
+	props: /*@__PURE__*/ u({
+		items: {},
+		sections: {},
+		orientation: { default: "horizontal" },
+		dense: { type: Boolean },
+		label: {},
+		linkComponent: { default: "a" }
+	}, {
+		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\"]");
+			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({
+				left: i.left + i.width / 2 - (a.left + a.width / 2),
+				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,
+			class: "e-tabs",
+			"model-value": P.value,
+			dir: F.value,
+			"onUpdate:modelValue": r[0] ||= (e) => M.value = String(e)
+		}, {
+			default: S(() => [c(y(w), {
+				ref_key: "list",
+				ref: I,
+				class: "e-tablist"
+			}, {
+				default: S(() => [(m(!0), o(n, null, g(A.value, (e) => (m(), i(y(E), {
+					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))]),
+					_: 2
+				}, 1032, ["value"]))), 128))]),
+				_: 1
+			}, 512), (m(!0), o(n, null, g(A.value, (t) => (m(), i(y(C), {
+				key: t.id,
+				value: t.id,
+				class: "e-tabpanel"
+			}, {
+				default: S(() => [_(e.$slots, t.id, { item: t }, () => [_(e.$slots, "panel", { item: t })])]),
+				_: 2
+			}, 1032, ["value"]))), 128))]),
+			_: 3
+		}, 8, ["model-value", "dir"]));
+	}
+});
+//#endregion
+export { k 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

@@ -0,0 +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"}

package/dist/components/Tabs/LinkNav.js

@@ -0,0 +1,8 @@
+import e, { linkAttrs as t } from "./LinkNav.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                        */
+//#region src/components/Tabs/LinkNav.vue
+var n = e;
+//#endregion
+export { n as default, t as linkAttrs };
+
+//# sourceMappingURL=LinkNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkNav.js","names":["_sfc_main","LinkNav_vue_vue_type_script_setup_true_lang_default","LinkNav_default","linkAttrs"],"sources":["../../../src/components/Tabs/LinkNav.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface LinkItem {\n  /** The words for this destination. */\n  label: string;\n  /** Where it goes. Defaults to `#`. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n  /** The page the person is on. */\n  current?: boolean;\n}\n\nexport interface LinkSection<T extends LinkItem = LinkItem> {\n  /** A small heading over the section. Leave it out for a section that needs none. */\n  label?: string;\n  /** The destinations of the section, in order. */\n  items: T[];\n}\n\nexport const linkAttrs = (item: LinkItem) => ({\n  ...(item.to !== undefined ? { to: item.to } : { href: item.href ?? \"#\" }),\n  ...(item.current && { \"aria-current\": \"page\" }),\n});\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends LinkItem\">\nimport type { Component } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  groups: LinkSection<T>[];\n  label?: string;\n  linkComponent: string | Component;\n  itemClass: string;\n  headingClass: string;\n  listClass?: string;\n}>();\n\ndefineSlots<{\n  item(props: { item: T }): unknown;\n}>();\n\nconst t = useMessages();\nconst uid = useUid();\n</script>\n\n<template>\n  <nav :aria-label=\"label || t('mainNav')\">\n    <template v-for=\"(group, g) in groups\" :key=\"g\">\n      <p v-if=\"group.label\" :id=\"`${uid}-${g}`\" :class=\"headingClass\">{{ group.label }}</p>\n      <ul :class=\"listClass\" :aria-labelledby=\"group.label ? `${uid}-${g}` : undefined\">\n        <li v-for=\"(item, i) in group.items\" :key=\"i\">\n          <component :is=\"linkComponent\" :class=\"itemClass\" v-bind=\"linkAttrs(item)\">\n            <slot name=\"item\" :item=\"item\" />\n          </component>\n        </li>\n      </ul>\n    </template>\n  </nav>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tabs-heading,\n  .e-nav-heading {\n    margin: var(--e-space-6) 0 var(--e-space-2);\n    padding-inline: var(--e-space-3);\n    font: 600 var(--e-text-xs) / 1.2 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-ink);\n  }\n\n  .e-tabs--links > :first-child,\n  .e-nav > :first-child {\n    margin-top: 0;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Tabs/LinkNav.vue.d.ts

@@ -0,0 +1,53 @@
+import { Component } from 'vue';
+export interface LinkItem {
+    /** The words for this destination. */
+    label: string;
+    /** Where it goes. Defaults to `#`. */
+    href?: string;
+    /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */
+    to?: unknown;
+    /** The page the person is on. */
+    current?: boolean;
+}
+export interface LinkSection<T extends LinkItem = LinkItem> {
+    /** A small heading over the section. Leave it out for a section that needs none. */
+    label?: string;
+    /** The destinations of the section, in order. */
+    items: T[];
+}
+export declare const linkAttrs: (item: LinkItem) => {
+    "aria-current"?: string | undefined;
+    to: {} | null;
+} | {
+    "aria-current"?: string | undefined;
+    href: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends LinkItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        groups: LinkSection<T>[];
+        label?: string;
+        linkComponent: string | Component;
+        itemClass: string;
+        headingClass: string;
+        listClass?: string;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        item(props: {
+            item: T;
+        }): unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,37 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { useUid as t } from "../../composables/useUid.js";
+import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+//#region src/components/Tabs/LinkNav.vue?vue&type=script&setup=true&lang.ts
+var _ = ["aria-label"], v = ["id"], y = ["aria-labelledby"], b = (e) => ({
+	...e.to === void 0 ? { href: e.href ?? "#" } : { to: e.to },
+	...e.current && { "aria-current": "page" }
+}), x = /*@__PURE__*/ s({
+	__name: "LinkNav",
+	props: {
+		groups: {},
+		label: {},
+		linkComponent: {},
+		itemClass: {},
+		headingClass: {},
+		listClass: {}
+	},
+	setup(s) {
+		let x = e(), S = t();
+		return (e, t) => (u(), a("nav", { "aria-label": s.label || h(x)("mainNav") }, [(u(!0), a(n, null, d(s.groups, (t, _) => (u(), a(n, { key: _ }, [t.label ? (u(), a("p", {
+			key: 0,
+			id: `${h(S)}-${_}`,
+			class: l(s.headingClass)
+		}, m(t.label), 11, v)) : i("", !0), o("ul", {
+			class: l(s.listClass),
+			"aria-labelledby": t.label ? `${h(S)}-${_}` : void 0
+		}, [(u(!0), a(n, null, d(t.items, (t, n) => (u(), a("li", { key: n }, [(u(), r(p(s.linkComponent), c({ class: s.itemClass }, { ref_for: !0 }, b(t)), {
+			default: g(() => [f(e.$slots, "item", { item: t })]),
+			_: 2
+		}, 1040, ["class"]))]))), 128))], 10, y)], 64))), 128))], 8, _));
+	}
+});
+//#endregion
+export { x as default, b as linkAttrs };
+
+//# sourceMappingURL=LinkNav.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkNav.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_normalizeClass","_toDisplayString","_createCommentVNode","_createElementVNode","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_renderSlot","_hoisted_1","_hoisted_2","_hoisted_3","linkAttrs","item","LinkNav_vue_vue_type_script_setup_true_lang_default","t","useMessages","uid","useUid","openBlock","createElementBlock","__props","unref","Fragment","renderList","g","group","normalizeClass","toDisplayString","createCommentVNode","createElementVNode","i","createBlock","resolveDynamicComponent","mergeProps","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Tabs/LinkNav.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface LinkItem {\n  /** The words for this destination. */\n  label: string;\n  /** Where it goes. Defaults to `#`. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n  /** The page the person is on. */\n  current?: boolean;\n}\n\nexport interface LinkSection<T extends LinkItem = LinkItem> {\n  /** A small heading over the section. Leave it out for a section that needs none. */\n  label?: string;\n  /** The destinations of the section, in order. */\n  items: T[];\n}\n\nexport const linkAttrs = (item: LinkItem) => ({\n  ...(item.to !== undefined ? { to: item.to } : { href: item.href ?? \"#\" }),\n  ...(item.current && { \"aria-current\": \"page\" }),\n});\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends LinkItem\">\nimport type { Component } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  groups: LinkSection<T>[];\n  label?: string;\n  linkComponent: string | Component;\n  itemClass: string;\n  headingClass: string;\n  listClass?: string;\n}>();\n\ndefineSlots<{\n  item(props: { item: T }): unknown;\n}>();\n\nconst t = useMessages();\nconst uid = useUid();\n</script>\n\n<template>\n  <nav :aria-label=\"label || t('mainNav')\">\n    <template v-for=\"(group, g) in groups\" :key=\"g\">\n      <p v-if=\"group.label\" :id=\"`${uid}-${g}`\" :class=\"headingClass\">{{ group.label }}</p>\n      <ul :class=\"listClass\" :aria-labelledby=\"group.label ? `${uid}-${g}` : undefined\">\n        <li v-for=\"(item, i) in group.items\" :key=\"i\">\n          <component :is=\"linkComponent\" :class=\"itemClass\" v-bind=\"linkAttrs(item)\">\n            <slot name=\"item\" :item=\"item\" />\n          </component>\n        </li>\n      </ul>\n    </template>\n  </nav>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tabs-heading,\n  .e-nav-heading {\n    margin: var(--e-space-6) 0 var(--e-space-2);\n    padding-inline: var(--e-space-3);\n    font: 600 var(--e-text-xs) / 1.2 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-ink);\n  }\n\n  .e-tabs--links > :first-child,\n  .e-nav > :first-child {\n    margin-top: 0;\n  }\n}\n</style>\n"],"mappings":";;;;;A,6DAmBaiB,KAAa,OAAoB;CAC5C,GAAIC,EAAK,OAAO,KAAA,IAA8B,EAAE,MAAMA,EAAK,QAAQ,IAAI,IAA3C,EAAE,IAAIA,EAAK,GAAG;CAC1C,GAAIA,EAAK,WAAW,EAAE,gBAAgB,OAAO;AAC/C,I;;;;;;;;;;;EAsBA,IAAME,IAAIC,EAAY,GAChBC,IAAMC,EAAO;E,kBAIjBvB,EAAA,GAAAC,EAWM,OAAA,EAXA,cAAYyB,EAAA,SAASxB,EAAAkB,CAAA,CAAC,CAAA,SAAA,E,KAC1BpB,EAAA,EAAA,GAAAC,EASWE,GAAA,MAAAC,EAToBsB,EAAA,SAAb,GAAO,OAAoB1B,EAAA,GAAAC,EAAAE,GAAA,EAAA,KAAA2B,EAAC,GAAA,CACnCC,EAAM,SAAf/B,EAAA,GAAAC,EAAqF,KAAA;;GAA9D,IAAE,GAAKC,EAAAoB,CAAA,EAAG,GAAIQ;GAAM,OAAKzB,EAAEqB,EAAA,YAAY;EAAK,GAAApB,EAAAyB,EAAM,KAAK,GAAA,IAAAhB,CAAA,K,WAC9EP,EAMK,MAAA;GANA,OAAKH,EAAEqB,EAAA,SAAS;GAAG,mBAAiBK,EAAM,QAAK,GAAM7B,EAAAoB,CAAA,EAAG,GAAIQ,MAAM,KAAA;E,KACrE9B,EAAA,EAAA,GAAAC,EAIKE,GAAA,MAAAC,EAJmB2B,EAAM,QAAlB,GAAM,OAAlB/B,EAAA,GAAAC,EAIK,MAAA,EAJiC,KAAKmC,EAAC,GAAA,EAC1CpC,EAAA,GAAAS,EAEYC,EAFIgB,EAAA,aAAa,GAA7Bf,EAEY,EAFoB,OAAOe,EAAA,UAAS,GAAA,EAAA,SAAA,GAAA,GAAUT,EAAUC,CAAI,CAAA,GAAA;GACtE,SAAAN,QAAiC,CAAjCC,EAAiC6B,EAAA,QAAA,QAAA,EAAR,QAAI,CAAA,C"}

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

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

package/dist/components/Text/EText.js

@@ -0,0 +1,8 @@
+import e from "./EText.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                      */
+//#region src/components/Text/EText.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=EText.js.map

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

@@ -0,0 +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":""}