@data-slot/tabs 0.1.0

package/README.md

@@ -0,0 +1,219 @@
+# @data-slot/tabs
+
+Headless tabs component for vanilla JavaScript. Accessible, unstyled, tiny.
+
+## Installation
+
+```bash
+npm install @data-slot/tabs
+```
+
+## Quick Start
+
+```html
+<div data-slot="tabs" data-default-value="one">
+  <div data-slot="tabs-list">
+    <button data-slot="tabs-trigger" data-value="one">Tab One</button>
+    <button data-slot="tabs-trigger" data-value="two">Tab Two</button>
+    <button data-slot="tabs-trigger" data-value="three">Tab Three</button>
+    <div data-slot="tabs-indicator"></div>
+  </div>
+  <div data-slot="tabs-content" data-value="one">Content One</div>
+  <div data-slot="tabs-content" data-value="two">Content Two</div>
+  <div data-slot="tabs-content" data-value="three">Content Three</div>
+</div>
+
+<script type="module">
+  import { create } from "@data-slot/tabs";
+  
+  const controllers = create();
+</script>
+```
+
+## API
+
+### `create(scope?)`
+
+Auto-discover and bind all tabs instances in a scope (defaults to `document`).
+
+```typescript
+import { create } from "@data-slot/tabs";
+
+const controllers = create(); // Returns TabsController[]
+```
+
+### `createTabs(root, options?)`
+
+Create a controller for a specific element.
+
+```typescript
+import { createTabs } from "@data-slot/tabs";
+
+const tabs = createTabs(element, {
+  defaultValue: "one",
+  orientation: "horizontal",
+  onValueChange: (value) => console.log(value),
+});
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `defaultValue` | `string` | First trigger's value | Initial selected tab |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Tab orientation for keyboard nav |
+| `onValueChange` | `(value: string) => void` | `undefined` | Callback when selected tab changes |
+
+### Controller
+
+| Method/Property | Description |
+|-----------------|-------------|
+| `select(value)` | Select a tab by value |
+| `value` | Currently selected value (readonly `string`) |
+| `destroy()` | Cleanup all event listeners |
+
+## Markup Structure
+
+```html
+<div data-slot="tabs" data-default-value="initial-tab">
+  <div data-slot="tabs-list">
+    <button data-slot="tabs-trigger" data-value="unique-id">Label</button>
+    <!-- Optional animated indicator -->
+    <div data-slot="tabs-indicator"></div>
+  </div>
+  <div data-slot="tabs-content" data-value="unique-id">Panel content</div>
+</div>
+```
+
+### Optional Slots
+
+- `tabs-indicator` - Animated highlight that follows the selected tab
+
+## Styling
+
+### Basic Styling
+
+```css
+/* Hidden panels */
+[data-slot="tabs-content"][hidden] {
+  display: none;
+}
+
+/* Active trigger */
+[data-slot="tabs-trigger"][aria-selected="true"] {
+  font-weight: bold;
+  border-bottom: 2px solid currentColor;
+}
+
+/* Or use data-state */
+[data-slot="tabs-trigger"][data-state="active"] {
+  color: blue;
+}
+
+[data-slot="tabs-trigger"][data-state="inactive"] {
+  color: gray;
+}
+```
+
+### Animated Indicator
+
+The indicator receives CSS variables for positioning:
+
+```css
+[data-slot="tabs-indicator"] {
+  position: absolute;
+  left: var(--active-tab-left);
+  width: var(--active-tab-width);
+  height: 2px;
+  background: currentColor;
+  transition: left 0.2s, width 0.2s;
+}
+
+/* Vertical orientation */
+[data-slot="tabs-list"][aria-orientation="vertical"] [data-slot="tabs-indicator"] {
+  top: var(--active-tab-top);
+  height: var(--active-tab-height);
+  width: 2px;
+}
+```
+
+### CSS Variables
+
+| Variable | Description |
+|----------|-------------|
+| `--active-tab-left` | Left offset of active trigger |
+| `--active-tab-width` | Width of active trigger |
+| `--active-tab-top` | Top offset of active trigger |
+| `--active-tab-height` | Height of active trigger |
+
+### Tailwind Example
+
+```html
+<div data-slot="tabs">
+  <div data-slot="tabs-list" class="relative flex border-b">
+    <button 
+      data-slot="tabs-trigger" 
+      data-value="one"
+      class="px-4 py-2 aria-selected:text-blue-600"
+    >
+      Tab One
+    </button>
+    <div 
+      data-slot="tabs-indicator" 
+      class="absolute bottom-0 h-0.5 bg-blue-600 transition-all"
+      style="left: var(--active-tab-left); width: var(--active-tab-width)"
+    ></div>
+  </div>
+  <div data-slot="tabs-content" data-value="one" class="p-4">
+    Content
+  </div>
+</div>
+```
+
+## Keyboard Navigation
+
+### Horizontal Orientation
+
+| Key | Action |
+|-----|--------|
+| `ArrowLeft` | Select previous tab |
+| `ArrowRight` | Select next tab |
+| `Home` | Select first tab |
+| `End` | Select last tab |
+
+### Vertical Orientation
+
+| Key | Action |
+|-----|--------|
+| `ArrowUp` | Select previous tab |
+| `ArrowDown` | Select next tab |
+| `Home` | Select first tab |
+| `End` | Select last tab |
+
+## Accessibility
+
+The component automatically handles:
+
+- `role="tablist"` on list
+- `role="tab"` on triggers
+- `role="tabpanel"` on content
+- `aria-orientation` on list
+- `aria-selected` on triggers
+- `aria-controls` linking triggers to panels
+- `aria-labelledby` linking panels to triggers
+- `tabindex` management (only selected tab is in tab order)
+
+## Events
+
+Listen for changes via custom events:
+
+```javascript
+element.addEventListener("tabs:change", (e) => {
+  console.log("Selected tab:", e.detail.value);
+});
+```
+
+## License
+
+MIT
+

package/dist/index.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`@data-slot/core`)),l=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function u(e,t={}){let{onValueChange:n,orientation:r=`horizontal`,activationMode:i=`auto`}=t,a=(0,c.getPart)(e,`tabs-list`),o=(0,c.getParts)(e,`tabs-trigger`),s=(0,c.getParts)(e,`tabs-content`),u=(0,c.getPart)(e,`tabs-indicator`);if(!a||o.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let f=new Map;for(let e of s){let t=(e.dataset.value||``).trim();t&&f.set(t,e)}let p=[],m=new Map,h=new Map;for(let e of o){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=f.get(t),i={el:e,value:t,disabled:n,panel:r};p.push(i),m.set(t,i),h.set(e,i)}let g=p.filter(e=>!e.disabled),_=new Map;g.forEach((e,t)=>_.set(e.value,t));let v=g[0]?.value||``,y=e,b=(t.defaultValue??y.dataset.defaultValue??``).trim(),x=m.get(b),S=x&&!x.disabled?b:v,C=[];a.setAttribute(`role`,`tablist`),r===`vertical`&&(0,c.setAria)(a,`orientation`,`vertical`);for(let e of p){let{el:t,disabled:n,panel:r}=e;t.setAttribute(`role`,`tab`);let i=(0,c.ensureId)(t,`tab`);if(t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),n&&(t.setAttribute(`aria-disabled`,`true`),t.tagName===`BUTTON`&&(t.disabled=!0)),r){r.setAttribute(`role`,`tabpanel`),r.tabIndex=-1;let e=(0,c.ensureId)(r,`tabpanel`);t.setAttribute(`aria-controls`,e),r.setAttribute(`aria-labelledby`,i)}}let w=()=>{if(!u)return;let e=m.get(S);if(!e)return;let t=a.getBoundingClientRect(),n=e.el.getBoundingClientRect();u.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),u.style.setProperty(`--active-tab-width`,`${n.width}px`),u.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),u.style.setProperty(`--active-tab-height`,`${n.height}px`)},T=(t,r=!1)=>{if(t=t.trim(),S===t&&!r)return;let i=m.get(t);if(!i||i.disabled)if(r){if(t=v,!t)return}else return;let a=S!==t;S=t;for(let e of p){let n=e.value===t;(0,c.setAria)(e.el,`selected`,n),e.el.tabIndex=n&&!e.disabled?0:-1,e.el.dataset.state=n?`active`:`inactive`}for(let e of s){let n=(e.dataset.value||``).trim();if(!n)continue;let r=n===t;e.hidden=!r,e.dataset.state=r?`active`:`inactive`}e.setAttribute(`data-value`,t),u&&w(),a&&!r&&((0,c.emit)(e,`tabs:change`,{value:t}),n?.(t))};if(T(S,!0),u){let e=()=>requestAnimationFrame(w);C.push((0,c.on)(window,`resize`,e)),C.push((0,c.on)(a,`scroll`,e));let t=new ResizeObserver(e);t.observe(a),C.push(()=>t.disconnect())}C.push((0,c.on)(a,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=h.get(t);n&&!n.disabled&&T(n.value)}));let E=r===`horizontal`,D=E?`ArrowLeft`:`ArrowUp`,O=E?`ArrowRight`:`ArrowDown`;C.push((0,c.on)(a,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=h.get(t);if(!n||g.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||T(n.value);return}if(E&&e.key===`ArrowDown`&&n.value===S){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(l);(n||t).focus();return}}let r=_.get(n.value)??-1;r===-1&&(r=_.get(S)??0);let a=r;switch(e.key){case D:a=r-1,a<0&&(a=g.length-1);break;case O:a=r+1,a>=g.length&&(a=0);break;case`Home`:a=0;break;case`End`:a=g.length-1;break;default:return}e.preventDefault();let o=g[a];o&&(o.el.focus(),i===`auto`&&T(o.value))}));let k={select:e=>T(e),get value(){return S},updateIndicator:w,destroy:()=>{C.forEach(e=>e()),C.length=0,d.delete(e)}};return k}const d=new WeakSet;function f(e=document){let t=[];for(let n of(0,c.getRoots)(e,`tabs`)){if(d.has(n))continue;d.add(n),t.push(u(n))}return t}exports.create=f,exports.createTabs=u;

package/dist/index.d.cts

@@ -0,0 +1,48 @@
+//#region src/index.d.ts
+interface TabsOptions {
+  /** Initial selected tab value */
+  defaultValue?: string;
+  /** Callback when selected tab changes */
+  onValueChange?: (value: string) => void;
+  /** Tab orientation for keyboard navigation */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Activation mode for keyboard navigation
+   * - "auto": Arrow keys select tabs immediately (default)
+   * - "manual": Arrow keys move focus, Enter/Space activates
+   */
+  activationMode?: "auto" | "manual";
+}
+interface TabsController {
+  /** Select a tab by value */
+  select(value: string): void;
+  /** Currently selected value */
+  readonly value: string;
+  /** Update indicator position (call after layout changes) */
+  updateIndicator(): void;
+  /** Cleanup all event listeners */
+  destroy(): void;
+}
+/**
+ * Create a tabs controller for a root element
+ *
+ * Expected markup:
+ * ```html
+ * <div data-slot="tabs" data-default-value="two">
+ *   <div data-slot="tabs-list">
+ *     <button data-slot="tabs-trigger" data-value="one">Tab One</button>
+ *     <button data-slot="tabs-trigger" data-value="two">Tab Two</button>
+ *   </div>
+ *   <div data-slot="tabs-content" data-value="one">Content One</div>
+ *   <div data-slot="tabs-content" data-value="two">Content Two</div>
+ * </div>
+ * ```
+ */
+declare function createTabs(root: Element, options?: TabsOptions): TabsController;
+/**
+ * Find and bind all tabs components in a scope
+ * Returns array of controllers for programmatic access
+ */
+declare function create(scope?: ParentNode): TabsController[];
+//#endregion
+export { TabsController, TabsOptions, create, createTabs };

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+//#region src/index.d.ts
+interface TabsOptions {
+  /** Initial selected tab value */
+  defaultValue?: string;
+  /** Callback when selected tab changes */
+  onValueChange?: (value: string) => void;
+  /** Tab orientation for keyboard navigation */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Activation mode for keyboard navigation
+   * - "auto": Arrow keys select tabs immediately (default)
+   * - "manual": Arrow keys move focus, Enter/Space activates
+   */
+  activationMode?: "auto" | "manual";
+}
+interface TabsController {
+  /** Select a tab by value */
+  select(value: string): void;
+  /** Currently selected value */
+  readonly value: string;
+  /** Update indicator position (call after layout changes) */
+  updateIndicator(): void;
+  /** Cleanup all event listeners */
+  destroy(): void;
+}
+/**
+ * Create a tabs controller for a root element
+ *
+ * Expected markup:
+ * ```html
+ * <div data-slot="tabs" data-default-value="two">
+ *   <div data-slot="tabs-list">
+ *     <button data-slot="tabs-trigger" data-value="one">Tab One</button>
+ *     <button data-slot="tabs-trigger" data-value="two">Tab Two</button>
+ *   </div>
+ *   <div data-slot="tabs-content" data-value="one">Content One</div>
+ *   <div data-slot="tabs-content" data-value="two">Content Two</div>
+ * </div>
+ * ```
+ */
+declare function createTabs(root: Element, options?: TabsOptions): TabsController;
+/**
+ * Find and bind all tabs components in a scope
+ * Returns array of controllers for programmatic access
+ */
+declare function create(scope?: ParentNode): TabsController[];
+//#endregion
+export { TabsController, TabsOptions, create, createTabs };

package/dist/index.js

@@ -0,0 +1 @@
+import{emit as e,ensureId as t,getPart as n,getParts as r,getRoots as i,on as a,setAria as o}from"@data-slot/core";const s=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function c(i,c={}){let{onValueChange:u,orientation:d=`horizontal`,activationMode:f=`auto`}=c,p=n(i,`tabs-list`),m=r(i,`tabs-trigger`),h=r(i,`tabs-content`),g=n(i,`tabs-indicator`);if(!p||m.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let _=new Map;for(let e of h){let t=(e.dataset.value||``).trim();t&&_.set(t,e)}let v=[],y=new Map,b=new Map;for(let e of m){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=_.get(t),i={el:e,value:t,disabled:n,panel:r};v.push(i),y.set(t,i),b.set(e,i)}let x=v.filter(e=>!e.disabled),S=new Map;x.forEach((e,t)=>S.set(e.value,t));let C=x[0]?.value||``,w=i,T=(c.defaultValue??w.dataset.defaultValue??``).trim(),E=y.get(T),D=E&&!E.disabled?T:C,O=[];p.setAttribute(`role`,`tablist`),d===`vertical`&&o(p,`orientation`,`vertical`);for(let e of v){let{el:n,disabled:r,panel:i}=e;n.setAttribute(`role`,`tab`);let a=t(n,`tab`);if(n.tagName===`BUTTON`&&!n.hasAttribute(`type`)&&(n.type=`button`),r&&(n.setAttribute(`aria-disabled`,`true`),n.tagName===`BUTTON`&&(n.disabled=!0)),i){i.setAttribute(`role`,`tabpanel`),i.tabIndex=-1;let e=t(i,`tabpanel`);n.setAttribute(`aria-controls`,e),i.setAttribute(`aria-labelledby`,a)}}let k=()=>{if(!g)return;let e=y.get(D);if(!e)return;let t=p.getBoundingClientRect(),n=e.el.getBoundingClientRect();g.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),g.style.setProperty(`--active-tab-width`,`${n.width}px`),g.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),g.style.setProperty(`--active-tab-height`,`${n.height}px`)},A=(t,n=!1)=>{if(t=t.trim(),D===t&&!n)return;let r=y.get(t);if(!r||r.disabled)if(n){if(t=C,!t)return}else return;let a=D!==t;D=t;for(let e of v){let n=e.value===t;o(e.el,`selected`,n),e.el.tabIndex=n&&!e.disabled?0:-1,e.el.dataset.state=n?`active`:`inactive`}for(let e of h){let n=(e.dataset.value||``).trim();if(!n)continue;let r=n===t;e.hidden=!r,e.dataset.state=r?`active`:`inactive`}i.setAttribute(`data-value`,t),g&&k(),a&&!n&&(e(i,`tabs:change`,{value:t}),u?.(t))};if(A(D,!0),g){let e=()=>requestAnimationFrame(k);O.push(a(window,`resize`,e)),O.push(a(p,`scroll`,e));let t=new ResizeObserver(e);t.observe(p),O.push(()=>t.disconnect())}O.push(a(p,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);n&&!n.disabled&&A(n.value)}));let j=d===`horizontal`,M=j?`ArrowLeft`:`ArrowUp`,N=j?`ArrowRight`:`ArrowDown`;O.push(a(p,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);if(!n||x.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||A(n.value);return}if(j&&e.key===`ArrowDown`&&n.value===D){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(s);(n||t).focus();return}}let r=S.get(n.value)??-1;r===-1&&(r=S.get(D)??0);let i=r;switch(e.key){case M:i=r-1,i<0&&(i=x.length-1);break;case N:i=r+1,i>=x.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=x.length-1;break;default:return}e.preventDefault();let a=x[i];a&&(a.el.focus(),f===`auto`&&A(a.value))}));let P={select:e=>A(e),get value(){return D},updateIndicator:k,destroy:()=>{O.forEach(e=>e()),O.length=0,l.delete(i)}};return P}const l=new WeakSet;function u(e=document){let t=[];for(let n of i(e,`tabs`)){if(l.has(n))continue;l.add(n),t.push(c(n))}return t}export{u as create,c as createTabs};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@data-slot/tabs",
+  "version": "0.1.0",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsdown"
+  },
+  "dependencies": {
+    "@data-slot/core": "workspace:*"
+  },
+  "keywords": ["headless", "ui", "tabs", "vanilla", "data-slot"],
+  "license": "MIT"
+}