@treeui/vue 0.14.0 → 0.15.0

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    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: 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    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: '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  sidebar?: (props: AppShellSlotProps) => unknown;\n  default?: (props: Pick<AppShellSlotProps, 'mobile' | 'collapsed'>) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: 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// 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 class=\"t-app-shell__header\">\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 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      <slot\n        name=\"sidebar\"\n        v-bind=\"slotProps\"\n      />\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            <slot\n              name=\"sidebar\"\n              v-bind=\"slotProps\"\n            />\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 = 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    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: 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    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: '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  sidebar?: (props: AppShellSlotProps) => unknown;\n  default?: (props: Pick<AppShellSlotProps, 'mobile' | 'collapsed'>) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: 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// 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 class=\"t-app-shell__header\">\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 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      <slot\n        name=\"sidebar\"\n        v-bind=\"slotProps\"\n      />\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            <slot\n              name=\"sidebar\"\n              v-bind=\"slotProps\"\n            />\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 = 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.d.ts

@@ -14,9 +14,13 @@ type __VLS_Props = {
     closeOnEscape?: boolean;
     closeOnOverlay?: boolean;
     showMenuButton?: boolean;
+    /** Render the built-in collapse toggle in the sidebar footer (desktop). */
+    showCollapseButton?: boolean;
     menuLabel?: string;
     closeLabel?: string;
     sidebarLabel?: string;
+    collapseLabel?: string;
+    expandLabel?: string;
 };
 export interface AppShellSlotProps {
     mobile: boolean;
@@ -30,18 +34,36 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         header?: (props: AppShellSlotProps) => unknown;
+        /** Header region over the sidebar rail; the `header` slot then aligns with the content panel. */
+        'header-start'?: (props: AppShellSlotProps) => unknown;
+        /** Pinned above the sidebar body, inset to line up with nav item icons. */
+        'sidebar-header'?: (props: AppShellSlotProps) => unknown;
         sidebar?: (props: AppShellSlotProps) => unknown;
+        /** Pinned to the bottom of the sidebar, inset to line up with nav item icons. */
+        'sidebar-footer'?: (props: AppShellSlotProps) => unknown;
         default?: (props: Pick<AppShellSlotProps, "mobile" | "collapsed">) => unknown;
         'menu-icon'?: (props: {
             sidebarOpen: boolean;
         }) => unknown;
+        'collapse-icon'?: (props: {
+            collapsed: boolean;
+        }) => unknown;
     }> & {
         header?: (props: AppShellSlotProps) => unknown;
+        /** Header region over the sidebar rail; the `header` slot then aligns with the content panel. */
+        'header-start'?: (props: AppShellSlotProps) => unknown;
+        /** Pinned above the sidebar body, inset to line up with nav item icons. */
+        'sidebar-header'?: (props: AppShellSlotProps) => unknown;
         sidebar?: (props: AppShellSlotProps) => unknown;
+        /** Pinned to the bottom of the sidebar, inset to line up with nav item icons. */
+        'sidebar-footer'?: (props: AppShellSlotProps) => unknown;
         default?: (props: Pick<AppShellSlotProps, "mobile" | "collapsed">) => unknown;
         'menu-icon'?: (props: {
             sidebarOpen: boolean;
         }) => unknown;
+        'collapse-icon'?: (props: {
+            collapsed: boolean;
+        }) => unknown;
     };
     refs: {
         surfaceRef: HTMLElement;
@@ -70,11 +92,14 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     collapsed: boolean;
     defaultCollapsed: boolean;
     collapsedWidth: string;
+    collapseLabel: string;
+    expandLabel: string;
     sidebarWidth: string;
     breakpoint: string;
     sidebarOpen: boolean;
     defaultSidebarOpen: boolean;
     showMenuButton: boolean;
+    showCollapseButton: boolean;
     menuLabel: string;
     sidebarLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

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

@@ -1 +1 @@
-{"version":3,"file":"TAppShell.vue.d.ts","sourceRoot":"","sources":["../../src/components/TAppShell.vue"],"names":[],"mappings":"AA2eA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AASnD,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAgCJ,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAwRD,iBAAS,cAAc;WAgKT,OAAO,IAA6B;;iBArbvC,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO;kBACpC,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO;kBACrC,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,WAAW,CAAC,KAAK,OAAO;sBAC/D,CAAC,KAAK,EAAE;YAAE,WAAW,EAAE,OAAO,CAAA;SAAE,KAAK,OAAO;;iBAHjD,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO;kBACpC,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO;kBACrC,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,WAAW,CAAC,KAAK,OAAO;sBAC/D,CAAC,KAAK,EAAE;YAAE,WAAW,EAAE,OAAO,CAAA;SAAE,KAAK,OAAO;;;;;;EAub3D;AAyBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;iBA3gBH,OAAO;QAJhB,MAAM;YAOF,OAAO;mBAIA,OAAO;oBACN,OAAO;gBAGX,MAAM;UAdZ,YAAY;eAIP,OAAO;sBACA,OAAO;oBAHT,MAAM;kBADR,MAAM;gBAMR,MAAM;iBACL,OAAO;wBACA,OAAO;oBAGX,OAAO;eACZ,MAAM;kBAEH,MAAM;;;OAwgBvB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TAppShell.vue.d.ts","sourceRoot":"","sources":["../../src/components/TAppShell.vue"],"names":[],"mappings":"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"}

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={class:`t-app-shell__header`},o=[`aria-label`,`aria-expanded`,`aria-controls`],s={class:`t-app-shell__header-content`},c=[`id`,`aria-label`],l={class:`t-app-shell__main`},u={key:0,class:`t-app-shell__overlay`},d=[`id`,`aria-label`],f={class:`t-app-shell__drawer-topbar`},p=[`aria-label`],m={class:`t-app-shell__drawer-body`},h=(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},menuLabel:{default:`Open menu`},closeLabel:{default:`Close menu`},sidebarLabel:{default:`Sidebar`}},emits:[`update:collapsed`,`collapse-change`,`update:sidebarOpen`,`sidebar-open-change`],setup(h,{emit:g}){let _=(0,i.getTreeIcon)(`x`),v=h,y=g,b=(0,n.useAttrs)(),x=(0,r.createId)(`t-app-shell-sidebar`),{value:S,setValue:C}=e.useControllableOpen((0,n.toRef)(v,`collapsed`),v.defaultCollapsed,e=>{y(`update:collapsed`,e),y(`collapse-change`,e)}),{value:w,setValue:T}=e.useControllableOpen((0,n.toRef)(v,`sidebarOpen`),v.defaultSidebarOpen,e=>{y(`update:sidebarOpen`,e),y(`sidebar-open-change`,e)}),E=(0,n.ref)(!1),D=null,O=e=>{E.value=e.matches},k=()=>{typeof window>`u`||typeof window.matchMedia!=`function`||(A(),D=window.matchMedia(`(max-width: ${v.breakpoint})`),E.value=D.matches,D.addEventListener?.(`change`,O))},A=()=>{D?.removeEventListener?.(`change`,O),D=null},j=(0,n.computed)(()=>v.mobile??E.value),M=(0,n.computed)(()=>!j.value&&S.value),N=(0,n.ref)(null),P=(0,n.ref)(null),F=``,I=!1,L=()=>{typeof document>`u`||I||(F=document.body.style.overflow,document.body.style.overflow=`hidden`,I=!0)},R=()=>{typeof document>`u`||!I||(document.body.style.overflow=F,I=!1)},z=()=>{(0,n.nextTick)(()=>{N.value&&((0,r.focusFirst)(N.value)||N.value.focus())})},B=()=>{P.value=typeof document>`u`?null:document.activeElement,T(!0)},V=()=>{T(!1)},H=()=>{w.value?V():B()},U=()=>{v.collapsible&&C(!S.value)},W=()=>{v.closeOnOverlay&&V()},G=e=>{if((0,r.isEscapeKey)(e)&&v.closeOnEscape){e.preventDefault(),V();return}if(e.key!==`Tab`||!N.value)return;let t=(0,r.getFocusableElements)(N.value);if(!t.length){e.preventDefault(),N.value.focus();return}let n=t[0],i=t[t.length-1],a=document.activeElement;e.shiftKey&&a===n&&(e.preventDefault(),(0,r.focusLast)(N.value)),!e.shiftKey&&a===i&&(e.preventDefault(),(0,r.focusFirst)(N.value))},K=(e,t)=>{if(e&&j.value){L(),z();return}t&&(R(),(0,n.nextTick)(()=>{P.value?.focus()}))};(0,n.watch)(w,(e,t)=>{K(e,!!t)}),(0,n.watch)(j,e=>{w.value&&(e?(L(),z()):R())}),(0,n.watch)(()=>v.breakpoint,()=>{typeof window<`u`&&k()}),(0,n.onMounted)(()=>{k()}),(0,n.onBeforeUnmount)(()=>{A(),R()}),(0,n.provide)(t.treeSidebarInjectionKey,{collapsed:M});let q=(0,n.computed)(()=>[`t-app-shell`,`t-app-shell--${v.side}`,{"is-mobile":j.value,"is-collapsed":!j.value&&v.collapsible&&S.value,"is-sidebar-open":j.value&&w.value},b.class]),J=(0,n.computed)(()=>[{"--tree-app-shell-sidebar-width":v.sidebarWidth,"--tree-app-shell-collapsed-width":v.collapsedWidth},b.style]),Y=(0,n.computed)(()=>{let{class:e,style:t,...n}=b;return n}),X=(0,n.computed)(()=>({mobile:j.value,collapsed:M.value,sidebarOpen:w.value,toggleSidebar:H,closeSidebar:V,toggleCollapsed:U}));return(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(h.as),(0,n.mergeProps)(Y.value,{class:q.value,style:J.value,"data-mobile":j.value?`true`:`false`}),{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`header`,a,[j.value&&h.showMenuButton?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:0,type:`button`,class:`t-app-shell__menu-button`,"aria-label":h.menuLabel,"aria-expanded":(0,n.unref)(w),"aria-controls":(0,n.unref)(x),onClick:H},[(0,n.renderSlot)(e.$slots,`menu-icon`,{sidebarOpen:(0,n.unref)(w)},()=>[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,o)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,s,[(0,n.renderSlot)(e.$slots,`header`,(0,n.normalizeProps)((0,n.guardReactiveProps)(X.value)))])]),j.value?(0,n.createCommentVNode)(``,!0):((0,n.openBlock)(),(0,n.createElementBlock)(`aside`,{key:0,id:(0,n.unref)(x),class:`t-app-shell__sidebar`,"aria-label":h.sidebarLabel},[(0,n.renderSlot)(e.$slots,`sidebar`,(0,n.normalizeProps)((0,n.guardReactiveProps)(X.value)))],8,c)),(0,n.createElementVNode)(`main`,l,[(0,n.renderSlot)(e.$slots,`default`,{mobile:j.value,collapsed:M.value})]),(0,n.createVNode)(n.Transition,{name:`t-app-shell-fade`},{default:(0,n.withCtx)(()=>[j.value&&(0,n.unref)(w)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,u,[(0,n.createElementVNode)(`div`,{class:`t-app-shell__backdrop`,"aria-hidden":`true`,onClick:W}),(0,n.createElementVNode)(`aside`,{id:(0,n.unref)(x),ref_key:`surfaceRef`,ref:N,class:`t-app-shell__drawer`,role:`dialog`,"aria-modal":`true`,"aria-label":h.sidebarLabel,tabindex:`-1`,onKeydown:G},[(0,n.createElementVNode)(`div`,f,[(0,n.createElementVNode)(`button`,{type:`button`,class:`t-app-shell__drawer-close`,"aria-label":h.closeLabel,onClick:V},[(0,n.createVNode)((0,n.unref)(_),(0,n.normalizeProps)((0,n.guardReactiveProps)((0,n.unref)(i.treeIconDefaults))),null,16)],8,p)]),(0,n.createElementVNode)(`div`,m,[(0,n.renderSlot)(e.$slots,`sidebar`,(0,n.normalizeProps)((0,n.guardReactiveProps)(X.value)))])],40,d)])):(0,n.createCommentVNode)(``,!0)]),_:3})]),_:3},16,[`class`,`style`,`data-mobile`]))}});exports.default=h;
+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;
 //# sourceMappingURL=TAppShell.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TAppShell.vue_vue_type_script_setup_true_lang.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    menuLabel?: string;\n    closeLabel?: string;\n    sidebarLabel?: 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    menuLabel: 'Open menu',\n    closeLabel: 'Close menu',\n    sidebarLabel: '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  sidebar?: (props: AppShellSlotProps) => unknown;\n  default?: (props: Pick<AppShellSlotProps, 'mobile' | 'collapsed'>) => unknown;\n  'menu-icon'?: (props: { sidebarOpen: 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// 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 class=\"t-app-shell__header\">\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 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      <slot\n        name=\"sidebar\"\n        v-bind=\"slotProps\"\n      />\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            <slot\n              name=\"sidebar\"\n              v-bind=\"slotProps\"\n            />\n          </div>\n        </aside>\n      </div>\n    </transition>\n  </component>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TAppShell.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"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":"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"}