@treeui/vue 0.16.0 → 0.18.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":"kVAIA,IAAM,EAAQ,EAiBR,EAAO,EAKP,GAAA,EAAA,EAAA,SAAA,KAAyC,CAC7C,IAAM,EAAM,EAAM,aAElB,OADI,IAAQ,IAAA,GAAkB,CAAC,EACxB,MAAM,QAAQ,CAAG,EAAI,EAAM,CAAC,CAAG,CACxC,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,CAA0C,IAAI,IAAI,EAAc,KAAK,CAAC,EAEtE,GAAA,EAAA,EAAA,SAAA,KAA8B,EAAM,aAAe,IAAA,EAAS,EAE5D,GAAA,EAAA,EAAA,SAAA,KAAyC,CAC7C,GAAI,EAAa,MAAO,CACtB,IAAM,EAAK,EAAM,WACjB,OAAO,IAAI,IAAI,MAAM,QAAQ,CAAE,EAAI,EAAK,CAAC,CAAE,CAAC,CAC9C,CACA,OAAO,CACT,CAAC,EAED,SAAS,EAAW,EAAwB,CAC1C,OAAO,EAAW,MAAM,IAAI,CAAK,CACnC,CAEA,SAAS,EAAW,EAAqB,CACvC,GAAI,EAAM,OAAS,SAAU,CAC3B,IAAM,EAAM,CAAC,GAAG,CAAM,EACtB,EAAK,oBAAqB,EAAI,OAAS,EAAI,EAAI,GAAK,IAAA,EAAS,CAC/D,MACE,EAAK,oBAAqB,CAAC,GAAG,CAAM,CAAC,CAEzC,CAEA,SAAS,EAAW,EAAe,CACjC,IAAM,EAAgB,EAAW,CAAK,EAEtC,GAAI,EAAM,OAAS,SACb,EACE,EAAM,cACH,EAAa,OAChB,EAAkB,OAAO,CAAK,EAEhC,EAAW,IAAI,GAAK,IAGjB,EAAa,QAChB,EAAkB,MAAM,EACxB,EAAkB,IAAI,CAAK,GAE7B,EAAW,IAAI,IAAI,CAAC,CAAK,CAAC,CAAC,OAExB,CAEL,IAAM,EAAO,IAAI,IAAI,EAAW,KAAK,EACjC,EACF,EAAK,OAAO,CAAK,EAEjB,EAAK,IAAI,CAAK,EAEX,EAAa,QACZ,EACF,EAAkB,OAAO,CAAK,EAE9B,EAAkB,IAAI,CAAK,GAG/B,EAAW,CAAI,CACjB,CACF,CAGA,IAAM,EAAa,IAAI,IACjB,GAAA,EAAA,EAAA,SAAA,CAAkC,CAAC,CAAC,EAE1C,SAAS,EAAgB,EAAe,EAAiB,CAClD,EAAW,IAAI,CAAK,GACvB,EAAa,KAAK,CAAK,EAEzB,EAAW,IAAI,EAAO,CAAE,CAC1B,CAEA,SAAS,EAAkB,EAAe,CACxC,EAAW,OAAO,CAAK,EACvB,IAAM,EAAM,EAAa,QAAQ,CAAK,EAClC,IAAQ,IAAI,EAAa,OAAO,EAAK,CAAC,CAC5C,CAEA,SAAS,GAA+B,CACtC,OAAO,EAAa,OAAQ,GAAM,CAChC,IAAM,EAAK,EAAW,IAAI,CAAC,EAC3B,OAAO,GAAM,CAAC,EAAG,aAAa,UAAU,CAC1C,CAAC,CACH,CAEA,SAAS,EAAU,EAAe,CAChC,IAAM,EAAU,EAAmB,EAC7B,EAAM,EAAQ,QAAQ,CAAK,EAC3B,EAAO,EAAM,EAAI,EAAM,EAAI,EAAQ,OAAS,EAClD,EAAW,IAAI,EAAQ,EAAK,CAAC,EAAE,MAAM,CACvC,CAEA,SAAS,EAAU,EAAe,CAChC,IAAM,EAAU,EAAmB,EAC7B,EAAM,EAAQ,QAAQ,CAAK,EAC3B,EAAO,EAAM,EAAQ,OAAS,EAAI,EAAM,EAAI,EAClD,EAAW,IAAI,EAAQ,EAAK,CAAC,EAAE,MAAM,CACvC,CAEA,SAAS,GAAa,CACpB,IAAM,EAAU,EAAmB,EAC/B,EAAQ,QAAQ,EAAW,IAAI,EAAQ,EAAE,CAAC,EAAE,MAAM,CACxD,CAEA,SAAS,GAAY,CACnB,IAAM,EAAU,EAAmB,EAC/B,EAAQ,QAAQ,EAAW,IAAI,EAAQ,EAAQ,OAAS,EAAE,CAAC,EAAE,MAAM,CACzE,QAEA,EAAA,EAAA,QAAA,CAAQ,EAAA,sBAAuB,CAC7B,MAAA,EAAA,EAAA,SAAA,KAAqB,EAAM,IAAI,EAC/B,UAAA,EAAA,EAAA,SAAA,KAAyB,EAAM,QAAQ,EACvC,aAAA,EAAA,EAAA,SAAA,KAA4B,EAAM,WAAW,EAC7C,aACA,aACA,kBACA,oBACA,YACA,YACA,aACA,WACF,CAAC,qDAMO,MAFN,EAEM,EAAA,EAAA,EAAA,WAAA,CADI,EAAA,OAAA,SAAA,CAAA,CAAA"}

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":"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"}
+{"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":";;;;;;;;;;;;;;;;;;;;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,QAAe,EAAM,IAAI;GAC/B,UAAU,QAAe,EAAM,QAAQ;GACvC,aAAa,QAAe,EAAM,WAAW;GAC7C;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,mBAIC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

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/TAppShell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TAppShell.cjs","names":[],"sources":["../../src/components/TAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSidebarSide } from './TSidebar.vue';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    side?: TSidebarSide;\n    sidebarWidth?: string;\n    collapsedWidth?: string;\n    collapsible?: boolean;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    mobile?: boolean;\n    breakpoint?: string;\n    sidebarOpen?: boolean;\n    defaultSidebarOpen?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showMenuButton?: boolean;\n    /** Render the built-in collapse toggle in the sidebar footer (desktop). */\n    showCollapseButton?: boolean;\n    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'div',\n    side: 'left',\n    sidebarWidth: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapsible: false,\n    collapsed: undefined,\n    defaultCollapsed: false,\n    mobile: undefined,\n    breakpoint: '768px',\n    sidebarOpen: undefined,\n    defaultSidebarOpen: false,\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showMenuButton: true,\n    showCollapseButton: true,\n    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: 'Sidebar',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n  'update:sidebarOpen': [value: boolean];\n  'sidebar-open-change': [value: boolean];\n}>();\n\nexport interface AppShellSlotProps {\n  mobile: boolean;\n  collapsed: boolean;\n  sidebarOpen: boolean;\n  toggleSidebar: () => void;\n  closeSidebar: () => void;\n  toggleCollapsed: () => void;\n}\n\ndefineSlots<{\n  header?: (props: AppShellSlotProps) => unknown;\n  /** Header region over the sidebar rail; the `header` slot then aligns with the content panel. */\n  'header-start'?: (props: AppShellSlotProps) => unknown;\n  /** Pinned above the sidebar body, inset to line up with nav item icons. */\n  'sidebar-header'?: (props: AppShellSlotProps) => unknown;\n  sidebar?: (props: AppShellSlotProps) => unknown;\n  /** Pinned to the bottom of the sidebar, inset to line up with nav item icons. */\n  'sidebar-footer'?: (props: AppShellSlotProps) => unknown;\n  default?: (props: Pick<AppShellSlotProps, 'mobile' | 'collapsed'>) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: boolean }) => unknown;\n  'collapse-icon'?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebarId = createId('t-app-shell-sidebar');\n\nconst { value: isCollapsed, setValue: setCollapsed } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst { value: isSidebarOpen, setValue: setSidebarOpen } = useControllableOpen(\n  toRef(props, 'sidebarOpen'),\n  props.defaultSidebarOpen,\n  (value) => {\n    emit('update:sidebarOpen', value);\n    emit('sidebar-open-change', value);\n  },\n);\n\n// Auto responsive detection when `mobile` is not explicitly controlled.\nconst autoMobile = ref(false);\nlet mediaQuery: MediaQueryList | null = null;\n\nconst onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {\n  autoMobile.value = event.matches;\n};\n\nconst setupMediaQuery = () => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return;\n  }\n\n  teardownMediaQuery();\n  mediaQuery = window.matchMedia(`(max-width: ${props.breakpoint})`);\n  autoMobile.value = mediaQuery.matches;\n  mediaQuery.addEventListener?.('change', onMediaChange);\n};\n\nconst teardownMediaQuery = () => {\n  mediaQuery?.removeEventListener?.('change', onMediaChange);\n  mediaQuery = null;\n};\n\nconst isMobile = computed(() => props.mobile ?? autoMobile.value);\n\n// Collapsing is desktop-only, so the built-in toggle follows the same rule.\nconst showCollapseToggle = computed(\n  () => !isMobile.value && props.collapsible && props.showCollapseButton,\n);\n\n// Collapse is a desktop-only concept; the mobile drawer always shows the\n// expanded sidebar, so descendants and slots see `collapsed: false` there.\nconst effectiveCollapsed = computed(() =>\n  isMobile.value ? false : isCollapsed.value,\n);\n\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nlet previousBodyOverflow = '';\nlet bodyLocked = false;\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined' || bodyLocked) {\n    return;\n  }\n\n  previousBodyOverflow = document.body.style.overflow;\n  document.body.style.overflow = 'hidden';\n  bodyLocked = true;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || !bodyLocked) {\n    return;\n  }\n\n  document.body.style.overflow = previousBodyOverflow;\n  bodyLocked = false;\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openSidebar = () => {\n  previousFocusedElement.value =\n    typeof document === 'undefined'\n      ? null\n      : (document.activeElement as HTMLElement | null);\n  setSidebarOpen(true);\n};\n\nconst closeSidebar = () => {\n  setSidebarOpen(false);\n};\n\nconst toggleSidebar = () => {\n  if (isSidebarOpen.value) {\n    closeSidebar();\n  } else {\n    openSidebar();\n  }\n};\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setCollapsed(!isCollapsed.value);\n};\n\nconst onOverlayClick = () => {\n  if (props.closeOnOverlay) {\n    closeSidebar();\n  }\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeSidebar();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\n// The off-canvas drawer only exists in mobile mode; keep body-scroll lock and\n// focus handling in sync with both the open flag and the responsive mode.\nconst syncOverlayState = (open: boolean, wasOpen: boolean) => {\n  if (open && isMobile.value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (wasOpen) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n};\n\nwatch(isSidebarOpen, (value, previousValue) => {\n  syncOverlayState(value, Boolean(previousValue));\n});\n\nwatch(isMobile, (mobile) => {\n  if (!isSidebarOpen.value) {\n    return;\n  }\n\n  // Leaving mobile removes the drawer from the DOM, so release the lock and\n  // restore focus; re-entering mobile while \"open\" re-arms the overlay.\n  if (mobile) {\n    lockBodyScroll();\n    focusSurface();\n  } else {\n    unlockBodyScroll();\n  }\n});\n\nwatch(\n  () => props.breakpoint,\n  () => {\n    if (typeof window !== 'undefined') {\n      setupMediaQuery();\n    }\n  },\n);\n\nonMounted(() => {\n  setupMediaQuery();\n});\n\nonBeforeUnmount(() => {\n  teardownMediaQuery();\n  unlockBodyScroll();\n});\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: effectiveCollapsed,\n});\n\nconst rootClasses = computed(() => [\n  't-app-shell',\n  `t-app-shell--${props.side}`,\n  {\n    'is-mobile': isMobile.value,\n    'is-collapsed':\n      !isMobile.value && props.collapsible && isCollapsed.value,\n    'is-sidebar-open': isMobile.value && isSidebarOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-app-shell-sidebar-width': props.sidebarWidth,\n    '--tree-app-shell-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst slotProps = computed<AppShellSlotProps>(() => ({\n  mobile: isMobile.value,\n  collapsed: effectiveCollapsed.value,\n  sidebarOpen: isSidebarOpen.value,\n  toggleSidebar,\n  closeSidebar,\n  toggleCollapsed,\n}));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-mobile=\"isMobile ? 'true' : 'false'\"\n  >\n    <header\n      class=\"t-app-shell__header\"\n      :class=\"{ 'has-start': Boolean($slots['header-start']) }\"\n    >\n      <button\n        v-if=\"isMobile && showMenuButton\"\n        type=\"button\"\n        class=\"t-app-shell__menu-button\"\n        :aria-label=\"menuLabel\"\n        :aria-expanded=\"isSidebarOpen\"\n        :aria-controls=\"sidebarId\"\n        @click=\"toggleSidebar\"\n      >\n        <slot\n          name=\"menu-icon\"\n          :sidebar-open=\"isSidebarOpen\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\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            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"6\"\n              y2=\"6\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"12\"\n              y2=\"12\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"18\"\n              y2=\"18\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div\n        v-if=\"$slots['header-start']\"\n        class=\"t-app-shell__header-start\"\n      >\n        <slot\n          name=\"header-start\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__header-content\">\n        <slot\n          name=\"header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n    </header>\n\n    <aside\n      v-if=\"!isMobile\"\n      :id=\"sidebarId\"\n      class=\"t-app-shell__sidebar\"\n      :aria-label=\"sidebarLabel\"\n    >\n      <div\n        v-if=\"$slots['sidebar-header']\"\n        class=\"t-app-shell__sidebar-header\"\n      >\n        <slot\n          name=\"sidebar-header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__sidebar-body\">\n        <slot\n          name=\"sidebar\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div\n        v-if=\"$slots['sidebar-footer'] || showCollapseToggle\"\n        class=\"t-app-shell__sidebar-footer\"\n      >\n        <slot\n          name=\"sidebar-footer\"\n          v-bind=\"slotProps\"\n        />\n\n        <button\n          v-if=\"showCollapseToggle\"\n          type=\"button\"\n          class=\"t-app-shell__collapse-button\"\n          :aria-label=\"isCollapsed ? expandLabel : collapseLabel\"\n          :aria-expanded=\"!isCollapsed\"\n          :aria-controls=\"sidebarId\"\n          @click=\"toggleCollapsed\"\n        >\n          <slot\n            name=\"collapse-icon\"\n            :collapsed=\"effectiveCollapsed\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\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              <rect\n                x=\"3\"\n                y=\"3\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n              />\n              <path d=\"M9 3v18\" />\n            </svg>\n          </slot>\n        </button>\n      </div>\n    </aside>\n\n    <main class=\"t-app-shell__main\">\n      <slot\n        :mobile=\"isMobile\"\n        :collapsed=\"effectiveCollapsed\"\n      />\n    </main>\n\n    <transition name=\"t-app-shell-fade\">\n      <div\n        v-if=\"isMobile && isSidebarOpen\"\n        class=\"t-app-shell__overlay\"\n      >\n        <div\n          class=\"t-app-shell__backdrop\"\n          aria-hidden=\"true\"\n          @click=\"onOverlayClick\"\n        />\n        <aside\n          :id=\"sidebarId\"\n          ref=\"surfaceRef\"\n          class=\"t-app-shell__drawer\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"sidebarLabel\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <div class=\"t-app-shell__drawer-topbar\">\n            <button\n              type=\"button\"\n              class=\"t-app-shell__drawer-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"closeSidebar\"\n            >\n              <CloseIcon v-bind=\"treeIconDefaults\" />\n            </button>\n          </div>\n          <div class=\"t-app-shell__drawer-body\">\n            <div\n              v-if=\"$slots['sidebar-header']\"\n              class=\"t-app-shell__sidebar-header\"\n            >\n              <slot\n                name=\"sidebar-header\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div class=\"t-app-shell__sidebar-body\">\n              <slot\n                name=\"sidebar\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div\n              v-if=\"$slots['sidebar-footer']\"\n              class=\"t-app-shell__sidebar-footer\"\n            >\n              <slot\n                name=\"sidebar-footer\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n          </div>\n        </aside>\n      </div>\n    </transition>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TAppShell.cjs","names":[],"sources":["../../src/components/TAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSidebarSide } from './TSidebar.vue';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    side?: TSidebarSide;\n    sidebarWidth?: string;\n    collapsedWidth?: string;\n    collapsible?: boolean;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    mobile?: boolean;\n    breakpoint?: string;\n    sidebarOpen?: boolean;\n    defaultSidebarOpen?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showMenuButton?: boolean;\n    /** Render the built-in collapse toggle in the sidebar footer (desktop). */\n    showCollapseButton?: boolean;\n    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'div',\n    side: 'left',\n    sidebarWidth: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapsible: false,\n    collapsed: undefined,\n    defaultCollapsed: false,\n    mobile: undefined,\n    breakpoint: '768px',\n    sidebarOpen: undefined,\n    defaultSidebarOpen: false,\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showMenuButton: true,\n    showCollapseButton: true,\n    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: 'Sidebar',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n  'update:sidebarOpen': [value: boolean];\n  'sidebar-open-change': [value: boolean];\n}>();\n\nexport interface AppShellSlotProps {\n  mobile: boolean;\n  collapsed: boolean;\n  sidebarOpen: boolean;\n  toggleSidebar: () => void;\n  closeSidebar: () => void;\n  toggleCollapsed: () => void;\n}\n\ndefineSlots<{\n  header?: (props: AppShellSlotProps) => unknown;\n  /** Header region over the sidebar rail; the `header` slot then aligns with the content panel. */\n  'header-start'?: (props: AppShellSlotProps) => unknown;\n  /** Pinned above the sidebar body, inset to line up with nav item icons. */\n  'sidebar-header'?: (props: AppShellSlotProps) => unknown;\n  sidebar?: (props: AppShellSlotProps) => unknown;\n  /** Pinned to the bottom of the sidebar, inset to line up with nav item icons. */\n  'sidebar-footer'?: (props: AppShellSlotProps) => unknown;\n  default?: (props: Pick<AppShellSlotProps, 'mobile' | 'collapsed'>) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: boolean }) => unknown;\n  'collapse-icon'?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebarId = createId('t-app-shell-sidebar');\n\nconst { value: isCollapsed, setValue: setCollapsed } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst { value: isSidebarOpen, setValue: setSidebarOpen } = useControllableOpen(\n  toRef(props, 'sidebarOpen'),\n  props.defaultSidebarOpen,\n  (value) => {\n    emit('update:sidebarOpen', value);\n    emit('sidebar-open-change', value);\n  },\n);\n\n// Auto responsive detection when `mobile` is not explicitly controlled.\nconst autoMobile = ref(false);\nlet mediaQuery: MediaQueryList | null = null;\n\nconst onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {\n  autoMobile.value = event.matches;\n};\n\nconst setupMediaQuery = () => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return;\n  }\n\n  teardownMediaQuery();\n  mediaQuery = window.matchMedia(`(max-width: ${props.breakpoint})`);\n  autoMobile.value = mediaQuery.matches;\n  mediaQuery.addEventListener?.('change', onMediaChange);\n};\n\nconst teardownMediaQuery = () => {\n  mediaQuery?.removeEventListener?.('change', onMediaChange);\n  mediaQuery = null;\n};\n\nconst isMobile = computed(() => props.mobile ?? autoMobile.value);\n\n// Collapsing is desktop-only, so the built-in toggle follows the same rule.\nconst showCollapseToggle = computed(\n  () => !isMobile.value && props.collapsible && props.showCollapseButton,\n);\n\n// Collapse is a desktop-only concept; the mobile drawer always shows the\n// expanded sidebar, so descendants and slots see `collapsed: false` there.\nconst effectiveCollapsed = computed(() =>\n  isMobile.value ? false : isCollapsed.value,\n);\n\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nlet previousBodyOverflow = '';\nlet bodyLocked = false;\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined' || bodyLocked) {\n    return;\n  }\n\n  previousBodyOverflow = document.body.style.overflow;\n  document.body.style.overflow = 'hidden';\n  bodyLocked = true;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || !bodyLocked) {\n    return;\n  }\n\n  document.body.style.overflow = previousBodyOverflow;\n  bodyLocked = false;\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openSidebar = () => {\n  previousFocusedElement.value =\n    typeof document === 'undefined'\n      ? null\n      : (document.activeElement as HTMLElement | null);\n  setSidebarOpen(true);\n};\n\nconst closeSidebar = () => {\n  setSidebarOpen(false);\n};\n\nconst toggleSidebar = () => {\n  if (isSidebarOpen.value) {\n    closeSidebar();\n  } else {\n    openSidebar();\n  }\n};\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setCollapsed(!isCollapsed.value);\n};\n\nconst onOverlayClick = () => {\n  if (props.closeOnOverlay) {\n    closeSidebar();\n  }\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeSidebar();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\n// The off-canvas drawer only exists in mobile mode; keep body-scroll lock and\n// focus handling in sync with both the open flag and the responsive mode.\nconst syncOverlayState = (open: boolean, wasOpen: boolean) => {\n  if (open && isMobile.value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (wasOpen) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n};\n\nwatch(isSidebarOpen, (value, previousValue) => {\n  syncOverlayState(value, Boolean(previousValue));\n});\n\nwatch(isMobile, (mobile) => {\n  if (!isSidebarOpen.value) {\n    return;\n  }\n\n  // Leaving mobile removes the drawer from the DOM, so release the lock and\n  // restore focus; re-entering mobile while \"open\" re-arms the overlay.\n  if (mobile) {\n    lockBodyScroll();\n    focusSurface();\n  } else {\n    unlockBodyScroll();\n  }\n});\n\nwatch(\n  () => props.breakpoint,\n  () => {\n    if (typeof window !== 'undefined') {\n      setupMediaQuery();\n    }\n  },\n);\n\nonMounted(() => {\n  setupMediaQuery();\n});\n\nonBeforeUnmount(() => {\n  teardownMediaQuery();\n  unlockBodyScroll();\n});\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: effectiveCollapsed,\n});\n\nconst rootClasses = computed(() => [\n  't-app-shell',\n  `t-app-shell--${props.side}`,\n  {\n    'is-mobile': isMobile.value,\n    'is-collapsed':\n      !isMobile.value && props.collapsible && isCollapsed.value,\n    'is-sidebar-open': isMobile.value && isSidebarOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-app-shell-sidebar-width': props.sidebarWidth,\n    '--tree-app-shell-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst slotProps = computed<AppShellSlotProps>(() => ({\n  mobile: isMobile.value,\n  collapsed: effectiveCollapsed.value,\n  sidebarOpen: isSidebarOpen.value,\n  toggleSidebar,\n  closeSidebar,\n  toggleCollapsed,\n}));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-mobile=\"isMobile ? 'true' : 'false'\"\n  >\n    <header\n      class=\"t-app-shell__header\"\n      :class=\"{ 'has-start': Boolean($slots['header-start']) }\"\n    >\n      <button\n        v-if=\"isMobile && showMenuButton\"\n        type=\"button\"\n        class=\"t-app-shell__menu-button\"\n        :aria-label=\"menuLabel\"\n        :aria-expanded=\"isSidebarOpen\"\n        :aria-controls=\"sidebarId\"\n        @click=\"toggleSidebar\"\n      >\n        <slot\n          name=\"menu-icon\"\n          :sidebar-open=\"isSidebarOpen\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\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            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"6\"\n              y2=\"6\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"12\"\n              y2=\"12\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"18\"\n              y2=\"18\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div\n        v-if=\"$slots['header-start']\"\n        class=\"t-app-shell__header-start\"\n      >\n        <slot\n          name=\"header-start\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__header-content\">\n        <slot\n          name=\"header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n    </header>\n\n    <aside\n      v-if=\"!isMobile\"\n      :id=\"sidebarId\"\n      class=\"t-app-shell__sidebar\"\n      :aria-label=\"sidebarLabel\"\n    >\n      <div\n        v-if=\"$slots['sidebar-header']\"\n        class=\"t-app-shell__sidebar-header\"\n      >\n        <slot\n          name=\"sidebar-header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__sidebar-body\">\n        <slot\n          name=\"sidebar\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div\n        v-if=\"$slots['sidebar-footer'] || showCollapseToggle\"\n        class=\"t-app-shell__sidebar-footer\"\n      >\n        <slot\n          name=\"sidebar-footer\"\n          v-bind=\"slotProps\"\n        />\n\n        <button\n          v-if=\"showCollapseToggle\"\n          type=\"button\"\n          class=\"t-app-shell__collapse-button\"\n          :aria-label=\"isCollapsed ? expandLabel : collapseLabel\"\n          :aria-expanded=\"!isCollapsed\"\n          :aria-controls=\"sidebarId\"\n          @click=\"toggleCollapsed\"\n        >\n          <slot\n            name=\"collapse-icon\"\n            :collapsed=\"effectiveCollapsed\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\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              <rect\n                x=\"3\"\n                y=\"3\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n              />\n              <path d=\"M9 3v18\" />\n            </svg>\n          </slot>\n        </button>\n      </div>\n    </aside>\n\n    <main class=\"t-app-shell__main\">\n      <slot\n        :mobile=\"isMobile\"\n        :collapsed=\"effectiveCollapsed\"\n      />\n    </main>\n\n    <transition name=\"t-app-shell-fade\">\n      <div\n        v-if=\"isMobile && isSidebarOpen\"\n        class=\"t-app-shell__overlay\"\n      >\n        <div\n          class=\"t-app-shell__backdrop\"\n          aria-hidden=\"true\"\n          @click=\"onOverlayClick\"\n        />\n        <aside\n          :id=\"sidebarId\"\n          ref=\"surfaceRef\"\n          class=\"t-app-shell__drawer\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"sidebarLabel\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <div class=\"t-app-shell__drawer-topbar\">\n            <button\n              type=\"button\"\n              class=\"t-app-shell__drawer-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"closeSidebar\"\n            >\n              <CloseIcon v-bind=\"treeIconDefaults\" />\n            </button>\n          </div>\n          <div class=\"t-app-shell__drawer-body\">\n            <div\n              v-if=\"$slots['sidebar-header']\"\n              class=\"t-app-shell__sidebar-header\"\n            >\n              <slot\n                name=\"sidebar-header\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div class=\"t-app-shell__sidebar-body\">\n              <slot\n                name=\"sidebar\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div\n              v-if=\"$slots['sidebar-footer']\"\n              class=\"t-app-shell__sidebar-footer\"\n            >\n              <slot\n                name=\"sidebar-footer\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n          </div>\n        </aside>\n      </div>\n    </transition>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TAppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TAppShell.js","names":[],"sources":["../../src/components/TAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSidebarSide } from './TSidebar.vue';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    side?: TSidebarSide;\n    sidebarWidth?: string;\n    collapsedWidth?: string;\n    collapsible?: boolean;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    mobile?: boolean;\n    breakpoint?: string;\n    sidebarOpen?: boolean;\n    defaultSidebarOpen?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showMenuButton?: boolean;\n    /** Render the built-in collapse toggle in the sidebar footer (desktop). */\n    showCollapseButton?: boolean;\n    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'div',\n    side: 'left',\n    sidebarWidth: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapsible: false,\n    collapsed: undefined,\n    defaultCollapsed: false,\n    mobile: undefined,\n    breakpoint: '768px',\n    sidebarOpen: undefined,\n    defaultSidebarOpen: false,\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showMenuButton: true,\n    showCollapseButton: true,\n    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: 'Sidebar',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n  'update:sidebarOpen': [value: boolean];\n  'sidebar-open-change': [value: boolean];\n}>();\n\nexport interface AppShellSlotProps {\n  mobile: boolean;\n  collapsed: boolean;\n  sidebarOpen: boolean;\n  toggleSidebar: () => void;\n  closeSidebar: () => void;\n  toggleCollapsed: () => void;\n}\n\ndefineSlots<{\n  header?: (props: AppShellSlotProps) => unknown;\n  /** Header region over the sidebar rail; the `header` slot then aligns with the content panel. */\n  'header-start'?: (props: AppShellSlotProps) => unknown;\n  /** Pinned above the sidebar body, inset to line up with nav item icons. */\n  'sidebar-header'?: (props: AppShellSlotProps) => unknown;\n  sidebar?: (props: AppShellSlotProps) => unknown;\n  /** Pinned to the bottom of the sidebar, inset to line up with nav item icons. */\n  'sidebar-footer'?: (props: AppShellSlotProps) => unknown;\n  default?: (props: Pick<AppShellSlotProps, 'mobile' | 'collapsed'>) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: boolean }) => unknown;\n  'collapse-icon'?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebarId = createId('t-app-shell-sidebar');\n\nconst { value: isCollapsed, setValue: setCollapsed } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst { value: isSidebarOpen, setValue: setSidebarOpen } = useControllableOpen(\n  toRef(props, 'sidebarOpen'),\n  props.defaultSidebarOpen,\n  (value) => {\n    emit('update:sidebarOpen', value);\n    emit('sidebar-open-change', value);\n  },\n);\n\n// Auto responsive detection when `mobile` is not explicitly controlled.\nconst autoMobile = ref(false);\nlet mediaQuery: MediaQueryList | null = null;\n\nconst onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {\n  autoMobile.value = event.matches;\n};\n\nconst setupMediaQuery = () => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return;\n  }\n\n  teardownMediaQuery();\n  mediaQuery = window.matchMedia(`(max-width: ${props.breakpoint})`);\n  autoMobile.value = mediaQuery.matches;\n  mediaQuery.addEventListener?.('change', onMediaChange);\n};\n\nconst teardownMediaQuery = () => {\n  mediaQuery?.removeEventListener?.('change', onMediaChange);\n  mediaQuery = null;\n};\n\nconst isMobile = computed(() => props.mobile ?? autoMobile.value);\n\n// Collapsing is desktop-only, so the built-in toggle follows the same rule.\nconst showCollapseToggle = computed(\n  () => !isMobile.value && props.collapsible && props.showCollapseButton,\n);\n\n// Collapse is a desktop-only concept; the mobile drawer always shows the\n// expanded sidebar, so descendants and slots see `collapsed: false` there.\nconst effectiveCollapsed = computed(() =>\n  isMobile.value ? false : isCollapsed.value,\n);\n\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nlet previousBodyOverflow = '';\nlet bodyLocked = false;\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined' || bodyLocked) {\n    return;\n  }\n\n  previousBodyOverflow = document.body.style.overflow;\n  document.body.style.overflow = 'hidden';\n  bodyLocked = true;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || !bodyLocked) {\n    return;\n  }\n\n  document.body.style.overflow = previousBodyOverflow;\n  bodyLocked = false;\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openSidebar = () => {\n  previousFocusedElement.value =\n    typeof document === 'undefined'\n      ? null\n      : (document.activeElement as HTMLElement | null);\n  setSidebarOpen(true);\n};\n\nconst closeSidebar = () => {\n  setSidebarOpen(false);\n};\n\nconst toggleSidebar = () => {\n  if (isSidebarOpen.value) {\n    closeSidebar();\n  } else {\n    openSidebar();\n  }\n};\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setCollapsed(!isCollapsed.value);\n};\n\nconst onOverlayClick = () => {\n  if (props.closeOnOverlay) {\n    closeSidebar();\n  }\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeSidebar();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\n// The off-canvas drawer only exists in mobile mode; keep body-scroll lock and\n// focus handling in sync with both the open flag and the responsive mode.\nconst syncOverlayState = (open: boolean, wasOpen: boolean) => {\n  if (open && isMobile.value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (wasOpen) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n};\n\nwatch(isSidebarOpen, (value, previousValue) => {\n  syncOverlayState(value, Boolean(previousValue));\n});\n\nwatch(isMobile, (mobile) => {\n  if (!isSidebarOpen.value) {\n    return;\n  }\n\n  // Leaving mobile removes the drawer from the DOM, so release the lock and\n  // restore focus; re-entering mobile while \"open\" re-arms the overlay.\n  if (mobile) {\n    lockBodyScroll();\n    focusSurface();\n  } else {\n    unlockBodyScroll();\n  }\n});\n\nwatch(\n  () => props.breakpoint,\n  () => {\n    if (typeof window !== 'undefined') {\n      setupMediaQuery();\n    }\n  },\n);\n\nonMounted(() => {\n  setupMediaQuery();\n});\n\nonBeforeUnmount(() => {\n  teardownMediaQuery();\n  unlockBodyScroll();\n});\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: effectiveCollapsed,\n});\n\nconst rootClasses = computed(() => [\n  't-app-shell',\n  `t-app-shell--${props.side}`,\n  {\n    'is-mobile': isMobile.value,\n    'is-collapsed':\n      !isMobile.value && props.collapsible && isCollapsed.value,\n    'is-sidebar-open': isMobile.value && isSidebarOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-app-shell-sidebar-width': props.sidebarWidth,\n    '--tree-app-shell-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst slotProps = computed<AppShellSlotProps>(() => ({\n  mobile: isMobile.value,\n  collapsed: effectiveCollapsed.value,\n  sidebarOpen: isSidebarOpen.value,\n  toggleSidebar,\n  closeSidebar,\n  toggleCollapsed,\n}));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-mobile=\"isMobile ? 'true' : 'false'\"\n  >\n    <header\n      class=\"t-app-shell__header\"\n      :class=\"{ 'has-start': Boolean($slots['header-start']) }\"\n    >\n      <button\n        v-if=\"isMobile && showMenuButton\"\n        type=\"button\"\n        class=\"t-app-shell__menu-button\"\n        :aria-label=\"menuLabel\"\n        :aria-expanded=\"isSidebarOpen\"\n        :aria-controls=\"sidebarId\"\n        @click=\"toggleSidebar\"\n      >\n        <slot\n          name=\"menu-icon\"\n          :sidebar-open=\"isSidebarOpen\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\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            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"6\"\n              y2=\"6\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"12\"\n              y2=\"12\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"18\"\n              y2=\"18\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div\n        v-if=\"$slots['header-start']\"\n        class=\"t-app-shell__header-start\"\n      >\n        <slot\n          name=\"header-start\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__header-content\">\n        <slot\n          name=\"header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n    </header>\n\n    <aside\n      v-if=\"!isMobile\"\n      :id=\"sidebarId\"\n      class=\"t-app-shell__sidebar\"\n      :aria-label=\"sidebarLabel\"\n    >\n      <div\n        v-if=\"$slots['sidebar-header']\"\n        class=\"t-app-shell__sidebar-header\"\n      >\n        <slot\n          name=\"sidebar-header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__sidebar-body\">\n        <slot\n          name=\"sidebar\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div\n        v-if=\"$slots['sidebar-footer'] || showCollapseToggle\"\n        class=\"t-app-shell__sidebar-footer\"\n      >\n        <slot\n          name=\"sidebar-footer\"\n          v-bind=\"slotProps\"\n        />\n\n        <button\n          v-if=\"showCollapseToggle\"\n          type=\"button\"\n          class=\"t-app-shell__collapse-button\"\n          :aria-label=\"isCollapsed ? expandLabel : collapseLabel\"\n          :aria-expanded=\"!isCollapsed\"\n          :aria-controls=\"sidebarId\"\n          @click=\"toggleCollapsed\"\n        >\n          <slot\n            name=\"collapse-icon\"\n            :collapsed=\"effectiveCollapsed\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\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              <rect\n                x=\"3\"\n                y=\"3\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n              />\n              <path d=\"M9 3v18\" />\n            </svg>\n          </slot>\n        </button>\n      </div>\n    </aside>\n\n    <main class=\"t-app-shell__main\">\n      <slot\n        :mobile=\"isMobile\"\n        :collapsed=\"effectiveCollapsed\"\n      />\n    </main>\n\n    <transition name=\"t-app-shell-fade\">\n      <div\n        v-if=\"isMobile && isSidebarOpen\"\n        class=\"t-app-shell__overlay\"\n      >\n        <div\n          class=\"t-app-shell__backdrop\"\n          aria-hidden=\"true\"\n          @click=\"onOverlayClick\"\n        />\n        <aside\n          :id=\"sidebarId\"\n          ref=\"surfaceRef\"\n          class=\"t-app-shell__drawer\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"sidebarLabel\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <div class=\"t-app-shell__drawer-topbar\">\n            <button\n              type=\"button\"\n              class=\"t-app-shell__drawer-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"closeSidebar\"\n            >\n              <CloseIcon v-bind=\"treeIconDefaults\" />\n            </button>\n          </div>\n          <div class=\"t-app-shell__drawer-body\">\n            <div\n              v-if=\"$slots['sidebar-header']\"\n              class=\"t-app-shell__sidebar-header\"\n            >\n              <slot\n                name=\"sidebar-header\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div class=\"t-app-shell__sidebar-body\">\n              <slot\n                name=\"sidebar\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div\n              v-if=\"$slots['sidebar-footer']\"\n              class=\"t-app-shell__sidebar-footer\"\n            >\n              <slot\n                name=\"sidebar-footer\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n          </div>\n        </aside>\n      </div>\n    </transition>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TAppShell.js","names":[],"sources":["../../src/components/TAppShell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSidebarSide } from './TSidebar.vue';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    side?: TSidebarSide;\n    sidebarWidth?: string;\n    collapsedWidth?: string;\n    collapsible?: boolean;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    mobile?: boolean;\n    breakpoint?: string;\n    sidebarOpen?: boolean;\n    defaultSidebarOpen?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showMenuButton?: boolean;\n    /** Render the built-in collapse toggle in the sidebar footer (desktop). */\n    showCollapseButton?: boolean;\n    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'div',\n    side: 'left',\n    sidebarWidth: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapsible: false,\n    collapsed: undefined,\n    defaultCollapsed: false,\n    mobile: undefined,\n    breakpoint: '768px',\n    sidebarOpen: undefined,\n    defaultSidebarOpen: false,\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showMenuButton: true,\n    showCollapseButton: true,\n    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: 'Sidebar',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n  'update:sidebarOpen': [value: boolean];\n  'sidebar-open-change': [value: boolean];\n}>();\n\nexport interface AppShellSlotProps {\n  mobile: boolean;\n  collapsed: boolean;\n  sidebarOpen: boolean;\n  toggleSidebar: () => void;\n  closeSidebar: () => void;\n  toggleCollapsed: () => void;\n}\n\ndefineSlots<{\n  header?: (props: AppShellSlotProps) => unknown;\n  /** Header region over the sidebar rail; the `header` slot then aligns with the content panel. */\n  'header-start'?: (props: AppShellSlotProps) => unknown;\n  /** Pinned above the sidebar body, inset to line up with nav item icons. */\n  'sidebar-header'?: (props: AppShellSlotProps) => unknown;\n  sidebar?: (props: AppShellSlotProps) => unknown;\n  /** Pinned to the bottom of the sidebar, inset to line up with nav item icons. */\n  'sidebar-footer'?: (props: AppShellSlotProps) => unknown;\n  default?: (props: Pick<AppShellSlotProps, 'mobile' | 'collapsed'>) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: boolean }) => unknown;\n  'collapse-icon'?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebarId = createId('t-app-shell-sidebar');\n\nconst { value: isCollapsed, setValue: setCollapsed } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst { value: isSidebarOpen, setValue: setSidebarOpen } = useControllableOpen(\n  toRef(props, 'sidebarOpen'),\n  props.defaultSidebarOpen,\n  (value) => {\n    emit('update:sidebarOpen', value);\n    emit('sidebar-open-change', value);\n  },\n);\n\n// Auto responsive detection when `mobile` is not explicitly controlled.\nconst autoMobile = ref(false);\nlet mediaQuery: MediaQueryList | null = null;\n\nconst onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {\n  autoMobile.value = event.matches;\n};\n\nconst setupMediaQuery = () => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return;\n  }\n\n  teardownMediaQuery();\n  mediaQuery = window.matchMedia(`(max-width: ${props.breakpoint})`);\n  autoMobile.value = mediaQuery.matches;\n  mediaQuery.addEventListener?.('change', onMediaChange);\n};\n\nconst teardownMediaQuery = () => {\n  mediaQuery?.removeEventListener?.('change', onMediaChange);\n  mediaQuery = null;\n};\n\nconst isMobile = computed(() => props.mobile ?? autoMobile.value);\n\n// Collapsing is desktop-only, so the built-in toggle follows the same rule.\nconst showCollapseToggle = computed(\n  () => !isMobile.value && props.collapsible && props.showCollapseButton,\n);\n\n// Collapse is a desktop-only concept; the mobile drawer always shows the\n// expanded sidebar, so descendants and slots see `collapsed: false` there.\nconst effectiveCollapsed = computed(() =>\n  isMobile.value ? false : isCollapsed.value,\n);\n\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nlet previousBodyOverflow = '';\nlet bodyLocked = false;\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined' || bodyLocked) {\n    return;\n  }\n\n  previousBodyOverflow = document.body.style.overflow;\n  document.body.style.overflow = 'hidden';\n  bodyLocked = true;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || !bodyLocked) {\n    return;\n  }\n\n  document.body.style.overflow = previousBodyOverflow;\n  bodyLocked = false;\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openSidebar = () => {\n  previousFocusedElement.value =\n    typeof document === 'undefined'\n      ? null\n      : (document.activeElement as HTMLElement | null);\n  setSidebarOpen(true);\n};\n\nconst closeSidebar = () => {\n  setSidebarOpen(false);\n};\n\nconst toggleSidebar = () => {\n  if (isSidebarOpen.value) {\n    closeSidebar();\n  } else {\n    openSidebar();\n  }\n};\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setCollapsed(!isCollapsed.value);\n};\n\nconst onOverlayClick = () => {\n  if (props.closeOnOverlay) {\n    closeSidebar();\n  }\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeSidebar();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\n// The off-canvas drawer only exists in mobile mode; keep body-scroll lock and\n// focus handling in sync with both the open flag and the responsive mode.\nconst syncOverlayState = (open: boolean, wasOpen: boolean) => {\n  if (open && isMobile.value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (wasOpen) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n};\n\nwatch(isSidebarOpen, (value, previousValue) => {\n  syncOverlayState(value, Boolean(previousValue));\n});\n\nwatch(isMobile, (mobile) => {\n  if (!isSidebarOpen.value) {\n    return;\n  }\n\n  // Leaving mobile removes the drawer from the DOM, so release the lock and\n  // restore focus; re-entering mobile while \"open\" re-arms the overlay.\n  if (mobile) {\n    lockBodyScroll();\n    focusSurface();\n  } else {\n    unlockBodyScroll();\n  }\n});\n\nwatch(\n  () => props.breakpoint,\n  () => {\n    if (typeof window !== 'undefined') {\n      setupMediaQuery();\n    }\n  },\n);\n\nonMounted(() => {\n  setupMediaQuery();\n});\n\nonBeforeUnmount(() => {\n  teardownMediaQuery();\n  unlockBodyScroll();\n});\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: effectiveCollapsed,\n});\n\nconst rootClasses = computed(() => [\n  't-app-shell',\n  `t-app-shell--${props.side}`,\n  {\n    'is-mobile': isMobile.value,\n    'is-collapsed':\n      !isMobile.value && props.collapsible && isCollapsed.value,\n    'is-sidebar-open': isMobile.value && isSidebarOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-app-shell-sidebar-width': props.sidebarWidth,\n    '--tree-app-shell-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst slotProps = computed<AppShellSlotProps>(() => ({\n  mobile: isMobile.value,\n  collapsed: effectiveCollapsed.value,\n  sidebarOpen: isSidebarOpen.value,\n  toggleSidebar,\n  closeSidebar,\n  toggleCollapsed,\n}));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-mobile=\"isMobile ? 'true' : 'false'\"\n  >\n    <header\n      class=\"t-app-shell__header\"\n      :class=\"{ 'has-start': Boolean($slots['header-start']) }\"\n    >\n      <button\n        v-if=\"isMobile && showMenuButton\"\n        type=\"button\"\n        class=\"t-app-shell__menu-button\"\n        :aria-label=\"menuLabel\"\n        :aria-expanded=\"isSidebarOpen\"\n        :aria-controls=\"sidebarId\"\n        @click=\"toggleSidebar\"\n      >\n        <slot\n          name=\"menu-icon\"\n          :sidebar-open=\"isSidebarOpen\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\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            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"6\"\n              y2=\"6\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"12\"\n              y2=\"12\"\n            />\n            <line\n              x1=\"4\"\n              x2=\"20\"\n              y1=\"18\"\n              y2=\"18\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div\n        v-if=\"$slots['header-start']\"\n        class=\"t-app-shell__header-start\"\n      >\n        <slot\n          name=\"header-start\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__header-content\">\n        <slot\n          name=\"header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n    </header>\n\n    <aside\n      v-if=\"!isMobile\"\n      :id=\"sidebarId\"\n      class=\"t-app-shell__sidebar\"\n      :aria-label=\"sidebarLabel\"\n    >\n      <div\n        v-if=\"$slots['sidebar-header']\"\n        class=\"t-app-shell__sidebar-header\"\n      >\n        <slot\n          name=\"sidebar-header\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div class=\"t-app-shell__sidebar-body\">\n        <slot\n          name=\"sidebar\"\n          v-bind=\"slotProps\"\n        />\n      </div>\n\n      <div\n        v-if=\"$slots['sidebar-footer'] || showCollapseToggle\"\n        class=\"t-app-shell__sidebar-footer\"\n      >\n        <slot\n          name=\"sidebar-footer\"\n          v-bind=\"slotProps\"\n        />\n\n        <button\n          v-if=\"showCollapseToggle\"\n          type=\"button\"\n          class=\"t-app-shell__collapse-button\"\n          :aria-label=\"isCollapsed ? expandLabel : collapseLabel\"\n          :aria-expanded=\"!isCollapsed\"\n          :aria-controls=\"sidebarId\"\n          @click=\"toggleCollapsed\"\n        >\n          <slot\n            name=\"collapse-icon\"\n            :collapsed=\"effectiveCollapsed\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\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              <rect\n                x=\"3\"\n                y=\"3\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n              />\n              <path d=\"M9 3v18\" />\n            </svg>\n          </slot>\n        </button>\n      </div>\n    </aside>\n\n    <main class=\"t-app-shell__main\">\n      <slot\n        :mobile=\"isMobile\"\n        :collapsed=\"effectiveCollapsed\"\n      />\n    </main>\n\n    <transition name=\"t-app-shell-fade\">\n      <div\n        v-if=\"isMobile && isSidebarOpen\"\n        class=\"t-app-shell__overlay\"\n      >\n        <div\n          class=\"t-app-shell__backdrop\"\n          aria-hidden=\"true\"\n          @click=\"onOverlayClick\"\n        />\n        <aside\n          :id=\"sidebarId\"\n          ref=\"surfaceRef\"\n          class=\"t-app-shell__drawer\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"sidebarLabel\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <div class=\"t-app-shell__drawer-topbar\">\n            <button\n              type=\"button\"\n              class=\"t-app-shell__drawer-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"closeSidebar\"\n            >\n              <CloseIcon v-bind=\"treeIconDefaults\" />\n            </button>\n          </div>\n          <div class=\"t-app-shell__drawer-body\">\n            <div\n              v-if=\"$slots['sidebar-header']\"\n              class=\"t-app-shell__sidebar-header\"\n            >\n              <slot\n                name=\"sidebar-header\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div class=\"t-app-shell__sidebar-body\">\n              <slot\n                name=\"sidebar\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n\n            <div\n              v-if=\"$slots['sidebar-footer']\"\n              class=\"t-app-shell__sidebar-footer\"\n            >\n              <slot\n                name=\"sidebar-footer\"\n                v-bind=\"slotProps\"\n              />\n            </div>\n          </div>\n        </aside>\n      </div>\n    </transition>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TAppShell.vue_vue_type_script_setup_true_lang.cjs

@@ -1,2 +1,2 @@
-const e=require("../composables/useControllableOpen.cjs"),t=require("./sidebar.cjs");let n=require("vue"),r=require("@treeui/utils"),i=require("@treeui/icons");var a=[`aria-label`,`aria-expanded`,`aria-controls`],o={key:1,class:`t-app-shell__header-start`},s={class:`t-app-shell__header-content`},c=[`id`,`aria-label`],l={key:0,class:`t-app-shell__sidebar-header`},ee={class:`t-app-shell__sidebar-body`},u={key:1,class:`t-app-shell__sidebar-footer`},d=[`aria-label`,`aria-expanded`,`aria-controls`],f={class:`t-app-shell__main`},p={key:0,class:`t-app-shell__overlay`},m=[`id`,`aria-label`],h={class:`t-app-shell__drawer-topbar`},g=[`aria-label`],_={class:`t-app-shell__drawer-body`},v={key:0,class:`t-app-shell__sidebar-header`},y={class:`t-app-shell__sidebar-body`},b={key:1,class:`t-app-shell__sidebar-footer`},x=(0,n.defineComponent)({inheritAttrs:!1,__name:`TAppShell`,props:{as:{default:`div`},side:{default:`left`},sidebarWidth:{default:`17.5rem`},collapsedWidth:{default:`4.75rem`},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:void 0},defaultCollapsed:{type:Boolean,default:!1},mobile:{type:Boolean,default:void 0},breakpoint:{default:`768px`},sidebarOpen:{type:Boolean,default:void 0},defaultSidebarOpen:{type:Boolean,default:!1},closeOnEscape:{type:Boolean,default:!0},closeOnOverlay:{type:Boolean,default:!0},showMenuButton:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},menuLabel:{default:`Open menu`},closeLabel:{default:`Close menu`},sidebarLabel:{default:`Sidebar`},collapseLabel:{default:`Collapse sidebar`},expandLabel:{default:`Expand sidebar`}},emits:[`update:collapsed`,`collapse-change`,`update:sidebarOpen`,`sidebar-open-change`],setup(x,{emit:S}){let C=(0,i.getTreeIcon)(`x`),w=x,T=S,E=(0,n.useAttrs)(),D=(0,r.createId)(`t-app-shell-sidebar`),{value:O,setValue:k}=e.useControllableOpen((0,n.toRef)(w,`collapsed`),w.defaultCollapsed,e=>{T(`update:collapsed`,e),T(`collapse-change`,e)}),{value:A,setValue:j}=e.useControllableOpen((0,n.toRef)(w,`sidebarOpen`),w.defaultSidebarOpen,e=>{T(`update:sidebarOpen`,e),T(`sidebar-open-change`,e)}),M=(0,n.ref)(!1),N=null,P=e=>{M.value=e.matches},F=()=>{typeof window>`u`||typeof window.matchMedia!=`function`||(I(),N=window.matchMedia(`(max-width: ${w.breakpoint})`),M.value=N.matches,N.addEventListener?.(`change`,P))},I=()=>{N?.removeEventListener?.(`change`,P),N=null},L=(0,n.computed)(()=>w.mobile??M.value),R=(0,n.computed)(()=>!L.value&&w.collapsible&&w.showCollapseButton),z=(0,n.computed)(()=>!L.value&&O.value),B=(0,n.ref)(null),V=(0,n.ref)(null),H=``,U=!1,W=()=>{typeof document>`u`||U||(H=document.body.style.overflow,document.body.style.overflow=`hidden`,U=!0)},G=()=>{typeof document>`u`||!U||(document.body.style.overflow=H,U=!1)},K=()=>{(0,n.nextTick)(()=>{B.value&&((0,r.focusFirst)(B.value)||B.value.focus())})},q=()=>{V.value=typeof document>`u`?null:document.activeElement,j(!0)},J=()=>{j(!1)},Y=()=>{A.value?J():q()},X=()=>{w.collapsible&&k(!O.value)},Z=()=>{w.closeOnOverlay&&J()},Q=e=>{if((0,r.isEscapeKey)(e)&&w.closeOnEscape){e.preventDefault(),J();return}if(e.key!==`Tab`||!B.value)return;let t=(0,r.getFocusableElements)(B.value);if(!t.length){e.preventDefault(),B.value.focus();return}let n=t[0],i=t[t.length-1],a=document.activeElement;e.shiftKey&&a===n&&(e.preventDefault(),(0,r.focusLast)(B.value)),!e.shiftKey&&a===i&&(e.preventDefault(),(0,r.focusFirst)(B.value))},te=(e,t)=>{if(e&&L.value){W(),K();return}t&&(G(),(0,n.nextTick)(()=>{V.value?.focus()}))};(0,n.watch)(A,(e,t)=>{te(e,!!t)}),(0,n.watch)(L,e=>{A.value&&(e?(W(),K()):G())}),(0,n.watch)(()=>w.breakpoint,()=>{typeof window<`u`&&F()}),(0,n.onMounted)(()=>{F()}),(0,n.onBeforeUnmount)(()=>{I(),G()}),(0,n.provide)(t.treeSidebarInjectionKey,{collapsed:z});let ne=(0,n.computed)(()=>[`t-app-shell`,`t-app-shell--${w.side}`,{"is-mobile":L.value,"is-collapsed":!L.value&&w.collapsible&&O.value,"is-sidebar-open":L.value&&A.value},E.class]),re=(0,n.computed)(()=>[{"--tree-app-shell-sidebar-width":w.sidebarWidth,"--tree-app-shell-collapsed-width":w.collapsedWidth},E.style]),ie=(0,n.computed)(()=>{let{class:e,style:t,...n}=E;return n}),$=(0,n.computed)(()=>({mobile:L.value,collapsed:z.value,sidebarOpen:A.value,toggleSidebar:Y,closeSidebar:J,toggleCollapsed:X}));return(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(x.as),(0,n.mergeProps)(ie.value,{class:ne.value,style:re.value,"data-mobile":L.value?`true`:`false`}),{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`header`,{class:(0,n.normalizeClass)([`t-app-shell__header`,{"has-start":!!e.$slots[`header-start`]}])},[L.value&&x.showMenuButton?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:0,type:`button`,class:`t-app-shell__menu-button`,"aria-label":x.menuLabel,"aria-expanded":(0,n.unref)(A),"aria-controls":(0,n.unref)(D),onClick:Y},[(0,n.renderSlot)(e.$slots,`menu-icon`,{sidebarOpen:(0,n.unref)(A)},()=>[t[0]||=(0,n.createElementVNode)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[(0,n.createElementVNode)(`line`,{x1:`4`,x2:`20`,y1:`6`,y2:`6`}),(0,n.createElementVNode)(`line`,{x1:`4`,x2:`20`,y1:`12`,y2:`12`}),(0,n.createElementVNode)(`line`,{x1:`4`,x2:`20`,y1:`18`,y2:`18`})],-1)])],8,a)):(0,n.createCommentVNode)(``,!0),e.$slots[`header-start`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,o,[(0,n.renderSlot)(e.$slots,`header-start`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,s,[(0,n.renderSlot)(e.$slots,`header`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])],2),L.value?(0,n.createCommentVNode)(``,!0):((0,n.openBlock)(),(0,n.createElementBlock)(`aside`,{key:0,id:(0,n.unref)(D),class:`t-app-shell__sidebar`,"aria-label":x.sidebarLabel},[e.$slots[`sidebar-header`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,l,[(0,n.renderSlot)(e.$slots,`sidebar-header`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,ee,[(0,n.renderSlot)(e.$slots,`sidebar`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))]),e.$slots[`sidebar-footer`]||R.value?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,u,[(0,n.renderSlot)(e.$slots,`sidebar-footer`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value))),R.value?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:0,type:`button`,class:`t-app-shell__collapse-button`,"aria-label":(0,n.unref)(O)?x.expandLabel:x.collapseLabel,"aria-expanded":!(0,n.unref)(O),"aria-controls":(0,n.unref)(D),onClick:X},[(0,n.renderSlot)(e.$slots,`collapse-icon`,{collapsed:z.value},()=>[t[1]||=(0,n.createElementVNode)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[(0,n.createElementVNode)(`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`}),(0,n.createElementVNode)(`path`,{d:`M9 3v18`})],-1)])],8,d)):(0,n.createCommentVNode)(``,!0)])):(0,n.createCommentVNode)(``,!0)],8,c)),(0,n.createElementVNode)(`main`,f,[(0,n.renderSlot)(e.$slots,`default`,{mobile:L.value,collapsed:z.value})]),(0,n.createVNode)(n.Transition,{name:`t-app-shell-fade`},{default:(0,n.withCtx)(()=>[L.value&&(0,n.unref)(A)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,p,[(0,n.createElementVNode)(`div`,{class:`t-app-shell__backdrop`,"aria-hidden":`true`,onClick:Z}),(0,n.createElementVNode)(`aside`,{id:(0,n.unref)(D),ref_key:`surfaceRef`,ref:B,class:`t-app-shell__drawer`,role:`dialog`,"aria-modal":`true`,"aria-label":x.sidebarLabel,tabindex:`-1`,onKeydown:Q},[(0,n.createElementVNode)(`div`,h,[(0,n.createElementVNode)(`button`,{type:`button`,class:`t-app-shell__drawer-close`,"aria-label":x.closeLabel,onClick:J},[(0,n.createVNode)((0,n.unref)(C),(0,n.normalizeProps)((0,n.guardReactiveProps)((0,n.unref)(i.treeIconDefaults))),null,16)],8,g)]),(0,n.createElementVNode)(`div`,_,[e.$slots[`sidebar-header`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,v,[(0,n.renderSlot)(e.$slots,`sidebar-header`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,y,[(0,n.renderSlot)(e.$slots,`sidebar`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))]),e.$slots[`sidebar-footer`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,b,[(0,n.renderSlot)(e.$slots,`sidebar-footer`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])):(0,n.createCommentVNode)(``,!0)])],40,m)])):(0,n.createCommentVNode)(``,!0)]),_:3})]),_:3},16,[`class`,`style`,`data-mobile`]))}});exports.default=x;
+const e=require("../composables/useControllableOpen.cjs"),t=require("./sidebar.cjs");let n=require("vue"),r=require("@treeui/utils"),i=require("@treeui/icons");var a=[`aria-label`,`aria-expanded`,`aria-controls`],o={key:1,class:`t-app-shell__header-start`},s={class:`t-app-shell__header-content`},c=[`id`,`aria-label`],l={key:0,class:`t-app-shell__sidebar-header`},ee={class:`t-app-shell__sidebar-body`},u={key:1,class:`t-app-shell__sidebar-footer`},d=[`aria-label`,`aria-expanded`,`aria-controls`],f={class:`t-app-shell__main`},p={key:0,class:`t-app-shell__overlay`},m=[`id`,`aria-label`],h={class:`t-app-shell__drawer-topbar`},g=[`aria-label`],_={class:`t-app-shell__drawer-body`},v={key:0,class:`t-app-shell__sidebar-header`},y={class:`t-app-shell__sidebar-body`},b={key:1,class:`t-app-shell__sidebar-footer`},x=(0,n.defineComponent)({inheritAttrs:!1,__name:`TAppShell`,props:{as:{default:`div`},side:{default:`left`},sidebarWidth:{default:`17.5rem`},collapsedWidth:{default:`4.75rem`},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:void 0},defaultCollapsed:{type:Boolean,default:!1},mobile:{type:Boolean,default:void 0},breakpoint:{default:`768px`},sidebarOpen:{type:Boolean,default:void 0},defaultSidebarOpen:{type:Boolean,default:!1},closeOnEscape:{type:Boolean,default:!0},closeOnOverlay:{type:Boolean,default:!0},showMenuButton:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},menuLabel:{default:`Open menu`},closeLabel:{default:`Close menu`},sidebarLabel:{default:`Sidebar`},collapseLabel:{default:`Collapse sidebar`},expandLabel:{default:`Expand sidebar`}},emits:[`update:collapsed`,`collapse-change`,`update:sidebarOpen`,`sidebar-open-change`],setup(x,{emit:S}){let C=(0,n.computed)(()=>(0,i.getTreeIcon)(`x`)),w=x,T=S,E=(0,n.useAttrs)(),D=(0,r.createId)(`t-app-shell-sidebar`),{value:O,setValue:k}=e.useControllableOpen((0,n.toRef)(w,`collapsed`),w.defaultCollapsed,e=>{T(`update:collapsed`,e),T(`collapse-change`,e)}),{value:A,setValue:j}=e.useControllableOpen((0,n.toRef)(w,`sidebarOpen`),w.defaultSidebarOpen,e=>{T(`update:sidebarOpen`,e),T(`sidebar-open-change`,e)}),M=(0,n.ref)(!1),N=null,P=e=>{M.value=e.matches},F=()=>{typeof window>`u`||typeof window.matchMedia!=`function`||(I(),N=window.matchMedia(`(max-width: ${w.breakpoint})`),M.value=N.matches,N.addEventListener?.(`change`,P))},I=()=>{N?.removeEventListener?.(`change`,P),N=null},L=(0,n.computed)(()=>w.mobile??M.value),R=(0,n.computed)(()=>!L.value&&w.collapsible&&w.showCollapseButton),z=(0,n.computed)(()=>!L.value&&O.value),B=(0,n.ref)(null),V=(0,n.ref)(null),H=``,U=!1,W=()=>{typeof document>`u`||U||(H=document.body.style.overflow,document.body.style.overflow=`hidden`,U=!0)},G=()=>{typeof document>`u`||!U||(document.body.style.overflow=H,U=!1)},K=()=>{(0,n.nextTick)(()=>{B.value&&((0,r.focusFirst)(B.value)||B.value.focus())})},q=()=>{V.value=typeof document>`u`?null:document.activeElement,j(!0)},J=()=>{j(!1)},Y=()=>{A.value?J():q()},X=()=>{w.collapsible&&k(!O.value)},Z=()=>{w.closeOnOverlay&&J()},Q=e=>{if((0,r.isEscapeKey)(e)&&w.closeOnEscape){e.preventDefault(),J();return}if(e.key!==`Tab`||!B.value)return;let t=(0,r.getFocusableElements)(B.value);if(!t.length){e.preventDefault(),B.value.focus();return}let n=t[0],i=t[t.length-1],a=document.activeElement;e.shiftKey&&a===n&&(e.preventDefault(),(0,r.focusLast)(B.value)),!e.shiftKey&&a===i&&(e.preventDefault(),(0,r.focusFirst)(B.value))},te=(e,t)=>{if(e&&L.value){W(),K();return}t&&(G(),(0,n.nextTick)(()=>{V.value?.focus()}))};(0,n.watch)(A,(e,t)=>{te(e,!!t)}),(0,n.watch)(L,e=>{A.value&&(e?(W(),K()):G())}),(0,n.watch)(()=>w.breakpoint,()=>{typeof window<`u`&&F()}),(0,n.onMounted)(()=>{F()}),(0,n.onBeforeUnmount)(()=>{I(),G()}),(0,n.provide)(t.treeSidebarInjectionKey,{collapsed:z});let ne=(0,n.computed)(()=>[`t-app-shell`,`t-app-shell--${w.side}`,{"is-mobile":L.value,"is-collapsed":!L.value&&w.collapsible&&O.value,"is-sidebar-open":L.value&&A.value},E.class]),re=(0,n.computed)(()=>[{"--tree-app-shell-sidebar-width":w.sidebarWidth,"--tree-app-shell-collapsed-width":w.collapsedWidth},E.style]),ie=(0,n.computed)(()=>{let{class:e,style:t,...n}=E;return n}),$=(0,n.computed)(()=>({mobile:L.value,collapsed:z.value,sidebarOpen:A.value,toggleSidebar:Y,closeSidebar:J,toggleCollapsed:X}));return(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(x.as),(0,n.mergeProps)(ie.value,{class:ne.value,style:re.value,"data-mobile":L.value?`true`:`false`}),{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`header`,{class:(0,n.normalizeClass)([`t-app-shell__header`,{"has-start":!!e.$slots[`header-start`]}])},[L.value&&x.showMenuButton?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:0,type:`button`,class:`t-app-shell__menu-button`,"aria-label":x.menuLabel,"aria-expanded":(0,n.unref)(A),"aria-controls":(0,n.unref)(D),onClick:Y},[(0,n.renderSlot)(e.$slots,`menu-icon`,{sidebarOpen:(0,n.unref)(A)},()=>[t[0]||=(0,n.createElementVNode)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[(0,n.createElementVNode)(`line`,{x1:`4`,x2:`20`,y1:`6`,y2:`6`}),(0,n.createElementVNode)(`line`,{x1:`4`,x2:`20`,y1:`12`,y2:`12`}),(0,n.createElementVNode)(`line`,{x1:`4`,x2:`20`,y1:`18`,y2:`18`})],-1)])],8,a)):(0,n.createCommentVNode)(``,!0),e.$slots[`header-start`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,o,[(0,n.renderSlot)(e.$slots,`header-start`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,s,[(0,n.renderSlot)(e.$slots,`header`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])],2),L.value?(0,n.createCommentVNode)(``,!0):((0,n.openBlock)(),(0,n.createElementBlock)(`aside`,{key:0,id:(0,n.unref)(D),class:`t-app-shell__sidebar`,"aria-label":x.sidebarLabel},[e.$slots[`sidebar-header`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,l,[(0,n.renderSlot)(e.$slots,`sidebar-header`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,ee,[(0,n.renderSlot)(e.$slots,`sidebar`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))]),e.$slots[`sidebar-footer`]||R.value?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,u,[(0,n.renderSlot)(e.$slots,`sidebar-footer`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value))),R.value?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:0,type:`button`,class:`t-app-shell__collapse-button`,"aria-label":(0,n.unref)(O)?x.expandLabel:x.collapseLabel,"aria-expanded":!(0,n.unref)(O),"aria-controls":(0,n.unref)(D),onClick:X},[(0,n.renderSlot)(e.$slots,`collapse-icon`,{collapsed:z.value},()=>[t[1]||=(0,n.createElementVNode)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[(0,n.createElementVNode)(`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`}),(0,n.createElementVNode)(`path`,{d:`M9 3v18`})],-1)])],8,d)):(0,n.createCommentVNode)(``,!0)])):(0,n.createCommentVNode)(``,!0)],8,c)),(0,n.createElementVNode)(`main`,f,[(0,n.renderSlot)(e.$slots,`default`,{mobile:L.value,collapsed:z.value})]),(0,n.createVNode)(n.Transition,{name:`t-app-shell-fade`},{default:(0,n.withCtx)(()=>[L.value&&(0,n.unref)(A)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,p,[(0,n.createElementVNode)(`div`,{class:`t-app-shell__backdrop`,"aria-hidden":`true`,onClick:Z}),(0,n.createElementVNode)(`aside`,{id:(0,n.unref)(D),ref_key:`surfaceRef`,ref:B,class:`t-app-shell__drawer`,role:`dialog`,"aria-modal":`true`,"aria-label":x.sidebarLabel,tabindex:`-1`,onKeydown:Q},[(0,n.createElementVNode)(`div`,h,[(0,n.createElementVNode)(`button`,{type:`button`,class:`t-app-shell__drawer-close`,"aria-label":x.closeLabel,onClick:J},[(0,n.createVNode)((0,n.unref)(C),(0,n.normalizeProps)((0,n.guardReactiveProps)((0,n.unref)(i.treeIconDefaults))),null,16)],8,g)]),(0,n.createElementVNode)(`div`,_,[e.$slots[`sidebar-header`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,v,[(0,n.renderSlot)(e.$slots,`sidebar-header`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,y,[(0,n.renderSlot)(e.$slots,`sidebar`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))]),e.$slots[`sidebar-footer`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,b,[(0,n.renderSlot)(e.$slots,`sidebar-footer`,(0,n.normalizeProps)((0,n.guardReactiveProps)($.value)))])):(0,n.createCommentVNode)(``,!0)])],40,m)])):(0,n.createCommentVNode)(``,!0)]),_:3})]),_:3},16,[`class`,`style`,`data-mobile`]))}});exports.default=x;
 //# sourceMappingURL=TAppShell.vue_vue_type_script_setup_true_lang.cjs.map