@treeui/vue 0.16.0 → 0.17.0

package/dist/components/TAccordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TAccordion.cjs","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    type?: AccordionType;\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    disabled?: boolean;\n    collapsible?: boolean;\n  }>(),\n  {\n    type: 'single',\n    modelValue: undefined,\n    defaultValue: undefined,\n    disabled: false,\n    collapsible: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n  const def = props.defaultValue;\n  if (def === undefined) return [];\n  return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n  if (isControlled.value) {\n    const mv = props.modelValue!;\n    return new Set(Array.isArray(mv) ? mv : [mv]);\n  }\n  return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n  return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n  if (props.type === 'single') {\n    const arr = [...values];\n    emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n  } else {\n    emit('update:modelValue', [...values]);\n  }\n}\n\nfunction toggleItem(value: string) {\n  const currentlyOpen = isItemOpen(value);\n\n  if (props.type === 'single') {\n    if (currentlyOpen) {\n      if (props.collapsible) {\n        if (!isControlled.value) {\n          uncontrolledValue.delete(value);\n        }\n        emitUpdate(new Set());\n      }\n    } else {\n      if (!isControlled.value) {\n        uncontrolledValue.clear();\n        uncontrolledValue.add(value);\n      }\n      emitUpdate(new Set([value]));\n    }\n  } else {\n    // Multiple mode\n    const next = new Set(openValues.value);\n    if (currentlyOpen) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    if (!isControlled.value) {\n      if (currentlyOpen) {\n        uncontrolledValue.delete(value);\n      } else {\n        uncontrolledValue.add(value);\n      }\n    }\n    emitUpdate(next);\n  }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n  if (!triggerMap.has(value)) {\n    triggerOrder.push(value);\n  }\n  triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n  triggerMap.delete(value);\n  const idx = triggerOrder.indexOf(value);\n  if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n  return triggerOrder.filter((v) => {\n    const el = triggerMap.get(v);\n    return el && !el.hasAttribute('disabled');\n  });\n}\n\nfunction focusPrev(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n  triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const next = idx < enabled.length - 1 ? idx + 1 : 0;\n  triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n  type: props.type,\n  disabled: props.disabled,\n  collapsible: props.collapsible,\n  isItemOpen,\n  toggleItem,\n  registerTrigger,\n  unregisterTrigger,\n  focusPrev,\n  focusNext,\n  focusFirst,\n  focusLast,\n});\n</script>\n\n<template>\n  <div class=\"t-accordion\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TAccordion.cjs","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    type?: AccordionType;\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    disabled?: boolean;\n    collapsible?: boolean;\n  }>(),\n  {\n    type: 'single',\n    modelValue: undefined,\n    defaultValue: undefined,\n    disabled: false,\n    collapsible: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n  const def = props.defaultValue;\n  if (def === undefined) return [];\n  return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n  if (isControlled.value) {\n    const mv = props.modelValue!;\n    return new Set(Array.isArray(mv) ? mv : [mv]);\n  }\n  return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n  return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n  if (props.type === 'single') {\n    const arr = [...values];\n    emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n  } else {\n    emit('update:modelValue', [...values]);\n  }\n}\n\nfunction toggleItem(value: string) {\n  const currentlyOpen = isItemOpen(value);\n\n  if (props.type === 'single') {\n    if (currentlyOpen) {\n      if (props.collapsible) {\n        if (!isControlled.value) {\n          uncontrolledValue.delete(value);\n        }\n        emitUpdate(new Set());\n      }\n    } else {\n      if (!isControlled.value) {\n        uncontrolledValue.clear();\n        uncontrolledValue.add(value);\n      }\n      emitUpdate(new Set([value]));\n    }\n  } else {\n    // Multiple mode\n    const next = new Set(openValues.value);\n    if (currentlyOpen) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    if (!isControlled.value) {\n      if (currentlyOpen) {\n        uncontrolledValue.delete(value);\n      } else {\n        uncontrolledValue.add(value);\n      }\n    }\n    emitUpdate(next);\n  }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n  if (!triggerMap.has(value)) {\n    triggerOrder.push(value);\n  }\n  triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n  triggerMap.delete(value);\n  const idx = triggerOrder.indexOf(value);\n  if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n  return triggerOrder.filter((v) => {\n    const el = triggerMap.get(v);\n    return el && !el.hasAttribute('disabled');\n  });\n}\n\nfunction focusPrev(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n  triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const next = idx < enabled.length - 1 ? idx + 1 : 0;\n  triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n  type: computed(() => props.type),\n  disabled: computed(() => props.disabled),\n  collapsible: computed(() => props.collapsible),\n  isItemOpen,\n  toggleItem,\n  registerTrigger,\n  unregisterTrigger,\n  focusPrev,\n  focusNext,\n  focusFirst,\n  focusLast,\n});\n</script>\n\n<template>\n  <div class=\"t-accordion\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"TAccordion.js","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    type?: AccordionType;\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    disabled?: boolean;\n    collapsible?: boolean;\n  }>(),\n  {\n    type: 'single',\n    modelValue: undefined,\n    defaultValue: undefined,\n    disabled: false,\n    collapsible: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n  const def = props.defaultValue;\n  if (def === undefined) return [];\n  return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n  if (isControlled.value) {\n    const mv = props.modelValue!;\n    return new Set(Array.isArray(mv) ? mv : [mv]);\n  }\n  return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n  return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n  if (props.type === 'single') {\n    const arr = [...values];\n    emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n  } else {\n    emit('update:modelValue', [...values]);\n  }\n}\n\nfunction toggleItem(value: string) {\n  const currentlyOpen = isItemOpen(value);\n\n  if (props.type === 'single') {\n    if (currentlyOpen) {\n      if (props.collapsible) {\n        if (!isControlled.value) {\n          uncontrolledValue.delete(value);\n        }\n        emitUpdate(new Set());\n      }\n    } else {\n      if (!isControlled.value) {\n        uncontrolledValue.clear();\n        uncontrolledValue.add(value);\n      }\n      emitUpdate(new Set([value]));\n    }\n  } else {\n    // Multiple mode\n    const next = new Set(openValues.value);\n    if (currentlyOpen) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    if (!isControlled.value) {\n      if (currentlyOpen) {\n        uncontrolledValue.delete(value);\n      } else {\n        uncontrolledValue.add(value);\n      }\n    }\n    emitUpdate(next);\n  }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n  if (!triggerMap.has(value)) {\n    triggerOrder.push(value);\n  }\n  triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n  triggerMap.delete(value);\n  const idx = triggerOrder.indexOf(value);\n  if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n  return triggerOrder.filter((v) => {\n    const el = triggerMap.get(v);\n    return el && !el.hasAttribute('disabled');\n  });\n}\n\nfunction focusPrev(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n  triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const next = idx < enabled.length - 1 ? idx + 1 : 0;\n  triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n  type: props.type,\n  disabled: props.disabled,\n  collapsible: props.collapsible,\n  isItemOpen,\n  toggleItem,\n  registerTrigger,\n  unregisterTrigger,\n  focusPrev,\n  focusNext,\n  focusFirst,\n  focusLast,\n});\n</script>\n\n<template>\n  <div class=\"t-accordion\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TAccordion.js","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    type?: AccordionType;\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    disabled?: boolean;\n    collapsible?: boolean;\n  }>(),\n  {\n    type: 'single',\n    modelValue: undefined,\n    defaultValue: undefined,\n    disabled: false,\n    collapsible: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n  const def = props.defaultValue;\n  if (def === undefined) return [];\n  return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n  if (isControlled.value) {\n    const mv = props.modelValue!;\n    return new Set(Array.isArray(mv) ? mv : [mv]);\n  }\n  return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n  return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n  if (props.type === 'single') {\n    const arr = [...values];\n    emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n  } else {\n    emit('update:modelValue', [...values]);\n  }\n}\n\nfunction toggleItem(value: string) {\n  const currentlyOpen = isItemOpen(value);\n\n  if (props.type === 'single') {\n    if (currentlyOpen) {\n      if (props.collapsible) {\n        if (!isControlled.value) {\n          uncontrolledValue.delete(value);\n        }\n        emitUpdate(new Set());\n      }\n    } else {\n      if (!isControlled.value) {\n        uncontrolledValue.clear();\n        uncontrolledValue.add(value);\n      }\n      emitUpdate(new Set([value]));\n    }\n  } else {\n    // Multiple mode\n    const next = new Set(openValues.value);\n    if (currentlyOpen) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    if (!isControlled.value) {\n      if (currentlyOpen) {\n        uncontrolledValue.delete(value);\n      } else {\n        uncontrolledValue.add(value);\n      }\n    }\n    emitUpdate(next);\n  }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n  if (!triggerMap.has(value)) {\n    triggerOrder.push(value);\n  }\n  triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n  triggerMap.delete(value);\n  const idx = triggerOrder.indexOf(value);\n  if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n  return triggerOrder.filter((v) => {\n    const el = triggerMap.get(v);\n    return el && !el.hasAttribute('disabled');\n  });\n}\n\nfunction focusPrev(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n  triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const next = idx < enabled.length - 1 ? idx + 1 : 0;\n  triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n  type: computed(() => props.type),\n  disabled: computed(() => props.disabled),\n  collapsible: computed(() => props.collapsible),\n  isItemOpen,\n  toggleItem,\n  registerTrigger,\n  unregisterTrigger,\n  focusPrev,\n  focusNext,\n  focusFirst,\n  focusLast,\n});\n</script>\n\n<template>\n  <div class=\"t-accordion\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TAccordion.vue_vue_type_script_setup_true_lang.cjs

@@ -1,2 +1,2 @@
-const e=require("./accordion.cjs");let t=require("vue");var n={class:`t-accordion`},r=(0,t.defineComponent)({__name:`TAccordion`,props:{type:{default:`single`},modelValue:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(r,{emit:i}){let a=r,o=i,s=(0,t.computed)(()=>{let e=a.defaultValue;return e===void 0?[]:Array.isArray(e)?e:[e]}),c=(0,t.reactive)(new Set(s.value)),l=(0,t.computed)(()=>a.modelValue!==void 0),u=(0,t.computed)(()=>{if(l.value){let e=a.modelValue;return new Set(Array.isArray(e)?e:[e])}return c});function d(e){return u.value.has(e)}function f(e){if(a.type===`single`){let t=[...e];o(`update:modelValue`,t.length>0?t[0]:void 0)}else o(`update:modelValue`,[...e])}function p(e){let t=d(e);if(a.type===`single`)t?a.collapsible&&(l.value||c.delete(e),f(new Set)):(l.value||(c.clear(),c.add(e)),f(new Set([e])));else{let n=new Set(u.value);t?n.delete(e):n.add(e),l.value||(t?c.delete(e):c.add(e)),f(n)}}let m=new Map,h=(0,t.reactive)([]);function g(e,t){m.has(e)||h.push(e),m.set(e,t)}function _(e){m.delete(e);let t=h.indexOf(e);t!==-1&&h.splice(t,1)}function v(){return h.filter(e=>{let t=m.get(e);return t&&!t.hasAttribute(`disabled`)})}function y(e){let t=v(),n=t.indexOf(e),r=n>0?n-1:t.length-1;m.get(t[r])?.focus()}function b(e){let t=v(),n=t.indexOf(e),r=n<t.length-1?n+1:0;m.get(t[r])?.focus()}function x(){let e=v();e.length&&m.get(e[0])?.focus()}function S(){let e=v();e.length&&m.get(e[e.length-1])?.focus()}return(0,t.provide)(e.accordionInjectionKey,{type:a.type,disabled:a.disabled,collapsible:a.collapsible,isItemOpen:d,toggleItem:p,registerTrigger:g,unregisterTrigger:_,focusPrev:y,focusNext:b,focusFirst:x,focusLast:S}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,[(0,t.renderSlot)(e.$slots,`default`)]))}});exports.default=r;
+const e=require("./accordion.cjs");let t=require("vue");var n={class:`t-accordion`},r=(0,t.defineComponent)({__name:`TAccordion`,props:{type:{default:`single`},modelValue:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(r,{emit:i}){let a=r,o=i,s=(0,t.computed)(()=>{let e=a.defaultValue;return e===void 0?[]:Array.isArray(e)?e:[e]}),c=(0,t.reactive)(new Set(s.value)),l=(0,t.computed)(()=>a.modelValue!==void 0),u=(0,t.computed)(()=>{if(l.value){let e=a.modelValue;return new Set(Array.isArray(e)?e:[e])}return c});function d(e){return u.value.has(e)}function f(e){if(a.type===`single`){let t=[...e];o(`update:modelValue`,t.length>0?t[0]:void 0)}else o(`update:modelValue`,[...e])}function p(e){let t=d(e);if(a.type===`single`)t?a.collapsible&&(l.value||c.delete(e),f(new Set)):(l.value||(c.clear(),c.add(e)),f(new Set([e])));else{let n=new Set(u.value);t?n.delete(e):n.add(e),l.value||(t?c.delete(e):c.add(e)),f(n)}}let m=new Map,h=(0,t.reactive)([]);function g(e,t){m.has(e)||h.push(e),m.set(e,t)}function _(e){m.delete(e);let t=h.indexOf(e);t!==-1&&h.splice(t,1)}function v(){return h.filter(e=>{let t=m.get(e);return t&&!t.hasAttribute(`disabled`)})}function y(e){let t=v(),n=t.indexOf(e),r=n>0?n-1:t.length-1;m.get(t[r])?.focus()}function b(e){let t=v(),n=t.indexOf(e),r=n<t.length-1?n+1:0;m.get(t[r])?.focus()}function x(){let e=v();e.length&&m.get(e[0])?.focus()}function S(){let e=v();e.length&&m.get(e[e.length-1])?.focus()}return(0,t.provide)(e.accordionInjectionKey,{type:(0,t.computed)(()=>a.type),disabled:(0,t.computed)(()=>a.disabled),collapsible:(0,t.computed)(()=>a.collapsible),isItemOpen:d,toggleItem:p,registerTrigger:g,unregisterTrigger:_,focusPrev:y,focusNext:b,focusFirst:x,focusLast:S}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,[(0,t.renderSlot)(e.$slots,`default`)]))}});exports.default=r;
 //# sourceMappingURL=TAccordion.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TAccordion.vue_vue_type_script_setup_true_lang.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TAccordion.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    type?: AccordionType;\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    disabled?: boolean;\n    collapsible?: boolean;\n  }>(),\n  {\n    type: 'single',\n    modelValue: undefined,\n    defaultValue: undefined,\n    disabled: false,\n    collapsible: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n  const def = props.defaultValue;\n  if (def === undefined) return [];\n  return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n  if (isControlled.value) {\n    const mv = props.modelValue!;\n    return new Set(Array.isArray(mv) ? mv : [mv]);\n  }\n  return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n  return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n  if (props.type === 'single') {\n    const arr = [...values];\n    emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n  } else {\n    emit('update:modelValue', [...values]);\n  }\n}\n\nfunction toggleItem(value: string) {\n  const currentlyOpen = isItemOpen(value);\n\n  if (props.type === 'single') {\n    if (currentlyOpen) {\n      if (props.collapsible) {\n        if (!isControlled.value) {\n          uncontrolledValue.delete(value);\n        }\n        emitUpdate(new Set());\n      }\n    } else {\n      if (!isControlled.value) {\n        uncontrolledValue.clear();\n        uncontrolledValue.add(value);\n      }\n      emitUpdate(new Set([value]));\n    }\n  } else {\n    // Multiple mode\n    const next = new Set(openValues.value);\n    if (currentlyOpen) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    if (!isControlled.value) {\n      if (currentlyOpen) {\n        uncontrolledValue.delete(value);\n      } else {\n        uncontrolledValue.add(value);\n      }\n    }\n    emitUpdate(next);\n  }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n  if (!triggerMap.has(value)) {\n    triggerOrder.push(value);\n  }\n  triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n  triggerMap.delete(value);\n  const idx = triggerOrder.indexOf(value);\n  if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n  return triggerOrder.filter((v) => {\n    const el = triggerMap.get(v);\n    return el && !el.hasAttribute('disabled');\n  });\n}\n\nfunction focusPrev(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n  triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const next = idx < enabled.length - 1 ? idx + 1 : 0;\n  triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n  type: props.type,\n  disabled: props.disabled,\n  collapsible: props.collapsible,\n  isItemOpen,\n  toggleItem,\n  registerTrigger,\n  unregisterTrigger,\n  focusPrev,\n  focusNext,\n  focusFirst,\n  focusLast,\n});\n</script>\n\n<template>\n  <div class=\"t-accordion\">\n    <slot />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TAccordion.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    type?: AccordionType;\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    disabled?: boolean;\n    collapsible?: boolean;\n  }>(),\n  {\n    type: 'single',\n    modelValue: undefined,\n    defaultValue: undefined,\n    disabled: false,\n    collapsible: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n  const def = props.defaultValue;\n  if (def === undefined) return [];\n  return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n  if (isControlled.value) {\n    const mv = props.modelValue!;\n    return new Set(Array.isArray(mv) ? mv : [mv]);\n  }\n  return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n  return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n  if (props.type === 'single') {\n    const arr = [...values];\n    emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n  } else {\n    emit('update:modelValue', [...values]);\n  }\n}\n\nfunction toggleItem(value: string) {\n  const currentlyOpen = isItemOpen(value);\n\n  if (props.type === 'single') {\n    if (currentlyOpen) {\n      if (props.collapsible) {\n        if (!isControlled.value) {\n          uncontrolledValue.delete(value);\n        }\n        emitUpdate(new Set());\n      }\n    } else {\n      if (!isControlled.value) {\n        uncontrolledValue.clear();\n        uncontrolledValue.add(value);\n      }\n      emitUpdate(new Set([value]));\n    }\n  } else {\n    // Multiple mode\n    const next = new Set(openValues.value);\n    if (currentlyOpen) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    if (!isControlled.value) {\n      if (currentlyOpen) {\n        uncontrolledValue.delete(value);\n      } else {\n        uncontrolledValue.add(value);\n      }\n    }\n    emitUpdate(next);\n  }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n  if (!triggerMap.has(value)) {\n    triggerOrder.push(value);\n  }\n  triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n  triggerMap.delete(value);\n  const idx = triggerOrder.indexOf(value);\n  if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n  return triggerOrder.filter((v) => {\n    const el = triggerMap.get(v);\n    return el && !el.hasAttribute('disabled');\n  });\n}\n\nfunction focusPrev(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n  triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const next = idx < enabled.length - 1 ? idx + 1 : 0;\n  triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n  type: computed(() => props.type),\n  disabled: computed(() => props.disabled),\n  collapsible: computed(() => props.collapsible),\n  isItemOpen,\n  toggleItem,\n  registerTrigger,\n  unregisterTrigger,\n  focusPrev,\n  focusNext,\n  focusFirst,\n  focusLast,\n});\n</script>\n\n<template>\n  <div class=\"t-accordion\">\n    <slot />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TAccordion.vue_vue_type_script_setup_true_lang.js

@@ -77,9 +77,9 @@ var c = { class: "t-accordion" }, l = /*@__PURE__*/ r({
 			e.length && y.get(e[e.length - 1])?.focus();
 		}
 		return a(e, {
-			type: u.type,
-			disabled: u.disabled,
-			collapsible: u.collapsible,
+			type: t(() => u.type),
+			disabled: t(() => u.disabled),
+			collapsible: t(() => u.collapsible),
 			isItemOpen: g,
 			toggleItem: v,
 			registerTrigger: x,

package/dist/components/TAccordion.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TAccordion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    type?: AccordionType;\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    disabled?: boolean;\n    collapsible?: boolean;\n  }>(),\n  {\n    type: 'single',\n    modelValue: undefined,\n    defaultValue: undefined,\n    disabled: false,\n    collapsible: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n  const def = props.defaultValue;\n  if (def === undefined) return [];\n  return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n  if (isControlled.value) {\n    const mv = props.modelValue!;\n    return new Set(Array.isArray(mv) ? mv : [mv]);\n  }\n  return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n  return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n  if (props.type === 'single') {\n    const arr = [...values];\n    emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n  } else {\n    emit('update:modelValue', [...values]);\n  }\n}\n\nfunction toggleItem(value: string) {\n  const currentlyOpen = isItemOpen(value);\n\n  if (props.type === 'single') {\n    if (currentlyOpen) {\n      if (props.collapsible) {\n        if (!isControlled.value) {\n          uncontrolledValue.delete(value);\n        }\n        emitUpdate(new Set());\n      }\n    } else {\n      if (!isControlled.value) {\n        uncontrolledValue.clear();\n        uncontrolledValue.add(value);\n      }\n      emitUpdate(new Set([value]));\n    }\n  } else {\n    // Multiple mode\n    const next = new Set(openValues.value);\n    if (currentlyOpen) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    if (!isControlled.value) {\n      if (currentlyOpen) {\n        uncontrolledValue.delete(value);\n      } else {\n        uncontrolledValue.add(value);\n      }\n    }\n    emitUpdate(next);\n  }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n  if (!triggerMap.has(value)) {\n    triggerOrder.push(value);\n  }\n  triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n  triggerMap.delete(value);\n  const idx = triggerOrder.indexOf(value);\n  if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n  return triggerOrder.filter((v) => {\n    const el = triggerMap.get(v);\n    return el && !el.hasAttribute('disabled');\n  });\n}\n\nfunction focusPrev(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n  triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const next = idx < enabled.length - 1 ? idx + 1 : 0;\n  triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n  type: props.type,\n  disabled: props.disabled,\n  collapsible: props.collapsible,\n  isItemOpen,\n  toggleItem,\n  registerTrigger,\n  unregisterTrigger,\n  focusPrev,\n  focusNext,\n  focusFirst,\n  focusLast,\n});\n</script>\n\n<template>\n  <div class=\"t-accordion\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAiBR,IAAO,GAKP,IAAgB,QAAyB;GAC7C,IAAM,IAAM,EAAM;GAElB,OADI,MAAQ,KAAA,IAAkB,CAAC,IACxB,MAAM,QAAQ,CAAG,IAAI,IAAM,CAAC,CAAG;EACxC,CAAC,GAEK,IAAoB,EAAsB,IAAI,IAAI,EAAc,KAAK,CAAC,GAEtE,IAAe,QAAe,EAAM,eAAe,KAAA,CAAS,GAE5D,IAAa,QAA4B;GAC7C,IAAI,EAAa,OAAO;IACtB,IAAM,IAAK,EAAM;IACjB,OAAO,IAAI,IAAI,MAAM,QAAQ,CAAE,IAAI,IAAK,CAAC,CAAE,CAAC;GAC9C;GACA,OAAO;EACT,CAAC;EAED,SAAS,EAAW,GAAwB;GAC1C,OAAO,EAAW,MAAM,IAAI,CAAK;EACnC;EAEA,SAAS,EAAW,GAAqB;GACvC,IAAI,EAAM,SAAS,UAAU;IAC3B,IAAM,IAAM,CAAC,GAAG,CAAM;IACtB,EAAK,qBAAqB,EAAI,SAAS,IAAI,EAAI,KAAK,KAAA,CAAS;GAC/D,OACE,EAAK,qBAAqB,CAAC,GAAG,CAAM,CAAC;EAEzC;EAEA,SAAS,EAAW,GAAe;GACjC,IAAM,IAAgB,EAAW,CAAK;GAEtC,IAAI,EAAM,SAAS,UACjB,AAAI,IACE,EAAM,gBACH,EAAa,SAChB,EAAkB,OAAO,CAAK,GAEhC,kBAAW,IAAI,IAAI,CAAC,MAGjB,EAAa,UAChB,EAAkB,MAAM,GACxB,EAAkB,IAAI,CAAK,IAE7B,kBAAW,IAAI,IAAI,CAAC,CAAK,CAAC,CAAC;QAExB;IAEL,IAAM,IAAO,IAAI,IAAI,EAAW,KAAK;IAarC,AAZI,IACF,EAAK,OAAO,CAAK,IAEjB,EAAK,IAAI,CAAK,GAEX,EAAa,UACZ,IACF,EAAkB,OAAO,CAAK,IAE9B,EAAkB,IAAI,CAAK,IAG/B,EAAW,CAAI;GACjB;EACF;EAGA,IAAM,oBAAa,IAAI,IAAyB,GAC1C,IAAyB,EAAS,CAAC,CAAC;EAE1C,SAAS,EAAgB,GAAe,GAAiB;GAIvD,AAHK,EAAW,IAAI,CAAK,KACvB,EAAa,KAAK,CAAK,GAEzB,EAAW,IAAI,GAAO,CAAE;EAC1B;EAEA,SAAS,EAAkB,GAAe;GACxC,EAAW,OAAO,CAAK;GACvB,IAAM,IAAM,EAAa,QAAQ,CAAK;GACtC,AAAI,MAAQ,MAAI,EAAa,OAAO,GAAK,CAAC;EAC5C;EAEA,SAAS,IAA+B;GACtC,OAAO,EAAa,QAAQ,MAAM;IAChC,IAAM,IAAK,EAAW,IAAI,CAAC;IAC3B,OAAO,KAAM,CAAC,EAAG,aAAa,UAAU;GAC1C,CAAC;EACH;EAEA,SAAS,EAAU,GAAe;GAChC,IAAM,IAAU,EAAmB,GAC7B,IAAM,EAAQ,QAAQ,CAAK,GAC3B,IAAO,IAAM,IAAI,IAAM,IAAI,EAAQ,SAAS;GAClD,EAAW,IAAI,EAAQ,EAAK,CAAC,EAAE,MAAM;EACvC;EAEA,SAAS,EAAU,GAAe;GAChC,IAAM,IAAU,EAAmB,GAC7B,IAAM,EAAQ,QAAQ,CAAK,GAC3B,IAAO,IAAM,EAAQ,SAAS,IAAI,IAAM,IAAI;GAClD,EAAW,IAAI,EAAQ,EAAK,CAAC,EAAE,MAAM;EACvC;EAEA,SAAS,IAAa;GACpB,IAAM,IAAU,EAAmB;GACnC,AAAI,EAAQ,UAAQ,EAAW,IAAI,EAAQ,EAAE,CAAC,EAAE,MAAM;EACxD;EAEA,SAAS,IAAY;GACnB,IAAM,IAAU,EAAmB;GACnC,AAAI,EAAQ,UAAQ,EAAW,IAAI,EAAQ,EAAQ,SAAS,EAAE,CAAC,EAAE,MAAM;EACzE;SAEA,EAAQ,GAAuB;GAC7B,MAAM,EAAM;GACZ,UAAU,EAAM;GAChB,aAAa,EAAM;GACnB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,mBAIC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"TAccordion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    type?: AccordionType;\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    disabled?: boolean;\n    collapsible?: boolean;\n  }>(),\n  {\n    type: 'single',\n    modelValue: undefined,\n    defaultValue: undefined,\n    disabled: false,\n    collapsible: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n  const def = props.defaultValue;\n  if (def === undefined) return [];\n  return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n  if (isControlled.value) {\n    const mv = props.modelValue!;\n    return new Set(Array.isArray(mv) ? mv : [mv]);\n  }\n  return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n  return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n  if (props.type === 'single') {\n    const arr = [...values];\n    emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n  } else {\n    emit('update:modelValue', [...values]);\n  }\n}\n\nfunction toggleItem(value: string) {\n  const currentlyOpen = isItemOpen(value);\n\n  if (props.type === 'single') {\n    if (currentlyOpen) {\n      if (props.collapsible) {\n        if (!isControlled.value) {\n          uncontrolledValue.delete(value);\n        }\n        emitUpdate(new Set());\n      }\n    } else {\n      if (!isControlled.value) {\n        uncontrolledValue.clear();\n        uncontrolledValue.add(value);\n      }\n      emitUpdate(new Set([value]));\n    }\n  } else {\n    // Multiple mode\n    const next = new Set(openValues.value);\n    if (currentlyOpen) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    if (!isControlled.value) {\n      if (currentlyOpen) {\n        uncontrolledValue.delete(value);\n      } else {\n        uncontrolledValue.add(value);\n      }\n    }\n    emitUpdate(next);\n  }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n  if (!triggerMap.has(value)) {\n    triggerOrder.push(value);\n  }\n  triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n  triggerMap.delete(value);\n  const idx = triggerOrder.indexOf(value);\n  if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n  return triggerOrder.filter((v) => {\n    const el = triggerMap.get(v);\n    return el && !el.hasAttribute('disabled');\n  });\n}\n\nfunction focusPrev(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n  triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n  const enabled = getEnabledTriggers();\n  const idx = enabled.indexOf(value);\n  const next = idx < enabled.length - 1 ? idx + 1 : 0;\n  triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n  const enabled = getEnabledTriggers();\n  if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n  type: computed(() => props.type),\n  disabled: computed(() => props.disabled),\n  collapsible: computed(() => props.collapsible),\n  isItemOpen,\n  toggleItem,\n  registerTrigger,\n  unregisterTrigger,\n  focusPrev,\n  focusNext,\n  focusFirst,\n  focusLast,\n});\n</script>\n\n<template>\n  <div class=\"t-accordion\">\n    <slot />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TAccordionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TAccordionItem.cjs","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    value: string;\n    disabled?: boolean;\n  }>(),\n  {\n    disabled: false,\n  },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n  throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled);\n\nconst itemClasses = computed(() => [\n  't-accordion__item',\n  {\n    'is-open': isOpen.value,\n    'is-disabled': isDisabled.value,\n  },\n]);\n\nfunction handleToggle() {\n  if (isDisabled.value) return;\n  ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      ctx.focusNext(props.value);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      ctx.focusPrev(props.value);\n      break;\n    case 'Home':\n      event.preventDefault();\n      ctx.focusFirst();\n      break;\n    case 'End':\n      event.preventDefault();\n      ctx.focusLast();\n      break;\n  }\n}\n\nonMounted(() => {\n  if (triggerRef.value) {\n    ctx.registerTrigger(props.value, triggerRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n  <div :class=\"itemClasses\">\n    <h3 class=\"t-accordion__heading\">\n      <button\n        :id=\"triggerId\"\n        ref=\"triggerRef\"\n        type=\"button\"\n        class=\"t-accordion__trigger\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"panelId\"\n        :disabled=\"isDisabled || undefined\"\n        @click=\"handleToggle\"\n        @keydown=\"handleKeydown\"\n      >\n        <slot\n          name=\"trigger\"\n          :open=\"isOpen\"\n        >\n          {{ value }}\n        </slot>\n        <svg\n          class=\"t-accordion__icon\"\n          :class=\"{ 'is-open': isOpen }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n    </h3>\n    <div\n      v-if=\"isOpen\"\n      :id=\"panelId\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      class=\"t-accordion__content\"\n    >\n      <div class=\"t-accordion__panel\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TAccordionItem.cjs","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    value: string;\n    disabled?: boolean;\n  }>(),\n  {\n    disabled: false,\n  },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n  throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled.value);\n\nconst itemClasses = computed(() => [\n  't-accordion__item',\n  {\n    'is-open': isOpen.value,\n    'is-disabled': isDisabled.value,\n  },\n]);\n\nfunction handleToggle() {\n  if (isDisabled.value) return;\n  ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      ctx.focusNext(props.value);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      ctx.focusPrev(props.value);\n      break;\n    case 'Home':\n      event.preventDefault();\n      ctx.focusFirst();\n      break;\n    case 'End':\n      event.preventDefault();\n      ctx.focusLast();\n      break;\n  }\n}\n\nonMounted(() => {\n  if (triggerRef.value) {\n    ctx.registerTrigger(props.value, triggerRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n  <div :class=\"itemClasses\">\n    <h3 class=\"t-accordion__heading\">\n      <button\n        :id=\"triggerId\"\n        ref=\"triggerRef\"\n        type=\"button\"\n        class=\"t-accordion__trigger\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"panelId\"\n        :disabled=\"isDisabled || undefined\"\n        @click=\"handleToggle\"\n        @keydown=\"handleKeydown\"\n      >\n        <slot\n          name=\"trigger\"\n          :open=\"isOpen\"\n        >\n          {{ value }}\n        </slot>\n        <svg\n          class=\"t-accordion__icon\"\n          :class=\"{ 'is-open': isOpen }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n    </h3>\n    <div\n      v-if=\"isOpen\"\n      :id=\"panelId\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      class=\"t-accordion__content\"\n    >\n      <div class=\"t-accordion__panel\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TAccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TAccordionItem.js","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    value: string;\n    disabled?: boolean;\n  }>(),\n  {\n    disabled: false,\n  },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n  throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled);\n\nconst itemClasses = computed(() => [\n  't-accordion__item',\n  {\n    'is-open': isOpen.value,\n    'is-disabled': isDisabled.value,\n  },\n]);\n\nfunction handleToggle() {\n  if (isDisabled.value) return;\n  ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      ctx.focusNext(props.value);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      ctx.focusPrev(props.value);\n      break;\n    case 'Home':\n      event.preventDefault();\n      ctx.focusFirst();\n      break;\n    case 'End':\n      event.preventDefault();\n      ctx.focusLast();\n      break;\n  }\n}\n\nonMounted(() => {\n  if (triggerRef.value) {\n    ctx.registerTrigger(props.value, triggerRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n  <div :class=\"itemClasses\">\n    <h3 class=\"t-accordion__heading\">\n      <button\n        :id=\"triggerId\"\n        ref=\"triggerRef\"\n        type=\"button\"\n        class=\"t-accordion__trigger\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"panelId\"\n        :disabled=\"isDisabled || undefined\"\n        @click=\"handleToggle\"\n        @keydown=\"handleKeydown\"\n      >\n        <slot\n          name=\"trigger\"\n          :open=\"isOpen\"\n        >\n          {{ value }}\n        </slot>\n        <svg\n          class=\"t-accordion__icon\"\n          :class=\"{ 'is-open': isOpen }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n    </h3>\n    <div\n      v-if=\"isOpen\"\n      :id=\"panelId\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      class=\"t-accordion__content\"\n    >\n      <div class=\"t-accordion__panel\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TAccordionItem.js","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    value: string;\n    disabled?: boolean;\n  }>(),\n  {\n    disabled: false,\n  },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n  throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled.value);\n\nconst itemClasses = computed(() => [\n  't-accordion__item',\n  {\n    'is-open': isOpen.value,\n    'is-disabled': isDisabled.value,\n  },\n]);\n\nfunction handleToggle() {\n  if (isDisabled.value) return;\n  ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      ctx.focusNext(props.value);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      ctx.focusPrev(props.value);\n      break;\n    case 'Home':\n      event.preventDefault();\n      ctx.focusFirst();\n      break;\n    case 'End':\n      event.preventDefault();\n      ctx.focusLast();\n      break;\n  }\n}\n\nonMounted(() => {\n  if (triggerRef.value) {\n    ctx.registerTrigger(props.value, triggerRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n  <div :class=\"itemClasses\">\n    <h3 class=\"t-accordion__heading\">\n      <button\n        :id=\"triggerId\"\n        ref=\"triggerRef\"\n        type=\"button\"\n        class=\"t-accordion__trigger\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"panelId\"\n        :disabled=\"isDisabled || undefined\"\n        @click=\"handleToggle\"\n        @keydown=\"handleKeydown\"\n      >\n        <slot\n          name=\"trigger\"\n          :open=\"isOpen\"\n        >\n          {{ value }}\n        </slot>\n        <svg\n          class=\"t-accordion__icon\"\n          :class=\"{ 'is-open': isOpen }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n    </h3>\n    <div\n      v-if=\"isOpen\"\n      :id=\"panelId\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      class=\"t-accordion__content\"\n    >\n      <div class=\"t-accordion__panel\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TAccordionItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1,2 +1,2 @@
-const e=require("./accordion.cjs");let t=require("vue");var n={class:`t-accordion__heading`},r=[`id`,`aria-expanded`,`aria-controls`,`disabled`],i=[`id`,`aria-labelledby`],a={class:`t-accordion__panel`},o=(0,t.defineComponent)({__name:`TAccordionItem`,props:{value:{},disabled:{type:Boolean,default:!1}},setup(o){let s=o,c=(0,t.inject)(e.accordionInjectionKey);if(!c)throw Error(`[TreeUI] TAccordionItem must be used inside a TAccordion.`);let l=c,u=(0,t.useId)(),d=(0,t.useId)(),f=(0,t.ref)(null),p=(0,t.computed)(()=>l.isItemOpen(s.value)),m=(0,t.computed)(()=>s.disabled||l.disabled),h=(0,t.computed)(()=>[`t-accordion__item`,{"is-open":p.value,"is-disabled":m.value}]);function g(){m.value||l.toggleItem(s.value)}function _(e){if(!m.value)switch(e.key){case`ArrowDown`:e.preventDefault(),l.focusNext(s.value);break;case`ArrowUp`:e.preventDefault(),l.focusPrev(s.value);break;case`Home`:e.preventDefault(),l.focusFirst();break;case`End`:e.preventDefault(),l.focusLast();break}}return(0,t.onMounted)(()=>{f.value&&l.registerTrigger(s.value,f.value)}),(0,t.onBeforeUnmount)(()=>{l.unregisterTrigger(s.value)}),(e,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)(h.value)},[(0,t.createElementVNode)(`h3`,n,[(0,t.createElementVNode)(`button`,{id:(0,t.unref)(u),ref_key:`triggerRef`,ref:f,type:`button`,class:`t-accordion__trigger`,"aria-expanded":p.value,"aria-controls":(0,t.unref)(d),disabled:m.value||void 0,onClick:g,onKeydown:_},[(0,t.renderSlot)(e.$slots,`trigger`,{open:p.value},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(o.value),1)]),((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{class:(0,t.normalizeClass)([`t-accordion__icon`,{"is-open":p.value}]),xmlns:`http://www.w3.org/2000/svg`,width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[...s[0]||=[(0,t.createElementVNode)(`polyline`,{points:`6 9 12 15 18 9`},null,-1)]],2))],40,r)]),p.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:(0,t.unref)(d),role:`region`,"aria-labelledby":(0,t.unref)(u),class:`t-accordion__content`},[(0,t.createElementVNode)(`div`,a,[(0,t.renderSlot)(e.$slots,`default`)])],8,i)):(0,t.createCommentVNode)(``,!0)],2))}});exports.default=o;
+const e=require("./accordion.cjs");let t=require("vue");var n={class:`t-accordion__heading`},r=[`id`,`aria-expanded`,`aria-controls`,`disabled`],i=[`id`,`aria-labelledby`],a={class:`t-accordion__panel`},o=(0,t.defineComponent)({__name:`TAccordionItem`,props:{value:{},disabled:{type:Boolean,default:!1}},setup(o){let s=o,c=(0,t.inject)(e.accordionInjectionKey);if(!c)throw Error(`[TreeUI] TAccordionItem must be used inside a TAccordion.`);let l=c,u=(0,t.useId)(),d=(0,t.useId)(),f=(0,t.ref)(null),p=(0,t.computed)(()=>l.isItemOpen(s.value)),m=(0,t.computed)(()=>s.disabled||l.disabled.value),h=(0,t.computed)(()=>[`t-accordion__item`,{"is-open":p.value,"is-disabled":m.value}]);function g(){m.value||l.toggleItem(s.value)}function _(e){if(!m.value)switch(e.key){case`ArrowDown`:e.preventDefault(),l.focusNext(s.value);break;case`ArrowUp`:e.preventDefault(),l.focusPrev(s.value);break;case`Home`:e.preventDefault(),l.focusFirst();break;case`End`:e.preventDefault(),l.focusLast();break}}return(0,t.onMounted)(()=>{f.value&&l.registerTrigger(s.value,f.value)}),(0,t.onBeforeUnmount)(()=>{l.unregisterTrigger(s.value)}),(e,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)(h.value)},[(0,t.createElementVNode)(`h3`,n,[(0,t.createElementVNode)(`button`,{id:(0,t.unref)(u),ref_key:`triggerRef`,ref:f,type:`button`,class:`t-accordion__trigger`,"aria-expanded":p.value,"aria-controls":(0,t.unref)(d),disabled:m.value||void 0,onClick:g,onKeydown:_},[(0,t.renderSlot)(e.$slots,`trigger`,{open:p.value},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(o.value),1)]),((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{class:(0,t.normalizeClass)([`t-accordion__icon`,{"is-open":p.value}]),xmlns:`http://www.w3.org/2000/svg`,width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[...s[0]||=[(0,t.createElementVNode)(`polyline`,{points:`6 9 12 15 18 9`},null,-1)]],2))],40,r)]),p.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:(0,t.unref)(d),role:`region`,"aria-labelledby":(0,t.unref)(u),class:`t-accordion__content`},[(0,t.createElementVNode)(`div`,a,[(0,t.renderSlot)(e.$slots,`default`)])],8,i)):(0,t.createCommentVNode)(``,!0)],2))}});exports.default=o;
 //# sourceMappingURL=TAccordionItem.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TAccordionItem.vue_vue_type_script_setup_true_lang.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TAccordionItem.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    value: string;\n    disabled?: boolean;\n  }>(),\n  {\n    disabled: false,\n  },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n  throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled);\n\nconst itemClasses = computed(() => [\n  't-accordion__item',\n  {\n    'is-open': isOpen.value,\n    'is-disabled': isDisabled.value,\n  },\n]);\n\nfunction handleToggle() {\n  if (isDisabled.value) return;\n  ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      ctx.focusNext(props.value);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      ctx.focusPrev(props.value);\n      break;\n    case 'Home':\n      event.preventDefault();\n      ctx.focusFirst();\n      break;\n    case 'End':\n      event.preventDefault();\n      ctx.focusLast();\n      break;\n  }\n}\n\nonMounted(() => {\n  if (triggerRef.value) {\n    ctx.registerTrigger(props.value, triggerRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n  <div :class=\"itemClasses\">\n    <h3 class=\"t-accordion__heading\">\n      <button\n        :id=\"triggerId\"\n        ref=\"triggerRef\"\n        type=\"button\"\n        class=\"t-accordion__trigger\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"panelId\"\n        :disabled=\"isDisabled || undefined\"\n        @click=\"handleToggle\"\n        @keydown=\"handleKeydown\"\n      >\n        <slot\n          name=\"trigger\"\n          :open=\"isOpen\"\n        >\n          {{ value }}\n        </slot>\n        <svg\n          class=\"t-accordion__icon\"\n          :class=\"{ 'is-open': isOpen }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n    </h3>\n    <div\n      v-if=\"isOpen\"\n      :id=\"panelId\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      class=\"t-accordion__content\"\n    >\n      <div class=\"t-accordion__panel\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"yTAIA,IAAM,EAAQ,EAUR,GAAA,EAAA,EAAA,OAAA,CAAkB,EAAA,qBAAqB,EAE7C,GAAI,CAAC,EACH,MAAU,MAAM,2DAA2D,EAG7E,IAAM,EAAM,EAEN,GAAA,EAAA,EAAA,MAAA,CAAkB,EAClB,GAAA,EAAA,EAAA,MAAA,CAAgB,EAChB,GAAA,EAAA,EAAA,IAAA,CAA2C,IAAI,EAE/C,GAAA,EAAA,EAAA,SAAA,KAAwB,EAAI,WAAW,EAAM,KAAK,CAAC,EACnD,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAM,UAAY,EAAI,QAAQ,EAE1D,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,oBACA,CACE,UAAW,EAAO,MAClB,cAAe,EAAW,KAC5B,CACF,CAAC,EAED,SAAS,GAAe,CAClB,EAAW,OACf,EAAI,WAAW,EAAM,KAAK,CAC5B,CAEA,SAAS,EAAc,EAAsB,CACvC,MAAW,MAEf,OAAQ,EAAM,IAAd,CACE,IAAK,YACH,EAAM,eAAe,EACrB,EAAI,UAAU,EAAM,KAAK,EACzB,MACF,IAAK,UACH,EAAM,eAAe,EACrB,EAAI,UAAU,EAAM,KAAK,EACzB,MACF,IAAK,OACH,EAAM,eAAe,EACrB,EAAI,WAAW,EACf,MACF,IAAK,MACH,EAAM,eAAe,EACrB,EAAI,UAAU,EACd,KACJ,CACF,QAEA,EAAA,EAAA,UAAA,KAAgB,CACV,EAAW,OACb,EAAI,gBAAgB,EAAM,MAAO,EAAW,KAAK,CAErD,CAAC,GAED,EAAA,EAAA,gBAAA,KAAsB,CACpB,EAAI,kBAAkB,EAAM,KAAK,CACnC,CAAC,qDAoDO,MAAA,CAhDA,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,CAAA,EAAA,EAAA,EAAA,EAAA,mBAAA,CAoCjB,KAnCL,EAmCK,EAAA,EAAA,EAAA,mBAAA,CADM,SAAA,CAhCN,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,UACD,aAAJ,IAAI,EACJ,KAAK,SACL,MAAM,uBACL,gBAAe,EAAA,MACf,iBAAA,EAAA,EAAA,MAAA,CAAe,CAAA,EACf,SAAU,EAAA,OAAc,IAAA,GACxB,QAAO,EACP,UAAS,qBAOH,EAAA,OAAA,UAAA,CAHJ,KAAM,EAAA,KAAM,MAGR,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CADF,EAAA,KAAK,EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAiBJ,MAAA,CAdJ,OAAA,EAAA,EAAA,eAAA,CAAK,CAAC,oBAAmB,CAAA,UACJ,EAAA,KAAM,CAAA,CAAA,EAC3B,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,eAAa,IACb,iBAAe,QACf,kBAAgB,QAChB,cAAY,6CAEwB,WAAA,CAA1B,OAAO,gBAAgB,EAAA,KAAA,EAAA,CAAA,CAAA,EAAA,CAAA,EAAA,EAAA,GAAA,CAAA,CAAA,CAAA,EAK/B,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CASF,MAAA,OARH,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,EACL,KAAK,SACJ,mBAAA,EAAA,EAAA,MAAA,CAAiB,CAAA,EAClB,MAAM,kDAIA,MAFN,EAEM,EAAA,EAAA,EAAA,WAAA,CADI,EAAA,OAAA,SAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"TAccordionItem.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    value: string;\n    disabled?: boolean;\n  }>(),\n  {\n    disabled: false,\n  },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n  throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled.value);\n\nconst itemClasses = computed(() => [\n  't-accordion__item',\n  {\n    'is-open': isOpen.value,\n    'is-disabled': isDisabled.value,\n  },\n]);\n\nfunction handleToggle() {\n  if (isDisabled.value) return;\n  ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      ctx.focusNext(props.value);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      ctx.focusPrev(props.value);\n      break;\n    case 'Home':\n      event.preventDefault();\n      ctx.focusFirst();\n      break;\n    case 'End':\n      event.preventDefault();\n      ctx.focusLast();\n      break;\n  }\n}\n\nonMounted(() => {\n  if (triggerRef.value) {\n    ctx.registerTrigger(props.value, triggerRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n  <div :class=\"itemClasses\">\n    <h3 class=\"t-accordion__heading\">\n      <button\n        :id=\"triggerId\"\n        ref=\"triggerRef\"\n        type=\"button\"\n        class=\"t-accordion__trigger\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"panelId\"\n        :disabled=\"isDisabled || undefined\"\n        @click=\"handleToggle\"\n        @keydown=\"handleKeydown\"\n      >\n        <slot\n          name=\"trigger\"\n          :open=\"isOpen\"\n        >\n          {{ value }}\n        </slot>\n        <svg\n          class=\"t-accordion__icon\"\n          :class=\"{ 'is-open': isOpen }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n    </h3>\n    <div\n      v-if=\"isOpen\"\n      :id=\"panelId\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      class=\"t-accordion__content\"\n    >\n      <div class=\"t-accordion__panel\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"yTAIA,IAAM,EAAQ,EAUR,GAAA,EAAA,EAAA,OAAA,CAAkB,EAAA,qBAAqB,EAE7C,GAAI,CAAC,EACH,MAAU,MAAM,2DAA2D,EAG7E,IAAM,EAAM,EAEN,GAAA,EAAA,EAAA,MAAA,CAAkB,EAClB,GAAA,EAAA,EAAA,MAAA,CAAgB,EAChB,GAAA,EAAA,EAAA,IAAA,CAA2C,IAAI,EAE/C,GAAA,EAAA,EAAA,SAAA,KAAwB,EAAI,WAAW,EAAM,KAAK,CAAC,EACnD,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAM,UAAY,EAAI,SAAS,KAAK,EAEhE,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,oBACA,CACE,UAAW,EAAO,MAClB,cAAe,EAAW,KAC5B,CACF,CAAC,EAED,SAAS,GAAe,CAClB,EAAW,OACf,EAAI,WAAW,EAAM,KAAK,CAC5B,CAEA,SAAS,EAAc,EAAsB,CACvC,MAAW,MAEf,OAAQ,EAAM,IAAd,CACE,IAAK,YACH,EAAM,eAAe,EACrB,EAAI,UAAU,EAAM,KAAK,EACzB,MACF,IAAK,UACH,EAAM,eAAe,EACrB,EAAI,UAAU,EAAM,KAAK,EACzB,MACF,IAAK,OACH,EAAM,eAAe,EACrB,EAAI,WAAW,EACf,MACF,IAAK,MACH,EAAM,eAAe,EACrB,EAAI,UAAU,EACd,KACJ,CACF,QAEA,EAAA,EAAA,UAAA,KAAgB,CACV,EAAW,OACb,EAAI,gBAAgB,EAAM,MAAO,EAAW,KAAK,CAErD,CAAC,GAED,EAAA,EAAA,gBAAA,KAAsB,CACpB,EAAI,kBAAkB,EAAM,KAAK,CACnC,CAAC,qDAoDO,MAAA,CAhDA,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,CAAA,EAAA,EAAA,EAAA,EAAA,mBAAA,CAoCjB,KAnCL,EAmCK,EAAA,EAAA,EAAA,mBAAA,CADM,SAAA,CAhCN,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,UACD,aAAJ,IAAI,EACJ,KAAK,SACL,MAAM,uBACL,gBAAe,EAAA,MACf,iBAAA,EAAA,EAAA,MAAA,CAAe,CAAA,EACf,SAAU,EAAA,OAAc,IAAA,GACxB,QAAO,EACP,UAAS,qBAOH,EAAA,OAAA,UAAA,CAHJ,KAAM,EAAA,KAAM,MAGR,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CADF,EAAA,KAAK,EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAiBJ,MAAA,CAdJ,OAAA,EAAA,EAAA,eAAA,CAAK,CAAC,oBAAmB,CAAA,UACJ,EAAA,KAAM,CAAA,CAAA,EAC3B,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,eAAa,IACb,iBAAe,QACf,kBAAgB,QAChB,cAAY,6CAEwB,WAAA,CAA1B,OAAO,gBAAgB,EAAA,KAAA,EAAA,CAAA,CAAA,EAAA,CAAA,EAAA,EAAA,GAAA,CAAA,CAAA,CAAA,EAK/B,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CASF,MAAA,OARH,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,EACL,KAAK,SACJ,mBAAA,EAAA,EAAA,MAAA,CAAiB,CAAA,EAClB,MAAM,kDAIA,MAFN,EAEM,EAAA,EAAA,EAAA,WAAA,CADI,EAAA,OAAA,SAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,EAAA,CAAA"}

package/dist/components/TAccordionItem.vue_vue_type_script_setup_true_lang.js

@@ -18,7 +18,7 @@ var _ = { class: "t-accordion__heading" }, v = [
 	setup(o) {
 		let x = o, S = s(e);
 		if (!S) throw Error("[TreeUI] TAccordionItem must be used inside a TAccordion.");
-		let C = S, w = g(), T = g(), E = f(null), D = t(() => C.isItemOpen(x.value)), O = t(() => x.disabled || C.disabled), k = t(() => ["t-accordion__item", {
+		let C = S, w = g(), T = g(), E = f(null), D = t(() => C.isItemOpen(x.value)), O = t(() => x.disabled || C.disabled.value), k = t(() => ["t-accordion__item", {
 			"is-open": D.value,
 			"is-disabled": O.value
 		}]);

package/dist/components/TAccordionItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TAccordionItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    value: string;\n    disabled?: boolean;\n  }>(),\n  {\n    disabled: false,\n  },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n  throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled);\n\nconst itemClasses = computed(() => [\n  't-accordion__item',\n  {\n    'is-open': isOpen.value,\n    'is-disabled': isDisabled.value,\n  },\n]);\n\nfunction handleToggle() {\n  if (isDisabled.value) return;\n  ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      ctx.focusNext(props.value);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      ctx.focusPrev(props.value);\n      break;\n    case 'Home':\n      event.preventDefault();\n      ctx.focusFirst();\n      break;\n    case 'End':\n      event.preventDefault();\n      ctx.focusLast();\n      break;\n  }\n}\n\nonMounted(() => {\n  if (triggerRef.value) {\n    ctx.registerTrigger(props.value, triggerRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n  <div :class=\"itemClasses\">\n    <h3 class=\"t-accordion__heading\">\n      <button\n        :id=\"triggerId\"\n        ref=\"triggerRef\"\n        type=\"button\"\n        class=\"t-accordion__trigger\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"panelId\"\n        :disabled=\"isDisabled || undefined\"\n        @click=\"handleToggle\"\n        @keydown=\"handleKeydown\"\n      >\n        <slot\n          name=\"trigger\"\n          :open=\"isOpen\"\n        >\n          {{ value }}\n        </slot>\n        <svg\n          class=\"t-accordion__icon\"\n          :class=\"{ 'is-open': isOpen }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n    </h3>\n    <div\n      v-if=\"isOpen\"\n      :id=\"panelId\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      class=\"t-accordion__content\"\n    >\n      <div class=\"t-accordion__panel\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAUR,IAAW,EAAO,CAAqB;EAE7C,IAAI,CAAC,GACH,MAAU,MAAM,2DAA2D;EAG7E,IAAM,IAAM,GAEN,IAAY,EAAM,GAClB,IAAU,EAAM,GAChB,IAAa,EAA8B,IAAI,GAE/C,IAAS,QAAe,EAAI,WAAW,EAAM,KAAK,CAAC,GACnD,IAAa,QAAe,EAAM,YAAY,EAAI,QAAQ,GAE1D,IAAc,QAAe,CACjC,qBACA;GACE,WAAW,EAAO;GAClB,eAAe,EAAW;EAC5B,CACF,CAAC;EAED,SAAS,IAAe;GAClB,EAAW,SACf,EAAI,WAAW,EAAM,KAAK;EAC5B;EAEA,SAAS,EAAc,GAAsB;GACvC,OAAW,OAEf,QAAQ,EAAM,KAAd;IACE,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,UAAU,EAAM,KAAK;KACzB;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,UAAU,EAAM,KAAK;KACzB;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,WAAW;KACf;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,UAAU;KACd;GACJ;EACF;SAEA,QAAgB;GACd,AAAI,EAAW,SACb,EAAI,gBAAgB,EAAM,OAAO,EAAW,KAAK;EAErD,CAAC,GAED,QAAsB;GACpB,EAAI,kBAAkB,EAAM,KAAK;EACnC,CAAC,mBAIC,EAgDM,OAAA,EAhDA,OAAK,EAAE,EAAA,KAAW,EAAA,GAAA,CACtB,EAmCK,MAnCL,GAmCK,CAlCH,EAiCS,UAAA;GAhCN,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACJ,MAAK;GACL,OAAM;GACL,iBAAe,EAAA;GACf,iBAAe,EAAA,CAAA;GACf,UAAU,EAAA,SAAc,KAAA;GACxB,SAAO;GACP,WAAS;MAEV,EAKO,EAAA,QAAA,WAAA,EAHJ,MAAM,EAAA,MAAM,SAGR,CAAA,EAAA,EADF,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,GAEV,EAeM,OAAA;GAdJ,OAAK,EAAA,CAAC,qBAAmB,EAAA,WACJ,EAAA,MAAM,CAAA,CAAA;GAC3B,OAAM;GACN,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,QAAO;GACP,gBAAa;GACb,kBAAe;GACf,mBAAgB;GAChB,eAAY;mBAEZ,EAAoC,YAAA,EAA1B,QAAO,iBAAgB,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,CAAA,EAAA,GAAA,IAAA,CAAA,CAAA,CAAA,GAK/B,EAAA,SAAA,EAAA,GADR,EAUM,OAAA;;GARH,IAAI,EAAA,CAAA;GACL,MAAK;GACJ,mBAAiB,EAAA,CAAA;GAClB,OAAM;MAEN,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"TAccordionItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n  defineProps<{\n    value: string;\n    disabled?: boolean;\n  }>(),\n  {\n    disabled: false,\n  },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n  throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled.value);\n\nconst itemClasses = computed(() => [\n  't-accordion__item',\n  {\n    'is-open': isOpen.value,\n    'is-disabled': isDisabled.value,\n  },\n]);\n\nfunction handleToggle() {\n  if (isDisabled.value) return;\n  ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (isDisabled.value) return;\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      ctx.focusNext(props.value);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      ctx.focusPrev(props.value);\n      break;\n    case 'Home':\n      event.preventDefault();\n      ctx.focusFirst();\n      break;\n    case 'End':\n      event.preventDefault();\n      ctx.focusLast();\n      break;\n  }\n}\n\nonMounted(() => {\n  if (triggerRef.value) {\n    ctx.registerTrigger(props.value, triggerRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n  <div :class=\"itemClasses\">\n    <h3 class=\"t-accordion__heading\">\n      <button\n        :id=\"triggerId\"\n        ref=\"triggerRef\"\n        type=\"button\"\n        class=\"t-accordion__trigger\"\n        :aria-expanded=\"isOpen\"\n        :aria-controls=\"panelId\"\n        :disabled=\"isDisabled || undefined\"\n        @click=\"handleToggle\"\n        @keydown=\"handleKeydown\"\n      >\n        <slot\n          name=\"trigger\"\n          :open=\"isOpen\"\n        >\n          {{ value }}\n        </slot>\n        <svg\n          class=\"t-accordion__icon\"\n          :class=\"{ 'is-open': isOpen }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n    </h3>\n    <div\n      v-if=\"isOpen\"\n      :id=\"panelId\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      class=\"t-accordion__content\"\n    >\n      <div class=\"t-accordion__panel\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAUR,IAAW,EAAO,CAAqB;EAE7C,IAAI,CAAC,GACH,MAAU,MAAM,2DAA2D;EAG7E,IAAM,IAAM,GAEN,IAAY,EAAM,GAClB,IAAU,EAAM,GAChB,IAAa,EAA8B,IAAI,GAE/C,IAAS,QAAe,EAAI,WAAW,EAAM,KAAK,CAAC,GACnD,IAAa,QAAe,EAAM,YAAY,EAAI,SAAS,KAAK,GAEhE,IAAc,QAAe,CACjC,qBACA;GACE,WAAW,EAAO;GAClB,eAAe,EAAW;EAC5B,CACF,CAAC;EAED,SAAS,IAAe;GAClB,EAAW,SACf,EAAI,WAAW,EAAM,KAAK;EAC5B;EAEA,SAAS,EAAc,GAAsB;GACvC,OAAW,OAEf,QAAQ,EAAM,KAAd;IACE,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,UAAU,EAAM,KAAK;KACzB;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,UAAU,EAAM,KAAK;KACzB;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,WAAW;KACf;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,UAAU;KACd;GACJ;EACF;SAEA,QAAgB;GACd,AAAI,EAAW,SACb,EAAI,gBAAgB,EAAM,OAAO,EAAW,KAAK;EAErD,CAAC,GAED,QAAsB;GACpB,EAAI,kBAAkB,EAAM,KAAK;EACnC,CAAC,mBAIC,EAgDM,OAAA,EAhDA,OAAK,EAAE,EAAA,KAAW,EAAA,GAAA,CACtB,EAmCK,MAnCL,GAmCK,CAlCH,EAiCS,UAAA;GAhCN,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACJ,MAAK;GACL,OAAM;GACL,iBAAe,EAAA;GACf,iBAAe,EAAA,CAAA;GACf,UAAU,EAAA,SAAc,KAAA;GACxB,SAAO;GACP,WAAS;MAEV,EAKO,EAAA,QAAA,WAAA,EAHJ,MAAM,EAAA,MAAM,SAGR,CAAA,EAAA,EADF,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,GAEV,EAeM,OAAA;GAdJ,OAAK,EAAA,CAAC,qBAAmB,EAAA,WACJ,EAAA,MAAM,CAAA,CAAA;GAC3B,OAAM;GACN,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,QAAO;GACP,gBAAa;GACb,kBAAe;GACf,mBAAgB;GAChB,eAAY;mBAEZ,EAAoC,YAAA,EAA1B,QAAO,iBAAgB,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,CAAA,EAAA,GAAA,IAAA,CAAA,CAAA,CAAA,GAK/B,EAAA,SAAA,EAAA,GADR,EAUM,OAAA;;GARH,IAAI,EAAA,CAAA;GACL,MAAK;GACJ,mBAAiB,EAAA,CAAA;GAClB,OAAM;MAEN,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA"}

package/dist/components/TDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TDropdown.cjs","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, focusFirst, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TDropdownItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    label?: string;\n    align?: TDropdownAlign;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    label: '',\n    align: 'start',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  trigger(props: { isOpen: boolean }): unknown;\n  item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-dropdown',\n  `t-dropdown--${props.size}`,\n  {\n    't-dropdown--align-end': props.align === 'end',\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n  if (props.disabled) return;\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => {\n      if (triggerRef.value) focusFirst(triggerRef.value);\n    });\n  }\n};\n\nconst toggleMenu = () => {\n  if (props.disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeMenu();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openMenu();\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      ref=\"triggerRef\"\n      class=\"t-dropdown__trigger-wrapper\"\n      @click=\"toggleMenu\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <slot\n        name=\"trigger\"\n        :is-open=\"isOpen\"\n      >\n        <button\n          v-bind=\"triggerAttrs\"\n          type=\"button\"\n          class=\"t-dropdown__trigger\"\n          :disabled=\"disabled\"\n          :aria-controls=\"isOpen ? menuId : undefined\"\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n        >\n          <span class=\"t-dropdown__label\">{{ label }}</span>\n          <svg\n            class=\"t-dropdown__chevron\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"4 6 8 10 12 6\" />\n          </svg>\n        </button>\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"menuId\"\n        role=\"menu\"\n        class=\"t-dropdown__menu\"\n        :aria-label=\"label || undefined\"\n      >\n        <li\n          v-for=\"(item, index) in items\"\n          :key=\"item.value\"\n          :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n          role=\"menuitem\"\n          class=\"t-dropdown__item\"\n          :class=\"{\n            'is-disabled': item.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, item)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n          >\n            {{ item.label }}\n          </slot>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TDropdown.cjs","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, focusFirst, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TDropdownItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    label?: string;\n    align?: TDropdownAlign;\n    id?: string;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    label: '',\n    align: 'start',\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  trigger(props: { isOpen: boolean; menuId: string }): unknown;\n  item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = props.id ?? createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-dropdown',\n  `t-dropdown--${props.size}`,\n  {\n    't-dropdown--align-end': props.align === 'end',\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n  if (props.disabled) return;\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => {\n      if (triggerRef.value) focusFirst(triggerRef.value);\n    });\n  }\n};\n\nconst toggleMenu = () => {\n  if (props.disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeMenu();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openMenu();\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      ref=\"triggerRef\"\n      class=\"t-dropdown__trigger-wrapper\"\n      @click=\"toggleMenu\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <slot\n        name=\"trigger\"\n        :is-open=\"isOpen\"\n        :menu-id=\"menuId\"\n      >\n        <button\n          v-bind=\"triggerAttrs\"\n          type=\"button\"\n          class=\"t-dropdown__trigger\"\n          :disabled=\"disabled\"\n          :aria-controls=\"isOpen ? menuId : undefined\"\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n        >\n          <span class=\"t-dropdown__label\">{{ label }}</span>\n          <svg\n            class=\"t-dropdown__chevron\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"4 6 8 10 12 6\" />\n          </svg>\n        </button>\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"menuId\"\n        role=\"menu\"\n        class=\"t-dropdown__menu\"\n        :aria-label=\"label || undefined\"\n      >\n        <li\n          v-for=\"(item, index) in items\"\n          :key=\"item.value\"\n          :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n          role=\"menuitem\"\n          class=\"t-dropdown__item\"\n          :class=\"{\n            'is-disabled': item.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, item)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n          >\n            {{ item.label }}\n          </slot>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"TDropdown.js","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, focusFirst, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TDropdownItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    label?: string;\n    align?: TDropdownAlign;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    label: '',\n    align: 'start',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  trigger(props: { isOpen: boolean }): unknown;\n  item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-dropdown',\n  `t-dropdown--${props.size}`,\n  {\n    't-dropdown--align-end': props.align === 'end',\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n  if (props.disabled) return;\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => {\n      if (triggerRef.value) focusFirst(triggerRef.value);\n    });\n  }\n};\n\nconst toggleMenu = () => {\n  if (props.disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeMenu();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openMenu();\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      ref=\"triggerRef\"\n      class=\"t-dropdown__trigger-wrapper\"\n      @click=\"toggleMenu\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <slot\n        name=\"trigger\"\n        :is-open=\"isOpen\"\n      >\n        <button\n          v-bind=\"triggerAttrs\"\n          type=\"button\"\n          class=\"t-dropdown__trigger\"\n          :disabled=\"disabled\"\n          :aria-controls=\"isOpen ? menuId : undefined\"\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n        >\n          <span class=\"t-dropdown__label\">{{ label }}</span>\n          <svg\n            class=\"t-dropdown__chevron\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"4 6 8 10 12 6\" />\n          </svg>\n        </button>\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"menuId\"\n        role=\"menu\"\n        class=\"t-dropdown__menu\"\n        :aria-label=\"label || undefined\"\n      >\n        <li\n          v-for=\"(item, index) in items\"\n          :key=\"item.value\"\n          :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n          role=\"menuitem\"\n          class=\"t-dropdown__item\"\n          :class=\"{\n            'is-disabled': item.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, item)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n          >\n            {{ item.label }}\n          </slot>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TDropdown.js","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, focusFirst, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TDropdownItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    label?: string;\n    align?: TDropdownAlign;\n    id?: string;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    label: '',\n    align: 'start',\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  trigger(props: { isOpen: boolean; menuId: string }): unknown;\n  item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = props.id ?? createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-dropdown',\n  `t-dropdown--${props.size}`,\n  {\n    't-dropdown--align-end': props.align === 'end',\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n  if (props.disabled) return;\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => {\n      if (triggerRef.value) focusFirst(triggerRef.value);\n    });\n  }\n};\n\nconst toggleMenu = () => {\n  if (props.disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeMenu();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openMenu();\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      ref=\"triggerRef\"\n      class=\"t-dropdown__trigger-wrapper\"\n      @click=\"toggleMenu\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <slot\n        name=\"trigger\"\n        :is-open=\"isOpen\"\n        :menu-id=\"menuId\"\n      >\n        <button\n          v-bind=\"triggerAttrs\"\n          type=\"button\"\n          class=\"t-dropdown__trigger\"\n          :disabled=\"disabled\"\n          :aria-controls=\"isOpen ? menuId : undefined\"\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n        >\n          <span class=\"t-dropdown__label\">{{ label }}</span>\n          <svg\n            class=\"t-dropdown__chevron\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"4 6 8 10 12 6\" />\n          </svg>\n        </button>\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"menuId\"\n        role=\"menu\"\n        class=\"t-dropdown__menu\"\n        :aria-label=\"label || undefined\"\n      >\n        <li\n          v-for=\"(item, index) in items\"\n          :key=\"item.value\"\n          :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n          role=\"menuitem\"\n          class=\"t-dropdown__item\"\n          :class=\"{\n            'is-disabled': item.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, item)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n          >\n            {{ item.label }}\n          </slot>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TDropdown.vue.d.ts

@@ -13,12 +13,14 @@ type __VLS_Props = {
     size?: TSize;
     label?: string;
     align?: TDropdownAlign;
+    id?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         trigger(props: {
             isOpen: boolean;
+            menuId: string;
         }): unknown;
         item(props: {
             item: TDropdownItem;
@@ -27,6 +29,7 @@ declare function __VLS_template(): {
     }> & {
         trigger(props: {
             isOpen: boolean;
+            menuId: string;
         }): unknown;
         item(props: {
             item: TDropdownItem;
@@ -52,6 +55,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     disabled: boolean;
     size: TSize;
     label: string;
+    id: string;
     align: TDropdownAlign;
     open: boolean;
     defaultOpen: boolean;

package/dist/components/TDropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/TDropdown.vue"],"names":[],"mappings":"AAkTA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAkNJ,iBAAS,cAAc;WA8GT,OAAO,IAA6B;;uBA1SjC;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;uBAD7C;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;;;;;;EA8S7D;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;cAjWN,OAAO;UACX,KAAK;WACJ,MAAM;WACN,cAAc;UALf,OAAO;iBACA,OAAO;WAFb,aAAa,EAAE;;;;OA6WzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/TDropdown.vue"],"names":[],"mappings":"AAqTA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAoNJ,iBAAS,cAAc;WA+GT,OAAO,IAA6B;;uBA5SjC;YAAE,MAAM,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;oBAChD;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;uBAD7C;YAAE,MAAM,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;oBAChD;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;;;;;;EAgT7D;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;cArWN,OAAO;UACX,KAAK;WACJ,MAAM;QAET,MAAM;WADH,cAAc;UALf,OAAO;iBACA,OAAO;WAFb,aAAa,EAAE;;;;OAiXzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.cjs

@@ -1,2 +1,2 @@
-const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils");var r=[`data-state`],i=[`disabled`,`aria-controls`,`aria-expanded`],a={class:`t-dropdown__label`},o=[`id`,`aria-label`],s=[`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],c=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDropdown`,props:{items:{default:()=>[]},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:`md`},label:{default:``},align:{default:`start`}},emits:[`select`,`update:open`,`open-change`],setup(c,{emit:l}){let u=c,d=l,f=(0,t.useAttrs)(),p=(0,n.createId)(`t-dropdown`),m=(0,t.ref)(null),h=(0,t.ref)(null),g=(0,t.ref)(new Map),_=(0,t.ref)(-1),v=(0,t.computed)(()=>{let{class:e,style:t,...n}=f;return n}),{value:y,setValue:b}=e.useControllableOpen((0,t.toRef)(u,`open`),u.defaultOpen,e=>{d(`update:open`,e),d(`open-change`,e)}),x=(0,t.computed)(()=>[`t-dropdown`,`t-dropdown--${u.size}`,{"t-dropdown--align-end":u.align===`end`,"is-disabled":u.disabled,"is-open":y.value},f.class]),S=(0,t.computed)(()=>f.style),C=(0,t.computed)(()=>u.items.filter(e=>!e.disabled)),w=()=>{u.disabled||(_.value=C.value.length>0?u.items.indexOf(C.value[0]):0,b(!0),(0,t.nextTick)(()=>O(_.value)))},T=(e=!1)=>{b(!1),_.value=-1,e&&(0,t.nextTick)(()=>{h.value&&(0,n.focusFirst)(h.value)})},E=()=>{u.disabled||(y.value?T():w())},D=e=>{e.disabled||(d(`select`,e.value),T(!0))},O=e=>{let t=u.items[e];t&&g.value.get(t.value)?.focus()},k=(e,t)=>{e instanceof HTMLElement?g.value.set(t,e):g.value.delete(t)},A=e=>{let t=_.value+e;for(;t>=0&&t<u.items.length;){if(!u.items[t].disabled){_.value=t,O(t);return}t+=e}},j=e=>{if(!u.disabled){if((0,n.isEscapeKey)(e)&&y.value){e.preventDefault(),T();return}((0,n.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),w())}},M=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),T(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),D(t);return}switch(e.key){case`ArrowDown`:e.preventDefault(),A(1);break;case`ArrowUp`:e.preventDefault(),A(-1);break;case`Home`:e.preventDefault(),_.value=C.value.length>0?u.items.indexOf(C.value[0]):0,O(_.value);break;case`End`:e.preventDefault(),_.value=C.value.length>0?u.items.indexOf(C.value[C.value.length-1]):u.items.length-1,O(_.value);break;default:break}},N=e=>{if(!y.value)return;let t=e.target;t instanceof Node&&(m.value?.contains(t)||T())};return(0,t.watch)(y,e=>{e?document.addEventListener(`pointerdown`,N):document.removeEventListener(`pointerdown`,N)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,N)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:m,class:(0,t.normalizeClass)(x.value),style:(0,t.normalizeStyle)(S.value),"data-state":(0,t.unref)(y)?`open`:`closed`},[(0,t.createElementVNode)(`span`,{ref_key:`triggerRef`,ref:h,class:`t-dropdown__trigger-wrapper`,onClick:E,onKeydown:j},[(0,t.renderSlot)(e.$slots,`trigger`,{isOpen:(0,t.unref)(y)},()=>[(0,t.createElementVNode)(`button`,(0,t.mergeProps)(v.value,{type:`button`,class:`t-dropdown__trigger`,disabled:c.disabled,"aria-controls":(0,t.unref)(y)?(0,t.unref)(p):void 0,"aria-haspopup":`menu`,"aria-expanded":(0,t.unref)(y)}),[(0,t.createElementVNode)(`span`,a,(0,t.toDisplayString)(c.label),1),n[0]||=(0,t.createElementVNode)(`svg`,{class:`t-dropdown__chevron`,viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[(0,t.createElementVNode)(`polyline`,{points:`4 6 8 10 12 6`})],-1)],16,i)])],544),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(y)&&!c.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,{key:0,id:(0,t.unref)(p),role:`menu`,class:`t-dropdown__menu`,"aria-label":c.label||void 0},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(c.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:n.value,ref_for:!0,ref:e=>k(e,n.value),role:`menuitem`,class:(0,t.normalizeClass)([`t-dropdown__item`,{"is-disabled":n.disabled,"is-focused":r===_.value}]),"aria-disabled":n.disabled||void 0,tabindex:n.disabled?-1:0,onClick:e=>D(n),onKeydown:e=>M(e,n)},[(0,t.renderSlot)(e.$slots,`item`,{item:n,index:r},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(n.label),1)])],42,s))),128))],8,o)):(0,t.createCommentVNode)(``,!0)]),_:3})],14,r))}});exports.default=c;
+const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils");var r=[`data-state`],i=[`disabled`,`aria-controls`,`aria-expanded`],a={class:`t-dropdown__label`},o=[`id`,`aria-label`],s=[`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],c=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDropdown`,props:{items:{default:()=>[]},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:`md`},label:{default:``},align:{default:`start`},id:{default:void 0}},emits:[`select`,`update:open`,`open-change`],setup(c,{emit:l}){let u=c,d=l,f=(0,t.useAttrs)(),p=u.id??(0,n.createId)(`t-dropdown`),m=(0,t.ref)(null),h=(0,t.ref)(null),g=(0,t.ref)(new Map),_=(0,t.ref)(-1),v=(0,t.computed)(()=>{let{class:e,style:t,...n}=f;return n}),{value:y,setValue:b}=e.useControllableOpen((0,t.toRef)(u,`open`),u.defaultOpen,e=>{d(`update:open`,e),d(`open-change`,e)}),x=(0,t.computed)(()=>[`t-dropdown`,`t-dropdown--${u.size}`,{"t-dropdown--align-end":u.align===`end`,"is-disabled":u.disabled,"is-open":y.value},f.class]),S=(0,t.computed)(()=>f.style),C=(0,t.computed)(()=>u.items.filter(e=>!e.disabled)),w=()=>{u.disabled||(_.value=C.value.length>0?u.items.indexOf(C.value[0]):0,b(!0),(0,t.nextTick)(()=>O(_.value)))},T=(e=!1)=>{b(!1),_.value=-1,e&&(0,t.nextTick)(()=>{h.value&&(0,n.focusFirst)(h.value)})},E=()=>{u.disabled||(y.value?T():w())},D=e=>{e.disabled||(d(`select`,e.value),T(!0))},O=e=>{let t=u.items[e];t&&g.value.get(t.value)?.focus()},k=(e,t)=>{e instanceof HTMLElement?g.value.set(t,e):g.value.delete(t)},A=e=>{let t=_.value+e;for(;t>=0&&t<u.items.length;){if(!u.items[t].disabled){_.value=t,O(t);return}t+=e}},j=e=>{if(!u.disabled){if((0,n.isEscapeKey)(e)&&y.value){e.preventDefault(),T();return}((0,n.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),w())}},M=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),T(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),D(t);return}switch(e.key){case`ArrowDown`:e.preventDefault(),A(1);break;case`ArrowUp`:e.preventDefault(),A(-1);break;case`Home`:e.preventDefault(),_.value=C.value.length>0?u.items.indexOf(C.value[0]):0,O(_.value);break;case`End`:e.preventDefault(),_.value=C.value.length>0?u.items.indexOf(C.value[C.value.length-1]):u.items.length-1,O(_.value);break;default:break}},N=e=>{if(!y.value)return;let t=e.target;t instanceof Node&&(m.value?.contains(t)||T())};return(0,t.watch)(y,e=>{e?document.addEventListener(`pointerdown`,N):document.removeEventListener(`pointerdown`,N)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,N)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:m,class:(0,t.normalizeClass)(x.value),style:(0,t.normalizeStyle)(S.value),"data-state":(0,t.unref)(y)?`open`:`closed`},[(0,t.createElementVNode)(`span`,{ref_key:`triggerRef`,ref:h,class:`t-dropdown__trigger-wrapper`,onClick:E,onKeydown:j},[(0,t.renderSlot)(e.$slots,`trigger`,{isOpen:(0,t.unref)(y),menuId:(0,t.unref)(p)},()=>[(0,t.createElementVNode)(`button`,(0,t.mergeProps)(v.value,{type:`button`,class:`t-dropdown__trigger`,disabled:c.disabled,"aria-controls":(0,t.unref)(y)?(0,t.unref)(p):void 0,"aria-haspopup":`menu`,"aria-expanded":(0,t.unref)(y)}),[(0,t.createElementVNode)(`span`,a,(0,t.toDisplayString)(c.label),1),n[0]||=(0,t.createElementVNode)(`svg`,{class:`t-dropdown__chevron`,viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[(0,t.createElementVNode)(`polyline`,{points:`4 6 8 10 12 6`})],-1)],16,i)])],544),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(y)&&!c.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,{key:0,id:(0,t.unref)(p),role:`menu`,class:`t-dropdown__menu`,"aria-label":c.label||void 0},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(c.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:n.value,ref_for:!0,ref:e=>k(e,n.value),role:`menuitem`,class:(0,t.normalizeClass)([`t-dropdown__item`,{"is-disabled":n.disabled,"is-focused":r===_.value}]),"aria-disabled":n.disabled||void 0,tabindex:n.disabled?-1:0,onClick:e=>D(n),onKeydown:e=>M(e,n)},[(0,t.renderSlot)(e.$slots,`item`,{item:n,index:r},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(n.label),1)])],42,s))),128))],8,o)):(0,t.createCommentVNode)(``,!0)]),_:3})],14,r))}});exports.default=c;
 //# sourceMappingURL=TDropdown.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TDropdown.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, focusFirst, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TDropdownItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    label?: string;\n    align?: TDropdownAlign;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    label: '',\n    align: 'start',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  trigger(props: { isOpen: boolean }): unknown;\n  item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-dropdown',\n  `t-dropdown--${props.size}`,\n  {\n    't-dropdown--align-end': props.align === 'end',\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n  if (props.disabled) return;\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => {\n      if (triggerRef.value) focusFirst(triggerRef.value);\n    });\n  }\n};\n\nconst toggleMenu = () => {\n  if (props.disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeMenu();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openMenu();\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      ref=\"triggerRef\"\n      class=\"t-dropdown__trigger-wrapper\"\n      @click=\"toggleMenu\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <slot\n        name=\"trigger\"\n        :is-open=\"isOpen\"\n      >\n        <button\n          v-bind=\"triggerAttrs\"\n          type=\"button\"\n          class=\"t-dropdown__trigger\"\n          :disabled=\"disabled\"\n          :aria-controls=\"isOpen ? menuId : undefined\"\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n        >\n          <span class=\"t-dropdown__label\">{{ label }}</span>\n          <svg\n            class=\"t-dropdown__chevron\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"4 6 8 10 12 6\" />\n          </svg>\n        </button>\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"menuId\"\n        role=\"menu\"\n        class=\"t-dropdown__menu\"\n        :aria-label=\"label || undefined\"\n      >\n        <li\n          v-for=\"(item, index) in items\"\n          :key=\"item.value\"\n          :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n          role=\"menuitem\"\n          class=\"t-dropdown__item\"\n          :class=\"{\n            'is-disabled': item.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, item)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n          >\n            {{ item.label }}\n          </slot>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TDropdown.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, focusFirst, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TDropdownItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    label?: string;\n    align?: TDropdownAlign;\n    id?: string;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    label: '',\n    align: 'start',\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  trigger(props: { isOpen: boolean; menuId: string }): unknown;\n  item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = props.id ?? createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-dropdown',\n  `t-dropdown--${props.size}`,\n  {\n    't-dropdown--align-end': props.align === 'end',\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n  if (props.disabled) return;\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => {\n      if (triggerRef.value) focusFirst(triggerRef.value);\n    });\n  }\n};\n\nconst toggleMenu = () => {\n  if (props.disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeMenu();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openMenu();\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      ref=\"triggerRef\"\n      class=\"t-dropdown__trigger-wrapper\"\n      @click=\"toggleMenu\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <slot\n        name=\"trigger\"\n        :is-open=\"isOpen\"\n        :menu-id=\"menuId\"\n      >\n        <button\n          v-bind=\"triggerAttrs\"\n          type=\"button\"\n          class=\"t-dropdown__trigger\"\n          :disabled=\"disabled\"\n          :aria-controls=\"isOpen ? menuId : undefined\"\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n        >\n          <span class=\"t-dropdown__label\">{{ label }}</span>\n          <svg\n            class=\"t-dropdown__chevron\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"4 6 8 10 12 6\" />\n          </svg>\n        </button>\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"menuId\"\n        role=\"menu\"\n        class=\"t-dropdown__menu\"\n        :aria-label=\"label || undefined\"\n      >\n        <li\n          v-for=\"(item, index) in items\"\n          :key=\"item.value\"\n          :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n          role=\"menuitem\"\n          class=\"t-dropdown__item\"\n          :class=\"{\n            'is-disabled': item.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, item)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n          >\n            {{ item.label }}\n          </slot>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}