@c2n/tabs 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# @c2n/tabs
+
+Accessible tab strip built with Lit. `c2-tabs` shows one content panel at a time; each `c2-tab` names the panel it controls with `for`.
+
+```bash
+npm install @c2n/tabs
+```
+
+```html
+<script type="module">
+  import '@c2n/tabs' // registers c2-tabs and c2-tab
+</script>
+
+<c2-tabs selected-tab="activity">
+  <c2-tab for="overview">Overview</c2-tab>
+  <c2-tab for="activity">Activity</c2-tab>
+  <c2-tab for="settings" disabled>Settings</c2-tab>
+
+  <div id="overview">…</div>
+  <div id="activity">…</div>
+  <div id="settings">…</div>
+</c2-tabs>
+```
+
+- Children that are `<c2-tab>` become the header; every other child is a panel matched by `id` to a tab's `for`. Only the selected panel is rendered.
+- Omit `selected-tab` to start on the first enabled tab. Set the `selectedTab` property (or the attribute) to switch programmatically.
+- Keyboard: Left/Right arrows, Home and End move between tabs and select them (disabled tabs are skipped); Enter and Space activate the focused tab. The strip exposes `tablist` / `tab` / `tabpanel` roles with `aria-selected`, `aria-controls`, `aria-labelledby` and a roving `tabindex`.
+- Events: `c2-tabs` fires `change` (`detail: { value }`) after a user selection. Each `c2-tab` fires a cancelable `tab-change` (`detail: for`) first; call `preventDefault()` on it to keep the current tab.
+- The selection indicator follows the selected tab and re-measures on resize and label changes. Respects `prefers-reduced-motion`.
+
+Theming goes through CSS custom properties (`--c2-tabs--*`, `--c2-tabs__tab--*`, `--c2-tabs__tab__{hover,selected,focus,disabled}--*`, `--c2-tabs__indicator--*`). The full list is in `custom-elements.json` and on the docs site.

package/dist/tab-Cn3SGI4Q.js

@@ -0,0 +1,161 @@
+import { t as selectedTabContext } from "./tab-context-C4m2EOBP.js";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { isServer } from "lit-html/is-server.js";
+//#region ../../../node_modules/@lit/context/lib/context-request-event.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var s$1 = class extends Event {
+	constructor(s, t, e, o) {
+		super("context-request", {
+			bubbles: !0,
+			composed: !0
+		}), this.context = s, this.contextTarget = t, this.callback = e, this.subscribe = o ?? !1;
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/controllers/context-consumer.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ var s = class {
+	constructor(t, s, i, h) {
+		if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (t, s) => {
+			this.unsubscribe && (this.unsubscribe !== s && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = t, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(t, s)), this.unsubscribe = s;
+		}, this.host = t, void 0 !== s.context) {
+			const t = s;
+			this.context = t.context, this.callback = t.callback, this.subscribe = t.subscribe ?? !1;
+		} else this.context = s, this.callback = i, this.subscribe = h ?? !1;
+		this.host.addController(this);
+	}
+	hostConnected() {
+		this.dispatchRequest();
+	}
+	hostDisconnected() {
+		this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
+	}
+	dispatchRequest() {
+		this.host.dispatchEvent(new s$1(this.context, this.host, this.t, this.subscribe));
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/decorators/consume.js
+/**
+* @license
+* Copyright 2022 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ function c({ context: c, subscribe: e }) {
+	return (o, n) => {
+		"object" == typeof n ? n.addInitializer((function() {
+			new s(this, {
+				context: c,
+				callback: (t) => {
+					o.set.call(this, t);
+				},
+				subscribe: e
+			});
+		})) : o.constructor.addInitializer(((o) => {
+			new s(o, {
+				context: c,
+				callback: (t) => {
+					o[n] = t;
+				},
+				subscribe: e
+			});
+		}));
+	};
+}
+//#endregion
+//#region src/tab.scss?inline
+var tab_default = ":host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  user-select: none;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n:host([disabled]) {\n  cursor: default;\n}\n\n:host(:focus) {\n  outline: none;\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/tab.ts
+var Tab = class Tab extends LitElement {
+	static {
+		this.styles = unsafeCSS(tab_default);
+	}
+	constructor() {
+		super();
+		this.label = "";
+		this.for = "";
+		this.disabled = false;
+		this.selected = false;
+		this.selectedTab = "";
+		this.handleClick = () => {
+			this.activate();
+		};
+		this.handleKeydown = (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				this.activate();
+			}
+		};
+		if (!isServer) {
+			this.setAttribute("slot", "tab");
+			this.addEventListener("click", this.handleClick);
+			this.addEventListener("keydown", this.handleKeydown);
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute("role")) this.setAttribute("role", "tab");
+		if (!this.hasAttribute("tabindex")) this.tabIndex = -1;
+	}
+	updated(changed) {
+		if (changed.has("selected")) this.setAttribute("aria-selected", String(this.selected));
+		if (changed.has("disabled")) {
+			if (this.disabled) this.setAttribute("aria-disabled", "true");
+			else this.removeAttribute("aria-disabled");
+		}
+		if (changed.has("for")) {
+			if (this.for) this.setAttribute("aria-controls", this.for);
+			else this.removeAttribute("aria-controls");
+		}
+	}
+	activate() {
+		if (this.disabled || this.selectedTab === this.for) return;
+		this.dispatchEvent(new CustomEvent("tab-change", {
+			bubbles: true,
+			cancelable: true,
+			detail: this.for
+		}));
+	}
+	render() {
+		return html`<slot>${this.label}</slot>`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], Tab.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], Tab.prototype, "for", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Tab.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Tab.prototype, "selected", void 0);
+__decorate([c({
+	context: selectedTabContext,
+	subscribe: true
+})], Tab.prototype, "selectedTab", void 0);
+Tab = __decorate([customElement("c2-tab")], Tab);
+//#endregion
+export { __decorate as n, s$1 as r, Tab as t };

package/dist/tab-context-C4m2EOBP.js

@@ -0,0 +1,14 @@
+//#region ../../../node_modules/@lit/context/lib/create-context.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+function n(n) {
+	return n;
+}
+//#endregion
+//#region src/tab-context.ts
+var selectedTabContext = n(Symbol("selected-tab-context"));
+//#endregion
+export { selectedTabContext as t };

package/dist/tab-context.js

@@ -0,0 +1,2 @@
+import { t as selectedTabContext } from "./tab-context-C4m2EOBP.js";
+export { selectedTabContext };

package/dist/tab.js

@@ -0,0 +1,2 @@
+import { t as Tab } from "./tab-Cn3SGI4Q.js";
+export { Tab };

package/dist/tabs.js

@@ -0,0 +1,291 @@
+import { n as __decorate, r as s$1 } from "./tab-Cn3SGI4Q.js";
+import { t as selectedTabContext } from "./tab-context-C4m2EOBP.js";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { isServer } from "lit-html/is-server.js";
+//#region ../../../node_modules/@lit/context/lib/value-notifier.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var s = class {
+	get value() {
+		return this.o;
+	}
+	set value(s) {
+		this.setValue(s);
+	}
+	setValue(s, t = !1) {
+		const i = t || !Object.is(s, this.o);
+		this.o = s, i && this.updateObservers();
+	}
+	constructor(s) {
+		this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+			for (const [s, { disposer: t }] of this.subscriptions) s(this.o, t);
+		}, void 0 !== s && (this.value = s);
+	}
+	addCallback(s, t, i) {
+		if (!i) return void s(this.value);
+		this.subscriptions.has(s) || this.subscriptions.set(s, {
+			disposer: () => {
+				this.subscriptions.delete(s);
+			},
+			consumerHost: t
+		});
+		const { disposer: h } = this.subscriptions.get(s);
+		s(this.value, h);
+	}
+	clearCallbacks() {
+		this.subscriptions.clear();
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/controllers/context-provider.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ var e$1 = class extends Event {
+	constructor(t, s) {
+		super("context-provider", {
+			bubbles: !0,
+			composed: !0
+		}), this.context = t, this.contextTarget = s;
+	}
+};
+var i = class extends s {
+	constructor(s, e, i) {
+		super(void 0 !== e.context ? e.initialValue : i), this.onContextRequest = (t) => {
+			if (t.context !== this.context) return;
+			const s = t.contextTarget ?? t.composedPath()[0];
+			s !== this.host && (t.stopPropagation(), this.addCallback(t.callback, s, t.subscribe));
+		}, this.onProviderRequest = (s) => {
+			if (s.context !== this.context) return;
+			if ((s.contextTarget ?? s.composedPath()[0]) === this.host) return;
+			const e = /* @__PURE__ */ new Set();
+			for (const [s, { consumerHost: i }] of this.subscriptions) e.has(s) || (e.add(s), i.dispatchEvent(new s$1(this.context, i, s, !0)));
+			s.stopPropagation();
+		}, this.host = s, void 0 !== e.context ? this.context = e.context : this.context = e, this.attachListeners(), this.host.addController?.(this);
+	}
+	attachListeners() {
+		this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+	}
+	hostConnected() {
+		this.host.dispatchEvent(new e$1(this.context, this.host));
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/decorators/provide.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ function e({ context: e }) {
+	return (n, i$1) => {
+		const r = /* @__PURE__ */ new WeakMap();
+		if ("object" == typeof i$1) return {
+			get() {
+				return n.get.call(this);
+			},
+			set(t) {
+				return r.get(this).setValue(t), n.set.call(this, t);
+			},
+			init(n) {
+				return r.set(this, new i(this, {
+					context: e,
+					initialValue: n
+				})), n;
+			}
+		};
+		{
+			n.constructor.addInitializer(((n) => {
+				r.set(n, new i(n, { context: e }));
+			}));
+			const o = Object.getOwnPropertyDescriptor(n, i$1);
+			let s;
+			if (void 0 === o) {
+				const t = /* @__PURE__ */ new WeakMap();
+				s = {
+					get() {
+						return t.get(this);
+					},
+					set(e) {
+						r.get(this).setValue(e), t.set(this, e);
+					},
+					configurable: !0,
+					enumerable: !0
+				};
+			} else {
+				const t = o.set;
+				s = {
+					...o,
+					set(e) {
+						r.get(this).setValue(e), t?.call(this, e);
+					}
+				};
+			}
+			Object.defineProperty(n, i$1, s);
+			return;
+		}
+	};
+}
+//#endregion
+//#region src/tabs.scss?inline
+var tabs_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n.c2-tabs {\n  display: flex;\n  flex-direction: column;\n}\n\n.c2-tabs-header {\n  display: flex;\n  align-items: flex-end;\n  position: relative;\n  box-sizing: border-box;\n  gap: var(--c2-tabs--gap);\n  box-shadow: var(--c2-tabs--box-shadow,inset 0px -2px 0px 0px rgb(213, 213, 213));\n  justify-content: var(--c2-tabs--justify-content,flex-start);\n  background-color: var(--c2-tabs--background-color);\n  border-radius: var(--c2-tabs--border-radius);\n  height: var(--c2-tabs--height);\n  padding-top: var(--c2-tabs--padding-top);\n  padding-right: var(--c2-tabs--padding-right);\n  padding-left: var(--c2-tabs--padding-left);\n  padding-bottom: var(--c2-tabs--padding-bottom,var(--c2-tabs__indicator--height,2px));\n}\n.c2-tabs-header .selection-indicator {\n  position: absolute;\n  left: 0;\n  bottom: var(--c2-tabs__indicator--bottom,0px);\n  z-index: 0;\n  width: 0;\n  pointer-events: none;\n  will-change: transform, width;\n  transform-origin: top left;\n  background-color: var(--c2-tabs__indicator--color,var(--c2-tabs__tab__selected--color,var(--c2-tabs__tab__hover--color,rgb(109, 109, 109))));\n  border-radius: var(--c2-tabs__indicator--border-radius);\n  height: var(--c2-tabs__indicator--height,2px);\n  transition: transform 150ms cubic-bezier(0.3, 0, 1, 1), width 150ms cubic-bezier(0.3, 0, 1, 1);\n}\n.c2-tabs-header .selection-indicator.first-position {\n  transition: none;\n}\n.c2-tabs-header ::slotted(c2-tab) {\n  position: relative;\n  z-index: 1;\n  gap: var(--c2-tabs__tab--gap,8px);\n  flex: var(--c2-tabs__tab--flex);\n  justify-content: var(--c2-tabs__tab--justify-content,center);\n  padding-top: var(--c2-tabs__tab--padding-top,8px);\n  padding-right: var(--c2-tabs__tab--padding-right,16px);\n  padding-bottom: var(--c2-tabs__tab--padding-bottom,8px);\n  padding-left: var(--c2-tabs__tab--padding-left,16px);\n  font-weight: var(--c2-tabs__tab--font-weight);\n  font-size: var(--c2-tabs__tab--font-size);\n  font-style: var(--c2-tabs__tab--font-style);\n  font-family: var(--c2-tabs__tab--font-family);\n  color: var(--c2-tabs__tab--color);\n  background-color: var(--c2-tabs__tab--background-color);\n  border-top-left-radius: var(--c2-tabs__tab--border-top-left-radius);\n  border-top-right-radius: var(--c2-tabs__tab--border-top-right-radius);\n  border-bottom-left-radius: var(--c2-tabs__tab--border-bottom-left-radius);\n  border-bottom-right-radius: var(--c2-tabs__tab--border-bottom-right-radius);\n  transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-tabs-header ::slotted(c2-tab:hover) {\n  color: var(--c2-tabs__tab__hover--color,var(--c2-tabs__tab--color,rgb(2, 101, 220)));\n  background-color: var(--c2-tabs__tab__hover--background-color,var(--c2-tabs__tab--background-color));\n}\n.c2-tabs-header ::slotted(c2-tab[selected]) {\n  color: var(--c2-tabs__tab__selected--color,var(--c2-tabs__tab__hover--color,var(--c2-tabs__tab--color,rgb(2, 101, 220))));\n  background-color: var(--c2-tabs__tab__selected--background-color,var(--c2-tabs__tab__hover--background-color,var(--c2-tabs__tab--background-color)));\n}\n.c2-tabs-header ::slotted(c2-tab:focus-visible) {\n  outline: var(--c2-tabs__tab__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-tabs__tab__focus--outline-offset,-2px);\n}\n.c2-tabs-header ::slotted(c2-tab[disabled]) {\n  opacity: var(--c2-tabs__tab__disabled--opacity,0.38);\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-tabs-header .selection-indicator,\n  .c2-tabs-header ::slotted(c2-tab) {\n    transition: none;\n  }\n}";
+//#endregion
+//#region src/tabs.ts
+var TAB_TAG = "c2-tab";
+var Tabs = class Tabs extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.selectedTab = "";
+		this.indicatorStyle = "";
+		this.measured = false;
+	}
+	static {
+		this.styles = unsafeCSS(tabs_default);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!isServer && typeof ResizeObserver !== "undefined" && !this.resizeObserver) this.resizeObserver = new ResizeObserver(() => this.updateIndicator());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.resizeObserver?.disconnect();
+	}
+	/** Slotted `<c2-tab>` elements, in DOM order. */
+	get tabs() {
+		return (this.tabsSlot?.assignedElements() ?? []).filter((el) => el.localName === TAB_TAG);
+	}
+	/** Selects a tab and notifies listeners. Ignores unknown or disabled tabs. */
+	select(value) {
+		if (value === this.selectedTab) return;
+		const tab = this.tabs.find((t) => t.for === value);
+		if (!tab || tab.disabled) return;
+		this.selectedTab = value;
+		this.dispatchEvent(new CustomEvent("change", {
+			detail: { value },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleTabChange(event) {
+		const value = event.detail;
+		queueMicrotask(() => {
+			if (!event.defaultPrevented) this.select(value);
+		});
+	}
+	handleKeydown(event) {
+		const tabs = this.tabs.filter((t) => !t.disabled);
+		if (tabs.length === 0) return;
+		const current = tabs.indexOf(event.target);
+		if (current === -1) return;
+		const rtl = getComputedStyle(this).direction === "rtl";
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+				next = rtl ? current - 1 : current + 1;
+				break;
+			case "ArrowLeft":
+				next = rtl ? current + 1 : current - 1;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = tabs.length - 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		const tab = tabs[(next + tabs.length) % tabs.length];
+		tab.focus();
+		this.select(tab.for);
+	}
+	async handleTabSlotChange() {
+		await customElements.whenDefined(TAB_TAG);
+		const tabs = this.tabs;
+		await Promise.all(tabs.map((tab) => tab.updateComplete));
+		this.resizeObserver?.disconnect();
+		if (this.resizeObserver) {
+			this.resizeObserver.observe(this.header);
+			for (const tab of tabs) this.resizeObserver.observe(tab);
+		}
+		if (!this.selectedTab) {
+			const first = tabs.find((t) => !t.disabled);
+			if (first) this.selectedTab = first.for;
+		}
+		this.syncTabs();
+		this.updateIndicator();
+	}
+	/** Mirrors `selectedTab` onto the tabs (selected state, roving tabindex) and the panels (slot, ARIA). */
+	syncTabs() {
+		const tabs = this.tabs;
+		if (tabs.length === 0) return;
+		const selected = tabs.find((t) => t.for === this.selectedTab);
+		const focusable = selected && !selected.disabled ? selected : tabs.find((t) => !t.disabled);
+		for (const tab of tabs) {
+			tab.selected = tab === selected;
+			tab.tabIndex = tab === focusable ? 0 : -1;
+		}
+		for (const child of this.children) {
+			if (child.localName === TAB_TAG) continue;
+			if (child.id && child.id === this.selectedTab) {
+				child.setAttribute("slot", "tab-content");
+				if (!child.hasAttribute("role")) child.setAttribute("role", "tabpanel");
+				if (selected && !child.hasAttribute("aria-labelledby")) {
+					if (!selected.id) selected.id = `${child.id}-tab`;
+					child.setAttribute("aria-labelledby", selected.id);
+				}
+			} else if (child.getAttribute("slot") === "tab-content") child.removeAttribute("slot");
+		}
+	}
+	updateIndicator() {
+		const tab = this.tabs.find((t) => t.for === this.selectedTab);
+		if (!tab || !this.header) {
+			this.indicatorStyle = "width: 0px;";
+			return;
+		}
+		const tabRect = tab.getBoundingClientRect();
+		const headerRect = this.header.getBoundingClientRect();
+		const x = tabRect.left - headerRect.left + this.header.scrollLeft;
+		this.indicatorStyle = `transform: translateX(${x}px); width: ${tabRect.width}px;`;
+		if (!this.measured) this.updateComplete.then(() => this.measured = true);
+	}
+	willUpdate(changed) {
+		if (changed.has("selectedTab") && !this.selectedTab && this.hasUpdated) {
+			const first = this.tabs.find((t) => !t.disabled);
+			if (first) this.selectedTab = first.for;
+		}
+	}
+	updated(changed) {
+		if (changed.has("selectedTab")) {
+			this.syncTabs();
+			this.updateIndicator();
+		}
+	}
+	render() {
+		return html`
+      <div class="c2-tabs">
+        <div class="c2-tabs-header" role="tablist" @tab-change=${this.handleTabChange} @keydown=${this.handleKeydown}>
+          <slot name="tab" @slotchange=${this.handleTabSlotChange}></slot>
+          <div class="selection-indicator ${classMap({ "first-position": !this.measured })}" style=${this.indicatorStyle}></div>
+        </div>
+        <slot name="tab-content"></slot>
+      </div>
+    `;
+	}
+};
+__decorate([e({ context: selectedTabContext }), property({
+	type: String,
+	attribute: "selected-tab"
+})], Tabs.prototype, "selectedTab", void 0);
+__decorate([query(".c2-tabs-header")], Tabs.prototype, "header", void 0);
+__decorate([query("slot[name=\"tab\"]")], Tabs.prototype, "tabsSlot", void 0);
+__decorate([state()], Tabs.prototype, "indicatorStyle", void 0);
+__decorate([state()], Tabs.prototype, "measured", void 0);
+Tabs = __decorate([customElement("c2-tabs")], Tabs);
+//#endregion
+export { Tabs };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@c2n/tabs",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/tabs.js",
+  "exports": {
+    ".": {
+      "default": "./dist/tabs.js",
+      "types": "./types/src/tabs.d.ts"
+    },
+    "./tab.js": {
+      "default": "./dist/tab.js",
+      "types": "./types/src/tab.d.ts"
+    },
+    "./tab-context.js": {
+      "default": "./dist/tab-context.js",
+      "types": "./types/src/tab-context.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "tabs",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "@lit/context": "1.1.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/tab-context.d.ts

@@ -0,0 +1,4 @@
+export declare const selectedTabContext: {
+    __context__: string;
+};
+//# sourceMappingURL=tab-context.d.ts.map

package/types/src/tab-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-context.d.ts","sourceRoot":"","sources":["../../src/tab-context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;CAAwD,CAAA"}

package/types/src/tab.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * A single tab inside `<c2-tabs>`. Its `for` attribute names the `id` of the panel it controls.
+ * The parent owns selection: it sets `selected` and the roving `tabindex`; this element exposes
+ * them as `role="tab"`, `aria-selected`, `aria-controls` and `aria-disabled`.
+ *
+ * @tag c2-tab
+ *
+ * @slot - Tab label. Defaults to the `label` attribute.
+ *
+ * @event {CustomEvent<string>} tab-change - Fired when the user activates this tab (click, Enter or Space). `detail` is the `for` value. Cancelable: `preventDefault()` keeps the current tab.
+ */
+export declare class Tab extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Text label, used when no content is slotted. Reflected so SSR keeps it as an attribute. */
+    label: string;
+    /** `id` of the panel this tab controls. */
+    for: string;
+    disabled: boolean;
+    /** Set by the parent `<c2-tabs>`; do not set by hand. */
+    selected: boolean;
+    private selectedTab;
+    constructor();
+    connectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    private handleClick;
+    private handleKeydown;
+    private activate;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-tab': Tab;
+    }
+}
+//# sourceMappingURL=tab.d.ts.map

package/types/src/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAOtE;;;;;;;;;;GAUG;AACH,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,0BAAoB;IAE1C,8FAA8F;IACnD,KAAK,SAAK;IAErD,2CAA2C;IACA,GAAG,SAAK;IAEP,QAAQ,UAAQ;IAE5D,yDAAyD;IACb,QAAQ,UAAQ;IAG5D,OAAO,CAAC,WAAW,CAAa;;IAWvB,iBAAiB;IAMjB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAY9C,OAAO,CAAC,WAAW,CAElB;IAED,OAAO,CAAC,aAAa,CAKpB;IAED,OAAO,CAAC,QAAQ;IAKP,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,GAAG,CAAA;KACd;CACF"}

package/types/src/tabs.d.ts

@@ -0,0 +1,99 @@
+import { LitElement, type PropertyValues } from 'lit';
+import './tab';
+import type { Tab } from './tab';
+/**
+ * Tab strip that shows one content panel at a time.
+ *
+ * Light-DOM children are split in two groups: every `<c2-tab for="…">` becomes a tab in the header
+ * (they slot themselves into `tab`), every other child is a panel whose `id` matches a tab's `for`.
+ * Only the panel of the selected tab is rendered. The header is a `tablist`: Arrow keys, Home and
+ * End move between tabs, Enter and Space activate the focused one.
+ *
+ * @tag c2-tabs
+ *
+ * @slot tab - The `<c2-tab>` elements (assigned automatically).
+ * @slot tab-content - The panel of the selected tab (assigned automatically from the child whose `id` matches `selected-tab`).
+ *
+ * @event {CustomEvent<{ value: string }>} change - Fired after the user selects another tab. `detail.value` is the new `selected-tab`. Not fired for programmatic changes.
+ *
+ * @cssproperty {box-shadow} [--c2-tabs--box-shadow=inset 0px -2px 0px 0px rgb(230, 230, 230)]
+ * @cssproperty {justify-content} [--c2-tabs--justify-content=flex-start]
+ * @cssproperty {background-color} --c2-tabs--background-color
+ * @cssproperty {pixel} --c2-tabs--height
+ * @cssproperty {pixel} --c2-tabs--gap
+ * @cssproperty {border-radius} --c2-tabs--border-radius
+ * @cssproperty {padding} --c2-tabs--padding-top
+ * @cssproperty {padding} --c2-tabs--padding-right
+ * @cssproperty {padding} [--c2-tabs--padding-bottom=var(--c2-tabs__indicator--height)]
+ * @cssproperty {padding} --c2-tabs--padding-left
+ *
+ * @cssproperty {pixel} [--c2-tabs__tab--gap=8px] - Space between an icon and the label inside a tab.
+ * @cssproperty {flex} --c2-tabs__tab--flex - Set `1 1 0` to make every tab grow to the same width.
+ * @cssproperty {justify-content} [--c2-tabs__tab--justify-content=center]
+ *
+ * @cssproperty {font-weight} --c2-tabs__tab--font-weight
+ * @cssproperty {font-size} --c2-tabs__tab--font-size
+ * @cssproperty {font-style} --c2-tabs__tab--font-style
+ * @cssproperty {font-family} --c2-tabs__tab--font-family
+ *
+ * @cssproperty {color} [--c2-tabs__indicator--color=rgb(109, 109, 109)]
+ * @cssproperty {border-radius} --c2-tabs__indicator--border-radius
+ * @cssproperty {pixel} [--c2-tabs__indicator--height=2px]
+ * @cssproperty {pixel} [--c2-tabs__indicator--bottom=0px]
+ *
+ * @cssproperty {padding} [--c2-tabs__tab--padding-top=8px]
+ * @cssproperty {padding} [--c2-tabs__tab--padding-right=16px]
+ * @cssproperty {padding} [--c2-tabs__tab--padding-bottom=8px]
+ * @cssproperty {padding} [--c2-tabs__tab--padding-left=16px]
+ *
+ * @cssproperty {color} --c2-tabs__tab--color
+ * @cssproperty {background-color} --c2-tabs__tab--background-color
+ *
+ * @cssproperty {border-radius} --c2-tabs__tab--border-top-left-radius
+ * @cssproperty {border-radius} --c2-tabs__tab--border-top-right-radius
+ * @cssproperty {border-radius} --c2-tabs__tab--border-bottom-left-radius
+ * @cssproperty {border-radius} --c2-tabs__tab--border-bottom-right-radius
+ *
+ * @cssproperty {color} [--c2-tabs__tab__hover--color=rgb(2, 101, 220)]
+ * @cssproperty {background-color} --c2-tabs__tab__hover--background-color
+ *
+ * @cssproperty {color} [--c2-tabs__tab__selected--color=rgb(2, 101, 220)]
+ * @cssproperty {background-color} --c2-tabs__tab__selected--background-color
+ *
+ * @cssproperty {outline} [--c2-tabs__tab__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-tabs__tab__focus--outline-offset=-2px]
+ *
+ * @cssproperty {opacity} [--c2-tabs__tab__disabled--opacity=0.38]
+ */
+export declare class Tabs extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** `for` value of the selected tab (and `id` of the visible panel). Falls back to the first enabled tab. */
+    selectedTab: string;
+    private header;
+    private tabsSlot;
+    private indicatorStyle;
+    /** False until the indicator has been placed once: the first placement must not animate. */
+    private measured;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Slotted `<c2-tab>` elements, in DOM order. */
+    get tabs(): Tab[];
+    /** Selects a tab and notifies listeners. Ignores unknown or disabled tabs. */
+    select(value: string): void;
+    private handleTabChange;
+    private handleKeydown;
+    private handleTabSlotChange;
+    /** Mirrors `selectedTab` onto the tabs (selected state, roving tabindex) and the panels (slot, ARIA). */
+    private syncTabs;
+    private updateIndicator;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-tabs': Tabs;
+    }
+}
+//# sourceMappingURL=tabs.d.ts.map

package/types/src/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAQtE,OAAO,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAIhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,4GAA4G;IAG5G,WAAW,SAAK;IAGhB,OAAO,CAAC,MAAM,CAAc;IAG5B,OAAO,CAAC,QAAQ,CAAkB;IAGlC,OAAO,CAAC,cAAc,CAAK;IAE3B,4FAA4F;IAE5F,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,cAAc,CAAC,CAAgB;IAE9B,iBAAiB;IAOjB,oBAAoB;IAK7B,iDAAiD;IACjD,IAAI,IAAI,IAAI,GAAG,EAAE,CAEhB;IAED,8EAA8E;IAC9E,MAAM,CAAC,KAAK,EAAE,MAAM;IAQpB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;YA8BP,mBAAmB;IAqBjC,yGAAyG;IACzG,OAAO,CAAC,QAAQ;IA2BhB,OAAO,CAAC,eAAe;IAgBd,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAQxC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAOrC,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}