@treeui/vue 0.14.0 → 0.16.0

package/dist/components/TDropdown.cjs.map

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

package/dist/components/TDropdown.js.map

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

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

@@ -35,7 +35,7 @@ declare function __VLS_template(): {
     };
     refs: {
         rootRef: HTMLDivElement;
-        triggerRef: HTMLButtonElement;
+        triggerRef: HTMLSpanElement;
     };
     rootEl: any;
 };
@@ -52,13 +52,13 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     disabled: boolean;
     size: TSize;
     label: string;
+    align: TDropdownAlign;
     open: boolean;
     defaultOpen: boolean;
     items: TDropdownItem[];
-    align: TDropdownAlign;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
-    triggerRef: HTMLButtonElement;
+    triggerRef: HTMLSpanElement;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"TDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/TDropdown.vue"],"names":[],"mappings":"AA6SA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AA+MJ,iBAAS,cAAc;WA8GT,OAAO,IAA6B;;uBAvSjC;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;uBAD7C;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;;;;;;EA2S7D;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;cA9VN,OAAO;UACX,KAAK;WACJ,MAAM;UAJP,OAAO;iBACA,OAAO;WAFb,aAAa,EAAE;WAMf,cAAc;;;;OAoWxB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/TDropdown.vue"],"names":[],"mappings":"AAkTA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAkNJ,iBAAS,cAAc;WA8GT,OAAO,IAA6B;;uBA1SjC;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;uBAD7C;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;;;;;;EA8S7D;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;cAjWN,OAAO;UACX,KAAK;WACJ,MAAM;WACN,cAAc;UALf,OAAO;iBACA,OAAO;WAFb,aAAa,EAAE;;;;OA6WzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.cjs

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

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

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

package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { useControllableOpen as e } from "../composables/useControllableOpen.js";
-import { Fragment as t, Transition as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeProps as ee, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, toRef as te, unref as y, useAttrs as b, watch as x, withCtx as S } from "vue";
-import { createId as C, isActivationKey as w, isEscapeKey as T } from "@treeui/utils";
+import { Fragment as t, Transition as n, computed as r, createCommentVNode as ee, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, toRef as y, unref as b, useAttrs as x, watch as S, withCtx as C } from "vue";
+import { createId as w, focusFirst as te, isActivationKey as T, isEscapeKey as E } from "@treeui/utils";
 //#region src/components/TDropdown.vue?vue&type=script&setup=true&lang.ts
-var E = ["data-state"], D = { class: "t-dropdown__trigger-wrapper" }, O = [
+var D = ["data-state"], O = [
 	"disabled",
 	"aria-controls",
 	"aria-expanded"
@@ -11,7 +11,7 @@ var E = ["data-state"], D = { class: "t-dropdown__trigger-wrapper" }, O = [
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], M = /*@__PURE__*/ l({
+], M = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "TDropdown",
 	props: {
@@ -37,11 +37,11 @@ var E = ["data-state"], D = { class: "t-dropdown__trigger-wrapper" }, O = [
 		"update:open",
 		"open-change"
 	],
-	setup(l, { emit: M }) {
-		let N = l, P = M, F = b(), I = C("t-dropdown"), L = h(null), R = h(null), z = h(/* @__PURE__ */ new Map()), B = h(-1), V = r(() => {
+	setup(c, { emit: M }) {
+		let N = c, P = M, F = x(), I = w("t-dropdown"), L = h(null), R = h(null), z = h(/* @__PURE__ */ new Map()), B = h(-1), V = r(() => {
 			let { class: e, style: t, ...n } = F;
 			return n;
-		}), { value: H, setValue: U } = e(te(N, "open"), N.defaultOpen, (e) => {
+		}), { value: H, setValue: U } = e(y(N, "open"), N.defaultOpen, (e) => {
 			P("update:open", e), P("open-change", e);
 		}), W = r(() => [
 			"t-dropdown",
@@ -55,9 +55,11 @@ var E = ["data-state"], D = { class: "t-dropdown__trigger-wrapper" }, O = [
 		]), G = r(() => F.style), K = r(() => N.items.filter((e) => !e.disabled)), q = () => {
 			N.disabled || (B.value = K.value.length > 0 ? N.items.indexOf(K.value[0]) : 0, U(!0), u(() => Z(B.value)));
 		}, J = (e = !1) => {
-			U(!1), B.value = -1, e && u(() => R.value?.focus());
+			U(!1), B.value = -1, e && u(() => {
+				R.value && te(R.value);
+			});
 		}, Y = () => {
-			H.value ? J() : q();
+			N.disabled || (H.value ? J() : q());
 		}, X = (e) => {
 			e.disabled || (P("select", e.value), J(!0));
 		}, Z = (e) => {
@@ -76,18 +78,18 @@ var E = ["data-state"], D = { class: "t-dropdown__trigger-wrapper" }, O = [
 			}
 		}, re = (e) => {
 			if (!N.disabled) {
-				if (T(e) && H.value) {
+				if (E(e) && H.value) {
 					e.preventDefault(), J();
 					return;
 				}
-				(w(e) || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), q());
+				(T(e) || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), q());
 			}
 		}, ie = (e, t) => {
-			if (T(e)) {
+			if (E(e)) {
 				e.preventDefault(), J(!0);
 				return;
 			}
-			if (w(e)) {
+			if (T(e)) {
 				e.preventDefault(), X(t);
 				return;
 			}
@@ -111,29 +113,30 @@ var E = ["data-state"], D = { class: "t-dropdown__trigger-wrapper" }, O = [
 			let t = e.target;
 			t instanceof Node && (L.value?.contains(t) || J());
 		};
-		return x(H, (e) => {
+		return S(H, (e) => {
 			e ? document.addEventListener("pointerdown", $) : document.removeEventListener("pointerdown", $);
 		}), p(() => {
 			document.removeEventListener("pointerdown", $);
-		}), (e, r) => (m(), a("div", {
+		}), (e, r) => (m(), i("div", {
 			ref_key: "rootRef",
 			ref: L,
 			class: d(W.value),
 			style: f(G.value),
-			"data-state": y(H) ? "open" : "closed"
-		}, [o("span", D, [_(e.$slots, "trigger", { isOpen: y(H) }, () => [o("button", ee({
+			"data-state": b(H) ? "open" : "closed"
+		}, [a("span", {
 			ref_key: "triggerRef",
-			ref: R
-		}, V.value, {
+			ref: R,
+			class: "t-dropdown__trigger-wrapper",
+			onClick: Y,
+			onKeydown: re
+		}, [_(e.$slots, "trigger", { isOpen: b(H) }, () => [a("button", l(V.value, {
 			type: "button",
 			class: "t-dropdown__trigger",
-			disabled: l.disabled,
-			"aria-controls": y(H) ? y(I) : void 0,
+			disabled: c.disabled,
+			"aria-controls": b(H) ? b(I) : void 0,
 			"aria-haspopup": "menu",
-			"aria-expanded": y(H),
-			onClick: Y,
-			onKeydown: re
-		}), [o("span", k, v(l.label), 1), r[0] ||= o("svg", {
+			"aria-expanded": b(H)
+		}), [a("span", k, v(c.label), 1), r[0] ||= a("svg", {
 			class: "t-dropdown__chevron",
 			viewBox: "0 0 16 16",
 			fill: "none",
@@ -142,14 +145,14 @@ var E = ["data-state"], D = { class: "t-dropdown__trigger-wrapper" }, O = [
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
 			"aria-hidden": "true"
-		}, [o("polyline", { points: "4 6 8 10 12 6" })], -1)], 16, O)])]), c(n, { name: "t-fade" }, {
-			default: S(() => [y(H) && !l.disabled ? (m(), a("ul", {
+		}, [a("polyline", { points: "4 6 8 10 12 6" })], -1)], 16, O)])], 544), s(n, { name: "t-fade" }, {
+			default: C(() => [b(H) && !c.disabled ? (m(), i("ul", {
 				key: 0,
-				id: y(I),
+				id: b(I),
 				role: "menu",
 				class: "t-dropdown__menu",
-				"aria-label": l.label || void 0
-			}, [(m(!0), a(t, null, g(l.items, (t, n) => (m(), a("li", {
+				"aria-label": c.label || void 0
+			}, [(m(!0), i(t, null, g(c.items, (t, n) => (m(), i("li", {
 				key: t.value,
 				ref_for: !0,
 				ref: (e) => ne(e, t.value),
@@ -165,9 +168,9 @@ var E = ["data-state"], D = { class: "t-dropdown__trigger-wrapper" }, O = [
 			}, [_(e.$slots, "item", {
 				item: t,
 				index: n
-			}, () => [s(v(t.label), 1)])], 42, j))), 128))], 8, A)) : i("", !0)]),
+			}, () => [o(v(t.label), 1)])], 42, j))), 128))], 8, A)) : ee("", !0)]),
 			_: 3
-		})], 14, E));
+		})], 14, D));
 	}
 });
 //#endregion

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

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

package/dist/components/TInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TInput.cjs","names":[],"sources":["../../src/components/TInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    type?: string;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    type: 'text',\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-input',\n  `t-input--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst stringValue = computed(() => `${props.modelValue ?? ''}`);\n\nconst onInput = (event: Event) => {\n  emit('update:modelValue', (event.target as HTMLInputElement).value);\n};\n</script>\n\n<template>\n  <label\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"$slots.prefix\"\n      class=\"t-input__slot t-input__slot--prefix\"\n    >\n      <slot name=\"prefix\" />\n    </span>\n    <input\n      v-bind=\"inputAttrs\"\n      class=\"t-input__field\"\n      :type=\"type\"\n      :value=\"stringValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n      @input=\"onInput\"\n    >\n    <TSpinner\n      v-if=\"loading\"\n      size=\"sm\"\n      label=\"Loading\"\n    />\n    <span\n      v-if=\"$slots.suffix\"\n      class=\"t-input__slot t-input__slot--suffix\"\n    >\n      <slot name=\"suffix\" />\n    </span>\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TInput.cjs","names":[],"sources":["../../src/components/TInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\nimport type { TFieldWidth, TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    size?: TSize;\n    /** Inline-size cap. Fluid (`full`) by default. */\n    width?: TFieldWidth;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    type?: string;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    size: 'md',\n    width: 'full',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    type: 'text',\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-input',\n  `t-input--${props.size}`,\n  props.width !== 'full' ? `t-field-width--${props.width}` : null,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst stringValue = computed(() => `${props.modelValue ?? ''}`);\n\nconst onInput = (event: Event) => {\n  emit('update:modelValue', (event.target as HTMLInputElement).value);\n};\n</script>\n\n<template>\n  <label\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"$slots.prefix\"\n      class=\"t-input__slot t-input__slot--prefix\"\n    >\n      <slot name=\"prefix\" />\n    </span>\n    <input\n      v-bind=\"inputAttrs\"\n      class=\"t-input__field\"\n      :type=\"type\"\n      :value=\"stringValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n      @input=\"onInput\"\n    >\n    <TSpinner\n      v-if=\"loading\"\n      size=\"sm\"\n      label=\"Loading\"\n    />\n    <span\n      v-if=\"$slots.suffix\"\n      class=\"t-input__slot t-input__slot--suffix\"\n    >\n      <slot name=\"suffix\" />\n    </span>\n  </label>\n</template>\n"],"mappings":""}

package/dist/components/TInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TInput.js","names":[],"sources":["../../src/components/TInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    type?: string;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    type: 'text',\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-input',\n  `t-input--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst stringValue = computed(() => `${props.modelValue ?? ''}`);\n\nconst onInput = (event: Event) => {\n  emit('update:modelValue', (event.target as HTMLInputElement).value);\n};\n</script>\n\n<template>\n  <label\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"$slots.prefix\"\n      class=\"t-input__slot t-input__slot--prefix\"\n    >\n      <slot name=\"prefix\" />\n    </span>\n    <input\n      v-bind=\"inputAttrs\"\n      class=\"t-input__field\"\n      :type=\"type\"\n      :value=\"stringValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n      @input=\"onInput\"\n    >\n    <TSpinner\n      v-if=\"loading\"\n      size=\"sm\"\n      label=\"Loading\"\n    />\n    <span\n      v-if=\"$slots.suffix\"\n      class=\"t-input__slot t-input__slot--suffix\"\n    >\n      <slot name=\"suffix\" />\n    </span>\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TInput.js","names":[],"sources":["../../src/components/TInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\nimport type { TFieldWidth, TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    size?: TSize;\n    /** Inline-size cap. Fluid (`full`) by default. */\n    width?: TFieldWidth;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    type?: string;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    size: 'md',\n    width: 'full',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    type: 'text',\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-input',\n  `t-input--${props.size}`,\n  props.width !== 'full' ? `t-field-width--${props.width}` : null,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst stringValue = computed(() => `${props.modelValue ?? ''}`);\n\nconst onInput = (event: Event) => {\n  emit('update:modelValue', (event.target as HTMLInputElement).value);\n};\n</script>\n\n<template>\n  <label\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"$slots.prefix\"\n      class=\"t-input__slot t-input__slot--prefix\"\n    >\n      <slot name=\"prefix\" />\n    </span>\n    <input\n      v-bind=\"inputAttrs\"\n      class=\"t-input__field\"\n      :type=\"type\"\n      :value=\"stringValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n      @input=\"onInput\"\n    >\n    <TSpinner\n      v-if=\"loading\"\n      size=\"sm\"\n      label=\"Loading\"\n    />\n    <span\n      v-if=\"$slots.suffix\"\n      class=\"t-input__slot t-input__slot--suffix\"\n    >\n      <slot name=\"suffix\" />\n    </span>\n  </label>\n</template>\n"],"mappings":""}

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

@@ -1,7 +1,9 @@
-import { TSize } from '../types/contracts';
+import { TFieldWidth, TSize } from '../types/contracts';
 type __VLS_Props = {
     modelValue?: string | number;
     size?: TSize;
+    /** Inline-size cap. Fluid (`full`) by default. */
+    width?: TFieldWidth;
     disabled?: boolean;
     loading?: boolean;
     invalid?: boolean;
@@ -27,6 +29,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     modelValue: string | number;
     disabled: boolean;
     size: TSize;
+    width: TFieldWidth;
     loading: boolean;
     invalid: boolean;
     placeholder: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/TInput.vue"],"names":[],"mappings":"AAkGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAOhD,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAwDJ,iBAAS,cAAc;WA6DT,OAAO,IAA6B;;wBAXtB,GAAG;wBACH,GAAG;;;;EAe9B;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;UA7IV,MAAM;gBALA,MAAM,GAAG,MAAM;cAEjB,OAAO;UADX,KAAK;aAEF,OAAO;aACP,OAAO;iBAEH,MAAM;6EAoJtB,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":"TInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/TInput.vue"],"names":[],"mappings":"AAsGA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAO7D,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,kDAAkD;IAClD,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA2DJ,iBAAS,cAAc;WA6DT,OAAO,IAA6B;;wBAXtB,GAAG;wBACH,GAAG;;;;EAe9B;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;UAhJV,MAAM;gBAPA,MAAM,GAAG,MAAM;cAIjB,OAAO;UAHX,KAAK;WAEJ,WAAW;aAET,OAAO;aACP,OAAO;iBAEH,MAAM;6EAuJtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TInput.vue_vue_type_script_setup_true_lang.cjs

@@ -1,2 +1,2 @@
-const e=require("./TSpinner.cjs");let t=require("vue");var n={key:0,class:`t-input__slot t-input__slot--prefix`},r=[`type`,`value`,`placeholder`,`disabled`,`aria-invalid`],i={key:2,class:`t-input__slot t-input__slot--suffix`},a=(0,t.defineComponent)({inheritAttrs:!1,__name:`TInput`,props:{modelValue:{default:``},size:{default:`md`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},type:{default:`text`},placeholder:{default:``}},emits:[`update:modelValue`],setup(a,{emit:o}){let s=a,c=o,l=(0,t.useAttrs)(),u=(0,t.computed)(()=>[`t-input`,`t-input--${s.size}`,{"is-disabled":s.disabled,"is-invalid":s.invalid,"is-loading":s.loading},l.class]),d=(0,t.computed)(()=>l.style),f=(0,t.computed)(()=>{let{class:e,style:t,...n}=l;return n}),p=(0,t.computed)(()=>`${s.modelValue??``}`),m=e=>{c(`update:modelValue`,e.target.value)};return(o,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{class:(0,t.normalizeClass)(u.value),style:(0,t.normalizeStyle)(d.value)},[o.$slots.prefix?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,n,[(0,t.renderSlot)(o.$slots,`prefix`)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`input`,(0,t.mergeProps)(f.value,{class:`t-input__field`,type:a.type,value:p.value,placeholder:a.placeholder,disabled:a.disabled,"aria-invalid":a.invalid||void 0,onInput:m}),null,16,r),a.loading?((0,t.openBlock)(),(0,t.createBlock)(e.default,{key:1,size:`sm`,label:`Loading`})):(0,t.createCommentVNode)(``,!0),o.$slots.suffix?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,i,[(0,t.renderSlot)(o.$slots,`suffix`)])):(0,t.createCommentVNode)(``,!0)],6))}});exports.default=a;
+const e=require("./TSpinner.cjs");let t=require("vue");var n={key:0,class:`t-input__slot t-input__slot--prefix`},r=[`type`,`value`,`placeholder`,`disabled`,`aria-invalid`],i={key:2,class:`t-input__slot t-input__slot--suffix`},a=(0,t.defineComponent)({inheritAttrs:!1,__name:`TInput`,props:{modelValue:{default:``},size:{default:`md`},width:{default:`full`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},type:{default:`text`},placeholder:{default:``}},emits:[`update:modelValue`],setup(a,{emit:o}){let s=a,c=o,l=(0,t.useAttrs)(),u=(0,t.computed)(()=>[`t-input`,`t-input--${s.size}`,s.width===`full`?null:`t-field-width--${s.width}`,{"is-disabled":s.disabled,"is-invalid":s.invalid,"is-loading":s.loading},l.class]),d=(0,t.computed)(()=>l.style),f=(0,t.computed)(()=>{let{class:e,style:t,...n}=l;return n}),p=(0,t.computed)(()=>`${s.modelValue??``}`),m=e=>{c(`update:modelValue`,e.target.value)};return(o,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{class:(0,t.normalizeClass)(u.value),style:(0,t.normalizeStyle)(d.value)},[o.$slots.prefix?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,n,[(0,t.renderSlot)(o.$slots,`prefix`)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`input`,(0,t.mergeProps)(f.value,{class:`t-input__field`,type:a.type,value:p.value,placeholder:a.placeholder,disabled:a.disabled,"aria-invalid":a.invalid||void 0,onInput:m}),null,16,r),a.loading?((0,t.openBlock)(),(0,t.createBlock)(e.default,{key:1,size:`sm`,label:`Loading`})):(0,t.createCommentVNode)(``,!0),o.$slots.suffix?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,i,[(0,t.renderSlot)(o.$slots,`suffix`)])):(0,t.createCommentVNode)(``,!0)],6))}});exports.default=a;
 //# sourceMappingURL=TInput.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TInput.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    type?: string;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    type: 'text',\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-input',\n  `t-input--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst stringValue = computed(() => `${props.modelValue ?? ''}`);\n\nconst onInput = (event: Event) => {\n  emit('update:modelValue', (event.target as HTMLInputElement).value);\n};\n</script>\n\n<template>\n  <label\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"$slots.prefix\"\n      class=\"t-input__slot t-input__slot--prefix\"\n    >\n      <slot name=\"prefix\" />\n    </span>\n    <input\n      v-bind=\"inputAttrs\"\n      class=\"t-input__field\"\n      :type=\"type\"\n      :value=\"stringValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n      @input=\"onInput\"\n    >\n    <TSpinner\n      v-if=\"loading\"\n      size=\"sm\"\n      label=\"Loading\"\n    />\n    <span\n      v-if=\"$slots.suffix\"\n      class=\"t-input__slot t-input__slot--suffix\"\n    >\n      <slot name=\"suffix\" />\n    </span>\n  </label>\n</template>\n"],"mappings":"mhBASA,IAAM,EAAQ,EAqBR,EAAO,EAIP,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEjB,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,UACA,YAAY,EAAM,OAClB,CACE,cAAe,EAAM,SACrB,aAAc,EAAM,QACpB,aAAc,EAAM,OACtB,EACA,EAAM,KACR,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,KAAK,EAEtC,GAAA,EAAA,EAAA,SAAA,KAA4B,CAChC,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,GAAG,GAAS,EAClD,OAAO,CACT,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA6B,GAAG,EAAM,YAAc,IAAI,EAExD,EAAW,GAAiB,CAChC,EAAK,oBAAsB,EAAM,OAA4B,KAAK,CACpE,2DAmCU,QAAA,CA9BL,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,EAClB,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAS,IAGTA,EAAAA,OAAO,SAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIR,OALP,EAKO,EAAA,EAAA,EAAA,WAAA,CADiB,EAAA,OAAA,QAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,2BAWvB,SAAA,EAAA,EAAA,WAAA,CARS,EAQT,MARmB,CAClB,MAAM,iBACL,KAAM,EAAA,KACN,MAAO,EAAA,MACP,YAAa,EAAA,YACb,SAAU,EAAA,SACV,eAAc,EAAA,SAAW,IAAA,GAClB,uBAGF,EAAA,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,CAGN,EAAA,QAAA,OAFA,KAAK,KACL,MAAM,6CAGAA,EAAAA,OAAO,SAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIR,OALP,EAKO,EAAA,EAAA,EAAA,WAAA,CADiB,EAAA,OAAA,QAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"TInput.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\nimport type { TFieldWidth, TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    size?: TSize;\n    /** Inline-size cap. Fluid (`full`) by default. */\n    width?: TFieldWidth;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    type?: string;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    size: 'md',\n    width: 'full',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    type: 'text',\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-input',\n  `t-input--${props.size}`,\n  props.width !== 'full' ? `t-field-width--${props.width}` : null,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst stringValue = computed(() => `${props.modelValue ?? ''}`);\n\nconst onInput = (event: Event) => {\n  emit('update:modelValue', (event.target as HTMLInputElement).value);\n};\n</script>\n\n<template>\n  <label\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"$slots.prefix\"\n      class=\"t-input__slot t-input__slot--prefix\"\n    >\n      <slot name=\"prefix\" />\n    </span>\n    <input\n      v-bind=\"inputAttrs\"\n      class=\"t-input__field\"\n      :type=\"type\"\n      :value=\"stringValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n      @input=\"onInput\"\n    >\n    <TSpinner\n      v-if=\"loading\"\n      size=\"sm\"\n      label=\"Loading\"\n    />\n    <span\n      v-if=\"$slots.suffix\"\n      class=\"t-input__slot t-input__slot--suffix\"\n    >\n      <slot name=\"suffix\" />\n    </span>\n  </label>\n</template>\n"],"mappings":"0iBASA,IAAM,EAAQ,EAwBR,EAAO,EAIP,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEjB,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,UACA,YAAY,EAAM,OAClB,EAAM,QAAU,OAA2C,KAAlC,kBAAkB,EAAM,QACjD,CACE,cAAe,EAAM,SACrB,aAAc,EAAM,QACpB,aAAc,EAAM,OACtB,EACA,EAAM,KACR,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,KAAK,EAEtC,GAAA,EAAA,EAAA,SAAA,KAA4B,CAChC,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,GAAG,GAAS,EAClD,OAAO,CACT,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA6B,GAAG,EAAM,YAAc,IAAI,EAExD,EAAW,GAAiB,CAChC,EAAK,oBAAsB,EAAM,OAA4B,KAAK,CACpE,2DAmCU,QAAA,CA9BL,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,EAClB,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAS,IAGTA,EAAAA,OAAO,SAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIR,OALP,EAKO,EAAA,EAAA,EAAA,WAAA,CADiB,EAAA,OAAA,QAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,2BAWvB,SAAA,EAAA,EAAA,WAAA,CARS,EAQT,MARmB,CAClB,MAAM,iBACL,KAAM,EAAA,KACN,MAAO,EAAA,MACP,YAAa,EAAA,YACb,SAAU,EAAA,SACV,eAAc,EAAA,SAAW,IAAA,GAClB,uBAGF,EAAA,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,CAGN,EAAA,QAAA,OAFA,KAAK,KACL,MAAM,6CAGAA,EAAAA,OAAO,SAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIR,OALP,EAKO,EAAA,EAAA,EAAA,WAAA,CADiB,EAAA,OAAA,QAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA"}

package/dist/components/TInput.vue_vue_type_script_setup_true_lang.js

@@ -19,6 +19,7 @@ var p = {
 	props: {
 		modelValue: { default: "" },
 		size: { default: "md" },
+		width: { default: "full" },
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -39,6 +40,7 @@ var p = {
 		let _ = o, v = g, y = f(), b = t(() => [
 			"t-input",
 			`t-input--${_.size}`,
+			_.width === "full" ? null : `t-field-width--${_.width}`,
 			{
 				"is-disabled": _.disabled,
 				"is-invalid": _.invalid,

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

@@ -1 +1 @@
-{"version":3,"file":"TInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    type?: string;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    type: 'text',\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-input',\n  `t-input--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst stringValue = computed(() => `${props.modelValue ?? ''}`);\n\nconst onInput = (event: Event) => {\n  emit('update:modelValue', (event.target as HTMLInputElement).value);\n};\n</script>\n\n<template>\n  <label\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"$slots.prefix\"\n      class=\"t-input__slot t-input__slot--prefix\"\n    >\n      <slot name=\"prefix\" />\n    </span>\n    <input\n      v-bind=\"inputAttrs\"\n      class=\"t-input__field\"\n      :type=\"type\"\n      :value=\"stringValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n      @input=\"onInput\"\n    >\n    <TSpinner\n      v-if=\"loading\"\n      size=\"sm\"\n      label=\"Loading\"\n    />\n    <span\n      v-if=\"$slots.suffix\"\n      class=\"t-input__slot t-input__slot--suffix\"\n    >\n      <slot name=\"suffix\" />\n    </span>\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAM,IAAQ,GAqBR,IAAO,GAIP,IAAQ,EAAS,GAEjB,IAAc,QAAe;GACjC;GACA,YAAY,EAAM;GAClB;IACE,eAAe,EAAM;IACrB,cAAc,EAAM;IACpB,cAAc,EAAM;GACtB;GACA,EAAM;EACR,CAAC,GAEK,IAAY,QAAe,EAAM,KAAK,GAEtC,IAAa,QAAe;GAChC,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC,GAEK,IAAc,QAAe,GAAG,EAAM,cAAc,IAAI,GAExD,KAAW,MAAiB;GAChC,EAAK,qBAAsB,EAAM,OAA4B,KAAK;EACpE;yBAIE,EA+BQ,SAAA;GA9BL,OAAK,EAAE,EAAA,KAAW;GAClB,OAAK,EAAE,EAAA,KAAS;;GAGTA,EAAAA,OAAO,UAAA,EAAA,GADf,EAKO,QALP,GAKO,CADL,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAExB,EASC,SATD,EACU,EAQT,OARmB;IAClB,OAAM;IACL,MAAM,EAAA;IACN,OAAO,EAAA;IACP,aAAa,EAAA;IACb,UAAU,EAAA;IACV,gBAAc,EAAA,WAAW,KAAA;IAClB;;GAGF,EAAA,WAAA,EAAA,GADR,EAIE,GAAA;;IAFA,MAAK;IACL,OAAM;;GAGAA,EAAAA,OAAO,UAAA,EAAA,GADf,EAKO,QALP,GAKO,CADL,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"TInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\nimport type { TFieldWidth, TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    size?: TSize;\n    /** Inline-size cap. Fluid (`full`) by default. */\n    width?: TFieldWidth;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    type?: string;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    size: 'md',\n    width: 'full',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    type: 'text',\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-input',\n  `t-input--${props.size}`,\n  props.width !== 'full' ? `t-field-width--${props.width}` : null,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst stringValue = computed(() => `${props.modelValue ?? ''}`);\n\nconst onInput = (event: Event) => {\n  emit('update:modelValue', (event.target as HTMLInputElement).value);\n};\n</script>\n\n<template>\n  <label\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"$slots.prefix\"\n      class=\"t-input__slot t-input__slot--prefix\"\n    >\n      <slot name=\"prefix\" />\n    </span>\n    <input\n      v-bind=\"inputAttrs\"\n      class=\"t-input__field\"\n      :type=\"type\"\n      :value=\"stringValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n      @input=\"onInput\"\n    >\n    <TSpinner\n      v-if=\"loading\"\n      size=\"sm\"\n      label=\"Loading\"\n    />\n    <span\n      v-if=\"$slots.suffix\"\n      class=\"t-input__slot t-input__slot--suffix\"\n    >\n      <slot name=\"suffix\" />\n    </span>\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAM,IAAQ,GAwBR,IAAO,GAIP,IAAQ,EAAS,GAEjB,IAAc,QAAe;GACjC;GACA,YAAY,EAAM;GAClB,EAAM,UAAU,SAA2C,OAAlC,kBAAkB,EAAM;GACjD;IACE,eAAe,EAAM;IACrB,cAAc,EAAM;IACpB,cAAc,EAAM;GACtB;GACA,EAAM;EACR,CAAC,GAEK,IAAY,QAAe,EAAM,KAAK,GAEtC,IAAa,QAAe;GAChC,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC,GAEK,IAAc,QAAe,GAAG,EAAM,cAAc,IAAI,GAExD,KAAW,MAAiB;GAChC,EAAK,qBAAsB,EAAM,OAA4B,KAAK;EACpE;yBAIE,EA+BQ,SAAA;GA9BL,OAAK,EAAE,EAAA,KAAW;GAClB,OAAK,EAAE,EAAA,KAAS;;GAGTA,EAAAA,OAAO,UAAA,EAAA,GADf,EAKO,QALP,GAKO,CADL,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAExB,EASC,SATD,EACU,EAQT,OARmB;IAClB,OAAM;IACL,MAAM,EAAA;IACN,OAAO,EAAA;IACP,aAAa,EAAA;IACb,UAAU,EAAA;IACV,gBAAc,EAAA,WAAW,KAAA;IAClB;;GAGF,EAAA,WAAA,EAAA,GADR,EAIE,GAAA;;IAFA,MAAK;IACL,OAAM;;GAGAA,EAAAA,OAAO,UAAA,EAAA,GADf,EAKO,QALP,GAKO,CADL,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/TKbd.cjs

@@ -0,0 +1,2 @@
+var e=require("./TKbd.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;
+//# sourceMappingURL=TKbd.cjs.map

package/dist/components/TKbd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TKbd.cjs","names":[],"sources":["../../src/components/TKbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// A keyboard-key hint (e.g. ⌘K, Esc, Ctrl). Renders a native <kbd> with the\n// library's monospaced, bordered chip styling.\n</script>\n\n<template>\n  <kbd class=\"t-kbd\">\n    <slot />\n  </kbd>\n</template>\n"],"mappings":""}

package/dist/components/TKbd.js

@@ -0,0 +1,7 @@
+import e from "./TKbd.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/TKbd.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TKbd.js.map

package/dist/components/TKbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TKbd.js","names":[],"sources":["../../src/components/TKbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// A keyboard-key hint (e.g. ⌘K, Esc, Ctrl). Renders a native <kbd> with the\n// library's monospaced, bordered chip styling.\n</script>\n\n<template>\n  <kbd class=\"t-kbd\">\n    <slot />\n  </kbd>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,18 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TKbd.vue.d.ts.map