@expcat/tigercat-vue 1.3.4 → 1.5.0

package/dist/{chunk-NYR6OQO4.js → chunk-PFZFPN7M.js}

@@ -1,15 +1,15 @@
 "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 _chunkRBHF7NOQjs = require('./chunk-RBHF7NOQ.js');
+var _chunkD6Y3KVJFjs = require('./chunk-D6Y3KVJF.js');
 
 
-var _chunk6XI4VDU4js = require('./chunk-6XI4VDU4.js');
+var _chunkRBWJSHKRjs = require('./chunk-RBWJSHKR.js');
 
 
 var _chunk2DC3BMEDjs = require('./chunk-2DC3BMED.js');
 
 
-var _chunkBPAZBRCRjs = require('./chunk-BPAZBRCR.js');
+var _chunkVUGFSHU2js = require('./chunk-VUGFSHU2.js');
 
 
 var _chunkTGHB5XSTjs = require('./chunk-TGHB5XST.js');
@@ -18,7 +18,7 @@ var _chunkTGHB5XSTjs = require('./chunk-TGHB5XST.js');
 var _chunkUG6O4F2Ajs = require('./chunk-UG6O4F2A.js');
 
 
-var _chunkZ6HBM73Wjs = require('./chunk-Z6HBM73W.js');
+var _chunkOQOJI5Q7js = require('./chunk-OQOJI5Q7.js');
 
 // src/components/ActivityFeed.ts
 var _vue = require('vue');
@@ -140,11 +140,14 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
       return _vue.h.call(void 0, 
         "div",
         {
-          class: _tigercatcore.classNames.call(void 0, _tigercatcore.activityItemClasses, "p-4 rounded-2xl border border-gray-100/70 dark:border-gray-800/40 bg-white/40 dark:bg-gray-900/15 backdrop-blur-sm shadow-sm transition-all duration-300 hover:shadow-md hover:shadow-gray-100/30 dark:hover:shadow-none hover:bg-white dark:hover:bg-gray-900/30 hover:-translate-y-0.5 w-full")
+          class: _tigercatcore.classNames.call(void 0, 
+            _tigercatcore.activityItemClasses,
+            "p-4 rounded-2xl border border-gray-100/70 dark:border-gray-800/40 bg-white/40 dark:bg-gray-900/15 backdrop-blur-sm shadow-sm transition-all duration-300 hover:shadow-md hover:shadow-gray-100/30 dark:hover:shadow-none hover:bg-white dark:hover:bg-gray-900/30 hover:-translate-y-0.5 w-full"
+          )
         },
         [
           _vue.h.call(void 0, "div", { class: _tigercatcore.activityItemLayoutClasses }, [
-            props.showAvatar && item.user ? _vue.h.call(void 0, _chunkZ6HBM73Wjs.Avatar, {
+            props.showAvatar && item.user ? _vue.h.call(void 0, _chunkOQOJI5Q7js.Avatar, {
               size: "sm",
               src: item.user.avatar,
               text: item.user.name,
@@ -155,15 +158,20 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
                 _vue.h.call(void 0, "div", { class: _tigercatcore.activityItemTitleGroupClasses }, [
                   titleText ? _vue.h.call(void 0, 
                     _chunkTGHB5XSTjs.Text,
-                    { tag: "div", size: "sm", weight: "semibold", class: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer truncate" },
+                    {
+                      tag: "div",
+                      size: "sm",
+                      weight: "semibold",
+                      class: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer truncate"
+                    },
                     { default: () => titleText }
                   ) : null,
                   item.status ? _vue.h.call(void 0, 
-                    _chunkBPAZBRCRjs.Tag,
+                    _chunkVUGFSHU2js.Tag,
                     {
                       variant: _nullishCoalesce(item.status.variant, () => ( "default")),
                       size: "sm",
-                      className: "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10 shadow-sm"
+                      className: "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-current/10 shadow-sm"
                     },
                     { default: () => _optionalChain([item, 'access', _6 => _6.status, 'optionalAccess', _7 => _7.label]) }
                   ) : null
@@ -185,11 +193,18 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
                   tag: "div",
                   size: "sm",
                   color: "muted",
-                  class: _tigercatcore.classNames.call(void 0, _tigercatcore.activityItemDescriptionClasses, "text-gray-600 dark:text-gray-300 leading-relaxed pl-0.5 mt-1")
+                  class: _tigercatcore.classNames.call(void 0, 
+                    _tigercatcore.activityItemDescriptionClasses,
+                    "text-gray-600 dark:text-gray-300 leading-relaxed pl-0.5 mt-1"
+                  )
                 },
                 { default: () => descriptionText }
               ) : null,
-              _optionalChain([actionNodes, 'optionalAccess', _8 => _8.length]) ? _vue.h.call(void 0, "div", { class: _tigercatcore.classNames.call(void 0, _tigercatcore.activityItemActionsClasses, "mt-2.5") }, actionNodes) : null
+              _optionalChain([actionNodes, 'optionalAccess', _8 => _8.length]) ? _vue.h.call(void 0, 
+                "div",
+                { class: _tigercatcore.classNames.call(void 0, _tigercatcore.activityItemActionsClasses, "mt-2.5") },
+                actionNodes
+              ) : null
             ])
           ])
         ]
@@ -202,7 +217,10 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
     const feedAriaBusy = _vue.computed.call(void 0, () => _nullishCoalesce(attrs["aria-busy"], () => ( (props.loading ? "true" : void 0))));
     return () => {
       if (props.loading) {
-        const loadingNode = slots.loading ? slots.loading() : _vue.h.call(void 0, _chunk6XI4VDU4js.Loading, { text: props.loadingText, class: "text-blue-500 dark:text-blue-400 font-medium" });
+        const loadingNode = slots.loading ? slots.loading() : _vue.h.call(void 0, _chunkRBWJSHKRjs.Loading, {
+          text: props.loadingText,
+          class: "text-blue-500 dark:text-blue-400 font-medium"
+        });
         return _vue.h.call(void 0, 
           "div",
           {
@@ -231,20 +249,28 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
       }
       if (resolvedGroups.value.length === 0) {
         const emptyNode = slots.empty ? slots.empty() : _vue.h.call(void 0, "div", { class: "flex flex-col items-center justify-center py-12 px-4" }, [
-          _vue.h.call(void 0, "svg", {
-            class: "w-12 h-12 text-gray-300 dark:text-gray-600 mb-3 animate-pulse",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }, [
-            _vue.h.call(void 0, "path", {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              d: "M12 7.5h1.5m-1.5 3h1.5m-7.5 3h10.5m-10.5 3h10.5m-13.5-9h16.5M3 5.25h18M3 18.75h18"
-            })
-          ]),
-          _vue.h.call(void 0, _chunkTGHB5XSTjs.Text, { tag: "div", size: "sm", color: "muted", class: "font-medium" }, { default: () => props.emptyText })
+          _vue.h.call(void 0, 
+            "svg",
+            {
+              class: "w-12 h-12 text-gray-300 dark:text-gray-600 mb-3 animate-pulse",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: "1.5"
+            },
+            [
+              _vue.h.call(void 0, "path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 7.5h1.5m-1.5 3h1.5m-7.5 3h10.5m-10.5 3h10.5m-13.5-9h16.5M3 5.25h18M3 18.75h18"
+              })
+            ]
+          ),
+          _vue.h.call(void 0, 
+            _chunkTGHB5XSTjs.Text,
+            { tag: "div", size: "sm", color: "muted", class: "font-medium" },
+            { default: () => props.emptyText }
+          )
         ]);
         return _vue.h.call(void 0, 
           "div",
@@ -287,15 +313,22 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
           const timelineItems = _tigercatcore.toActivityTimelineItems.call(void 0, group.items);
           return _vue.h.call(void 0, "div", { key: _nullishCoalesce(group.key, () => ( groupIndex)), class: "space-y-3" }, [
             props.showGroupTitle && groupTitle ? _nullishCoalesce(headerNode, () => ( _vue.h.call(void 0, "div", { class: "flex items-center gap-2 mb-2" }, [
-              _vue.h.call(void 0, "span", { class: "w-1.5 h-3.5 bg-blue-500 rounded-full dark:bg-blue-400 shadow-sm shadow-blue-500/20" }),
+              _vue.h.call(void 0, "span", {
+                class: "w-1.5 h-3.5 bg-blue-500 rounded-full dark:bg-blue-400 shadow-sm shadow-blue-500/20"
+              }),
               _vue.h.call(void 0, 
                 _chunkTGHB5XSTjs.Text,
-                { tag: "span", size: "sm", weight: "bold", class: "text-gray-900 dark:text-gray-100 uppercase tracking-wider" },
+                {
+                  tag: "span",
+                  size: "sm",
+                  weight: "bold",
+                  class: "text-gray-900 dark:text-gray-100 uppercase tracking-wider"
+                },
                 { default: () => groupTitle }
               )
             ]))) : null,
             _vue.h.call(void 0, 
-              _chunkRBHF7NOQjs.Timeline,
+              _chunkD6Y3KVJFjs.Timeline,
               {
                 items: timelineItems,
                 style: {
@@ -321,7 +354,9 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
                     pulseClass = "bg-blue-500/30";
                   }
                   return _vue.h.call(void 0, "div", { class: "relative flex items-center justify-center w-4 h-4" }, [
-                    pulseClass ? _vue.h.call(void 0, "span", { class: `absolute inline-flex h-full w-full rounded-full animate-ping opacity-75 ${pulseClass}` }) : null,
+                    pulseClass ? _vue.h.call(void 0, "span", {
+                      class: `absolute inline-flex h-full w-full rounded-full animate-ping opacity-75 ${pulseClass}`
+                    }) : null,
                     _vue.h.call(void 0, "span", { class: `${baseDotClass} ${colorClass} relative z-10` })
                   ]);
                 }

package/dist/{chunk-S6Q7TD6H.js → chunk-PH6ERFC7.js}

@@ -1,6 +1,9 @@
 "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 _chunk5F6P5Y4Kjs = require('./chunk-5F6P5Y4K.js');
+var _chunkLKRT27JWjs = require('./chunk-LKRT27JW.js');
+
+
+var _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
 
 // src/components/List.ts
 
@@ -35,6 +38,11 @@ var _vue = require('vue');
 
 
 
+
+
+
+
+
 
 
 
@@ -92,7 +100,14 @@ var List = _vue.defineComponent.call(void 0, {
      */
     emptyText: {
       type: String,
-      default: "No data"
+      default: void 0
+    },
+    /**
+     * Locale override; falls back to ConfigProvider locale
+     */
+    locale: {
+      type: Object,
+      default: void 0
     },
     /**
      * Whether to show split line between items
@@ -188,6 +203,8 @@ var List = _vue.defineComponent.call(void 0, {
   },
   emits: ["item-click", "page-change", "reorder"],
   setup(props, { emit, slots, 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 instance = _vue.getCurrentInstance.call(void 0, );
     const hasItemClickListener = _vue.computed.call(void 0, () => {
       const vnodeProps = _optionalChain([instance, 'optionalAccess', _ => _.vnode, 'access', _2 => _2.props]) || {};
@@ -380,7 +397,7 @@ var List = _vue.defineComponent.call(void 0, {
             role: "status",
             "aria-live": "polite"
           },
-          props.emptyText
+          _tigercatcore.resolveLocaleText.call(void 0, "No data", props.emptyText, _optionalChain([mergedLocale, 'access', _3 => _3.value, 'optionalAccess', _4 => _4.common, 'optionalAccess', _5 => _5.emptyText]))
         );
       }
       const items = paginatedData.value.map((item, index) => renderListItem(item, index));
@@ -397,7 +414,7 @@ var List = _vue.defineComponent.call(void 0, {
       }
       if (props.virtual) {
         return _vue.h.call(void 0, 
-          _chunk5F6P5Y4Kjs.VirtualList,
+          _chunkLKRT27JWjs.VirtualList,
           {
             itemCount: paginatedData.value.length,
             itemHeight: props.virtualItemHeight,
@@ -421,12 +438,19 @@ var List = _vue.defineComponent.call(void 0, {
       const { totalPages, startIndex, endIndex, hasNext, hasPrev } = paginationInfo.value;
       const total = props.dataSource.length;
       const paginationConfig = props.pagination;
+      const paginationLabels = _tigercatcore.getPaginationLabels.call(void 0, mergedLocale.value);
+      const localeCode = _optionalChain([mergedLocale, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.locale]);
       return _vue.h.call(void 0, "div", { class: _tigercatcore.getSimplePaginationContainerClasses.call(void 0, ) }, [
         // Total info
         paginationConfig.showTotal !== false && _vue.h.call(void 0, 
           "div",
           { class: _tigercatcore.getSimplePaginationTotalClasses.call(void 0, ) },
-          paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} items`
+          paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : _tigercatcore.formatPaginationTotal.call(void 0, 
+            paginationLabels.totalText,
+            total,
+            [startIndex, endIndex],
+            localeCode
+          )
         ),
         // Pagination controls
         _vue.h.call(void 0, "div", { class: _tigercatcore.getSimplePaginationControlsClasses.call(void 0, ) }, [
@@ -439,7 +463,7 @@ var List = _vue.defineComponent.call(void 0, {
               onChange: (e) => handlePageSizeChange(Number(e.target.value))
             },
             (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map(
-              (size) => _vue.h.call(void 0, "option", { value: size }, `${size} / page`)
+              (size) => _vue.h.call(void 0, "option", { value: size }, `${size} ${paginationLabels.itemsPerPageText}`)
             )
           ),
           // Page buttons
@@ -452,13 +476,18 @@ var List = _vue.defineComponent.call(void 0, {
                 disabled: !hasPrev,
                 onClick: () => handlePageChange(currentPage.value - 1)
               },
-              "Previous"
+              paginationLabels.prevPageAriaLabel
             ),
             // Current page indicator
             _vue.h.call(void 0, 
               "span",
               { class: _tigercatcore.getSimplePaginationPageIndicatorClasses.call(void 0, ) },
-              `Page ${currentPage.value} of ${totalPages}`
+              _tigercatcore.formatPaginationPageIndicator.call(void 0, 
+                paginationLabels.pageIndicatorText,
+                currentPage.value,
+                totalPages,
+                localeCode
+              )
             ),
             // Next button
             _vue.h.call(void 0, 
@@ -468,7 +497,7 @@ var List = _vue.defineComponent.call(void 0, {
                 disabled: !hasNext,
                 onClick: () => handlePageChange(currentPage.value + 1)
               },
-              "Next"
+              paginationLabels.nextPageAriaLabel
             )
           ])
         ])

package/dist/{chunk-Y3BQSELH.mjs → chunk-PJX2DHO5.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-HVVPFQW2.mjs → chunk-PLUABMUD.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
 // src/components/Badge.ts
 import { defineComponent, computed, h } from "vue";
 import {
@@ -12,12 +16,18 @@ import {
   badgeWrapperClasses,
   badgePositionClasses,
   formatBadgeContent,
-  shouldHideBadge
+  shouldHideBadge,
+  getStatusLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var Badge = defineComponent({
   name: "TigerBadge",
   inheritAttrs: false,
   props: {
+    locale: {
+      type: Object,
+      default: void 0
+    },
     variant: {
       type: String,
       default: "danger"
@@ -60,6 +70,10 @@ var Badge = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(
+      () => getStatusLabels(mergeTigerLocale(config.value.locale, props.locale))
+    );
     const isDot = computed(() => props.type === "dot");
     const isHidden = computed(() => shouldHideBadge(props.content, props.type, props.showZero));
     const displayContent = computed(
@@ -79,7 +93,7 @@ var Badge = defineComponent({
         return props.standalone ? null : slots.default?.() ?? null;
       }
       const attrsRecord = attrs;
-      const ariaLabel = attrsRecord["aria-label"] ?? (isDot.value ? "notification" : props.type === "number" ? `${displayContent.value} notifications` : `${displayContent.value ?? ""}`);
+      const ariaLabel = attrsRecord["aria-label"] ?? (isDot.value ? labels.value.badgeLabel : props.type === "number" ? labels.value.badgeCountLabel.replace("{count}", String(displayContent.value)) : `${displayContent.value ?? ""}`);
       const badgeElement = h(
         "span",
         {

package/dist/{chunk-RFFPMC22.mjs → chunk-PMN2MQ26.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-R2HO74FE.mjs";
 import {
   ChartTooltip
-} from "./chunk-OK4PVFQG.mjs";
+} from "./chunk-G2LB4QCL.mjs";
 import {
   ChartCanvas
 } from "./chunk-W5RZPTFD.mjs";

package/dist/{chunk-IZQ7BRHC.mjs → chunk-QH3YF5B6.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
 // src/components/Select.ts
 import { defineComponent, computed, ref, h, watch, nextTick, onBeforeUnmount } from "vue";
 import {
@@ -15,13 +19,18 @@ import {
   flattenSelectOptions,
   resolveCreatableSelectOption,
   resolveSelectFilteredOptions,
+  getSelectVirtualItemHeight,
+  fixedSizeStrategy,
+  getPickerOptionAria,
   findFirstEnabledIndex as pickerFindFirstEnabledIndex,
   findLastEnabledIndex as pickerFindLastEnabledIndex,
   findNextEnabledIndex as pickerFindNextEnabledIndex,
   icon20ViewBox,
   chevronDownSolidIcon20PathD,
   closeSolidIcon20PathD,
-  checkSolidIcon20PathD
+  checkSolidIcon20PathD,
+  resolveLocaleText,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var selectInstanceId = 0;
 var ChevronDownIcon = h(
@@ -131,7 +140,7 @@ var Select = defineComponent({
      */
     noOptionsText: {
       type: String,
-      default: "No options found"
+      default: void 0
     },
     /**
      * Text shown when no data available
@@ -139,7 +148,7 @@ var Select = defineComponent({
      */
     noDataText: {
       type: String,
-      default: "No options available"
+      default: void 0
     },
     /**
      * Maximum number of tags in multi-select display
@@ -186,10 +195,19 @@ var Select = defineComponent({
     listHeight: {
       type: Number,
       default: 256
+    },
+    /**
+     * Locale overrides merged on top of ConfigProvider locale
+     */
+    locale: {
+      type: Object,
+      default: void 0
     }
   },
   emits: ["update:modelValue", "change", "search", "create"],
   setup(props, { emit }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const instanceId = ++selectInstanceId;
     const listboxId = `tiger-select-listbox-${instanceId}`;
     const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
@@ -200,6 +218,18 @@ var Select = defineComponent({
     const dropdownRef = ref(null);
     const triggerRef = ref(null);
     const searchInputRef = ref(null);
+    const virtualScrollTop = ref(0);
+    const virtualScrollRef = ref(null);
+    watch(activeIndex, (idx) => {
+      if (!props.virtual || idx < 0) return;
+      const el = virtualScrollRef.value;
+      if (!el) return;
+      const itemH = getSelectVirtualItemHeight(props.size);
+      const top = idx * itemH;
+      if (top < el.scrollTop) el.scrollTop = top;
+      else if (top + itemH > el.scrollTop + props.listHeight)
+        el.scrollTop = top + itemH - props.listHeight;
+    });
     let searchDebouncer = createSelectSearchDebouncer({
       delay: props.searchDebounce,
       onSearch: (query) => emit("search", query)
@@ -543,7 +573,7 @@ var Select = defineComponent({
           {
             ref: triggerRef,
             type: "button",
-            class: triggerClasses,
+            class: classNames(triggerClasses, "pr-16"),
             disabled: props.disabled,
             onClick: toggleDropdown,
             onKeydown: handleTriggerKeyDown,
@@ -563,26 +593,35 @@ var Select = defineComponent({
                 )
               },
               displayText.value
+            )
+          ]
+        ),
+        h(
+          "span",
+          { class: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1" },
+          [
+            showClearButton.value && h(
+              "button",
+              {
+                type: "button",
+                class: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-select-ring,var(--tiger-primary,#2563eb))]",
+                "data-tiger-select-clear": "",
+                "aria-label": resolveLocaleText(
+                  "Clear selection",
+                  mergedLocale.value?.common?.clearText
+                ),
+                onClick: clearSelection
+              },
+              CloseIcon
             ),
-            h("span", { class: "flex items-center gap-1" }, [
-              showClearButton.value && h(
-                "span",
-                {
-                  class: "inline-flex",
-                  "data-tiger-select-clear": "",
-                  "aria-label": "Clear selection",
-                  onClick: clearSelection
-                },
-                CloseIcon
-              ),
-              h(
-                "span",
-                {
-                  class: classNames("inline-flex", isOpen.value && "rotate-180")
-                },
-                ChevronDownIcon
-              )
-            ])
+            h(
+              "span",
+              {
+                class: classNames("inline-flex", isOpen.value && "rotate-180"),
+                "aria-hidden": "true"
+              },
+              ChevronDownIcon
+            )
           ]
         ),
         // Dropdown
@@ -602,7 +641,10 @@ var Select = defineComponent({
               ref: searchInputRef,
               type: "text",
               class: selectSearchInputClasses,
-              placeholder: "Search...",
+              placeholder: resolveLocaleText(
+                "Search...",
+                mergedLocale.value?.common?.searchPlaceholder
+              ),
               value: searchQuery.value,
               onInput: handleSearchInput,
               onKeydown: handleSearchKeyDown
@@ -613,15 +655,17 @@ var Select = defineComponent({
               const renderOptionItem = (option, idx, displayLabel = option.label) => {
                 const selected = isSelected(option);
                 const active = idx === activeIndex.value;
+                const optionAria = getPickerOptionAria({
+                  selected,
+                  disabled: !!option.disabled
+                });
                 return h(
                   "div",
                   {
                     key: option.value,
                     id: getOptionId(idx),
                     "data-option-index": idx,
-                    role: "option",
-                    "aria-selected": selected,
-                    "aria-disabled": option.disabled ? true : void 0,
+                    ...optionAria,
                     tabindex: active ? 0 : -1,
                     class: getSelectOptionClasses(selected, !!option.disabled, props.size),
                     onMouseenter: () => {
@@ -639,6 +683,52 @@ var Select = defineComponent({
                   ]
                 );
               };
+              const hasGroups = filteredOptions.value.some(isOptionGroup);
+              if (props.virtual && !hasGroups) {
+                const flat = filteredOptions.value.filter(
+                  (o) => !isOptionGroup(o)
+                );
+                const all = creatableOption.value ? [...flat, creatableOption.value] : flat;
+                const itemH = getSelectVirtualItemHeight(props.size);
+                const { startIndex, endIndex, totalHeight } = fixedSizeStrategy(
+                  itemH
+                ).getRange(virtualScrollTop.value, props.listHeight, all.length, 5);
+                const visible = [];
+                for (let i = startIndex; i <= endIndex; i++) {
+                  const isCreate = creatableOption.value && i === all.length - 1;
+                  visible.push(
+                    renderOptionItem(
+                      all[i],
+                      i,
+                      isCreate ? getCreateSelectOptionLabel(all[i], props.createOptionText) : all[i].label
+                    )
+                  );
+                }
+                return h(
+                  "div",
+                  {
+                    ref: virtualScrollRef,
+                    "data-tiger-select-virtual": "",
+                    style: { maxHeight: `${props.listHeight}px`, overflowY: "auto" },
+                    onScroll: (e) => {
+                      virtualScrollTop.value = e.target.scrollTop;
+                    }
+                  },
+                  [
+                    h(
+                      "div",
+                      { style: { height: `${totalHeight}px`, position: "relative" } },
+                      [
+                        h(
+                          "div",
+                          { style: { transform: `translateY(${startIndex * itemH}px)` } },
+                          visible
+                        )
+                      ]
+                    )
+                  ]
+                );
+              }
               const optionNodes = filteredOptions.value.map((item) => {
                 if (isOptionGroup(item)) {
                   return h("div", { key: item.label }, [
@@ -694,7 +784,15 @@ var Select = defineComponent({
             })() : h(
               "div",
               { class: selectEmptyStateClasses },
-              props.options.length === 0 ? props.noDataText : props.noOptionsText
+              props.options.length === 0 ? resolveLocaleText(
+                "No options available",
+                props.noDataText,
+                mergedLocale.value?.common?.emptyText
+              ) : resolveLocaleText(
+                "No options found",
+                props.noOptionsText,
+                mergedLocale.value?.common?.emptyText
+              )
             )
           ]
         )