@c2n/tabs 0.0.6 → 0.0.8

package/README.md

@@ -25,7 +25,7 @@ npm install @c2n/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.
+- Events: `c2-tabs` fires `selection-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 → tab-DUHny6Dg.js}

@@ -1,6 +1,7 @@
 import { t as selectedTabContext } from "./tab-context-C4m2EOBP.js";
 import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { isServer } from "lit-html/is-server.js";
 //#region ../../../node_modules/@lit/context/lib/context-request-event.js
 /**
@@ -103,13 +104,13 @@ var Tab = class Tab extends LitElement {
 			}
 		};
 		if (!isServer) {
-			this.setAttribute("slot", "tab");
 			this.addEventListener("click", this.handleClick);
 			this.addEventListener("keydown", this.handleKeydown);
 		}
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		if (!isServer) this.setAttribute("slot", "tab");
 		if (!this.hasAttribute("role")) this.setAttribute("role", "tab");
 		if (!this.hasAttribute("tabindex")) this.tabIndex = -1;
 	}

package/dist/tab.js

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

package/dist/tabs.js

@@ -1,7 +1,8 @@
-import { n as __decorate, r as s$1 } from "./tab-Cn3SGI4Q.js";
+import { n as __decorate, r as s$1 } from "./tab-DUHny6Dg.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 { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.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
@@ -165,9 +166,9 @@ var Tabs = class Tabs extends LitElement {
 		const tab = this.tabs.find((t) => t.for === value);
 		if (!tab || tab.disabled) return;
 		this.selectedTab = value;
-		this.dispatchEvent(new CustomEvent("change", {
+		this.dispatchEvent(new CustomEvent("selection-change", {
 			detail: { value },
-			bubbles: true,
+			bubbles: false,
 			composed: true
 		}));
 	}

package/package.json

@@ -1,26 +1,38 @@
 {
   "name": "@c2n/tabs",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/tabs.js",
   "exports": {
     ".": {
-      "default": "./dist/tabs.js",
-      "types": "./types/src/tabs.d.ts"
+      "types": "./types/src/tabs.d.ts",
+      "default": "./dist/tabs.js"
     },
     "./tab.js": {
-      "default": "./dist/tab.js",
-      "types": "./types/src/tab.d.ts"
+      "types": "./types/src/tab.d.ts",
+      "default": "./dist/tab.js"
     },
     "./tab-context.js": {
-      "default": "./dist/tab-context.js",
-      "types": "./types/src/tab-context.d.ts"
+      "types": "./types/src/tab-context.d.ts",
+      "default": "./dist/tab-context.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "tabs",
@@ -56,7 +68,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.8",
     "@lit/context": "1.1.6",
     "lit": "3.3.3"
   },
@@ -64,5 +76,5 @@
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
 }

package/react.d.ts

@@ -0,0 +1,26 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/tabs. Import once, anywhere in the program:
+//
+//     import '@c2n/tabs/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Tab } from '@c2n/tabs/tab.js'
+import type { Tabs } from '@c2n/tabs'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-tab': C2Props<Tab>
+      'c2-tabs': C2Props<Tabs>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/tab.d.ts

@@ -1,4 +1,13 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Events fired by {@link Tab}, keyed for `addEventListener`. */
+export interface TabEventMap {
+    'tab-change': CustomEvent<string>;
+}
+export interface Tab {
+    addEventListener: TypedAddEventListener<Tab, TabEventMap>;
+    removeEventListener: TypedRemoveEventListener<Tab, TabEventMap>;
+}
 /**
  * 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
@@ -16,6 +25,7 @@ export declare class Tab extends LitElement {
     label: string;
     /** `id` of the panel this tab controls. */
     for: string;
+    /** Prevents activation and removes this tab from keyboard navigation. */
     disabled: boolean;
     /** Set by the parent `<c2-tabs>`; do not set by hand. */
     selected: boolean;

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

@@ -1 +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"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAItE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAKhG,iEAAiE;AACjE,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CAClC;AAED,MAAM,WAAW,GAAG;IAClB,gBAAgB,EAAE,qBAAqB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAA;IACzD,mBAAmB,EAAE,wBAAwB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAA;CAChE;AAED;;;;;;;;;;GAUG;AACH,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,0BAAoB;IAE1C,8FAA8F;IACnD,KAAK,SAAK;IAErD,2CAA2C;IACA,GAAG,SAAK;IAEnD,yEAAyE;IAC7B,QAAQ,UAAQ;IAE5D,yDAAyD;IACb,QAAQ,UAAQ;IAG5D,OAAO,CAAC,WAAW,CAAa;;IAUvB,iBAAiB;IAUjB,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

@@ -1,6 +1,20 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 import './tab';
 import type { Tab } from './tab';
+/** Detail of the `selection-change` event of {@link Tabs}. */
+export interface TabsSelectionChangeEventDetail {
+    /** `for` value of the tab that is now selected — the new `selected-tab`. */
+    value: string;
+}
+/** Events fired by {@link Tabs}, keyed for `addEventListener`. */
+export interface TabsEventMap {
+    'selection-change': CustomEvent<TabsSelectionChangeEventDetail>;
+}
+export interface Tabs {
+    addEventListener: TypedAddEventListener<Tabs, TabsEventMap>;
+    removeEventListener: TypedRemoveEventListener<Tabs, TabsEventMap>;
+}
 /**
  * Tab strip that shows one content panel at a time.
  *
@@ -14,7 +28,10 @@ import type { Tab } from './tab';
  * @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.
+ * @event {CustomEvent<TabsSelectionChangeEventDetail>} selection-change - Fired after the user selects another tab. `detail.value` is the new `selected-tab`. Not fired for programmatic changes. Does not bubble: several components fire `selection-change`, so a listener belongs on the element itself rather than on an ancestor.
+ *
+ * The name matches `c2-list`, `c2-select` and `c2-table`; it is deliberately not `change`, which every native form
+ * control bubbles — a `c2-text-field` inside a panel would otherwise reach a listener meant for the tab strip.
  *
  * @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]

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

@@ -1 +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"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAGtE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAOhG,OAAO,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAIhC,8DAA8D;AAC9D,MAAM,WAAW,8BAA8B;IAC7C,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;CACd;AAED,kEAAkE;AAClE,MAAM,WAAW,YAAY;IAC3B,kBAAkB,EAAE,WAAW,CAAC,8BAA8B,CAAC,CAAA;CAChE;AAED,MAAM,WAAW,IAAI;IACnB,gBAAgB,EAAE,qBAAqB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;IAC3D,mBAAmB,EAAE,wBAAwB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;CAClE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;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"}

package/vue.d.ts

@@ -0,0 +1,40 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/tabs. Import once, anywhere in the program:
+//
+//     import '@c2n/tabs/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Tab, TabEventMap } from '@c2n/tabs/tab.js'
+import type { Tabs, TabsEventMap } from '@c2n/tabs'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-tab': DefineComponent<
+      C2Props<Tab> & {
+        onTabChange?: (event: TabEventMap['tab-change']) => void
+      }
+    >
+    'c2-tabs': DefineComponent<
+      C2Props<Tabs> & {
+        'selected-tab'?: unknown
+        onSelectionChange?: (event: TabsEventMap['selection-change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}