@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-AYNQTRO4.mjs → chunk-ND4XDRYR.mjs}

@@ -1,21 +1,11 @@
-import { Table } from './chunk-PZOSCHRV.mjs';
-import { Pagination } from './chunk-XMBCYUDD.mjs';
-import { DropdownItem } from './chunk-CKC7W6BL.mjs';
-import { Dropdown } from './chunk-JUIOGBBB.mjs';
-import { DropdownMenu } from './chunk-AN3HKOCS.mjs';
-import { Input } from './chunk-G6YTJ7IE.mjs';
-import { Button } from './chunk-YMIO4A2U.mjs';
+import { Table } from './chunk-ZTJTIQZY.mjs';
+import { Select } from './chunk-GALASVSG.mjs';
+import { Pagination } from './chunk-NHCCPMLC.mjs';
+import { Input } from './chunk-VURU7TLN.mjs';
+import { Button } from './chunk-D6MR5YRE.mjs';
 import { defineComponent, ref, getCurrentInstance, watch, computed, h } from 'vue';
 import { classNames, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
 
-var resolveFilterLabel = (filter, value) => {
-  const option = filter.options.find((item) => item.value === value);
-  if (option) return `${filter.label}: ${option.label}`;
-  if (value !== null && value !== void 0 && value !== "") {
-    return `${filter.label}: ${String(value)}`;
-  }
-  return filter.placeholder ?? filter.label;
-};
 var DataTableWithToolbar = defineComponent({
   name: "TigerDataTableWithToolbar",
   inheritAttrs: false,
@@ -216,79 +206,57 @@ var DataTableWithToolbar = defineComponent({
       if (hasSearch.value) {
         const showButton = props.toolbar?.showSearchButton ?? true;
         leftNodes.push(
-          h("div", { class: "flex items-center gap-2" }, [
-            h(Input, {
-              type: "search",
-              size: "sm",
-              modelValue: searchValue.value,
-              placeholder: props.toolbar?.searchPlaceholder ?? "\u641C\u7D22",
-              "onUpdate:modelValue": (value) => handleSearchChange(String(value ?? "")),
-              onKeydown: (event) => {
-                if (event.key === "Enter") {
-                  handleSearchSubmit();
-                }
-              }
-            }),
-            showButton ? h(
-              Button,
-              {
+          h(
+            "div",
+            { class: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]" },
+            [
+              h(Input, {
+                type: "search",
                 size: "sm",
-                variant: "primary",
-                class: "whitespace-nowrap",
-                onClick: handleSearchSubmit,
-                disabled: !canSearch.value
-              },
-              { default: () => props.toolbar?.searchButtonText ?? "\u641C\u7D22" }
-            ) : null
-          ])
+                modelValue: searchValue.value,
+                placeholder: props.toolbar?.searchPlaceholder ?? "\u641C\u7D22",
+                "onUpdate:modelValue": (value) => handleSearchChange(String(value ?? "")),
+                onKeydown: (event) => {
+                  if (event.key === "Enter") {
+                    handleSearchSubmit();
+                  }
+                }
+              }),
+              showButton ? h(
+                Button,
+                {
+                  size: "sm",
+                  variant: "primary",
+                  class: "whitespace-nowrap shrink-0",
+                  onClick: handleSearchSubmit,
+                  disabled: !canSearch.value
+                },
+                { default: () => props.toolbar?.searchButtonText ?? "\u641C\u7D22" }
+              ) : null
+            ]
+          )
         );
       }
       if (hasFilters.value) {
         props.toolbar?.filters?.forEach((filter) => {
           const currentValue = resolvedFilters.value[filter.key];
-          const triggerLabel = resolveFilterLabel(filter, currentValue);
           const clearable = filter.clearable !== false;
-          const clearLabel = filter.clearLabel ?? "\u5168\u90E8";
-          const isActive = currentValue !== null && currentValue !== void 0 && currentValue !== "";
           leftNodes.push(
-            h(
-              Dropdown,
-              { trigger: "click" },
-              {
-                default: () => [
-                  h(
-                    Button,
-                    {
-                      size: "sm",
-                      variant: isActive ? "secondary" : "outline",
-                      class: "whitespace-nowrap"
-                    },
-                    { default: () => triggerLabel }
-                  ),
-                  h(DropdownMenu, null, {
-                    default: () => [
-                      ...clearable ? [
-                        h(
-                          DropdownItem,
-                          { onClick: () => handleFilterSelect(filter, null) },
-                          { default: () => clearLabel }
-                        )
-                      ] : [],
-                      ...filter.options.map(
-                        (option) => h(
-                          DropdownItem,
-                          {
-                            key: String(option.value),
-                            onClick: () => handleFilterSelect(filter, option.value)
-                          },
-                          { default: () => option.label }
-                        )
-                      )
-                    ]
-                  })
-                ]
-              }
-            )
+            h("div", { class: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]" }, [
+              h(Select, {
+                size: "sm",
+                options: filter.options.map((opt) => ({
+                  label: opt.label,
+                  value: opt.value
+                })),
+                modelValue: currentValue ?? void 0,
+                placeholder: filter.placeholder ?? filter.label,
+                clearable,
+                "onUpdate:modelValue": (value) => {
+                  handleFilterSelect(filter, value ?? null);
+                }
+              })
+            ])
           );
         });
       }
@@ -319,10 +287,18 @@ var DataTableWithToolbar = defineComponent({
           );
         });
       }
-      return h("div", { class: "tiger-data-table-toolbar flex flex-wrap items-center gap-2" }, [
-        h("div", { class: "flex items-center gap-2 flex-wrap" }, leftNodes),
-        hasBulkActions.value ? h("div", { class: "ml-auto flex items-center gap-2 flex-wrap" }, bulkChildren) : null
-      ]);
+      return h(
+        "div",
+        { class: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3" },
+        [
+          h("div", { class: "flex items-center gap-2 flex-wrap flex-1 min-w-0" }, leftNodes),
+          hasBulkActions.value ? h(
+            "div",
+            { class: "flex items-center gap-2 flex-wrap ml-auto shrink-0" },
+            bulkChildren
+          ) : null
+        ]
+      );
     };
     return () => {
       const { class: _class, style: _style, ...restAttrs } = attrs;

package/dist/{chunk-3G2QV4TL.js → chunk-NGW5UMAN.js}

@@ -1,19 +1,19 @@
 'use strict';
 
-var chunkWO332QT2_js = require('./chunk-WO332QT2.js');
-var chunkYFMXWX6H_js = require('./chunk-YFMXWX6H.js');
-var chunkZK26QLSW_js = require('./chunk-ZK26QLSW.js');
-var chunkCCI3RIZU_js = require('./chunk-CCI3RIZU.js');
-var chunkI7GSAVM7_js = require('./chunk-I7GSAVM7.js');
-var chunkSKUTVXHP_js = require('./chunk-SKUTVXHP.js');
-var chunkU65XZCPB_js = require('./chunk-U65XZCPB.js');
+var chunk27T3QDSF_js = require('./chunk-27T3QDSF.js');
+var chunkDN5GU5PC_js = require('./chunk-DN5GU5PC.js');
+var chunkZED7TU62_js = require('./chunk-ZED7TU62.js');
+var chunk2KDSHEZT_js = require('./chunk-2KDSHEZT.js');
+var chunkDUQ7Q2GO_js = require('./chunk-DUQ7Q2GO.js');
+var chunkWEFQCJAG_js = require('./chunk-WEFQCJAG.js');
+var chunkWPIDP6IG_js = require('./chunk-WPIDP6IG.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
 var renderAction = (item, action, index) => {
   const key = action.key ?? `${item.id}-action-${index}`;
   return vue.h(
-    chunkYFMXWX6H_js.Link,
+    chunkZED7TU62_js.Link,
     {
       key,
       size: "sm",
@@ -115,7 +115,7 @@ var ActivityFeed = vue.defineComponent({
         },
         [
           vue.h("div", { class: "flex gap-3 items-start" }, [
-            props.showAvatar && item.user ? vue.h(chunkU65XZCPB_js.Avatar, {
+            props.showAvatar && item.user ? vue.h(chunkWPIDP6IG_js.Avatar, {
               size: "sm",
               src: item.user.avatar,
               text: item.user.name,
@@ -125,12 +125,12 @@ var ActivityFeed = vue.defineComponent({
               vue.h("div", { class: "flex items-center justify-between gap-2 mb-1" }, [
                 vue.h("div", { class: "flex items-center gap-2 min-w-0" }, [
                   titleText ? vue.h(
-                    chunkI7GSAVM7_js.Text,
+                    chunkDUQ7Q2GO_js.Text,
                     { tag: "div", size: "sm", weight: "medium", class: "truncate" },
                     { default: () => titleText }
                   ) : null,
                   item.status ? vue.h(
-                    chunkCCI3RIZU_js.Tag,
+                    chunk2KDSHEZT_js.Tag,
                     {
                       variant: item.status.variant ?? "default",
                       size: "sm",
@@ -140,7 +140,7 @@ var ActivityFeed = vue.defineComponent({
                   ) : null
                 ]),
                 timeText ? vue.h(
-                  chunkI7GSAVM7_js.Text,
+                  chunkDUQ7Q2GO_js.Text,
                   {
                     tag: "div",
                     size: "xs",
@@ -151,7 +151,7 @@ var ActivityFeed = vue.defineComponent({
                 ) : null
               ]),
               descriptionText ? vue.h(
-                chunkI7GSAVM7_js.Text,
+                chunkDUQ7Q2GO_js.Text,
                 { tag: "div", size: "sm", color: "muted", class: "mb-2 break-words" },
                 { default: () => descriptionText }
               ) : null,
@@ -163,7 +163,7 @@ var ActivityFeed = vue.defineComponent({
     };
     return () => {
       if (props.loading) {
-        const loadingNode = slots.loading ? slots.loading() : vue.h(chunkZK26QLSW_js.Loading, { text: props.loadingText });
+        const loadingNode = slots.loading ? slots.loading() : vue.h(chunkDN5GU5PC_js.Loading, { text: props.loadingText });
         return vue.h(
           "div",
           {
@@ -174,7 +174,7 @@ var ActivityFeed = vue.defineComponent({
           },
           [
             vue.h(
-              chunkSKUTVXHP_js.Card,
+              chunkWEFQCJAG_js.Card,
               { variant: "bordered", size: "sm", className: "tiger-activity-feed-loading" },
               {
                 default: () => vue.h("div", { class: "flex items-center justify-center py-4" }, loadingNode)
@@ -184,7 +184,7 @@ var ActivityFeed = vue.defineComponent({
         );
       }
       if (resolvedGroups.value.length === 0) {
-        const emptyNode = slots.empty ? slots.empty() : vue.h(chunkI7GSAVM7_js.Text, { tag: "div", size: "sm", color: "muted" }, { default: () => props.emptyText });
+        const emptyNode = slots.empty ? slots.empty() : vue.h(chunkDUQ7Q2GO_js.Text, { tag: "div", size: "sm", color: "muted" }, { default: () => props.emptyText });
         return vue.h(
           "div",
           {
@@ -195,7 +195,7 @@ var ActivityFeed = vue.defineComponent({
           },
           [
             vue.h(
-              chunkSKUTVXHP_js.Card,
+              chunkWEFQCJAG_js.Card,
               { variant: "bordered", size: "sm", className: "tiger-activity-feed-empty" },
               {
                 default: () => vue.h("div", { class: "flex items-center justify-center py-6" }, emptyNode)
@@ -218,12 +218,12 @@ var ActivityFeed = vue.defineComponent({
           const timelineItems = tigercatCore.toActivityTimelineItems(group.items);
           return vue.h("div", { key: group.key ?? groupIndex, class: "space-y-3" }, [
             props.showGroupTitle && groupTitle ? headerNode ?? vue.h(
-              chunkI7GSAVM7_js.Text,
+              chunkDUQ7Q2GO_js.Text,
               { tag: "div", size: "sm", weight: "medium", color: "muted" },
               { default: () => groupTitle }
             ) : null,
             vue.h(
-              chunkWO332QT2_js.Timeline,
+              chunk27T3QDSF_js.Timeline,
               { items: timelineItems },
               {
                 item: ({ item, index }) => {

package/dist/{chunk-XMBCYUDD.mjs → chunk-NHCCPMLC.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, h } from 'vue';
-import { getPaginationLabels, getTotalPages, validateCurrentPage, getPageRange, classNames, getPaginationContainerClasses, coerceClassValue, mergeStyleValues, defaultTotalText, getTotalTextClasses, getPaginationButtonBaseClasses, getPageNumbers, getPaginationEllipsisClasses, formatPageAriaLabel, getPaginationButtonActiveClasses, getPageSizeSelectorClasses, getQuickJumperInputClasses } from '@expcat/tigercat-core';
+import { getPaginationLabels, getTotalPages, validateCurrentPage, getPageRange, classNames, getPaginationContainerClasses, coerceClassValue, mergeStyleValues, defaultTotalText, getTotalTextClasses, getPaginationButtonBaseClasses, getSizeTextClasses, getPageNumbers, getPaginationEllipsisClasses, formatPageAriaLabel, getPaginationButtonActiveClasses, getPageSizeSelectorClasses, getQuickJumperInputClasses } from '@expcat/tigercat-core';
 
 // src/components/Pagination.ts
 var Pagination = defineComponent({
@@ -246,102 +246,53 @@ var Pagination = defineComponent({
         return null;
       }
       const elements = [];
+      const size = props.size;
+      const page = validatedCurrentPage.value;
+      const pages = totalPages.value;
+      const prevDisabled = page <= 1 || props.disabled;
+      const nextDisabled = page >= pages || props.disabled;
       if (props.showTotal) {
         const totalTextFn = props.totalText || defaultTotalText;
-        const totalTextContent = totalTextFn(props.total, pageRange.value);
         elements.push(
-          h(
-            "span",
-            {
-              class: getTotalTextClasses(props.size)
-            },
-            totalTextContent
-          )
+          h("span", { class: getTotalTextClasses(size) }, totalTextFn(props.total, pageRange.value))
         );
       }
+      elements.push(
+        h(
+          "button",
+          {
+            type: "button",
+            class: getPaginationButtonBaseClasses(size),
+            disabled: prevDisabled,
+            onClick: () => handlePageChange(page - 1),
+            "aria-label": labels.value.prevPageAriaLabel
+          },
+          "\u2039"
+        )
+      );
       if (props.simple) {
-        const prevDisabled = validatedCurrentPage.value <= 1 || props.disabled;
-        const nextDisabled = validatedCurrentPage.value >= totalPages.value || props.disabled;
-        elements.push(
-          h(
-            "button",
-            {
-              type: "button",
-              class: getPaginationButtonBaseClasses(props.size),
-              disabled: prevDisabled,
-              onClick: () => handlePageChange(validatedCurrentPage.value - 1),
-              "aria-label": labels.value.prevPageAriaLabel
-            },
-            "\u2039"
-          )
-        );
-        elements.push(
-          h(
-            "span",
-            {
-              class: classNames(
-                "mx-2",
-                props.size === "small" ? "text-sm" : props.size === "large" ? "text-lg" : "text-base"
-              )
-            },
-            `${validatedCurrentPage.value} / ${totalPages.value}`
-          )
-        );
         elements.push(
-          h(
-            "button",
-            {
-              type: "button",
-              class: getPaginationButtonBaseClasses(props.size),
-              disabled: nextDisabled,
-              onClick: () => handlePageChange(validatedCurrentPage.value + 1),
-              "aria-label": labels.value.nextPageAriaLabel
-            },
-            "\u203A"
-          )
+          h("span", { class: classNames("mx-2", getSizeTextClasses(size)) }, `${page} / ${pages}`)
         );
       } else {
-        const prevDisabled = validatedCurrentPage.value <= 1 || props.disabled;
-        const nextDisabled = validatedCurrentPage.value >= totalPages.value || props.disabled;
-        elements.push(
-          h(
-            "button",
-            {
-              type: "button",
-              class: getPaginationButtonBaseClasses(props.size),
-              disabled: prevDisabled,
-              onClick: () => handlePageChange(validatedCurrentPage.value - 1),
-              "aria-label": labels.value.prevPageAriaLabel
-            },
-            "\u2039"
-          )
-        );
-        const pageNumbers = getPageNumbers(
-          validatedCurrentPage.value,
-          totalPages.value,
-          props.showLessItems
-        );
-        pageNumbers.forEach((pageNum) => {
+        getPageNumbers(page, pages, props.showLessItems).forEach((pageNum) => {
           if (pageNum === "...") {
             elements.push(
               h(
                 "span",
-                {
-                  class: getPaginationEllipsisClasses(props.size),
-                  "aria-hidden": "true"
-                },
+                { class: getPaginationEllipsisClasses(size), "aria-hidden": "true" },
                 "..."
               )
             );
           } else {
-            const isActive = pageNum === validatedCurrentPage.value;
+            const isActive = pageNum === page;
             elements.push(
               h(
                 "button",
                 {
                   type: "button",
                   class: classNames(
-                    getPaginationButtonBaseClasses(props.size),
+                    getPaginationButtonBaseClasses(size),
                     isActive && getPaginationButtonActiveClasses()
                   ),
                   disabled: props.disabled,
@@ -354,85 +305,60 @@ var Pagination = defineComponent({
             );
           }
         });
-        elements.push(
-          h(
-            "button",
-            {
-              type: "button",
-              class: getPaginationButtonBaseClasses(props.size),
-              disabled: nextDisabled,
-              onClick: () => handlePageChange(validatedCurrentPage.value + 1),
-              "aria-label": labels.value.nextPageAriaLabel
-            },
-            "\u203A"
-          )
-        );
       }
+      elements.push(
+        h(
+          "button",
+          {
+            type: "button",
+            class: getPaginationButtonBaseClasses(size),
+            disabled: nextDisabled,
+            onClick: () => handlePageChange(page + 1),
+            "aria-label": labels.value.nextPageAriaLabel
+          },
+          "\u203A"
+        )
+      );
       if (props.showSizeChanger) {
         elements.push(
           h(
             "select",
             {
-              class: getPageSizeSelectorClasses(props.size),
+              class: getPageSizeSelectorClasses(size),
               disabled: props.disabled,
               value: currentPageSize.value,
               onChange: (e) => {
-                const target = e.target;
-                handlePageSizeChange(parseInt(target.value, 10));
+                handlePageSizeChange(parseInt(e.target.value, 10));
               },
               "aria-label": labels.value.itemsPerPageText
             },
             normalizedPageSizeOptions.value.map(
-              (sizeOption) => h(
-                "option",
-                {
-                  value: sizeOption.value,
-                  key: sizeOption.value
-                },
-                sizeOption.label
-              )
+              (sizeOption) => h("option", { value: sizeOption.value, key: sizeOption.value }, sizeOption.label)
             )
           )
         );
       }
       if (props.showQuickJumper) {
+        const sizeText = getSizeTextClasses(size);
         elements.push(
-          h(
-            "span",
-            {
-              class: classNames(
-                "ml-2",
-                props.size === "small" ? "text-sm" : props.size === "large" ? "text-lg" : "text-base"
-              )
-            },
-            labels.value.jumpToText
-          )
+          h("span", { class: classNames("ml-2", sizeText) }, labels.value.jumpToText)
         );
         elements.push(
           h("input", {
             type: "number",
-            class: classNames(getQuickJumperInputClasses(props.size), "mx-2"),
+            class: classNames(getQuickJumperInputClasses(size), "mx-2"),
             disabled: props.disabled,
             value: quickJumperValue.value,
             onInput: (e) => {
-              const target = e.target;
-              quickJumperValue.value = target.value;
+              quickJumperValue.value = e.target.value;
             },
             onKeydown: handleQuickJumperKeypress,
             min: 1,
-            max: totalPages.value,
+            max: pages,
             "aria-label": labels.value.jumpToText
           })
         );
-        elements.push(
-          h(
-            "span",
-            {
-              class: props.size === "small" ? "text-sm" : props.size === "large" ? "text-lg" : "text-base"
-            },
-            labels.value.pageText
-          )
-        );
+        elements.push(h("span", { class: sizeText }, labels.value.pageText));
       }
       const {
         class: _class,

package/dist/{chunk-5XW532JA.js → chunk-NOTJRUAK.js}

@@ -71,17 +71,14 @@ var Steps = vue.defineComponent({
   },
   emits: ["change", "update:current"],
   setup(props, { slots, attrs, emit }) {
-    const attrsRecord = attrs;
-    const attrsClass = attrsRecord.class;
-    const attrsStyle = attrsRecord.style;
     const containerClasses = vue.computed(
       () => tigercatCore.classNames(
         tigercatCore.getStepsContainerClasses(props.direction),
         props.className,
-        tigercatCore.coerceClassValue(attrsClass)
+        tigercatCore.coerceClassValue(attrs.class)
       )
     );
-    const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrsStyle, props.style));
+    const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
     const handleStepClick = (index) => {
       if (!props.clickable) {
         return;
@@ -89,42 +86,25 @@ var Steps = vue.defineComponent({
       emit("update:current", index);
       emit("change", index);
     };
-    const stepsContextValue = vue.reactive({
-      current: props.current,
-      status: props.status,
-      direction: props.direction,
-      size: props.size,
-      simple: props.simple,
-      clickable: props.clickable,
-      handleStepClick: props.clickable ? handleStepClick : void 0
-    });
-    vue.watch(
-      () => [
-        props.current,
-        props.status,
-        props.direction,
-        props.size,
-        props.simple,
-        props.clickable
-      ],
-      ([current, status, direction, size, simple, clickable]) => {
-        stepsContextValue.current = current;
-        stepsContextValue.status = status;
-        stepsContextValue.direction = direction;
-        stepsContextValue.size = size;
-        stepsContextValue.simple = simple;
-        stepsContextValue.clickable = clickable;
-        stepsContextValue.handleStepClick = clickable ? handleStepClick : void 0;
-      }
+    vue.provide(
+      StepsContextKey,
+      vue.reactive({
+        current: vue.computed(() => props.current),
+        status: vue.computed(() => props.status),
+        direction: vue.computed(() => props.direction),
+        size: vue.computed(() => props.size),
+        simple: vue.computed(() => props.simple),
+        clickable: vue.computed(() => props.clickable),
+        handleStepClick: vue.computed(() => props.clickable ? handleStepClick : void 0)
+      })
     );
-    vue.provide(StepsContextKey, stepsContextValue);
     return () => {
       const children = slots.default?.() || [];
       const {
         class: _class,
         style: _style,
         ...restAttrs
-      } = attrsRecord;
+      } = attrs;
       const stepsWithProps = children.map((child, index) => {
         const childType = child?.type;
         const childName = typeof childType === "object" && childType && "name" in childType ? childType.name : void 0;

package/dist/{chunk-UYWPZDRU.mjs → chunk-NTUGEHEI.mjs}

@@ -1,7 +1,7 @@
-import { Input } from './chunk-G6YTJ7IE.mjs';
-import { Textarea } from './chunk-E6LSCXQM.mjs';
-import { Button } from './chunk-YMIO4A2U.mjs';
-import { Avatar } from './chunk-U5ZMB6RE.mjs';
+import { Input } from './chunk-VURU7TLN.mjs';
+import { Textarea } from './chunk-MKBIVETW.mjs';
+import { Button } from './chunk-D6MR5YRE.mjs';
+import { Avatar } from './chunk-COCECPMG.mjs';
 import { defineComponent, ref, watch, computed, h } from 'vue';
 import { classNames, coerceClassValue, mergeStyleValues, getChatMessageStatusInfo, formatChatTime } from '@expcat/tigercat-core';
 

package/dist/{chunk-CQJQJERX.mjs → chunk-NV6GZPJP.mjs}

@@ -282,14 +282,8 @@ var TimePicker = defineComponent({
     function togglePanel() {
       if (!props.disabled && !props.readonly) {
         isOpen.value = !isOpen.value;
-        if (isOpen.value && parsedTime.value) {
-          selectedHours.value = parsedTime.value.hours;
-          selectedMinutes.value = parsedTime.value.minutes;
-          selectedSeconds.value = parsedTime.value.seconds;
-          if (props.format === "12") {
-            const { period } = to12HourFormat(parsedTime.value.hours);
-            selectedPeriod.value = period;
-          }
+        if (isOpen.value) {
+          syncSelectionFromActiveValue();
         }
       }
     }
@@ -594,7 +588,6 @@ var TimePicker = defineComponent({
                   "div",
                   { class: timePickerColumnListClasses },
                   hoursList.value.map((hour) => {
-                    const displayHour = props.format === "12" ? hour : hour;
                     const hours24 = props.format === "12" ? to24HourFormat(hour, selectedPeriod.value) : hour;
                     const isSelected = selectedHours.value === hours24;
                     const isDisabled = isHourDisabled(hour);
@@ -608,14 +601,14 @@ var TimePicker = defineComponent({
                         onClick: () => selectHour(hour),
                         "data-tiger-timepicker-unit": "hour",
                         "aria-label": getTimePickerOptionAriaLabel(
-                          displayHour,
+                          hour,
                           "hour",
                           props.locale,
                           props.labels
                         ),
                         "aria-selected": isSelected
                       },
-                      displayHour.toString().padStart(2, "0")
+                      hour.toString().padStart(2, "0")
                     );
                   })
                 )