@expcat/tigercat-vue 1.4.0 → 1.5.0

package/dist/{chunk-HZBE2RY4.js → chunk-J77GQQEC.js}

@@ -78,7 +78,7 @@ var AutoComplete = _vue.defineComponent.call(void 0, {
     },
     notFoundText: {
       type: String,
-      default: "No matches found"
+      default: void 0
     },
     filterOption: {
       type: [Boolean, Function],
@@ -132,6 +132,25 @@ var AutoComplete = _vue.defineComponent.call(void 0, {
       isOpen.value = false;
       activeIndex.value = -1;
     }
+    function constrainToOption() {
+      if (props.allowFreeInput) return;
+      const match = props.options.find((o) => !o.disabled && o.label === inputValue.value);
+      if (match) {
+        if (String(match.value) !== String(props.modelValue)) {
+          emit("update:modelValue", match.value);
+          emit("select", match.value, match);
+          emit("change", match.value);
+        }
+        return;
+      }
+      const current = props.options.find((o) => String(o.value) === String(props.modelValue));
+      const revertLabel = current ? current.label : "";
+      if (revertLabel !== inputValue.value) {
+        inputValue.value = revertLabel;
+        emit("update:modelValue", current ? current.value : "");
+        emit("change", current ? current.value : "");
+      }
+    }
     function handleInput(e) {
       const val = e.target.value;
       inputValue.value = val;
@@ -179,6 +198,9 @@ var AutoComplete = _vue.defineComponent.call(void 0, {
           e.preventDefault();
           if (activeIndex.value >= 0 && activeIndex.value < options.length) {
             handleSelect(options[activeIndex.value]);
+          } else {
+            constrainToOption();
+            closeDropdown();
           }
           break;
         case "Escape":
@@ -228,7 +250,8 @@ var AutoComplete = _vue.defineComponent.call(void 0, {
             autocomplete: "off",
             onInput: handleInput,
             onFocus: openDropdown,
-            onKeydown: handleKeyDown
+            onKeydown: handleKeyDown,
+            onBlur: constrainToOption
           }),
           // Clear button
           showClearButton.value ? _vue.h.call(void 0, 
@@ -262,6 +285,7 @@ var AutoComplete = _vue.defineComponent.call(void 0, {
                     !!option.disabled,
                     props.size
                   ),
+                  onMousedown: (e) => e.preventDefault(),
                   onClick: () => handleSelect(option),
                   onMouseenter: () => {
                     activeIndex.value = index;
@@ -275,7 +299,11 @@ var AutoComplete = _vue.defineComponent.call(void 0, {
             {
               class: _tigercatcore.classNames.call(void 0, _tigercatcore.autoCompleteDropdownClasses, _tigercatcore.autoCompleteEmptyStateClasses)
             },
-            props.notFoundText
+            _tigercatcore.resolveLocaleText.call(void 0, 
+              "No matches found",
+              props.notFoundText,
+              _optionalChain([mergedLocale, 'access', _7 => _7.value, 'optionalAccess', _8 => _8.common, 'optionalAccess', _9 => _9.emptyText])
+            )
           ) : null
         ]
       );

package/dist/{chunk-TUSWQVI2.mjs → chunk-JCGWN7WV.mjs}

@@ -71,6 +71,7 @@ var InfiniteScroll = defineComponent({
         threshold: props.threshold,
         direction: props.direction,
         root: containerRef.value,
+        inverse: props.inverse,
         onLoadMore: handleLoadMore
       });
       if (teardown) {

package/dist/{chunk-K5ZZZ4TL.mjs → chunk-JGW7R7AZ.mjs}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-R2HO74FE.mjs";
 import {
   ChartLegend
-} from "./chunk-VVS2CQS4.mjs";
+} from "./chunk-HLPSHCXO.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
 import {
   ChartTooltip
-} from "./chunk-OK4PVFQG.mjs";
+} from "./chunk-G2LB4QCL.mjs";
 import {
   ChartCanvas
 } from "./chunk-W5RZPTFD.mjs";

package/dist/{chunk-WYVA3JBH.js → chunk-JICPYKCT.js}

@@ -20,10 +20,15 @@ var _vue = require('vue');
 
 
 
+
+
+
+
 
 
 
 var _tigercatcore = require('@expcat/tigercat-core');
+var DEFAULT_VIRTUAL_COLUMN_WIDTH = 150;
 var VirtualTable = _vue.defineComponent.call(void 0, {
   name: "TigerVirtualTable",
   inheritAttrs: false,
@@ -38,12 +43,18 @@ var VirtualTable = _vue.defineComponent.call(void 0, {
     },
     rowHeight: { type: Number, default: 48 },
     height: { type: Number, default: 400 },
+    width: { type: [Number, String], default: "auto" },
     overscan: { type: Number, default: 5 },
     stickyHeader: { type: Boolean, default: true },
+    virtualizeColumns: { type: Boolean, default: false },
     rowKey: {
       type: [String, Function],
       default: void 0
     },
+    rowClassName: {
+      type: [String, Function],
+      default: void 0
+    },
     loading: { type: Boolean, default: false },
     emptyText: { type: String, default: void 0 },
     selectable: { type: Boolean, default: false },
@@ -62,6 +73,7 @@ var VirtualTable = _vue.defineComponent.call(void 0, {
     const mergedLocale = _vue.computed.call(void 0, () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, props.locale));
     const containerRef = _vue.ref.call(void 0, null);
     const scrollTop = _vue.ref.call(void 0, 0);
+    const scrollLeft = _vue.ref.call(void 0, 0);
     const range = _vue.computed.call(void 0, 
       () => _tigercatcore.calculateVirtualRange.call(void 0, 
         scrollTop.value,
@@ -75,8 +87,15 @@ var VirtualTable = _vue.defineComponent.call(void 0, {
     function onScroll() {
       if (containerRef.value) {
         scrollTop.value = containerRef.value.scrollTop;
+        scrollLeft.value = containerRef.value.scrollLeft;
       }
     }
+    const columnWidths = _vue.computed.call(void 0, 
+      () => props.columns.map(
+        (c) => typeof c.width === "number" ? c.width : DEFAULT_VIRTUAL_COLUMN_WIDTH
+      )
+    );
+    const resolveRowClassName = (row, index) => typeof props.rowClassName === "function" ? props.rowClassName(row, index) : props.rowClassName;
     const containerClasses = _vue.computed.call(void 0, 
       () => _tigercatcore.classNames.call(void 0, 
         _tigercatcore.getVirtualTableContainerClasses.call(void 0, props.bordered, props.className),
@@ -87,7 +106,17 @@ var VirtualTable = _vue.defineComponent.call(void 0, {
     const fixedInfo = _vue.computed.call(void 0, () => _tigercatcore.getVirtualTableFixedInfo.call(void 0, props.columns));
     return () => {
       const fi = fixedInfo.value;
-      const headerCells = props.columns.map((col) => {
+      const colVirtualActive = props.virtualizeColumns && !fi.hasFixedColumns && props.width !== "auto";
+      const colRange = colVirtualActive ? _tigercatcore.calculateVirtualColumnRange.call(void 0, scrollLeft.value, props.width, columnWidths.value) : void 0;
+      const visibleColumns = colRange ? props.columns.slice(colRange.start, colRange.end) : props.columns;
+      const colIndexOffset = colRange ? colRange.start : 0;
+      const colgroupEntries = fi.hasFixedColumns ? _tigercatcore.getTableColgroup.call(void 0, {
+        columns: visibleColumns,
+        size: "md",
+        hasSelectionColumn: false,
+        expand: false
+      }) : [];
+      const headerCells = visibleColumns.map((col) => {
         const widthStyle = col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : {};
         const stickyStyle = _tigercatcore.getVirtualTableFixedCellStyle.call(void 0, col.key, fi);
         return _vue.h.call(void 0, 
@@ -108,7 +137,20 @@ var VirtualTable = _vue.defineComponent.call(void 0, {
           _nullishCoalesce(col.title, () => ( ""))
         );
       });
-      const headerRow = _vue.h.call(void 0, "tr", {}, headerCells);
+      const headerRowChildren = [
+        colRange && colRange.leftPad > 0 ? _vue.h.call(void 0, "th", {
+          key: "__left-pad",
+          "aria-hidden": true,
+          style: { width: `${colRange.leftPad}px`, padding: 0 }
+        }) : null,
+        ...headerCells,
+        colRange && colRange.rightPad > 0 ? _vue.h.call(void 0, "th", {
+          key: "__right-pad",
+          "aria-hidden": true,
+          style: { width: `${colRange.rightPad}px`, padding: 0 }
+        }) : null
+      ];
+      const headerRow = _vue.h.call(void 0, "tr", {}, headerRowChildren);
       const thead = _vue.h.call(void 0, 
         "thead",
         { class: props.stickyHeader ? _tigercatcore.virtualTableHeaderClasses : void 0 },
@@ -122,11 +164,17 @@ var VirtualTable = _vue.defineComponent.call(void 0, {
           props.rowKey
         );
         const isSelected = selectedSet.value.has(key);
-        const cells = props.columns.map(
-          (col) => _vue.h.call(void 0, 
+        const isInteractive = props.selectable || typeof attrs.onRowClick === "function";
+        const activate = () => {
+          emit("row-click", row, globalIdx);
+          if (props.selectable) emit("select", key, row, globalIdx);
+        };
+        const cells = visibleColumns.map(
+          (col, colIdx) => _vue.h.call(void 0, 
             "td",
             {
               key: col.key,
+              "aria-colindex": colIndexOffset + colIdx + 1,
               class: _tigercatcore.classNames.call(void 0, 
                 _tigercatcore.virtualTableCellClasses,
                 _tigercatcore.getTableFixedCellClasses.call(void 0, {
@@ -147,17 +195,42 @@ var VirtualTable = _vue.defineComponent.call(void 0, {
             String(_nullishCoalesce(row[col.key], () => ( "")))
           )
         );
+        const rowChildren = [
+          colRange && colRange.leftPad > 0 ? _vue.h.call(void 0, "td", {
+            key: "__left-pad",
+            "aria-hidden": true,
+            style: { width: `${colRange.leftPad}px`, padding: 0 }
+          }) : null,
+          ...cells,
+          colRange && colRange.rightPad > 0 ? _vue.h.call(void 0, "td", {
+            key: "__right-pad",
+            "aria-hidden": true,
+            style: { width: `${colRange.rightPad}px`, padding: 0 }
+          }) : null
+        ];
         return _vue.h.call(void 0, 
           "tr",
           {
             key,
-            class: _tigercatcore.getVirtualTableRowClasses.call(void 0, globalIdx, props.striped, isSelected),
-            onClick: () => {
-              emit("row-click", row, globalIdx);
-              if (props.selectable) emit("select", key, row, globalIdx);
-            }
+            class: _tigercatcore.classNames.call(void 0, 
+              _tigercatcore.getVirtualTableRowClasses.call(void 0, globalIdx, props.striped, isSelected),
+              resolveRowClassName(row, globalIdx)
+            ),
+            // header occupies aria-rowindex 1
+            "aria-rowindex": globalIdx + 2,
+            "aria-selected": props.selectable ? isSelected : void 0,
+            tabindex: isInteractive ? 0 : void 0,
+            // onClick stays attached so `row-click` always fires for consumers
+            // that listen for it; keyboard activation is added when interactive.
+            onClick: activate,
+            onKeydown: isInteractive ? (e) => {
+              if (_tigercatcore.isActivationKey.call(void 0, e)) {
+                e.preventDefault();
+                activate();
+              }
+            } : void 0
           },
-          cells
+          rowChildren
         );
       });
       const topSpacer = _vue.h.call(void 0, "tr", {
@@ -172,7 +245,22 @@ var VirtualTable = _vue.defineComponent.call(void 0, {
         "aria-hidden": true
       }) : null;
       const tbody = _vue.h.call(void 0, "tbody", {}, [topSpacer, ...rows, bottomSpacer]);
-      const table = _vue.h.call(void 0, "table", { class: "w-full table-fixed" }, [thead, tbody]);
+      const colgroup = colgroupEntries.length > 0 ? _vue.h.call(void 0, 
+        "colgroup",
+        {},
+        colgroupEntries.map(
+          (entry) => _vue.h.call(void 0, "col", {
+            key: entry.key,
+            "data-tiger-table-col": entry.key,
+            style: entry.width ? { width: entry.width } : void 0
+          })
+        )
+      ) : null;
+      const table = _vue.h.call(void 0, "table", { class: _tigercatcore.classNames.call(void 0, _tigercatcore.tableBaseClasses, "table-fixed") }, [
+        colgroup,
+        thead,
+        tbody
+      ]);
       const emptyEl = props.data.length === 0 && !props.loading ? _vue.h.call(void 0, 
         "div",
         { class: _tigercatcore.virtualTableEmptyClasses },
@@ -188,7 +276,10 @@ var VirtualTable = _vue.defineComponent.call(void 0, {
         {
           ref: containerRef,
           class: containerClasses.value,
-          style: { height: `${props.height}px` },
+          style: {
+            height: `${props.height}px`,
+            ...props.width !== "auto" ? { width: `${props.width}px` } : {}
+          },
           onScroll,
           role: "grid",
           "aria-rowcount": props.data.length

package/dist/{chunk-2MLORMN2.js → chunk-JMRR4KDB.js}

@@ -615,7 +615,7 @@ var Upload = _vue.defineComponent.call(void 0, {
           _vue.h.call(void 0, 
             "div",
             {
-              class: "absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-50 transition-all flex items-center justify-center space-x-2 opacity-0 hover:opacity-100"
+              class: "absolute inset-0 bg-black/0 hover:bg-black/50 transition-all flex items-center justify-center space-x-2 opacity-0 hover:opacity-100"
             },
             [
               // Preview button
@@ -692,7 +692,7 @@ var Upload = _vue.defineComponent.call(void 0, {
           file.status === "uploading" && _vue.h.call(void 0, 
             "div",
             {
-              class: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center"
+              class: "absolute inset-0 bg-white/75 flex items-center justify-center"
             },
             [
               _vue.h.call(void 0, 

package/dist/{chunk-KDA4XDXT.js → chunk-K2NJI5MW.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkX6FG4RPFjs = require('./chunk-X6FG4RPF.js');
+var _chunkWF7KVMBYjs = require('./chunk-WF7KVMBY.js');
 
 // src/components/ImageGroup.ts
 var _vue = require('vue');
@@ -42,7 +42,7 @@ var ImageGroup = _vue.defineComponent.call(void 0, {
     });
     return () => {
       const children = _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]);
-      const preview = props.preview ? _vue.h.call(void 0, _chunkX6FG4RPFjs.ImagePreview, {
+      const preview = props.preview ? _vue.h.call(void 0, _chunkWF7KVMBYjs.ImagePreview, {
         open: previewVisible.value,
         images: images.value,
         currentIndex: previewIndex.value,

package/dist/{chunk-ACYYQJ6M.js → chunk-KLOUOXNA.js}

@@ -57,7 +57,9 @@ var ChartLegend = _vue.defineComponent.call(void 0, {
       {
         class: containerClasses.value,
         style: containerStyle.value,
-        role: "list",
+        // A group of toggle buttons is not a "list"; only use list semantics
+        // for the static (non-interactive) legend.
+        role: props.interactive ? "group" : "list",
         "aria-label": "Chart legend",
         "data-chart-legend": "true"
       },
@@ -73,7 +75,10 @@ var ChartLegend = _vue.defineComponent.call(void 0, {
               props.interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] hover:bg-[var(--tiger-chart-legend-row-hover-bg,transparent)] transition-colors" : "cursor-default",
               item.active === false ? "opacity-50" : void 0
             ),
-            role: "listitem",
+            // Interactive items are real buttons; `role="listitem"` would
+            // override the button role, so it is only set for the static legend.
+            role: props.interactive ? void 0 : "listitem",
+            "aria-pressed": props.interactive ? item.active !== false : void 0,
             "data-legend-item": "true",
             onClick: props.interactive ? () => handleClick(item) : void 0,
             onMouseenter: props.interactive ? () => handleHover(item) : void 0,
@@ -91,7 +96,7 @@ var ChartLegend = _vue.defineComponent.call(void 0, {
               "aria-hidden": "true",
               "data-legend-marker": "true"
             }),
-            _vue.h.call(void 0, "span", { style: { marginRight: `${props.gap}px` } }, item.label)
+            _vue.h.call(void 0, "span", null, item.label)
           ]
         )
       )

package/dist/{chunk-G6ULKE6H.mjs → chunk-KRWKO2JQ.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
 // src/components/Tag.ts
 import { defineComponent, computed, h, ref } from "vue";
 import {
@@ -14,7 +18,9 @@ import {
   tagSizeClasses,
   tagCloseButtonBaseClasses,
   tagCloseIconPath,
-  warnUnsupportedColorProp
+  warnUnsupportedColorProp,
+  getStatusLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var CloseIcon = () => h(
   "svg",
@@ -40,6 +46,10 @@ var Tag = defineComponent({
   name: "TigerTag",
   inheritAttrs: false,
   props: {
+    locale: {
+      type: Object,
+      default: void 0
+    },
     /**
      * Tag variant style
      * @default 'default'
@@ -70,7 +80,7 @@ var Tag = defineComponent({
      */
     closeAriaLabel: {
       type: String,
-      default: "Close tag"
+      default: void 0
     },
     /**
      * Additional CSS classes
@@ -89,6 +99,10 @@ var Tag = defineComponent({
   },
   emits: ["close"],
   setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(
+      () => getStatusLabels(mergeTigerLocale(config.value.locale, props.locale))
+    );
     const isVisible = ref(true);
     const tagClasses = computed(
       () => classNames(
@@ -132,7 +146,7 @@ var Tag = defineComponent({
             {
               class: closeButtonClasses.value,
               onClick: handleClose,
-              "aria-label": props.closeAriaLabel,
+              "aria-label": props.closeAriaLabel ?? labels.value.tagCloseAriaLabel,
               type: "button"
             },
             CloseIcon()

package/dist/{chunk-PJ66WE62.js → chunk-KTNT2JHB.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 var _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
 
@@ -25,6 +25,8 @@ var _vue = require('vue');
 
 
 
+
+
 
 
 
@@ -43,6 +45,10 @@ var FileManager = _vue.defineComponent.call(void 0, {
       default: () => []
     },
     multiple: { type: Boolean, default: false },
+    columns: {
+      type: Array,
+      default: void 0
+    },
     sortField: {
       type: String,
       default: "name"
@@ -70,12 +76,48 @@ var FileManager = _vue.defineComponent.call(void 0, {
     "navigate",
     "update:currentPath",
     "update:searchText",
-    "update:selectedKeys"
+    "update:selectedKeys",
+    "update:files",
+    "reorder"
   ],
   setup(props, { emit, attrs }) {
     const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
     const mergedLocale = _vue.computed.call(void 0, () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, props.locale));
+    const labels = _vue.computed.call(void 0, () => _tigercatcore.getFileManagerLabels.call(void 0, mergedLocale.value));
     const localSearch = _vue.ref.call(void 0, props.searchText);
+    const focusedIndex = _vue.ref.call(void 0, 0);
+    const contentRef = _vue.ref.call(void 0, null);
+    let dragFromIndex = null;
+    function handleDragStart(event, item, index) {
+      if (!props.draggable || item.disabled) return;
+      dragFromIndex = index;
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", String(_tigercatcore.toFileDragItem.call(void 0, item, index).id));
+      }
+    }
+    function handleDragOver(event) {
+      if (!props.draggable || dragFromIndex === null) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    }
+    function handleDrop(event, toIndex) {
+      if (!props.draggable) return;
+      const fromIndex = dragFromIndex;
+      dragFromIndex = null;
+      if (fromIndex === null || fromIndex === toIndex) return;
+      event.preventDefault();
+      const items = model.value.processedItems;
+      const reordered = _tigercatcore.applyFileDragReorder.call(void 0, items, {
+        item: _tigercatcore.toFileDragItem.call(void 0, items[fromIndex], fromIndex),
+        fromIndex,
+        toIndex,
+        fromContainerId: "",
+        toContainerId: ""
+      });
+      emit("reorder", reordered, fromIndex, toIndex);
+      emit("update:files", reordered);
+    }
     const model = _vue.computed.call(void 0, 
       () => _tigercatcore.deriveFileManagerModel.call(void 0, {
         files: props.files,
@@ -111,6 +153,80 @@ var FileManager = _vue.defineComponent.call(void 0, {
       emit("update:currentPath", newPath);
       emit("navigate", newPath);
     }
+    function getFirstEnabledIndex() {
+      return model.value.processedItems.findIndex((item) => !item.disabled);
+    }
+    function getLastEnabledIndex() {
+      for (let index = model.value.processedItems.length - 1; index >= 0; index -= 1) {
+        if (!_optionalChain([model, 'access', _ => _.value, 'access', _2 => _2.processedItems, 'access', _3 => _3[index], 'optionalAccess', _4 => _4.disabled])) {
+          return index;
+        }
+      }
+      return -1;
+    }
+    function getFocusedItemIndex() {
+      return focusedIndex.value >= 0 && !_optionalChain([model, 'access', _5 => _5.value, 'access', _6 => _6.processedItems, 'access', _7 => _7[focusedIndex.value], 'optionalAccess', _8 => _8.disabled]) ? focusedIndex.value : getFirstEnabledIndex();
+    }
+    function focusItemAt(index) {
+      _vue.nextTick.call(void 0, () => {
+        _optionalChain([contentRef, 'access', _9 => _9.value, 'optionalAccess', _10 => _10.querySelector, 'call', _11 => _11(`[data-option-index="${index}"]`), 'optionalAccess', _12 => _12.focus, 'call', _13 => _13()]);
+      });
+    }
+    function moveFocus(current, direction) {
+      if (model.value.processedItems.length === 0) return;
+      let next = current;
+      for (let i = 0; i < model.value.processedItems.length; i += 1) {
+        next = (next + direction + model.value.processedItems.length) % model.value.processedItems.length;
+        if (!_optionalChain([model, 'access', _14 => _14.value, 'access', _15 => _15.processedItems, 'access', _16 => _16[next], 'optionalAccess', _17 => _17.disabled])) {
+          focusedIndex.value = next;
+          focusItemAt(next);
+          return;
+        }
+      }
+    }
+    function handleItemKeydown(event, item, index) {
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          event.preventDefault();
+          moveFocus(index, 1);
+          return;
+        case "ArrowUp":
+        case "ArrowLeft":
+          event.preventDefault();
+          moveFocus(index, -1);
+          return;
+        case "Home": {
+          event.preventDefault();
+          const first = getFirstEnabledIndex();
+          if (first >= 0) {
+            focusedIndex.value = first;
+            focusItemAt(first);
+          }
+          return;
+        }
+        case "End": {
+          event.preventDefault();
+          const last = getLastEnabledIndex();
+          if (last >= 0) {
+            focusedIndex.value = last;
+            focusItemAt(last);
+          }
+          return;
+        }
+        case " ":
+          event.preventDefault();
+          handleSelect(item);
+          return;
+        case "Enter":
+          event.preventDefault();
+          handleSelect(item);
+          handleOpen(item);
+          return;
+        default:
+          return;
+      }
+    }
     return () => {
       const breadcrumbItems = [
         _vue.h.call(void 0, 
@@ -119,7 +235,7 @@ var FileManager = _vue.defineComponent.call(void 0, {
             class: _tigercatcore.fileManagerBreadcrumbItemClasses,
             onClick: () => navigateToBreadcrumb(0)
           },
-          "Root"
+          labels.value.rootText
         ),
         ...props.currentPath.flatMap((seg, i) => [
           _vue.h.call(void 0, "span", { class: _tigercatcore.fileManagerBreadcrumbSeparatorClasses }, "/"),
@@ -143,7 +259,7 @@ var FileManager = _vue.defineComponent.call(void 0, {
         class: _tigercatcore.fileManagerSearchClasses,
         placeholder: _tigercatcore.resolveLocaleText.call(void 0, 
           "Search...",
-          _optionalChain([mergedLocale, 'access', _ => _.value, 'optionalAccess', _2 => _2.common, 'optionalAccess', _3 => _3.searchPlaceholder])
+          _optionalChain([mergedLocale, 'access', _18 => _18.value, 'optionalAccess', _19 => _19.common, 'optionalAccess', _20 => _20.searchPlaceholder])
         ),
         value: localSearch.value,
         onInput: (e) => {
@@ -165,10 +281,13 @@ var FileManager = _vue.defineComponent.call(void 0, {
       const renderItem = (item, index) => {
         const isSelected = model.value.selectedSet.has(item.key);
         const itemClass = _tigercatcore.getFileItemClasses.call(void 0, props.viewMode, isSelected);
+        const focusedItem = getFocusedItemIndex();
         const nameEl = _vue.h.call(void 0, "span", { class: _tigercatcore.fileManagerItemNameClasses }, item.name);
+        const metaColumns = _nullishCoalesce(props.columns, () => ( ["size", "modified"]));
         const metaEls = props.viewMode === "list" ? [
-          item.size !== void 0 ? _vue.h.call(void 0, "span", { class: _tigercatcore.fileManagerItemMetaClasses }, _tigercatcore.formatFileSizeLabel.call(void 0, item.size)) : null,
-          item.modified ? _vue.h.call(void 0, "span", { class: _tigercatcore.fileManagerItemMetaClasses }, item.modified) : null
+          metaColumns.includes("type") ? _vue.h.call(void 0, "span", { class: _tigercatcore.fileManagerItemMetaClasses }, _nullishCoalesce(item.extension, () => ( item.type))) : null,
+          metaColumns.includes("size") && item.size !== void 0 ? _vue.h.call(void 0, "span", { class: _tigercatcore.fileManagerItemMetaClasses }, _tigercatcore.formatFileSizeLabel.call(void 0, item.size)) : null,
+          metaColumns.includes("modified") && item.modified ? _vue.h.call(void 0, "span", { class: _tigercatcore.fileManagerItemMetaClasses }, item.modified) : null
         ] : [];
         const dragItem = props.draggable && !item.disabled ? _tigercatcore.toFileDragItem.call(void 0, item, index) : void 0;
         return _vue.h.call(void 0, 
@@ -178,11 +297,20 @@ var FileManager = _vue.defineComponent.call(void 0, {
             class: itemClass,
             role: "option",
             "aria-selected": isSelected,
+            tabindex: !item.disabled && index === focusedItem ? 0 : -1,
+            "data-option-index": index,
             "data-disabled": item.disabled || void 0,
+            onFocus: () => {
+              if (!item.disabled) focusedIndex.value = index;
+            },
+            onKeydown: (event) => handleItemKeydown(event, item, index),
             onClick: () => handleSelect(item),
             onDblclick: () => handleOpen(item),
             draggable: props.draggable && !item.disabled,
-            "data-drag-id": _optionalChain([dragItem, 'optionalAccess', _4 => _4.id])
+            "data-drag-id": _optionalChain([dragItem, 'optionalAccess', _21 => _21.id]),
+            onDragstart: (event) => handleDragStart(event, item, index),
+            onDragover: handleDragOver,
+            onDrop: (event) => handleDrop(event, index)
           },
           [fileIcon(item), nameEl, ...metaEls]
         );
@@ -190,7 +318,12 @@ var FileManager = _vue.defineComponent.call(void 0, {
       const contentClass = props.viewMode === "grid" ? `${_tigercatcore.fileManagerContentClasses} grid grid-cols-4 gap-2` : _tigercatcore.fileManagerContentClasses;
       const content = model.value.processedItems.length > 0 ? _vue.h.call(void 0, 
         "div",
-        { class: contentClass, role: "listbox", "aria-multiselectable": props.multiple },
+        {
+          ref: contentRef,
+          class: contentClass,
+          role: "listbox",
+          "aria-multiselectable": props.multiple
+        },
         model.value.processedItems.map(renderItem)
       ) : _vue.h.call(void 0, 
         "div",
@@ -198,13 +331,13 @@ var FileManager = _vue.defineComponent.call(void 0, {
         _tigercatcore.resolveLocaleText.call(void 0, 
           "Empty folder",
           props.emptyText,
-          _optionalChain([mergedLocale, 'access', _5 => _5.value, 'optionalAccess', _6 => _6.common, 'optionalAccess', _7 => _7.emptyText])
+          _optionalChain([mergedLocale, 'access', _22 => _22.value, 'optionalAccess', _23 => _23.common, 'optionalAccess', _24 => _24.emptyText])
         )
       );
       const loadingEl = props.loading ? _vue.h.call(void 0, 
         "div",
         { class: _tigercatcore.fileManagerLoadingClasses },
-        _tigercatcore.resolveLocaleText.call(void 0, "Loading...", _optionalChain([mergedLocale, 'access', _8 => _8.value, 'optionalAccess', _9 => _9.common, 'optionalAccess', _10 => _10.loadingText]))
+        _tigercatcore.resolveLocaleText.call(void 0, "Loading...", _optionalChain([mergedLocale, 'access', _25 => _25.value, 'optionalAccess', _26 => _26.common, 'optionalAccess', _27 => _27.loadingText]))
       ) : null;
       return _vue.h.call(void 0, "div", { class: containerClasses.value }, [toolbar, content, loadingEl]);
     };