@eos-ui/vue 0.2.0 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"ETabs.js","names":["_sfc_main","ETabs_vue_vue_type_script_setup_true_lang_default","ETabs_default"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five, 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":""}
+{"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  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n}>();\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\" :class=\"{ 'e-tabs--fill': fill }\" :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-tabs--fill .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: var(--e-space-1);\n  }\n\n  .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

@@ -11,6 +11,8 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     /** 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[];
+    /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */
+    fill?: boolean;
 } & {
     /** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */
     modelValue?: string;
@@ -19,6 +21,8 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
 }, string, import('vue').PublicProps, Readonly<{
     /** 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[];
+    /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */
+    fill?: boolean;
 } & {
     /** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */
     modelValue?: string;

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

@@ -1,23 +1,26 @@
 /* empty css                */
 import { useConfig as e } from "../../config.js";
-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";
+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, normalizeClass as d, onMounted as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useModel as y, watch as b, withCtx as x } from "vue";
+import { TabsContent as S, TabsList as C, TabsRoot as w, TabsTrigger as T } from "reka-ui";
 //#region src/components/Tabs/ETabs.vue?vue&type=script&setup=true&lang.ts
-var T = {
+var E = {
 	key: 0,
 	class: "e-tab-count"
-}, E = /*@__PURE__*/ c({
+}, D = /*@__PURE__*/ c({
 	__name: "ETabs",
-	props: /*@__PURE__*/ l({ items: {} }, {
+	props: /*@__PURE__*/ l({
+		items: {},
+		fill: { type: Boolean }
+	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
 	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) {
+		let l = c, D = n(() => l.items ?? []), O = y(c, "modelValue"), k = e(), A = n(() => O.value ?? D.value[0]?.id), j = n(() => k.dir ?? (typeof document < "u" && document.documentElement.dir === "rtl" ? "rtl" : "ltr")), M = m(null);
+		async function N(e) {
 			await u();
-			let t = j.value?.$el, n = t?.querySelector("[aria-selected=\"true\"]");
+			let t = M.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({
@@ -25,39 +28,43 @@ var T = {
 				behavior: e && !r ? "smooth" : "auto"
 			});
 		}
-		return d(() => M(!1)), y(k, () => M(!0)), (e, n) => (f(), r(_(C), {
-			class: "e-tabs",
-			"model-value": k.value,
-			dir: A.value,
-			"onUpdate:modelValue": n[0] ||= (e) => D.value = String(e)
+		return f(() => N(!1)), b(A, () => N(!0)), (e, n) => (p(), r(v(w), {
+			class: d(["e-tabs", { "e-tabs--fill": c.fill }]),
+			"model-value": A.value,
+			dir: j.value,
+			"onUpdate:modelValue": n[0] ||= (e) => O.value = String(e)
 		}, {
-			default: b(() => [s(_(S), {
+			default: x(() => [s(v(C), {
 				ref_key: "list",
-				ref: j,
+				ref: M,
 				class: "e-tablist"
 			}, {
-				default: b(() => [(f(!0), a(t, null, m(E.value, (e) => (f(), r(_(w), {
+				default: x(() => [(p(!0), a(t, null, h(D.value, (e) => (p(), r(v(T), {
 					key: e.id,
 					value: e.id,
 					class: "e-tab"
 				}, {
-					default: b(() => [o(g(e.label) + " ", 1), e.count == null ? i("", !0) : (f(), a("span", T, g(e.count), 1))]),
+					default: x(() => [o(_(e.label) + " ", 1), e.count == null ? i("", !0) : (p(), a("span", E, _(e.count), 1))]),
 					_: 2
 				}, 1032, ["value"]))), 128))]),
 				_: 1
-			}, 512), (f(!0), a(t, null, m(E.value, (t) => (f(), r(_(x), {
+			}, 512), (p(!0), a(t, null, h(D.value, (t) => (p(), r(v(S), {
 				key: t.id,
 				value: t.id,
 				class: "e-tabpanel"
 			}, {
-				default: b(() => [h(e.$slots, t.id, { item: t }, () => [h(e.$slots, "panel", { item: t })])]),
+				default: x(() => [g(e.$slots, t.id, { item: t }, () => [g(e.$slots, "panel", { item: t })])]),
 				_: 2
 			}, 1032, ["value"]))), 128))]),
 			_: 3
-		}, 8, ["model-value", "dir"]));
+		}, 8, [
+			"class",
+			"model-value",
+			"dir"
+		]));
 	}
 });
 //#endregion
-export { E as default };
+export { D 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","_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"}
+{"version":3,"file":"ETabs.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createVNode","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","_renderSlot","_hoisted_1","ETabs_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","flat","computed","model","useModel","config","useConfig","current","dir","list","ref","reveal","nextTick","el","tab","calm","a","b","smooth","onMounted","watch","openBlock","createBlock","unref","TabsRoot","normalizeClass","_cache","$event","withCtx","createVNode","TabsList","createElementBlock","Fragment","renderList","TabsTrigger","item","createTextVNode","toDisplayString","createCommentVNode","TabsContent","renderSlot","_ctx"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five, with short labels. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\n  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n}>();\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\" :class=\"{ 'e-tabs--fill': fill }\" :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-tabs--fill .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: var(--e-space-1);\n  }\n\n  .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,IAAMkB,IAAQC,GAaRC,IAAOC,QAAeH,EAAM,SAAS,CAAC,CAAC,GAGvCI,IAAQtB,EAAmBmB,GAAA,YAAC,GAE5BK,IAASC,EAAU,GACnBC,IAAUL,QAAeC,EAAM,SAASF,EAAK,MAAM,EAAE,EAAE,EAAE,GACzDO,IAAMN,QACJG,EAAO,QAAQ,OAAO,WAAa,OAAe,SAAS,gBAAgB,QAAQ,QAAQ,QAAQ,MAC3G,GAEMI,IAAOC,EAAiC,IAAI;EAElD,eAAeC,EAAO,GAAiB;GACrC,MAAMC,EAAS;GACf,IAAMC,IAAKJ,EAAK,OAAO,KACjBK,IAAMD,GAAI,cAA2B,0BAAwB;GACnE,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/B7B,EAAA,GAAAC,EAUWC,EAAAwC,CAAA,GAAA;GAVD,OAAKvC,EAAA,CAAC,UAAQ,EAAA,gBAA2Be,EAAA,KAAI,CAAA,CAAA;GAAK,eAAaO,EAAA;GAAU,KAAKC,EAAA;GAAM,uBAAkB,AAAAkB,EAAA,QAAA,MAAE,EAAA,QAAQ,OAAOC,CAAM;;GACrI,SAAAzC,QAKW,CALXC,EAKWH,EAAA8C,CAAA,GAAA;IALG,SAAA;IAAJ,KAAIrB;IAAO,OAAM;;IACZ,SAAAvB,QAAoB,EAAjCJ,EAAA,EAAA,GAAAM,EAGcC,GAAA,MAAAC,EAHcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAGcC,EAAAkD,CAAA,GAAA;KAHqB,KAAKC,EAAK;KAAK,OAAOA,EAAK;KAAI,OAAM;;KACtE,SAAAjD,QAAgB,CAAbK,EAAAC,EAAA2C,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,SAAK,O,aAAtBrD,EAAA,GAAAM,EAA2E,QAA3EO,GAA2EH,EAApB2C,EAAK,KAAK,GAAA,CAAA,E;;;;G,UAGrErD,EAAA,EAAA,GAAAM,EAEcC,GAAA,MAAAC,EAFcW,EAAA,QAAR,OAApBnB,EAAA,GAAAC,EAEcC,EAAAuD,CAAA,GAAA;IAFqB,KAAKJ,EAAK;IAAK,OAAOA,EAAK;IAAI,OAAM;;IACtE,SAAAjD,QAA4E,CAA5EQ,EAA4E+C,EAAA,QAA/DN,EAAK,IAAE,EAAS,QAAI,SAA2C,CAAzCzC,EAAkC+C,EAAA,QAAA,SAAA,EAAR,QAAI,CAAA,C"}

package/dist/style.css

@@ -58,7 +58,7 @@
   --e-measure: 62ch;
   --e-stroke-hair: 1px;
   --e-stroke-card: 1px;
-  --e-stroke-edge: 1.5px;
+  --e-stroke-edge: 1px;
   --e-stroke-focus: 2px;
   --e-focus-gap: 2px;
   --e-focus-gap-field: calc(-1 * var(--e-stroke-edge));
@@ -4881,6 +4881,15 @@ to {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
     outline-offset: var(--e-focus-gap);
 }
+.e-tabs--fill .e-tablist {
+    overflow-x: hidden;
+}
+.e-tabs--fill .e-tab {
+    flex: 1 1 0;
+    min-width: 0;
+    justify-content: center;
+    padding-inline: var(--e-space-1);
+}
 .e-tab-count {
     min-width: var(--e-space-6);
     padding: 0 var(--e-space-2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eos-ui/vue",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Eos: accessible Vue 3 components for the Eos portal.",
   "type": "module",
   "license": "MIT",
@@ -57,7 +57,7 @@
     }
   },
   "dependencies": {
-    "@eos-ui/tokens": "0.2.0",
+    "@eos-ui/tokens": "0.3.0",
     "@tanstack/vue-table": "^9.3.1",
     "@tanstack/vue-virtual": "^3.13.47",
     "@vueuse/core": "^15.0.0",