@skdx/vue 0.28.0 → 0.29.0

package/dist/tabs/TabsContent.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/tabs/TabsContent.vue_vue_type_script_setup_true_lang.js

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

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

@@ -1,17 +1,16 @@
 /**
- * Container for `SkdxTabs`' triggers. Renders `role="tablist"` with roving-focus
- * navigation (Arrow keys, Home, End).
+ * Container for `SkdxTabs`' triggers, rendering `role="tablist"` with roving-focus navigation.
  */
 type __VLS_Props = {
     /** Whether arrow-key navigation wraps from the last trigger back to the first (and vice versa). */
-    loop?: boolean;
+    loop?: boolean | undefined;
 };
 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;
+    loop: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,17 +1,16 @@
 /**
- * Container for `SkdxTabs`' triggers. Renders `role="tablist"` with roving-focus
- * navigation (Arrow keys, Home, End).
+ * Container for `SkdxTabs`' triggers, rendering `role="tablist"` with roving-focus navigation.
  */
 type __VLS_Props = {
     /** Whether arrow-key navigation wraps from the last trigger back to the first (and vice versa). */
-    loop?: boolean;
+    loop?: boolean | undefined;
 };
 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;
+    loop: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/tabs/TabsList.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/tabs/TabsList.vue_vue_type_script_setup_true_lang.js

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

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

@@ -1,23 +1,18 @@
 /**
- * Tab button, renders `role="tab"` with `aria-selected` and `data-state`.
- * Selecting updates parent `SkdxTabs` value via click or focus (if automatic).
+ * Tab button that renders `role="tab"` and updates the parent `SkdxTabs` value on click or automatic focus.
  */
 type __VLS_Props = {
     /** Unique identifier matched against a sibling `SkdxTabsContent`'s `value`. */
     value: string;
-    /**
-     * Excludes this trigger from focus/arrow-key navigation and selection, and
-     * keeps it out of the tab order. OR-ed with the root's `disabled`, never
-     * overridden.
-     */
-    disabled?: boolean;
+    /** Excludes this trigger from focus, navigation, and selection, OR-ed with the root's `disabled`. */
+    disabled?: boolean | undefined;
 };
 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;
+    disabled: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,23 +1,18 @@
 /**
- * Tab button, renders `role="tab"` with `aria-selected` and `data-state`.
- * Selecting updates parent `SkdxTabs` value via click or focus (if automatic).
+ * Tab button that renders `role="tab"` and updates the parent `SkdxTabs` value on click or automatic focus.
  */
 type __VLS_Props = {
     /** Unique identifier matched against a sibling `SkdxTabsContent`'s `value`. */
     value: string;
-    /**
-     * Excludes this trigger from focus/arrow-key navigation and selection, and
-     * keeps it out of the tab order. OR-ed with the root's `disabled`, never
-     * overridden.
-     */
-    disabled?: boolean;
+    /** Excludes this trigger from focus, navigation, and selection, OR-ed with the root's `disabled`. */
+    disabled?: boolean | undefined;
 };
 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;
+    disabled: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/tabs/TabsTrigger.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/tabs/TabsTrigger.vue_vue_type_script_setup_true_lang.js

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

package/dist/tabs/context.d.cts

@@ -1,4 +1,4 @@
-import type { InjectionKey } from 'vue';
+import type { InjectionKey, Ref } from 'vue';
 /** Change reason: keyboard, pointer, or programmatic. */
 export type TabsChangeReason = 'keyboard' | 'pointer' | 'programmatic';
 /**
@@ -17,45 +17,32 @@ 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`.
+ * Injection key a Tabs provides so its List/Trigger/Content parts can read shared state.
+ * @internal
  */
 export interface TabsContext {
     baseId: string;
     orientation: () => TabsOrientation;
     activationMode: () => TabsActivationMode;
     selectedValue: () => string | undefined;
-    firstEnabledValue: () => string | null;
-    /** The root's `disabled`, OR-ed into every trigger's own. */
-    disabled: () => boolean;
     /**
-     * Whether the focus currently being dispatched was moved by the tablist's own
-     * Arrow/Home/End handling. Raised and lowered by `SkdxTabsList` around the
-     * synchronous `focus()` call, and read by a trigger's focus handler so
-     * automatic activation fires for a keyboard *browse* and not for every focus
-     * event. A plain mutable object rather than a `ref`: it is a fact about the
-     * event being dispatched right now, read synchronously inside that dispatch,
-     * and nothing renders from it.
+     * The value of the trigger holding the list's single tab stop — the selected
+     * trigger while it is mounted and enabled, else the first enabled one. `null`
+     * until the list resolves it, which never happens on the server.
      */
+    tabStopValue: Ref<string | null>;
+    /** The root's `disabled`, OR-ed into every trigger's own. */
+    disabled: () => boolean;
+    /** Whether the focus being dispatched was moved by the tablist's own Arrow/Home/End handling. */
     arrowNavigating: {
         current: boolean;
     };
-    /**
-     * Whether the panel for `value` is currently in the DOM, so a trigger only
-     * publishes `aria-controls` for one that exists. The panels report
-     * themselves: `forceMount` lives on the panel and a trigger cannot see it.
-     */
+    /** Whether the panel for `value` is currently in the DOM, so a trigger only publishes `aria-controls` for one that exists. */
     isContentMounted(value: string): boolean;
     registerContent(value: string): void;
     unregisterContent(value: string): void;
     /** Selects `value` and reports it, tagged with what drove the selection. */
     setValue(value: string, reason: TabsChangeReason): 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>;

package/dist/tabs/context.d.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey } from 'vue';
+import type { InjectionKey, Ref } from 'vue';
 /** Change reason: keyboard, pointer, or programmatic. */
 export type TabsChangeReason = 'keyboard' | 'pointer' | 'programmatic';
 /**
@@ -17,45 +17,32 @@ 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`.
+ * Injection key a Tabs provides so its List/Trigger/Content parts can read shared state.
+ * @internal
  */
 export interface TabsContext {
     baseId: string;
     orientation: () => TabsOrientation;
     activationMode: () => TabsActivationMode;
     selectedValue: () => string | undefined;
-    firstEnabledValue: () => string | null;
-    /** The root's `disabled`, OR-ed into every trigger's own. */
-    disabled: () => boolean;
     /**
-     * Whether the focus currently being dispatched was moved by the tablist's own
-     * Arrow/Home/End handling. Raised and lowered by `SkdxTabsList` around the
-     * synchronous `focus()` call, and read by a trigger's focus handler so
-     * automatic activation fires for a keyboard *browse* and not for every focus
-     * event. A plain mutable object rather than a `ref`: it is a fact about the
-     * event being dispatched right now, read synchronously inside that dispatch,
-     * and nothing renders from it.
+     * The value of the trigger holding the list's single tab stop — the selected
+     * trigger while it is mounted and enabled, else the first enabled one. `null`
+     * until the list resolves it, which never happens on the server.
      */
+    tabStopValue: Ref<string | null>;
+    /** The root's `disabled`, OR-ed into every trigger's own. */
+    disabled: () => boolean;
+    /** Whether the focus being dispatched was moved by the tablist's own Arrow/Home/End handling. */
     arrowNavigating: {
         current: boolean;
     };
-    /**
-     * Whether the panel for `value` is currently in the DOM, so a trigger only
-     * publishes `aria-controls` for one that exists. The panels report
-     * themselves: `forceMount` lives on the panel and a trigger cannot see it.
-     */
+    /** Whether the panel for `value` is currently in the DOM, so a trigger only publishes `aria-controls` for one that exists. */
     isContentMounted(value: string): boolean;
     registerContent(value: string): void;
     unregisterContent(value: string): void;
     /** Selects `value` and reports it, tagged with what drove the selection. */
     setValue(value: string, reason: TabsChangeReason): 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>;

package/dist/tabs/primitives.d.cts

@@ -1,7 +1,5 @@
 /**
- * Advanced primitives for `SkdxTabs` — the parts the recipe composes. Use when
- * the derived anatomy is not the structure you need — toolbar beside the list,
- * panels kept mounted, custom layouts.
+ * Advanced primitives for `SkdxTabs` — the parts the recipe composes, for layouts the derived anatomy can't express.
  *
  * @example
  * ```vue

package/dist/tabs/primitives.d.ts

@@ -1,7 +1,5 @@
 /**
- * Advanced primitives for `SkdxTabs` — the parts the recipe composes. Use when
- * the derived anatomy is not the structure you need — toolbar beside the list,
- * panels kept mounted, custom layouts.
+ * Advanced primitives for `SkdxTabs` — the parts the recipe composes, for layouts the derived anatomy can't express.
  *
  * @example
  * ```vue

package/dist/tag-group/TagGroup.vue.d.cts

@@ -1,13 +1,7 @@
 import { type TagGroupOrientation, type TagRemovedDetail } from './context.cjs';
 import type { TagGroupTag } from './types.cjs';
 /**
- * Keyboard-navigable list of `<SkdxTag>`s with single Tab stop. Arrow keys
- * navigate between tags; when deleted, focus moves to the next tag instead of
- * falling back to `<body>`.
- *
- * Auto-derives `SkdxTag` items from `tags` prop, or use the default slot to
- * compose. Requires `aria-label` or `aria-labelledby` since `role="list"` has
- * no implicit name.
+ * Keyboard-navigable list of `<SkdxTag>`s with a single Tab stop, arrow-key navigation, and focus handoff on removal.
  *
  * @example
  * ```vue
@@ -20,9 +14,9 @@ import type { TagGroupTag } from './types.cjs';
  */
 type __VLS_Props = {
     /** Layout axis for arrow-key navigation, exposed as `data-orientation`. */
-    orientation?: TagGroupOrientation;
+    orientation?: TagGroupOrientation | undefined;
     /** Whether arrow-key navigation wraps at group boundaries. */
-    loop?: boolean;
+    loop?: boolean | undefined;
     /**
      * Disables every tag in the group: none can be removed, each mirrors
      * `data-disabled`, and arrow-key navigation skips them all.
@@ -34,7 +28,12 @@ type __VLS_Props = {
      * its own tags.
      * @default undefined — nothing is derived; compose the tags in the default slot.
      */
-    tags?: readonly TagGroupTag[];
+    tags?: readonly TagGroupTag[] | undefined;
+    /**
+     * How tightly the skin packs the group's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'comfortable' | 'compact' | (string & {}) | undefined;
 };
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
@@ -49,12 +48,12 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (detail: TagRemovedDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onRemove?: ((detail: TagRemovedDetail) => any) | undefined;
+    onRemove?: (detail: TagRemovedDetail) => any;
 }>, {
     disabled: boolean;
-    loop: boolean;
-    orientation: TagGroupOrientation;
-    tags: readonly TagGroupTag[];
+    orientation: TagGroupOrientation | undefined;
+    loop: boolean | undefined;
+    tags: readonly TagGroupTag[] | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/tag-group/TagGroup.vue.d.ts

@@ -1,13 +1,7 @@
 import { type TagGroupOrientation, type TagRemovedDetail } from './context.js';
 import type { TagGroupTag } from './types.js';
 /**
- * Keyboard-navigable list of `<SkdxTag>`s with single Tab stop. Arrow keys
- * navigate between tags; when deleted, focus moves to the next tag instead of
- * falling back to `<body>`.
- *
- * Auto-derives `SkdxTag` items from `tags` prop, or use the default slot to
- * compose. Requires `aria-label` or `aria-labelledby` since `role="list"` has
- * no implicit name.
+ * Keyboard-navigable list of `<SkdxTag>`s with a single Tab stop, arrow-key navigation, and focus handoff on removal.
  *
  * @example
  * ```vue
@@ -20,9 +14,9 @@ import type { TagGroupTag } from './types.js';
  */
 type __VLS_Props = {
     /** Layout axis for arrow-key navigation, exposed as `data-orientation`. */
-    orientation?: TagGroupOrientation;
+    orientation?: TagGroupOrientation | undefined;
     /** Whether arrow-key navigation wraps at group boundaries. */
-    loop?: boolean;
+    loop?: boolean | undefined;
     /**
      * Disables every tag in the group: none can be removed, each mirrors
      * `data-disabled`, and arrow-key navigation skips them all.
@@ -34,7 +28,12 @@ type __VLS_Props = {
      * its own tags.
      * @default undefined — nothing is derived; compose the tags in the default slot.
      */
-    tags?: readonly TagGroupTag[];
+    tags?: readonly TagGroupTag[] | undefined;
+    /**
+     * How tightly the skin packs the group's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'comfortable' | 'compact' | (string & {}) | undefined;
 };
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
@@ -49,12 +48,12 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (detail: TagRemovedDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onRemove?: ((detail: TagRemovedDetail) => any) | undefined;
+    onRemove?: (detail: TagRemovedDetail) => any;
 }>, {
     disabled: boolean;
-    loop: boolean;
-    orientation: TagGroupOrientation;
-    tags: readonly TagGroupTag[];
+    orientation: TagGroupOrientation | undefined;
+    loop: boolean | undefined;
+    tags: readonly TagGroupTag[] | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/tag-group/TagGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const G=require("../utils/useRovingFocus.cjs"),n=require("./context.cjs"),I=require("./TagGroupAnatomy.vue.cjs");let e=require("vue");var O=["role","data-orientation","data-disabled","aria-labelledby"],q=(0,e.defineComponent)({__name:"TagGroup",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},tags:{default:void 0}},emits:["remove"],setup(r,{emit:S}){const i=r,_=S,g=(0,e.useAttrs)(),w=(0,e.getCurrentInstance)(),A=()=>w?.vnode.props?.onRemove!=null,s=(0,e.ref)(0),l=(0,e.ref)(0),u=(0,e.ref)(void 0),d=(0,e.ref)(0),c=(0,e.computed)(()=>d.value>0),y=new Map,v=(0,e.ref)(null),T=(0,e.computed)(()=>({"aria-label":g["aria-label"],"aria-labelledby":u.value??g["aria-labelledby"]}));let m=null;const R=(0,e.computed)(()=>l.value===0?s.value:Math.min(s.value,l.value-1));(0,e.watch)(l,async(t,a)=>{if(t>=a)return;await(0,e.nextTick)();const o=v.value,C=m;if(!o||!C||C.isConnected)return;const E=o.ownerDocument,p=E.activeElement;if(p&&p!==E.body&&p.isConnected)return;m=null;const b=Array.from(o.querySelectorAll(n.TAG_SELECTOR)),f=b[Math.min(R.value,b.length-1)];(f??o).focus(),f&&(s.value=b.indexOf(f))});const k=(0,e.computed)(()=>G.useRovingFocus({orientation:i.orientation,loop:i.loop,itemSelector:n.TAG_SELECTOR,scopeSelector:n.TAG_GROUP_SELECTOR}));return(0,e.provide)(n.TAG_GROUP_CONTEXT,{tabStopIndex:R,setActiveIndex(t){s.value=t;const a=v.value,o=a?.ownerDocument.activeElement;a&&o&&a.contains(o)&&(m=o)},register(t){return l.value+=1,n.warnOnDuplicateIndex(y,t,1),()=>{l.value-=1,n.warnOnDuplicateIndex(y,t,-1)}},onTagRemoved(t){_("remove",t)},count:(0,e.computed)(()=>l.value),labelId:(0,e.computed)(()=>u.value),registerLabel(t){return u.value=t,()=>{u.value===t&&(u.value=void 0)}},hasList:c,registerList(){return d.value+=1,()=>{d.value-=1}},labelling:T,orientation:(0,e.computed)(()=>i.orientation),disabled:(0,e.computed)(()=>i.disabled)}),(t,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-tag-group","data-part":"root","data-skdx-component":"tag-group",role:c.value?void 0:"list","data-skdx-tag-group":"","data-orientation":r.orientation,"data-disabled":r.disabled?"":void 0,"aria-labelledby":c.value?void 0:T.value["aria-labelledby"],tabindex:-1,ref_key:"rootRef",ref:v,onKeydown:a[0]||(a[0]=(...o)=>k.value&&k.value(...o))},[(0,e.renderSlot)(t.$slots,"default",{},()=>[r.tags?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:0},[(0,e.renderSlot)(t.$slots,"label"),(0,e.renderSlot)(t.$slots,"list",{},()=>[(0,e.createVNode)(I.default,{tags:r.tags,removable:A()},null,8,["tags","removable"])]),l.value===0?(0,e.renderSlot)(t.$slots,"empty",{key:0}):(0,e.createCommentVNode)("",!0)],64)):(0,e.createCommentVNode)("",!0)])],40,O))}});exports.default=q;
+const G=require("../utils/appearance.cjs"),r=require("./context.cjs"),I=require("../utils/useRovingFocus.cjs"),O=require("./TagGroupAnatomy.vue.cjs");let e=require("vue");var h=["role","data-orientation","data-disabled","aria-label","aria-labelledby"],_=(0,e.defineComponent)({inheritAttrs:!1,__name:"TagGroup",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},tags:{default:void 0},density:{}},emits:["remove"],setup(n,{emit:E}){const u=n,S=E,y=(0,e.useAttrs)(),q=(0,e.getCurrentInstance)(),w=()=>q?.vnode.props?.onRemove!=null,s=(0,e.ref)(0),l=(0,e.ref)(0),i=(0,e.ref)(void 0),c=(0,e.ref)(0),d=(0,e.computed)(()=>c.value>0),T=new Map,v=(0,e.ref)(null),m=(0,e.computed)(()=>({"aria-label":y["aria-label"],"aria-labelledby":i.value??y["aria-labelledby"]}));let p=null;const R=(0,e.computed)(()=>l.value===0?s.value:Math.min(s.value,l.value-1));(0,e.watch)(l,async(t,o)=>{if(t>=o)return;await(0,e.nextTick)();const a=v.value,A=p;if(!a||!A||A.isConnected)return;const C=a.ownerDocument,b=C.activeElement;if(b&&b!==C.body&&b.isConnected)return;p=null;const f=Array.from(a.querySelectorAll(r.TAG_SELECTOR)),g=f[Math.min(R.value,f.length-1)];(g??a).focus(),g&&(s.value=f.indexOf(g))});const k=(0,e.computed)(()=>I.useRovingFocus({orientation:u.orientation,loop:u.loop,itemSelector:r.TAG_SELECTOR,scopeSelector:r.TAG_GROUP_SELECTOR}));return(0,e.provide)(r.TAG_GROUP_CONTEXT,{tabStopIndex:R,setActiveIndex(t){s.value=t;const o=v.value,a=o?.ownerDocument.activeElement;o&&a&&o.contains(a)&&(p=a)},register(t){return l.value+=1,r.warnOnDuplicateIndex(T,t,1),()=>{l.value-=1,r.warnOnDuplicateIndex(T,t,-1)}},onTagRemoved(t){S("remove",t)},count:(0,e.computed)(()=>l.value),labelId:(0,e.computed)(()=>i.value),registerLabel(t){return i.value=t,()=>{i.value===t&&(i.value=void 0)}},hasList:d,registerList(){return c.value+=1,()=>{c.value-=1}},labelling:m,orientation:(0,e.computed)(()=>u.orientation),disabled:(0,e.computed)(()=>u.disabled)}),(t,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({...t.$attrs,...(0,e.unref)(G.appearanceAttrs)({density:n.density},t.$attrs)},{ref_key:"rootRef",ref:v,class:"skdx-tag-group","data-part":"root","data-skdx-component":"tag-group",role:d.value?void 0:"list","data-skdx-tag-group":"","data-orientation":n.orientation,"data-disabled":n.disabled?"":void 0,"aria-label":d.value?void 0:m.value["aria-label"],"aria-labelledby":d.value?void 0:m.value["aria-labelledby"],tabindex:-1,onKeydown:o[0]||(o[0]=(...a)=>k.value&&k.value(...a))}),[(0,e.renderSlot)(t.$slots,"default",{},()=>[n.tags?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:0},[(0,e.renderSlot)(t.$slots,"label"),(0,e.renderSlot)(t.$slots,"list",{},()=>[(0,e.createVNode)(O.default,{tags:n.tags,removable:w()},null,8,["tags","removable"])]),l.value===0?(0,e.renderSlot)(t.$slots,"empty",{key:0}):(0,e.createCommentVNode)("",!0)],64)):(0,e.createCommentVNode)("",!0)])],16,h))}});exports.default=_;

package/dist/tag-group/TagGroup.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useRovingFocus as e}from"../utils/useRovingFocus.js";import{TAG_GROUP_CONTEXT as a,TAG_GROUP_SELECTOR as t,TAG_SELECTOR as o,warnOnDuplicateIndex as l}from"./context.js";import n from"./TagGroupAnatomy.vue.js";import{Fragment as s,computed as r,createCommentVNode as i,createElementBlock as u,createVNode as d,defineComponent as v,getCurrentInstance as c,nextTick as m,openBlock as p,provide as b,ref as g,renderSlot as f,useAttrs as y,watch as x}from"vue";var T=["role","data-orientation","data-disabled","aria-labelledby"],k=/* @__PURE__ */v({__name:"TagGroup",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},tags:{default:void 0}},emits:["remove"],setup(v,{emit:k}){const R=v,A=k,C=y(),E=c(),_=g(0),w=g(0),G=g(void 0),O=g(0),S=r(()=>O.value>0),h=/* @__PURE__ */new Map,I=g(null),L=r(()=>({"aria-label":C["aria-label"],"aria-labelledby":G.value??C["aria-labelledby"]}));let B=null;const $=r(()=>0===w.value?_.value:Math.min(_.value,w.value-1));x(w,async(e,a)=>{if(e>=a)return;await m();const t=I.value;if(!t||!B||B.isConnected)return;const l=t.ownerDocument,n=l.activeElement;if(n&&n!==l.body&&n.isConnected)return;B=null;const s=Array.from(t.querySelectorAll(o)),r=s[Math.min($.value,s.length-1)];(r??t).focus(),r&&(_.value=s.indexOf(r))});const j=r(()=>e({orientation:R.orientation,loop:R.loop,itemSelector:o,scopeSelector:t}));return b(a,{tabStopIndex:$,setActiveIndex(e){_.value=e;const a=I.value,t=a?.ownerDocument.activeElement;a&&t&&a.contains(t)&&(B=t)},register:e=>(w.value+=1,l(h,e,1),()=>{w.value-=1,l(h,e,-1)}),onTagRemoved(e){A("remove",e)},count:r(()=>w.value),labelId:r(()=>G.value),registerLabel:e=>(G.value=e,()=>{G.value===e&&(G.value=void 0)}),hasList:S,registerList:()=>(O.value+=1,()=>{O.value-=1}),labelling:L,orientation:r(()=>R.orientation),disabled:r(()=>R.disabled)}),(e,a)=>(p(),u("div",{class:"skdx-tag-group","data-part":"root","data-skdx-component":"tag-group",role:S.value?void 0:"list","data-skdx-tag-group":"","data-orientation":v.orientation,"data-disabled":v.disabled?"":void 0,"aria-labelledby":S.value?void 0:L.value["aria-labelledby"],tabindex:-1,ref_key:"rootRef",ref:I,onKeydown:a[0]||(a[0]=(...e)=>j.value&&j.value(...e))},[f(e.$slots,"default",{},()=>[v.tags?(p(),u(s,{key:0},[f(e.$slots,"label"),f(e.$slots,"list",{},()=>[d(n,{tags:v.tags,removable:null!=E?.vnode.props?.onRemove},null,8,["tags","removable"])]),0===w.value?f(e.$slots,"empty",{key:0}):i("",!0)],64)):i("",!0)])],40,T))}});export{k as default};
+import{appearanceAttrs as e}from"../utils/appearance.js";import{TAG_GROUP_CONTEXT as a,TAG_GROUP_SELECTOR as t,TAG_SELECTOR as o,warnOnDuplicateIndex as l}from"./context.js";import{useRovingFocus as r}from"../utils/useRovingFocus.js";import s from"./TagGroupAnatomy.vue.js";import{Fragment as n,computed as i,createCommentVNode as u,createElementBlock as d,createVNode as v,defineComponent as c,getCurrentInstance as m,mergeProps as p,nextTick as b,openBlock as g,provide as f,ref as y,renderSlot as x,unref as T,useAttrs as A,watch as k}from"vue";var R=["role","data-orientation","data-disabled","aria-label","aria-labelledby"],C=/* @__PURE__ */c({inheritAttrs:!1,__name:"TagGroup",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},tags:{default:void 0},density:{}},emits:["remove"],setup(c,{emit:C}){const E=c,_=C,h=A(),w=m(),G=y(0),O=y(0),S=y(void 0),$=y(0),I=i(()=>$.value>0),L=/* @__PURE__ */new Map,j=y(null),B=i(()=>({"aria-label":h["aria-label"],"aria-labelledby":S.value??h["aria-labelledby"]}));let D=null;const F=i(()=>0===O.value?G.value:Math.min(G.value,O.value-1));k(O,async(e,a)=>{if(e>=a)return;await b();const t=j.value;if(!t||!D||D.isConnected)return;const l=t.ownerDocument,r=l.activeElement;if(r&&r!==l.body&&r.isConnected)return;D=null;const s=Array.from(t.querySelectorAll(o)),n=s[Math.min(F.value,s.length-1)];(n??t).focus(),n&&(G.value=s.indexOf(n))});const M=i(()=>r({orientation:E.orientation,loop:E.loop,itemSelector:o,scopeSelector:t}));return f(a,{tabStopIndex:F,setActiveIndex(e){G.value=e;const a=j.value,t=a?.ownerDocument.activeElement;a&&t&&a.contains(t)&&(D=t)},register:e=>(O.value+=1,l(L,e,1),()=>{O.value-=1,l(L,e,-1)}),onTagRemoved(e){_("remove",e)},count:i(()=>O.value),labelId:i(()=>S.value),registerLabel:e=>(S.value=e,()=>{S.value===e&&(S.value=void 0)}),hasList:I,registerList:()=>($.value+=1,()=>{$.value-=1}),labelling:B,orientation:i(()=>E.orientation),disabled:i(()=>E.disabled)}),(a,t)=>(g(),d("div",p({...a.$attrs,...T(e)({density:c.density},a.$attrs)},{ref_key:"rootRef",ref:j,class:"skdx-tag-group","data-part":"root","data-skdx-component":"tag-group",role:I.value?void 0:"list","data-skdx-tag-group":"","data-orientation":c.orientation,"data-disabled":c.disabled?"":void 0,"aria-label":I.value?void 0:B.value["aria-label"],"aria-labelledby":I.value?void 0:B.value["aria-labelledby"],tabindex:-1,onKeydown:t[0]||(t[0]=(...e)=>M.value&&M.value(...e))}),[x(a.$slots,"default",{},()=>[c.tags?(g(),d(n,{key:0},[x(a.$slots,"label"),x(a.$slots,"list",{},()=>[v(s,{tags:c.tags,removable:null!=w?.vnode.props?.onRemove},null,8,["tags","removable"])]),0===O.value?x(a.$slots,"empty",{key:0}):u("",!0)],64)):u("",!0)])],16,R))}});export{C as default};

package/dist/tag-group/TagGroupAnatomy.vue.d.cts

@@ -1,7 +1,6 @@
 import type { TagGroupTag } from './types.cjs';
 /**
- * Anatomy when default slot empty: one tag per entry (with roving position, delete if removable).
- * React port's `TagGroupAnatomy.tsx` must stay synchronized.
+ * Anatomy when the default slot is empty: one badge per entry, with roving position and delete when removable.
  * @internal
  */
 type __VLS_Props = {

package/dist/tag-group/TagGroupAnatomy.vue.d.ts

@@ -1,7 +1,6 @@
 import type { TagGroupTag } from './types.js';
 /**
- * Anatomy when default slot empty: one tag per entry (with roving position, delete if removable).
- * React port's `TagGroupAnatomy.tsx` must stay synchronized.
+ * Anatomy when the default slot is empty: one badge per entry, with roving position and delete when removable.
  * @internal
  */
 type __VLS_Props = {

package/dist/tag-group/TagGroupAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const l=require("../tag/TagDelete.vue.cjs"),u=require("../tag/TagDeleteIcon.vue.cjs"),o=require("../tag/Tag.vue.cjs");let e=require("vue");var n=(0,e.defineComponent)({__name:"TagGroupAnatomy",props:{tags:{},removable:{type:Boolean}},setup(r){return(c,d)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.tags,(t,a)=>((0,e.openBlock)(),(0,e.createBlock)(o.default,{key:t.value,index:a,label:t.label,disabled:t.disabled},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label)+" ",1),r.removable?((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(u.default)]),_:1})):(0,e.createCommentVNode)("",!0)]),_:2},1032,["index","label","disabled"]))),128))}});exports.default=n;
+const a=require("../utils/Glyph.vue.cjs"),u=require("../badge/BadgeDelete.vue.cjs"),o=require("../badge/Badge.vue.cjs");let e=require("vue");var n=(0,e.defineComponent)({__name:"TagGroupAnatomy",props:{tags:{},removable:{type:Boolean}},setup(r){return(d,c)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.tags,(t,l)=>((0,e.openBlock)(),(0,e.createBlock)(o.default,{key:t.value,index:l,label:t.label,disabled:t.disabled},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label)+" ",1),r.removable?((0,e.openBlock)(),(0,e.createBlock)(u.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(a.default,{name:"close"})]),_:1})):(0,e.createCommentVNode)("",!0)]),_:2},1032,["index","label","disabled"]))),128))}});exports.default=n;

package/dist/tag-group/TagGroupAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import e from"../tag/TagDelete.vue.js";import a from"../tag/TagDeleteIcon.vue.js";import t from"../tag/Tag.vue.js";import{Fragment as o,createBlock as l,createCommentVNode as s,createElementBlock as r,createTextVNode as m,createVNode as d,defineComponent as n,openBlock as i,renderList as p,toDisplayString as g,withCtx as u}from"vue";var b=/* @__PURE__ */n({__name:"TagGroupAnatomy",props:{tags:{},removable:{type:Boolean}},setup:n=>(b,c)=>(i(!0),r(o,null,p(n.tags,(o,r)=>(i(),l(t,{key:o.value,index:r,label:o.label,disabled:o.disabled},{default:u(()=>[m(g(o.label)+" ",1),n.removable?(i(),l(e,{key:0},{default:u(()=>[d(a)]),_:1})):s("",!0)]),_:2},1032,["index","label","disabled"]))),128))});export{b as default};
+import e from"../utils/Glyph.vue.js";import a from"../badge/BadgeDelete.vue.js";import t from"../badge/Badge.vue.js";import{Fragment as l,createBlock as o,createCommentVNode as s,createElementBlock as r,createTextVNode as d,createVNode as m,defineComponent as n,openBlock as i,renderList as p,toDisplayString as u,withCtx as b}from"vue";var c=/* @__PURE__ */n({__name:"TagGroupAnatomy",props:{tags:{},removable:{type:Boolean}},setup:n=>(c,g)=>(i(!0),r(l,null,p(n.tags,(l,r)=>(i(),o(t,{key:l.value,index:r,label:l.label,disabled:l.disabled},{default:b(()=>[d(u(l.label)+" ",1),n.removable?(i(),o(a,{key:0},{default:b(()=>[m(e,{name:"close"})]),_:1})):s("",!0)]),_:2},1032,["index","label","disabled"]))),128))});export{c as default};

package/dist/tag-group/TagGroupEmpty.vue.d.cts

@@ -1,7 +1,5 @@
 /**
- * Content rendered when the tag group holds no tags. Shows/hides with the tag
- * list itself, not a separate flag. Not a `listitem`: an empty list has no
- * items.
+ * Content rendered when the tag group holds no tags, shown or hidden with the tag list itself.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/tag-group/TagGroupEmpty.vue.d.ts

@@ -1,7 +1,5 @@
 /**
- * Content rendered when the tag group holds no tags. Shows/hides with the tag
- * list itself, not a separate flag. Not a `listitem`: an empty list has no
- * items.
+ * Content rendered when the tag group holds no tags, shown or hidden with the tag list itself.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/tag-group/TagGroupEmpty.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const u=require("./context.cjs");let e=require("vue");var o={key:0,class:"skdx-tag-group__empty","data-part":"empty"},a=(0,e.defineComponent)({__name:"TagGroupEmpty",setup(n){const t=(0,e.inject)(u.TAG_GROUP_CONTEXT);if(!t)throw new Error("<SkdxTagGroupEmpty> must be used inside <SkdxTagGroup>.");return(r,_)=>(0,e.unref)(t).count.value===0?((0,e.openBlock)(),(0,e.createElementBlock)("div",o,[(0,e.renderSlot)(r.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=a;
+const u=require("./context.cjs"),o=require("../utils/injectRequired.cjs");let e=require("vue");var n={key:0,class:"skdx-tag-group__empty","data-part":"empty"},_=(0,e.defineComponent)({__name:"TagGroupEmpty",setup(a){const t=o.injectRequired(u.TAG_GROUP_CONTEXT,"<SkdxTagGroupEmpty> must be used inside <SkdxTagGroup>.");return(r,p)=>(0,e.unref)(t).count.value===0?((0,e.openBlock)(),(0,e.createElementBlock)("div",n,[(0,e.renderSlot)(r.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=_;

package/dist/tag-group/TagGroupEmpty.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TAG_GROUP_CONTEXT as e}from"./context.js";import{createCommentVNode as t,createElementBlock as a,defineComponent as o,inject as r,openBlock as s,renderSlot as n,unref as p}from"vue";var m={key:0,class:"skdx-tag-group__empty","data-part":"empty"},u=/* @__PURE__ */o({__name:"TagGroupEmpty",setup(o){const u=r(e);if(!u)throw new Error("<SkdxTagGroupEmpty> must be used inside <SkdxTagGroup>.");return(e,o)=>0===p(u).count.value?(s(),a("div",m,[n(e.$slots,"default")])):t("",!0)}});export{u as default};
+import{TAG_GROUP_CONTEXT as e}from"./context.js";import{injectRequired as t}from"../utils/injectRequired.js";import{createCommentVNode as a,createElementBlock as o,defineComponent as r,openBlock as s,renderSlot as u,unref as m}from"vue";var n={key:0,class:"skdx-tag-group__empty","data-part":"empty"},p=/* @__PURE__ */r({__name:"TagGroupEmpty",setup(r){const p=t(e,"<SkdxTagGroupEmpty> must be used inside <SkdxTagGroup>.");return(e,t)=>0===m(p).count.value?(s(),o("div",n,[u(e.$slots,"default")])):a("",!0)}});export{p as default};

package/dist/tag-group/TagGroupLabel.vue.d.cts

@@ -1,14 +1,14 @@
 /** Visible heading and name for tag group via aria-labelledby. Pairs with `<SkdxTagGroupList>`. */
 type __VLS_Props = {
     /** Explicit id, if the consumer needs to reference it themselves. @default a generated id */
-    id?: string;
+    id?: string | undefined;
 };
 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<{}>, {
-    id: string;
+    id: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/tag-group/TagGroupLabel.vue.d.ts

@@ -1,14 +1,14 @@
 /** Visible heading and name for tag group via aria-labelledby. Pairs with `<SkdxTagGroupList>`. */
 type __VLS_Props = {
     /** Explicit id, if the consumer needs to reference it themselves. @default a generated id */
-    id?: string;
+    id?: string | undefined;
 };
 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<{}>, {
-    id: string;
+    id: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;