@skdx/vue 0.26.0

package/dist/table/context.d.ts

@@ -0,0 +1,159 @@
+import type { InjectionKey, Ref } from 'vue';
+/**
+ * Which way a column is sorted. Mirrors React's `SortDirection`
+ * (`packages/react/src/table/types.ts:5`), Svelte's
+ * (`packages/svelte/src/lib/table/context.ts:8`) and Angular's
+ * (`packages/angular/src/table/table-state.ts:4`), so a `getSortLabel` written
+ * once ports across all four.
+ */
+export type SortDirection = 'asc' | 'desc';
+/**
+ * One column's contribution to a table's sort: which column, and
+ * which way. There is no third direction and no `null` — a column that is no
+ * longer sorted drops out of `sortList` entirely, which is what lets
+ * `toggleSort` cycle asc → desc → unsorted without the list ever carrying a
+ * dead entry.
+ *
+ * `columnKey` holds the header cell's `sortKey`, not its `columnKey` prop —
+ * that second key exists only for resizing, where it falls back to `sortKey`.
+ * Sorting and resizing therefore agree on a column's identity only while a
+ * header cell leaves `columnKey` unset.
+ */
+export interface TableSortState {
+    columnKey: string;
+    direction: SortDirection;
+}
+/**
+ * A whole table's sort state: one column (single sort, the default), an ordered
+ * list of columns (`multiSort`, most significant first), or nothing sorted.
+ *
+ * Single-sort tables are given and handed back the bare object — the array form
+ * only appears once `multiSort` is on, so existing single-sort code is unaffected.
+ */
+export type TableSort = TableSortState | TableSortState[] | null;
+/**
+ * How many rows a Table lets the user select at once, and therefore
+ * what its selection parts do. `'single'` keeps `selected` at no more than one
+ * id — picking a new row replaces the current one rather than adding to it, and
+ * Shift-clicking extends nothing. `'multiple'` allows any number and enables
+ * range extension plus `SkdxTableSelectAllCheckbox`. `'none'` is the default and
+ * makes `toggleRow`/`toggleAll` no-ops, so a table can render selection parts
+ * that stay inert instead of conditionally omitting them.
+ *
+ * Public, not `@internal`: React exports the same type from its own entry point
+ * (`react/src/index.ts:563`), so a consumer typing a `selectionMode` variable
+ * can do it in either framework — and this package exports it too. The tag was
+ * the half that was wrong.
+ */
+export type TableSelectionMode = 'single' | 'multiple' | 'none';
+/**
+ * Which rows an `SkdxTableSelectAllCheckbox` covers: only the ids it was handed
+ * (`'page'`) or the entire dataset (`'all'`). There is no default — the two
+ * behave identically until the table is paginated or virtualized, at which
+ * point picking the wrong one is a bug found in production.
+ */
+export type TableSelectAllScope = 'page' | 'all';
+/** Per-column pixel widths, keyed by a header cell's `columnKey` (falling back to its `sortKey`). */
+export type TableColumnWidths = Record<string, number>;
+/**
+ * Injection key a Table provides so its parts can read/drive shared sort/selection state.
+ *
+ * @internal
+ */
+export interface TableContext {
+    /** Unique per-table id, used to derive stable `id`/`aria-controls` pairs for detail rows. */
+    tableId: string;
+    /** The most significant sorted column, or `null`. Equivalent to `sortList[0] ?? null`. */
+    sort: Readonly<Ref<TableSortState | null>>;
+    /** Every sorted column, most significant first. At most one entry unless `multiSort` is on. */
+    sortList: Readonly<Ref<TableSortState[]>>;
+    /** Whether activating a second column adds to the sort rather than replacing it. */
+    multiSort: boolean;
+    selected: Readonly<Ref<Set<string>>>;
+    selectionMode: TableSelectionMode;
+    /**
+     * Cycles the given column through asc → desc → unsorted. `columnLabel` is
+     * the header cell's own text, used only for the live-region announcement.
+     */
+    toggleSort(columnKey: string, columnLabel?: string): void;
+    /**
+     * Toggles a row's selection. In `'single'` mode, selecting a new row replaces
+     * the current selection. Passing `extend` (a Shift-click) selects every row
+     * between the last row toggled and this one, in `'multiple'` mode only.
+     */
+    toggleRow(id: string, extend?: boolean): void;
+    isRowSelected(id: string): boolean;
+    /**
+     * Toggles all given row ids: selects every id unless all are already
+     * selected, in which case it deselects them. Table keeps no row registry, so
+     * the caller supplies the list — under pagination or virtualization that must
+     * be the full list, not the rendered page.
+     */
+    toggleAll(allIds: string[]): void;
+    /** Whether every given id is selected. False over an empty list. */
+    isAllSelected(allIds: string[]): boolean;
+    /** Whether some but not all of the given ids are selected — a tri-state checkbox's indeterminate. */
+    isSomeSelected(allIds: string[]): boolean;
+    /** Row ids whose detail row is currently expanded. */
+    expandedRows: Readonly<Ref<Set<string>>>;
+    toggleRowExpanded(rowId: string): void;
+    isRowExpanded(rowId: string): boolean;
+    /** Current per-column widths in pixels; columns absent from it are left to the browser. */
+    columnWidths: Readonly<Ref<TableColumnWidths>>;
+    setColumnWidth(columnKey: string, width: number): void;
+}
+/**
+ * Injection key a Table provides so its header cells and rows share sort and selection state.
+ *
+ * @internal
+ */
+export declare const TABLE_CONTEXT: InjectionKey<TableContext>;
+/**
+ * Column-scoped defaults an `SkdxTableHeaderCell` publishes to the
+ * sort and resize parts nested inside it, so those parts don't repeat the
+ * column's key and bounds. Every field is optional — the parts also work
+ * standalone, given their own props. Not part of the public API.
+ *
+ * @internal
+ */
+export interface TableHeaderCellContext {
+    readonly sortKey: string | undefined;
+    readonly columnKey: string | undefined;
+    readonly minWidth: number | undefined;
+    readonly maxWidth: number | undefined;
+    readonly resizeLabel: string | undefined;
+    readonly resizeStep: number | undefined;
+}
+/**
+ * Injection key an `SkdxTableHeaderCell` provides so a sort trigger,
+ * sort indicator or resize handle nested inside it inherits the column's key
+ * and bounds. Injected with an `undefined` fallback rather than throwing,
+ * because those parts are also legal outside a header cell — they just need
+ * their own `sortKey`/`columnKey` there.
+ *
+ * @internal
+ */
+export declare const TABLE_HEADER_CELL_CONTEXT: InjectionKey<TableHeaderCellContext>;
+/**
+ * The DOM id a row's detail row carries and its `SkdxTableExpandTrigger` points
+ * at with `aria-controls`. Derived from the table's own id so two tables on one
+ * page can share row ids without colliding.
+ */
+export declare function tableDetailRowId(tableId: string, rowId: string): string;
+/**
+ * Default `getSortLabel`, announced when a column's sort changes.
+ *
+ * Lives here rather than in `Table.vue` because `withDefaults(defineProps())`
+ * is hoisted out of `setup()`, so it cannot reference a binding declared
+ * locally in the same `<script setup>` — only an imported one.
+ *
+ * @internal
+ */
+export declare function defaultGetSortLabel(column: string, direction: SortDirection | null): string;
+/**
+ * Default accessible name for `SkdxTableSelectAllCheckbox` — the count and the
+ * scope, never a bare "Select all". "Select all 40 rows on this page" and
+ * "Select all 1,204 rows" are different promises, and the whole point of
+ * `scope` is that the user hears which one.
+ */
+export declare function defaultSelectAllLabel(scope: TableSelectAllScope, count: number): string;

package/dist/table/context.js

@@ -0,0 +1 @@
+var e=/* @__PURE__ */Symbol("skdx-table-context"),t=/* @__PURE__ */Symbol("skdx-table-header-cell-context");function l(e,t){return`${e}-detail-${t}`}function a(e,t){return null===t?`${e} not sorted`:`${e} sorted ${"asc"===t?"ascending":"descending"}`}function n(e,t){const l=`${t} ${1===t?"row":"rows"}`;return"page"===e?`Select all ${l} on this page`:`Select all ${l}`}export{e as TABLE_CONTEXT,t as TABLE_HEADER_CELL_CONTEXT,a as defaultGetSortLabel,n as defaultSelectAllLabel,l as tableDetailRowId};

package/dist/table/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./context.cjs"),r=require("./Table.vue.cjs"),l=require("./TableHeader.vue.cjs"),a=require("./TableBody.vue.cjs"),t=require("./TableFooter.vue.cjs"),u=require("./TableRow.vue.cjs"),d=require("./TableColumnHeaderSortTrigger.vue.cjs"),o=require("./TableColumnResizeTrigger.vue.cjs"),i=require("./TableHeaderCell.vue.cjs"),b=require("./TableCell.vue.cjs"),T=require("./TableCaption.vue.cjs"),q=require("./TableExpandTrigger.vue.cjs"),n=require("./TableExpandedRow.vue.cjs"),c=require("./TableEmpty.vue.cjs"),S=require("./TableSortIndicator.vue.cjs"),x=require("./TableSelectAllCheckbox.vue.cjs"),k=require("./TableRowSelectCheckbox.vue.cjs");exports.SkdxTable=r.default;exports.SkdxTableBody=a.default;exports.SkdxTableCaption=T.default;exports.SkdxTableCell=b.default;exports.SkdxTableColumnHeaderSortTrigger=d.default;exports.SkdxTableColumnResizeTrigger=o.default;exports.SkdxTableEmpty=c.default;exports.SkdxTableExpandTrigger=q.default;exports.SkdxTableExpandedRow=n.default;exports.SkdxTableFooter=t.default;exports.SkdxTableHeader=l.default;exports.SkdxTableHeaderCell=i.default;exports.SkdxTableRow=u.default;exports.SkdxTableRowSelectCheckbox=k.default;exports.SkdxTableSelectAllCheckbox=x.default;exports.SkdxTableSortIndicator=S.default;exports.defaultSelectAllLabel=e.defaultSelectAllLabel;exports.tableDetailRowId=e.tableDetailRowId;

package/dist/table/index.d.cts

@@ -0,0 +1,18 @@
+export { default as SkdxTable } from './Table.vue.cjs';
+export { default as SkdxTableHeader } from './TableHeader.vue.cjs';
+export { default as SkdxTableBody } from './TableBody.vue.cjs';
+export { default as SkdxTableFooter } from './TableFooter.vue.cjs';
+export { default as SkdxTableRow } from './TableRow.vue.cjs';
+export { default as SkdxTableHeaderCell } from './TableHeaderCell.vue.cjs';
+export { default as SkdxTableCell } from './TableCell.vue.cjs';
+export { default as SkdxTableCaption } from './TableCaption.vue.cjs';
+export { default as SkdxTableExpandTrigger } from './TableExpandTrigger.vue.cjs';
+export { default as SkdxTableExpandedRow } from './TableExpandedRow.vue.cjs';
+export { default as SkdxTableEmpty } from './TableEmpty.vue.cjs';
+export { default as SkdxTableColumnHeaderSortTrigger } from './TableColumnHeaderSortTrigger.vue.cjs';
+export { default as SkdxTableSortIndicator } from './TableSortIndicator.vue.cjs';
+export { default as SkdxTableSelectAllCheckbox } from './TableSelectAllCheckbox.vue.cjs';
+export { default as SkdxTableRowSelectCheckbox } from './TableRowSelectCheckbox.vue.cjs';
+export { default as SkdxTableColumnResizeTrigger } from './TableColumnResizeTrigger.vue.cjs';
+export { defaultSelectAllLabel, tableDetailRowId } from './context.cjs';
+export type { SortDirection, TableSortState, TableSort, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './context.cjs';

package/dist/table/index.d.ts

@@ -0,0 +1,18 @@
+export { default as SkdxTable } from './Table.vue.js';
+export { default as SkdxTableHeader } from './TableHeader.vue.js';
+export { default as SkdxTableBody } from './TableBody.vue.js';
+export { default as SkdxTableFooter } from './TableFooter.vue.js';
+export { default as SkdxTableRow } from './TableRow.vue.js';
+export { default as SkdxTableHeaderCell } from './TableHeaderCell.vue.js';
+export { default as SkdxTableCell } from './TableCell.vue.js';
+export { default as SkdxTableCaption } from './TableCaption.vue.js';
+export { default as SkdxTableExpandTrigger } from './TableExpandTrigger.vue.js';
+export { default as SkdxTableExpandedRow } from './TableExpandedRow.vue.js';
+export { default as SkdxTableEmpty } from './TableEmpty.vue.js';
+export { default as SkdxTableColumnHeaderSortTrigger } from './TableColumnHeaderSortTrigger.vue.js';
+export { default as SkdxTableSortIndicator } from './TableSortIndicator.vue.js';
+export { default as SkdxTableSelectAllCheckbox } from './TableSelectAllCheckbox.vue.js';
+export { default as SkdxTableRowSelectCheckbox } from './TableRowSelectCheckbox.vue.js';
+export { default as SkdxTableColumnResizeTrigger } from './TableColumnResizeTrigger.vue.js';
+export { defaultSelectAllLabel, tableDetailRowId } from './context.js';
+export type { SortDirection, TableSortState, TableSort, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './context.js';

package/dist/table/index.js

@@ -0,0 +1 @@
+import{defaultSelectAllLabel as e,tableDetailRowId as a}from"./context.js";import l from"./Table.vue.js";import o from"./TableHeader.vue.js";import r from"./TableBody.vue.js";import t from"./TableFooter.vue.js";import b from"./TableRow.vue.js";import m from"./TableColumnHeaderSortTrigger.vue.js";import s from"./TableColumnResizeTrigger.vue.js";import T from"./TableHeaderCell.vue.js";import d from"./TableCell.vue.js";import i from"./TableCaption.vue.js";import p from"./TableExpandTrigger.vue.js";import x from"./TableExpandedRow.vue.js";import S from"./TableEmpty.vue.js";import u from"./TableSortIndicator.vue.js";import k from"./TableSelectAllCheckbox.vue.js";import f from"./TableRowSelectCheckbox.vue.js";export{l as SkdxTable,r as SkdxTableBody,i as SkdxTableCaption,d as SkdxTableCell,m as SkdxTableColumnHeaderSortTrigger,s as SkdxTableColumnResizeTrigger,S as SkdxTableEmpty,p as SkdxTableExpandTrigger,x as SkdxTableExpandedRow,t as SkdxTableFooter,o as SkdxTableHeader,T as SkdxTableHeaderCell,b as SkdxTableRow,f as SkdxTableRowSelectCheckbox,k as SkdxTableSelectAllCheckbox,u as SkdxTableSortIndicator,e as defaultSelectAllLabel,a as tableDetailRowId};

package/dist/tabs/Tabs.vue.cjs

@@ -0,0 +1 @@
+const e=require("./Tabs.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/tabs/Tabs.vue.d.cts

@@ -0,0 +1,56 @@
+import { type TabsActivationMode, type TabsOrientation } from './context.cjs';
+/**
+ * The Vue implementation of the shared Tabs contract (see `@skdx/shared`'s
+ * `tabsContract`). Owns the selected value and `provide()`s it (plus
+ * orientation/activation-mode and a trigger registry) so a nested
+ * `<SkdxTabsList>` / `<SkdxTabsTrigger>` / `<SkdxTabsContent>` can `inject()`
+ * it — Vue's equivalent of React context.
+ *
+ * Works controlled (`v-model:value` / `:value` + `@update:value`) or
+ * uncontrolled (`:default-value`). The default `v-model`/`modelValue`
+ * convention is intentionally not used, so the prop name matches every other
+ * framework's `value`/`valueChange` pair.
+ */
+type __VLS_Props = {
+    /**
+     * Selected tab's value, for controlled usage (`v-model:value`).
+     * @defaultValue undefined — uncontrolled, tracks its own selected value internally.
+     */
+    value?: string;
+    /**
+     * Initially selected tab's value, for uncontrolled usage.
+     * @defaultValue undefined — falls back to the first enabled trigger.
+     */
+    defaultValue?: string;
+    /**
+     * Layout axis; picks Arrow Left/Right vs Arrow Up/Down for keyboard
+     * navigation between triggers.
+     */
+    orientation?: TabsOrientation;
+    /**
+     * `'automatic'` selects a tab as soon as it receives focus. `'manual'`
+     * only selects on Enter/Space.
+     */
+    activationMode?: TabsActivationMode;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string) => any;
+    "value-change": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+}>, {
+    orientation: TabsOrientation;
+    activationMode: TabsActivationMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tabs/Tabs.vue.d.ts

@@ -0,0 +1,56 @@
+import { type TabsActivationMode, type TabsOrientation } from './context.js';
+/**
+ * The Vue implementation of the shared Tabs contract (see `@skdx/shared`'s
+ * `tabsContract`). Owns the selected value and `provide()`s it (plus
+ * orientation/activation-mode and a trigger registry) so a nested
+ * `<SkdxTabsList>` / `<SkdxTabsTrigger>` / `<SkdxTabsContent>` can `inject()`
+ * it — Vue's equivalent of React context.
+ *
+ * Works controlled (`v-model:value` / `:value` + `@update:value`) or
+ * uncontrolled (`:default-value`). The default `v-model`/`modelValue`
+ * convention is intentionally not used, so the prop name matches every other
+ * framework's `value`/`valueChange` pair.
+ */
+type __VLS_Props = {
+    /**
+     * Selected tab's value, for controlled usage (`v-model:value`).
+     * @defaultValue undefined — uncontrolled, tracks its own selected value internally.
+     */
+    value?: string;
+    /**
+     * Initially selected tab's value, for uncontrolled usage.
+     * @defaultValue undefined — falls back to the first enabled trigger.
+     */
+    defaultValue?: string;
+    /**
+     * Layout axis; picks Arrow Left/Right vs Arrow Up/Down for keyboard
+     * navigation between triggers.
+     */
+    orientation?: TabsOrientation;
+    /**
+     * `'automatic'` selects a tab as soon as it receives focus. `'manual'`
+     * only selects on Enter/Space.
+     */
+    activationMode?: TabsActivationMode;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string) => any;
+    "value-change": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+}>, {
+    orientation: TabsOrientation;
+    activationMode: TabsActivationMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tabs/Tabs.vue.js

@@ -0,0 +1 @@
+import e from"./Tabs.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/tabs/Tabs.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("./context.cjs");let t=require("vue");var m=["data-orientation"],b=(0,t.defineComponent)({__name:"Tabs",props:{value:{},defaultValue:{},orientation:{default:"horizontal"},activationMode:{default:"automatic"}},emits:["update:value","value-change"],setup(u,{emit:d}){const a=u,i=d,s=r.nextTabsBaseId(),l=(0,t.ref)(a.defaultValue),c=(0,t.computed)(()=>a.value!==void 0?a.value:l.value);function v(e){a.value===void 0&&(l.value=e),i("update:value",e),i("value-change",e)}const o=[];function f(){return o.find(e=>!e.disabled)?.value??null}function p(e,n){o.push({value:e,disabled:n})}function _(e){const n=o.findIndex(g=>g.value===e);n!==-1&&o.splice(n,1)}return(0,t.provide)(r.TABS_CONTEXT,{baseId:s,orientation:()=>a.orientation,activationMode:()=>a.activationMode,selectedValue:()=>c.value,firstEnabledValue:f,setValue:v,registerTrigger:p,unregisterTrigger:_}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-tabs","data-part":"root","data-skdx-component":"tabs","data-orientation":u.orientation},[(0,t.renderSlot)(e.$slots,"default")],8,m))}});exports.default=b;

package/dist/tabs/Tabs.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TABS_CONTEXT as e,nextTabsBaseId as a}from"./context.js";import{computed as t,createElementBlock as o,defineComponent as n,openBlock as i,provide as u,ref as l,renderSlot as s}from"vue";var d=["data-orientation"],r=/* @__PURE__ */n({__name:"Tabs",props:{value:{},defaultValue:{},orientation:{default:"horizontal"},activationMode:{default:"automatic"}},emits:["update:value","value-change"],setup(n,{emit:r}){const v=n,c=r,f=a(),p=l(v.defaultValue),m=t(()=>void 0!==v.value?v.value:p.value),b=[];return u(e,{baseId:f,orientation:()=>v.orientation,activationMode:()=>v.activationMode,selectedValue:()=>m.value,firstEnabledValue:function(){return b.find(e=>!e.disabled)?.value??null},setValue:function(e){void 0===v.value&&(p.value=e),c("update:value",e),c("value-change",e)},registerTrigger:function(e,a){b.push({value:e,disabled:a})},unregisterTrigger:function(e){const a=b.findIndex(a=>a.value===e);-1!==a&&b.splice(a,1)}}),(e,a)=>(i(),o("div",{class:"skdx-tabs","data-part":"root","data-skdx-component":"tabs","data-orientation":n.orientation},[s(e.$slots,"default")],8,d))}});export{r as default};

package/dist/tabs/TabsContent.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TabsContent.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/tabs/TabsContent.vue.d.cts

@@ -0,0 +1,27 @@
+/**
+ * Panel shown when its `value` matches the parent `SkdxTabs`' selected
+ * value. Renders `role="tabpanel"`, is not rendered while inactive unless
+ * `forceMount` is set, and is a focusable landmark (`tabindex="0"`) so
+ * keyboard users can tab from the trigger straight into the panel's
+ * content.
+ */
+type __VLS_Props = {
+    /** Unique identifier matched against the `SkdxTabsTrigger` that reveals this panel. */
+    value: string;
+    /** Keep this panel mounted (hidden via the `hidden` attribute) even while inactive, instead of unmounting it. */
+    forceMount?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    forceMount: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tabs/TabsContent.vue.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Panel shown when its `value` matches the parent `SkdxTabs`' selected
+ * value. Renders `role="tabpanel"`, is not rendered while inactive unless
+ * `forceMount` is set, and is a focusable landmark (`tabindex="0"`) so
+ * keyboard users can tab from the trigger straight into the panel's
+ * content.
+ */
+type __VLS_Props = {
+    /** Unique identifier matched against the `SkdxTabsTrigger` that reveals this panel. */
+    value: string;
+    /** Keep this panel mounted (hidden via the `hidden` attribute) even while inactive, instead of unmounting it. */
+    forceMount?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    forceMount: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tabs/TabsContent.vue.js

@@ -0,0 +1 @@
+import t from"./TabsContent.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/tabs/TabsContent.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const o=require("./context.cjs");let e=require("vue");var s=["id","aria-labelledby","data-state","data-orientation","hidden"],c=(0,e.defineComponent)({__name:"TabsContent",props:{value:{},forceMount:{type:Boolean,default:!1}},setup(d){const a=d,t=(0,e.inject)(o.TABS_CONTEXT);if(!t)throw new Error("SkdxTabsContent must be used within SkdxTabs");const n=(0,e.computed)(()=>t.selectedValue()===a.value),r=(0,e.computed)(()=>o.makeContentId(t.baseId,a.value)),l=(0,e.computed)(()=>o.makeTriggerId(t.baseId,a.value));return(u,i)=>d.forceMount||n.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-tabs__content","data-part":"content",role:"tabpanel",id:r.value,"aria-labelledby":l.value,"data-state":n.value?"active":"inactive","data-orientation":(0,e.unref)(t).orientation(),hidden:!n.value,tabindex:"0"},[(0,e.renderSlot)(u.$slots,"default")],8,s)):(0,e.createCommentVNode)("",!0)}});exports.default=c;

package/dist/tabs/TabsContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TABS_CONTEXT as e,makeContentId as a,makeTriggerId as t}from"./context.js";import{computed as n,createCommentVNode as o,createElementBlock as s,defineComponent as d,inject as l,openBlock as r,renderSlot as i,unref as u}from"vue";var c=["id","aria-labelledby","data-state","data-orientation","hidden"],v=/* @__PURE__ */d({__name:"TabsContent",props:{value:{},forceMount:{type:Boolean,default:!1}},setup(d){const v=d,b=l(e);if(!b)throw new Error("SkdxTabsContent must be used within SkdxTabs");const m=n(()=>b.selectedValue()===v.value),p=n(()=>a(b.baseId,v.value)),f=n(()=>t(b.baseId,v.value));return(e,a)=>d.forceMount||m.value?(r(),s("div",{key:0,class:"skdx-tabs__content","data-part":"content",role:"tabpanel",id:p.value,"aria-labelledby":f.value,"data-state":m.value?"active":"inactive","data-orientation":u(b).orientation(),hidden:!m.value,tabindex:"0"},[i(e.$slots,"default")],8,c)):o("",!0)}});export{v as default};

package/dist/tabs/TabsList.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TabsList.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/tabs/TabsList.vue.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Container for a `SkdxTabs`' triggers. Renders `role="tablist"` and drives
+ * roving-focus keyboard navigation (Arrow Left/Right for horizontal, Arrow
+ * Up/Down for vertical, plus Home/End) across its `SkdxTabsTrigger` children.
+ */
+type __VLS_Props = {
+    /** Whether arrow-key navigation wraps from the last trigger back to the first (and vice versa). */
+    loop?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tabs/TabsList.vue.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Container for a `SkdxTabs`' triggers. Renders `role="tablist"` and drives
+ * roving-focus keyboard navigation (Arrow Left/Right for horizontal, Arrow
+ * Up/Down for vertical, plus Home/End) across its `SkdxTabsTrigger` children.
+ */
+type __VLS_Props = {
+    /** Whether arrow-key navigation wraps from the last trigger back to the first (and vice versa). */
+    loop?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tabs/TabsList.vue.js

@@ -0,0 +1 @@
+import t from"./TabsList.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/tabs/TabsList.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const b=require("./context.cjs"),d=require("../utils/direction.cjs");let t=require("vue");var w=["aria-orientation","data-orientation"],x=(0,t.defineComponent)({__name:"TabsList",props:{loop:{type:Boolean,default:!0}},setup(f){const s=f,i=(0,t.inject)(b.TABS_CONTEXT);if(!i)throw new Error("SkdxTabsList must be used within SkdxTabs");const l=(0,t.ref)(null),_=d.useDirection(),p=n=>{const o=d.directionalKey(n.key,n.currentTarget,_()),a=l.value;if(!a)return;const r=Array.from(a.querySelectorAll('[role="tab"]')).filter(v=>!v.hasAttribute("disabled"));if(r.length===0)return;const c=r.indexOf(document.activeElement),u=i.orientation()==="vertical",h=u?["ArrowDown"]:["ArrowRight"],y=u?["ArrowUp"]:["ArrowLeft"];let e;h.includes(o)?(e=c+1,e>=r.length&&(e=s.loop?0:r.length-1)):y.includes(o)?(e=c-1,e<0&&(e=s.loop?r.length-1:0)):o==="Home"?e=0:o==="End"&&(e=r.length-1),e!==void 0&&(n.preventDefault(),r[e]?.focus())};return(n,o)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-tabs__list","data-part":"list",ref_key:"listRef",ref:l,role:"tablist","aria-orientation":(0,t.unref)(i).orientation(),"data-orientation":(0,t.unref)(i).orientation(),onKeydown:p},[(0,t.renderSlot)(n.$slots,"default")],40,w))}});exports.default=x;

package/dist/tabs/TabsList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TABS_CONTEXT as t}from"./context.js";import{directionalKey as e,useDirection as o}from"../utils/direction.js";import{createElementBlock as r,defineComponent as n,inject as a,openBlock as i,ref as s,renderSlot as l,unref as d}from"vue";var u=["aria-orientation","data-orientation"],c=/* @__PURE__ */n({__name:"TabsList",props:{loop:{type:Boolean,default:!0}},setup(n){const c=n,f=a(t);if(!f)throw new Error("SkdxTabsList must be used within SkdxTabs");const p=s(null),m=o(),b=t=>{const o=e(t.key,t.currentTarget,m()),r=p.value;if(!r)return;const n=Array.from(r.querySelectorAll('[role="tab"]')).filter(t=>!t.hasAttribute("disabled"));if(0===n.length)return;const a=n.indexOf(document.activeElement),i="vertical"===f.orientation(),s=i?["ArrowUp"]:["ArrowLeft"];let l;(i?["ArrowDown"]:["ArrowRight"]).includes(o)?(l=a+1,l>=n.length&&(l=c.loop?0:n.length-1)):s.includes(o)?(l=a-1,l<0&&(l=c.loop?n.length-1:0)):"Home"===o?l=0:"End"===o&&(l=n.length-1),void 0!==l&&(t.preventDefault(),n[l]?.focus())};return(t,e)=>(i(),r("div",{class:"skdx-tabs__list","data-part":"list",ref_key:"listRef",ref:p,role:"tablist","aria-orientation":d(f).orientation(),"data-orientation":d(f).orientation(),onKeydown:b},[l(t.$slots,"default")],40,u))}});export{c as default};

package/dist/tabs/TabsTrigger.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TabsTrigger.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/tabs/TabsTrigger.vue.d.cts

@@ -0,0 +1,26 @@
+/**
+ * A single tab button. Renders `role="tab"` with `aria-selected` and
+ * `data-state="active" | "inactive"` for styling; selecting it (click, or
+ * focus when `activationMode="automatic"`) updates the parent `SkdxTabs`'
+ * value.
+ */
+type __VLS_Props = {
+    /** Unique identifier matched against a sibling `SkdxTabsContent`'s `value`. */
+    value: string;
+    /** Excludes this trigger from focus/arrow-key navigation and selection. */
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tabs/TabsTrigger.vue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A single tab button. Renders `role="tab"` with `aria-selected` and
+ * `data-state="active" | "inactive"` for styling; selecting it (click, or
+ * focus when `activationMode="automatic"`) updates the parent `SkdxTabs`'
+ * value.
+ */
+type __VLS_Props = {
+    /** Unique identifier matched against a sibling `SkdxTabsContent`'s `value`. */
+    value: string;
+    /** Excludes this trigger from focus/arrow-key navigation and selection. */
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tabs/TabsTrigger.vue.js

@@ -0,0 +1 @@
+import e from"./TabsTrigger.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/tabs/TabsTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("./context.cjs");let t=require("vue");var b=["id","aria-selected","aria-controls","data-state","data-disabled","data-orientation","data-value","disabled","tabindex"],g=(0,t.defineComponent)({__name:"TabsTrigger",props:{value:{},disabled:{type:Boolean,default:!1}},setup(l){const e=l,a=(0,t.inject)(r.TABS_CONTEXT);if(!a)throw new Error("SkdxTabsTrigger must be used within SkdxTabs");a.registerTrigger(e.value,e.disabled),(0,t.onUnmounted)(()=>a.unregisterTrigger(e.value));const n=(0,t.computed)(()=>a.selectedValue()===e.value),i=(0,t.computed)(()=>r.makeTriggerId(a.baseId,e.value)),u=(0,t.computed)(()=>r.makeContentId(a.baseId,e.value)),s=(0,t.computed)(()=>n.value||a.selectedValue()===void 0&&a.firstEnabledValue()===e.value?0:-1),o=()=>{e.disabled||a.setValue(e.value)},c=()=>{a.activationMode()==="automatic"&&!e.disabled&&!n.value&&a.setValue(e.value)},v=d=>{(d.key===" "||d.key==="Enter")&&!e.disabled&&(d.preventDefault(),a.setValue(e.value))};return(d,f)=>((0,t.openBlock)(),(0,t.createElementBlock)("button",{class:"skdx-tabs__trigger","data-part":"trigger",type:"button",role:"tab",id:i.value,"aria-selected":n.value,"aria-controls":u.value,"data-state":n.value?"active":"inactive","data-disabled":l.disabled?"":null,"data-orientation":(0,t.unref)(a).orientation(),"data-value":l.value,disabled:l.disabled,tabindex:s.value,onClick:o,onFocus:c,onKeydown:v},[(0,t.renderSlot)(d.$slots,"default")],40,b))}});exports.default=g;

package/dist/tabs/TabsTrigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TABS_CONTEXT as e,makeContentId as a,makeTriggerId as t}from"./context.js";import{computed as l,createElementBlock as d,defineComponent as s,inject as i,onUnmounted as r,openBlock as o,renderSlot as n,unref as u}from"vue";var v=["id","aria-selected","aria-controls","data-state","data-disabled","data-orientation","data-value","disabled","tabindex"],b=/* @__PURE__ */s({__name:"TabsTrigger",props:{value:{},disabled:{type:Boolean,default:!1}},setup(s){const b=s,c=i(e);if(!c)throw new Error("SkdxTabsTrigger must be used within SkdxTabs");c.registerTrigger(b.value,b.disabled),r(()=>c.unregisterTrigger(b.value));const g=l(()=>c.selectedValue()===b.value),m=l(()=>t(c.baseId,b.value)),p=l(()=>a(c.baseId,b.value)),T=l(()=>g.value||void 0===c.selectedValue()&&c.firstEnabledValue()===b.value?0:-1),f=()=>{b.disabled||c.setValue(b.value)},k=()=>{"automatic"===c.activationMode()&&!b.disabled&&!g.value&&c.setValue(b.value)},x=e=>{(" "===e.key||"Enter"===e.key)&&!b.disabled&&(e.preventDefault(),c.setValue(b.value))};return(e,a)=>(o(),d("button",{class:"skdx-tabs__trigger","data-part":"trigger",type:"button",role:"tab",id:m.value,"aria-selected":g.value,"aria-controls":p.value,"data-state":g.value?"active":"inactive","data-disabled":s.disabled?"":null,"data-orientation":u(c).orientation(),"data-value":s.value,disabled:s.disabled,tabindex:T.value,onClick:f,onFocus:k,onKeydown:x},[n(e.$slots,"default")],40,v))}});export{b as default};

package/dist/tabs/context.cjs

@@ -0,0 +1 @@
+const n=require("../utils/id.cjs");var r=Symbol("skdx-tabs-context");function a(e,t){return`${e}-trigger-${t}`}function T(e,t){return`${e}-content-${t}`}function d(){return n.nextId("tabs")}exports.TABS_CONTEXT=r;exports.makeContentId=T;exports.makeTriggerId=a;exports.nextTabsBaseId=d;

package/dist/tabs/context.d.cts

@@ -0,0 +1,31 @@
+import type { InjectionKey } from 'vue';
+/** @internal Whether a Tabs list runs horizontally or vertically. */
+export type TabsOrientation = 'horizontal' | 'vertical';
+/** @internal Whether focusing a tab selects it immediately (automatic) or only on Enter/Space (manual). */
+export type TabsActivationMode = 'automatic' | 'manual';
+/**
+ * @internal Injection key a Tabs provides so TabsList/TabsTrigger/TabsContent
+ * can read shared state. `orientation`/`activationMode`/`value` are getter
+ * functions rather than raw refs so Vue's reactivity tracking (which follows
+ * the call stack, not the property-access graph) still applies correctly
+ * when a child reads them through this indirection inside its own
+ * `computed`.
+ */
+export interface TabsContext {
+    baseId: string;
+    orientation: () => TabsOrientation;
+    activationMode: () => TabsActivationMode;
+    selectedValue: () => string | undefined;
+    firstEnabledValue: () => string | null;
+    setValue(value: string): void;
+    registerTrigger(value: string, disabled: boolean): void;
+    unregisterTrigger(value: string): void;
+}
+/** @internal Injection key a Tabs provides so its List/Trigger/Content parts share selection and trigger registration. */
+export declare const TABS_CONTEXT: InjectionKey<TabsContext>;
+/** @internal Builds the DOM id for a TabsTrigger from the Tabs base id and tab value. */
+export declare function makeTriggerId(baseId: string, value: string): string;
+/** @internal Builds the DOM id for a TabsContent panel from the Tabs base id and tab value. */
+export declare function makeContentId(baseId: string, value: string): string;
+/** @internal Generates a unique base id shared by one Tabs instance's trigger and content ids. */
+export declare function nextTabsBaseId(): string;

package/dist/tabs/context.d.ts

@@ -0,0 +1,31 @@
+import type { InjectionKey } from 'vue';
+/** @internal Whether a Tabs list runs horizontally or vertically. */
+export type TabsOrientation = 'horizontal' | 'vertical';
+/** @internal Whether focusing a tab selects it immediately (automatic) or only on Enter/Space (manual). */
+export type TabsActivationMode = 'automatic' | 'manual';
+/**
+ * @internal Injection key a Tabs provides so TabsList/TabsTrigger/TabsContent
+ * can read shared state. `orientation`/`activationMode`/`value` are getter
+ * functions rather than raw refs so Vue's reactivity tracking (which follows
+ * the call stack, not the property-access graph) still applies correctly
+ * when a child reads them through this indirection inside its own
+ * `computed`.
+ */
+export interface TabsContext {
+    baseId: string;
+    orientation: () => TabsOrientation;
+    activationMode: () => TabsActivationMode;
+    selectedValue: () => string | undefined;
+    firstEnabledValue: () => string | null;
+    setValue(value: string): void;
+    registerTrigger(value: string, disabled: boolean): void;
+    unregisterTrigger(value: string): void;
+}
+/** @internal Injection key a Tabs provides so its List/Trigger/Content parts share selection and trigger registration. */
+export declare const TABS_CONTEXT: InjectionKey<TabsContext>;
+/** @internal Builds the DOM id for a TabsTrigger from the Tabs base id and tab value. */
+export declare function makeTriggerId(baseId: string, value: string): string;
+/** @internal Builds the DOM id for a TabsContent panel from the Tabs base id and tab value. */
+export declare function makeContentId(baseId: string, value: string): string;
+/** @internal Generates a unique base id shared by one Tabs instance's trigger and content ids. */
+export declare function nextTabsBaseId(): string;

package/dist/tabs/context.js

@@ -0,0 +1 @@
+import{nextId as t}from"../utils/id.js";var n=/* @__PURE__ */Symbol("skdx-tabs-context");function e(t,n){return`${t}-trigger-${n}`}function r(t,n){return`${t}-content-${n}`}function a(){return t("tabs")}export{n as TABS_CONTEXT,r as makeContentId,e as makeTriggerId,a as nextTabsBaseId};