@valaxyjs/devtools 0.23.3 → 0.23.5

package/dist/client/assets/{index-B3LlV-qy.js → index-Ch6xFAPn.js}

@@ -1,5 +1,5 @@
-import { s as script$n, R as Ripple, c as cn, a as script$o, b as script$p, d as axios, P as Pe, g as ge } from './splitpanes.es-DzeLiV6K.js';
-import { g as getAppWindow, i as isNotEmpty, B as BaseStyle, r as resolveDirective, w as withDirectives, c as createElementBlock, o as openBlock, a as createBaseVNode, b as renderSlot, n as normalizeClass, d as createCommentVNode, m as mergeProps, t as toDisplayString, e as equals, f as resolveFieldData, h as resolveComponent, F as Fragment, j as renderList, k as createBlock, l as createSlots, p as withCtx, q as defineComponent, u as useModel, s as ref, v as watch, x as createVNode, y as unref, _ as _export_sfc, z as createTextVNode, A as contains, C as getScrollableParents, E as EventBus, D as isClient, T as Teleport, G as setAttribute, H as localeComparator, I as getFocusableElements, J as find, K as findSingle, L as getIndex, M as getAttribute, N as relativePosition, O as getOuterWidth, P as absolutePosition, Q as isTouchDevice, R as addStyle, S as normalizeStyle, U as resolveDynamicComponent, V as Transition, W as vShow, X as withKeys, Y as clearSelection, Z as getSelection, $ as toHandlers, a0 as useI18n, a1 as dayjs, a2 as clientPageData, a3 as activePath, a4 as toRaw, a5 as pageData, a6 as onMounted, a7 as rpc, a8 as getDefaultExportFromCjs, a9 as useScroll, aa as postList, ab as isStaticMode } from './index-BJpUDkpC.js';
+import { s as script$n, R as Ripple, c as cn, a as script$o, b as script$p, d as axios, P as Pe, g as ge } from './splitpanes.es-Cne9xE0z.js';
+import { g as getAppWindow, i as isNotEmpty, c as css, B as BaseStyle, r as resolveDirective, w as withDirectives, a as createElementBlock, o as openBlock, b as createBaseVNode, d as renderSlot, n as normalizeClass, e as createCommentVNode, m as mergeProps, t as toDisplayString, f as equals, h as resolveFieldData, j as resolveComponent, F as Fragment, k as renderList, l as createBlock, p as createSlots, q as withCtx, s as defineComponent, u as useModel, v as ref, x as watch, y as createVNode, z as unref, _ as _export_sfc, A as createTextVNode, C as contains, D as getScrollableParents, E as EventBus, G as isClient, T as Teleport, H as setAttribute, I as localeComparator, J as getFocusableElements, K as find, L as findSingle, M as getIndex, N as getAttribute, O as relativePosition, P as getOuterWidth, Q as absolutePosition, R as isTouchDevice, S as addStyle, U as normalizeStyle, V as resolveDynamicComponent, W as Transition, X as vShow, Y as withKeys, Z as clearSelection, $ as getSelection, a0 as toHandlers, a1 as useI18n, a2 as dayjs, a3 as clientPageData, a4 as toRaw, a5 as pageData, a6 as activePath, a7 as onMounted, a8 as rpc, a9 as getDefaultExportFromCjs, aa as computed, ab as devtoolsRouter, ac as useScroll, ad as postList, ae as isStaticMode } from './index-C08qRPwv.js';
 
 // src/zindex/index.ts
 function handler() {
@@ -96,7 +96,7 @@ var script$m = {
   },
   data: function data() {
     return {
-      d_value: this.defaultValue || this.modelValue
+      d_value: this.defaultValue !== undefined ? this.defaultValue : this.modelValue
     };
   },
   watch: {
@@ -199,7 +199,122 @@ var script$m = {
 
 /* Injected with object hook! */
 
-var style$7=({dt:o})=>`\n.p-togglebutton {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    overflow: hidden;\n    position: relative;\n    color: ${o("togglebutton.color")};\n    background: ${o("togglebutton.background")};\n    border: 1px solid ${o("togglebutton.border.color")};\n    padding: ${o("togglebutton.padding")};\n    font-size: 1rem;\n    font-family: inherit;\n    font-feature-settings: inherit;\n    transition: background ${o("togglebutton.transition.duration")}, color ${o("togglebutton.transition.duration")}, border-color ${o("togglebutton.transition.duration")},\n        outline-color ${o("togglebutton.transition.duration")}, box-shadow ${o("togglebutton.transition.duration")};\n    border-radius: ${o("togglebutton.border.radius")};\n    outline-color: transparent;\n    font-weight: ${o("togglebutton.font.weight")};\n}\n\n.p-togglebutton-content {\n    display: inline-flex;\n    flex: 1 1 auto;\n    align-items: center;\n    justify-content: center;\n    gap: ${o("togglebutton.gap")};\n    padding: ${o("togglebutton.content.padding")};\n    background: transparent;\n    border-radius: ${o("togglebutton.content.border.radius")};\n    transition: background ${o("togglebutton.transition.duration")}, color ${o("togglebutton.transition.duration")}, border-color ${o("togglebutton.transition.duration")},\n            outline-color ${o("togglebutton.transition.duration")}, box-shadow ${o("togglebutton.transition.duration")};\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n    background: ${o("togglebutton.hover.background")};\n    color: ${o("togglebutton.hover.color")};\n}\n\n.p-togglebutton.p-togglebutton-checked {\n    background: ${o("togglebutton.checked.background")};\n    border-color: ${o("togglebutton.checked.border.color")};\n    color: ${o("togglebutton.checked.color")};\n}\n\n.p-togglebutton-checked .p-togglebutton-content {\n    background: ${o("togglebutton.content.checked.background")};\n    box-shadow: ${o("togglebutton.content.checked.shadow")};\n}\n\n.p-togglebutton:focus-visible {\n    box-shadow: ${o("togglebutton.focus.ring.shadow")};\n    outline: ${o("togglebutton.focus.ring.width")} ${o("togglebutton.focus.ring.style")} ${o("togglebutton.focus.ring.color")};\n    outline-offset: ${o("togglebutton.focus.ring.offset")};\n}\n\n.p-togglebutton.p-invalid {\n    border-color: ${o("togglebutton.invalid.border.color")};\n}\n\n.p-togglebutton:disabled {\n    opacity: 1;\n    cursor: default;\n    background: ${o("togglebutton.disabled.background")};\n    border-color: ${o("togglebutton.disabled.border.color")};\n    color: ${o("togglebutton.disabled.color")};\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n    position: relative;\n    transition: none;\n}\n\n.p-togglebutton-icon {\n    color: ${o("togglebutton.icon.color")};\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n    color: ${o("togglebutton.icon.hover.color")};\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n    color: ${o("togglebutton.icon.checked.color")};\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n    color: ${o("togglebutton.icon.disabled.color")};\n}\n\n.p-togglebutton-sm {\n    padding: ${o("togglebutton.sm.padding")};\n    font-size: ${o("togglebutton.sm.font.size")};\n}\n\n.p-togglebutton-sm .p-togglebutton-content {\n    padding: ${o("togglebutton.content.sm.padding")};\n}\n\n.p-togglebutton-lg {\n    padding: ${o("togglebutton.lg.padding")};\n    font-size: ${o("togglebutton.lg.font.size")};\n}\n\n.p-togglebutton-lg .p-togglebutton-content {\n    padding: ${o("togglebutton.content.lg.padding")};\n}\n`;/* Injected with object hook! */
+var style$7=css`
+    .p-togglebutton {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+        overflow: hidden;
+        position: relative;
+        color: dt('togglebutton.color');
+        background: dt('togglebutton.background');
+        border: 1px solid dt('togglebutton.border.color');
+        padding: dt('togglebutton.padding');
+        font-size: 1rem;
+        font-family: inherit;
+        font-feature-settings: inherit;
+        transition:
+            background dt('togglebutton.transition.duration'),
+            color dt('togglebutton.transition.duration'),
+            border-color dt('togglebutton.transition.duration'),
+            outline-color dt('togglebutton.transition.duration'),
+            box-shadow dt('togglebutton.transition.duration');
+        border-radius: dt('togglebutton.border.radius');
+        outline-color: transparent;
+        font-weight: dt('togglebutton.font.weight');
+    }
+
+    .p-togglebutton-content {
+        display: inline-flex;
+        flex: 1 1 auto;
+        align-items: center;
+        justify-content: center;
+        gap: dt('togglebutton.gap');
+        padding: dt('togglebutton.content.padding');
+        background: transparent;
+        border-radius: dt('togglebutton.content.border.radius');
+        transition:
+            background dt('togglebutton.transition.duration'),
+            color dt('togglebutton.transition.duration'),
+            border-color dt('togglebutton.transition.duration'),
+            outline-color dt('togglebutton.transition.duration'),
+            box-shadow dt('togglebutton.transition.duration');
+    }
+
+    .p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
+        background: dt('togglebutton.hover.background');
+        color: dt('togglebutton.hover.color');
+    }
+
+    .p-togglebutton.p-togglebutton-checked {
+        background: dt('togglebutton.checked.background');
+        border-color: dt('togglebutton.checked.border.color');
+        color: dt('togglebutton.checked.color');
+    }
+
+    .p-togglebutton-checked .p-togglebutton-content {
+        background: dt('togglebutton.content.checked.background');
+        box-shadow: dt('togglebutton.content.checked.shadow');
+    }
+
+    .p-togglebutton:focus-visible {
+        box-shadow: dt('togglebutton.focus.ring.shadow');
+        outline: dt('togglebutton.focus.ring.width') dt('togglebutton.focus.ring.style') dt('togglebutton.focus.ring.color');
+        outline-offset: dt('togglebutton.focus.ring.offset');
+    }
+
+    .p-togglebutton.p-invalid {
+        border-color: dt('togglebutton.invalid.border.color');
+    }
+
+    .p-togglebutton:disabled {
+        opacity: 1;
+        cursor: default;
+        background: dt('togglebutton.disabled.background');
+        border-color: dt('togglebutton.disabled.border.color');
+        color: dt('togglebutton.disabled.color');
+    }
+
+    .p-togglebutton-label,
+    .p-togglebutton-icon {
+        position: relative;
+        transition: none;
+    }
+
+    .p-togglebutton-icon {
+        color: dt('togglebutton.icon.color');
+    }
+
+    .p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {
+        color: dt('togglebutton.icon.hover.color');
+    }
+
+    .p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {
+        color: dt('togglebutton.icon.checked.color');
+    }
+
+    .p-togglebutton:disabled .p-togglebutton-icon {
+        color: dt('togglebutton.icon.disabled.color');
+    }
+
+    .p-togglebutton-sm {
+        padding: dt('togglebutton.sm.padding');
+        font-size: dt('togglebutton.sm.font.size');
+    }
+
+    .p-togglebutton-sm .p-togglebutton-content {
+        padding: dt('togglebutton.content.sm.padding');
+    }
+
+    .p-togglebutton-lg {
+        padding: dt('togglebutton.lg.padding');
+        font-size: dt('togglebutton.lg.font.size');
+    }
+
+    .p-togglebutton-lg .p-togglebutton-content {
+        padding: dt('togglebutton.content.lg.padding');
+    }
+`;/* Injected with object hook! */
 
 var classes$7 = {
   root: function root(_ref) {
@@ -325,8 +440,8 @@ var script$l = {
   }
 };
 
-var _hoisted_1$d = ["tabindex", "disabled", "aria-pressed", "aria-label", "aria-labelledby", "data-p-checked", "data-p-disabled", "data-p"];
-var _hoisted_2$7 = ["data-p"];
+var _hoisted_1$e = ["tabindex", "disabled", "aria-pressed", "aria-label", "aria-labelledby", "data-p-checked", "data-p-disabled", "data-p"];
+var _hoisted_2$8 = ["data-p"];
 function render$j(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_ripple = resolveDirective("ripple");
   return withDirectives((openBlock(), createElementBlock("button", mergeProps({
@@ -363,7 +478,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
     }), createBaseVNode("span", mergeProps({
       "class": _ctx.cx('label')
     }, $options.getPTOptions('label')), toDisplayString($options.label), 17)];
-  })], 16, _hoisted_2$7)], 16, _hoisted_1$d)), [[_directive_ripple]]);
+  })], 16, _hoisted_2$8)], 16, _hoisted_1$e)), [[_directive_ripple]]);
 }
 
 script$l.render = render$j;
@@ -371,7 +486,41 @@ script$l.render = render$j;
 
 /* Injected with object hook! */
 
-var style$6=({dt:t})=>`\n.p-selectbutton {\n    display: inline-flex;\n    user-select: none;\n    vertical-align: bottom;\n    outline-color: transparent;\n    border-radius: ${t("selectbutton.border.radius")};\n}\n\n.p-selectbutton .p-togglebutton {\n    border-radius: 0;\n    border-width: 1px 1px 1px 0;\n}\n\n.p-selectbutton .p-togglebutton:focus-visible {\n    position: relative;\n    z-index: 1;\n}\n\n.p-selectbutton .p-togglebutton:first-child {\n    border-inline-start-width: 1px;\n    border-start-start-radius: ${t("selectbutton.border.radius")};\n    border-end-start-radius: ${t("selectbutton.border.radius")};\n}\n\n.p-selectbutton .p-togglebutton:last-child {\n    border-start-end-radius: ${t("selectbutton.border.radius")};\n    border-end-end-radius: ${t("selectbutton.border.radius")};\n}\n\n.p-selectbutton.p-invalid {\n    outline: 1px solid ${t("selectbutton.invalid.border.color")};\n    outline-offset: 0;\n}\n`;/* Injected with object hook! */
+var style$6=css`
+    .p-selectbutton {
+        display: inline-flex;
+        user-select: none;
+        vertical-align: bottom;
+        outline-color: transparent;
+        border-radius: dt('selectbutton.border.radius');
+    }
+
+    .p-selectbutton .p-togglebutton {
+        border-radius: 0;
+        border-width: 1px 1px 1px 0;
+    }
+
+    .p-selectbutton .p-togglebutton:focus-visible {
+        position: relative;
+        z-index: 1;
+    }
+
+    .p-selectbutton .p-togglebutton:first-child {
+        border-inline-start-width: 1px;
+        border-start-start-radius: dt('selectbutton.border.radius');
+        border-end-start-radius: dt('selectbutton.border.radius');
+    }
+
+    .p-selectbutton .p-togglebutton:last-child {
+        border-start-end-radius: dt('selectbutton.border.radius');
+        border-end-end-radius: dt('selectbutton.border.radius');
+    }
+
+    .p-selectbutton.p-invalid {
+        outline: 1px solid dt('selectbutton.invalid.border.color');
+        outline-offset: 0;
+    }
+`;/* Injected with object hook! */
 
 var classes$6 = {
   root: function root(_ref) {
@@ -528,7 +677,7 @@ var script$k = {
   }
 };
 
-var _hoisted_1$c = ["aria-labelledby", "data-p"];
+var _hoisted_1$d = ["aria-labelledby", "data-p"];
 function render$i(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ToggleButton = resolveComponent("ToggleButton");
   return openBlock(), createElementBlock("div", mergeProps({
@@ -567,7 +716,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       key: "0"
     } : undefined]), 1032, ["modelValue", "onLabel", "offLabel", "disabled", "unstyled", "size", "readonly", "onChange", "pt"]);
-  }), 128))], 16, _hoisted_1$c);
+  }), 128))], 16, _hoisted_1$d);
 }
 
 script$k.render = render$i;
@@ -575,9 +724,9 @@ script$k.render = render$i;
 
 /* Injected with object hook! */
 
-const _hoisted_1$b = { class: "inline-flex gap-1 items-center justify-center" };
-const _hoisted_2$6 = { class: "text-sm" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = { class: "inline-flex gap-1 items-center justify-center" };
+const _hoisted_2$7 = { class: "text-sm" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "VDFmExcerptType",
   props: {
     "excerptType": {
@@ -602,7 +751,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       excerptType.value = e.value.value;
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         createVNode(unref(script$k), {
           "model-value": curOption.value,
           options: options.value,
@@ -615,7 +764,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             createBaseVNode("i", {
               class: normalizeClass(slotProps.option.icon)
             }, null, 2),
-            createBaseVNode("span", _hoisted_2$6, toDisplayString(slotProps.option.value), 1)
+            createBaseVNode("span", _hoisted_2$7, toDisplayString(slotProps.option.value), 1)
           ]),
           _: 1
         }, 8, ["model-value", "options"])
@@ -626,7 +775,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 
 /* Injected with object hook! */
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "VDPostCategories",
   props: {
     categories: {}
@@ -657,7 +806,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           }, null, -1)),
           createBaseVNode("span", null, toDisplayString(Array.isArray(_ctx.categories) ? _ctx.categories.join(" > ") : _ctx.categories), 1)
         ]),
-        _: 1
+        _: 1,
+        __: [0]
       }, 8, ["to"]);
     };
   }
@@ -665,21 +815,49 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 
 /* Injected with object hook! */
 
-/* unplugin-vue-components disabled */const _sfc_main$5 = {  };
+/* unplugin-vue-components disabled */const _sfc_main$7 = {  };
 
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   class: "vd-tag inline-flex border rounded text-xs cursor-pointer transition",
   hover: "text-blue-500",
   p: "x-2 y-1"
 };
 
 function _sfc_render$1(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$b, [
     _cache[0] || (_cache[0] = createTextVNode(" # ")),
     renderSlot(_ctx.$slots, "default")
   ]))
 }
-const __unplugin_components_0 = /*#__PURE__*/_export_sfc(_sfc_main$5, [['render',_sfc_render$1]]);
+const __unplugin_components_1 = /*#__PURE__*/_export_sfc(_sfc_main$7, [['render',_sfc_render$1]]);
+/* Injected with object hook! */
+
+const _hoisted_1$a = { class: "flex gap-2 text-sm min-h-8" };
+const _hoisted_2$6 = { class: "w-32 flex items-center h-8" };
+const _hoisted_3$6 = { class: "inline-flex items-center w-full min-h-8" };
+const _hoisted_4$4 = { class: "px-2 py-1 bg-gray-1 rounded text-xs dark:bg-dark" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "VDFormItem",
+  props: {
+    label: {},
+    value: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", _hoisted_1$a, [
+        createBaseVNode("div", _hoisted_2$6, [
+          createBaseVNode("strong", null, toDisplayString(_ctx.label), 1)
+        ]),
+        createBaseVNode("div", _hoisted_3$6, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createBaseVNode("code", _hoisted_4$4, toDisplayString(_ctx.value), 1)
+          ])
+        ])
+      ]);
+    };
+  }
+});
+
 /* Injected with object hook! */
 
 const LogLevels = {
@@ -1350,7 +1528,146 @@ var script$h = {
 
 /* Injected with object hook! */
 
-var style$5=({dt:c})=>`\n.p-checkbox {\n    position: relative;\n    display: inline-flex;\n    user-select: none;\n    vertical-align: bottom;\n    width: ${c("checkbox.width")};\n    height: ${c("checkbox.height")};\n}\n\n.p-checkbox-input {\n    cursor: pointer;\n    appearance: none;\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: 1;\n    outline: 0 none;\n    border: 1px solid transparent;\n    border-radius: ${c("checkbox.border.radius")};\n}\n\n.p-checkbox-box {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: ${c("checkbox.border.radius")};\n    border: 1px solid ${c("checkbox.border.color")};\n    background: ${c("checkbox.background")};\n    width: ${c("checkbox.width")};\n    height: ${c("checkbox.height")};\n    transition: background ${c("checkbox.transition.duration")}, color ${c("checkbox.transition.duration")}, border-color ${c("checkbox.transition.duration")}, box-shadow ${c("checkbox.transition.duration")}, outline-color ${c("checkbox.transition.duration")};\n    outline-color: transparent;\n    box-shadow: ${c("checkbox.shadow")};\n}\n\n.p-checkbox-icon {\n    transition-duration: ${c("checkbox.transition.duration")};\n    color: ${c("checkbox.icon.color")};\n    font-size: ${c("checkbox.icon.size")};\n    width: ${c("checkbox.icon.size")};\n    height: ${c("checkbox.icon.size")};\n}\n\n.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {\n    border-color: ${c("checkbox.hover.border.color")};\n}\n\n.p-checkbox-checked .p-checkbox-box {\n    border-color: ${c("checkbox.checked.border.color")};\n    background: ${c("checkbox.checked.background")};\n}\n\n.p-checkbox-checked .p-checkbox-icon {\n    color: ${c("checkbox.icon.checked.color")};\n}\n\n.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {\n    background: ${c("checkbox.checked.hover.background")};\n    border-color: ${c("checkbox.checked.hover.border.color")};\n}\n\n.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {\n    color: ${c("checkbox.icon.checked.hover.color")};\n}\n\n.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {\n    border-color: ${c("checkbox.focus.border.color")};\n    box-shadow: ${c("checkbox.focus.ring.shadow")};\n    outline: ${c("checkbox.focus.ring.width")} ${c("checkbox.focus.ring.style")} ${c("checkbox.focus.ring.color")};\n    outline-offset: ${c("checkbox.focus.ring.offset")};\n}\n\n.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {\n    border-color: ${c("checkbox.checked.focus.border.color")};\n}\n\n.p-checkbox.p-invalid > .p-checkbox-box {\n    border-color: ${c("checkbox.invalid.border.color")};\n}\n\n.p-checkbox.p-variant-filled .p-checkbox-box {\n    background: ${c("checkbox.filled.background")};\n}\n\n.p-checkbox-checked.p-variant-filled .p-checkbox-box {\n    background: ${c("checkbox.checked.background")};\n}\n\n.p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {\n    background: ${c("checkbox.checked.hover.background")};\n}\n\n.p-checkbox.p-disabled {\n    opacity: 1;\n}\n\n.p-checkbox.p-disabled .p-checkbox-box {\n    background: ${c("checkbox.disabled.background")};\n    border-color: ${c("checkbox.checked.disabled.border.color")};\n}\n\n.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {\n    color: ${c("checkbox.icon.disabled.color")};\n}\n\n.p-checkbox-sm,\n.p-checkbox-sm .p-checkbox-box {\n    width: ${c("checkbox.sm.width")};\n    height: ${c("checkbox.sm.height")};\n}\n\n.p-checkbox-sm .p-checkbox-icon {\n    font-size: ${c("checkbox.icon.sm.size")};\n    width: ${c("checkbox.icon.sm.size")};\n    height: ${c("checkbox.icon.sm.size")};\n}\n\n.p-checkbox-lg,\n.p-checkbox-lg .p-checkbox-box {\n    width: ${c("checkbox.lg.width")};\n    height: ${c("checkbox.lg.height")};\n}\n\n.p-checkbox-lg .p-checkbox-icon {\n    font-size: ${c("checkbox.icon.lg.size")};\n    width: ${c("checkbox.icon.lg.size")};\n    height: ${c("checkbox.icon.lg.size")};\n}\n`;/* Injected with object hook! */
+var style$5=css`
+    .p-checkbox {
+        position: relative;
+        display: inline-flex;
+        user-select: none;
+        vertical-align: bottom;
+        width: dt('checkbox.width');
+        height: dt('checkbox.height');
+    }
+
+    .p-checkbox-input {
+        cursor: pointer;
+        appearance: none;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 1;
+        outline: 0 none;
+        border: 1px solid transparent;
+        border-radius: dt('checkbox.border.radius');
+    }
+
+    .p-checkbox-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: dt('checkbox.border.radius');
+        border: 1px solid dt('checkbox.border.color');
+        background: dt('checkbox.background');
+        width: dt('checkbox.width');
+        height: dt('checkbox.height');
+        transition:
+            background dt('checkbox.transition.duration'),
+            color dt('checkbox.transition.duration'),
+            border-color dt('checkbox.transition.duration'),
+            box-shadow dt('checkbox.transition.duration'),
+            outline-color dt('checkbox.transition.duration');
+        outline-color: transparent;
+        box-shadow: dt('checkbox.shadow');
+    }
+
+    .p-checkbox-icon {
+        transition-duration: dt('checkbox.transition.duration');
+        color: dt('checkbox.icon.color');
+        font-size: dt('checkbox.icon.size');
+        width: dt('checkbox.icon.size');
+        height: dt('checkbox.icon.size');
+    }
+
+    .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+        border-color: dt('checkbox.hover.border.color');
+    }
+
+    .p-checkbox-checked .p-checkbox-box {
+        border-color: dt('checkbox.checked.border.color');
+        background: dt('checkbox.checked.background');
+    }
+
+    .p-checkbox-checked .p-checkbox-icon {
+        color: dt('checkbox.icon.checked.color');
+    }
+
+    .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+        background: dt('checkbox.checked.hover.background');
+        border-color: dt('checkbox.checked.hover.border.color');
+    }
+
+    .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {
+        color: dt('checkbox.icon.checked.hover.color');
+    }
+
+    .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+        border-color: dt('checkbox.focus.border.color');
+        box-shadow: dt('checkbox.focus.ring.shadow');
+        outline: dt('checkbox.focus.ring.width') dt('checkbox.focus.ring.style') dt('checkbox.focus.ring.color');
+        outline-offset: dt('checkbox.focus.ring.offset');
+    }
+
+    .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+        border-color: dt('checkbox.checked.focus.border.color');
+    }
+
+    .p-checkbox.p-invalid > .p-checkbox-box {
+        border-color: dt('checkbox.invalid.border.color');
+    }
+
+    .p-checkbox.p-variant-filled .p-checkbox-box {
+        background: dt('checkbox.filled.background');
+    }
+
+    .p-checkbox-checked.p-variant-filled .p-checkbox-box {
+        background: dt('checkbox.checked.background');
+    }
+
+    .p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+        background: dt('checkbox.checked.hover.background');
+    }
+
+    .p-checkbox.p-disabled {
+        opacity: 1;
+    }
+
+    .p-checkbox.p-disabled .p-checkbox-box {
+        background: dt('checkbox.disabled.background');
+        border-color: dt('checkbox.checked.disabled.border.color');
+    }
+
+    .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
+        color: dt('checkbox.icon.disabled.color');
+    }
+
+    .p-checkbox-sm,
+    .p-checkbox-sm .p-checkbox-box {
+        width: dt('checkbox.sm.width');
+        height: dt('checkbox.sm.height');
+    }
+
+    .p-checkbox-sm .p-checkbox-icon {
+        font-size: dt('checkbox.icon.sm.size');
+        width: dt('checkbox.icon.sm.size');
+        height: dt('checkbox.icon.sm.size');
+    }
+
+    .p-checkbox-lg,
+    .p-checkbox-lg .p-checkbox-box {
+        width: dt('checkbox.lg.width');
+        height: dt('checkbox.lg.height');
+    }
+
+    .p-checkbox-lg .p-checkbox-icon {
+        font-size: dt('checkbox.icon.lg.size');
+        width: dt('checkbox.icon.lg.size');
+        height: dt('checkbox.icon.lg.size');
+    }
+`;/* Injected with object hook! */
 
 var classes$5 = {
   root: function root(_ref) {
@@ -1757,7 +2074,85 @@ script$b.render = render$a;
 
 /* Injected with object hook! */
 
-var style$4=({dt:n})=>`\n.p-inputtext {\n    font-family: inherit;\n    font-feature-settings: inherit;\n    font-size: 1rem;\n    color: ${n("inputtext.color")};\n    background: ${n("inputtext.background")};\n    padding-block: ${n("inputtext.padding.y")};\n    padding-inline: ${n("inputtext.padding.x")};\n    border: 1px solid ${n("inputtext.border.color")};\n    transition: background ${n("inputtext.transition.duration")}, color ${n("inputtext.transition.duration")}, border-color ${n("inputtext.transition.duration")}, outline-color ${n("inputtext.transition.duration")}, box-shadow ${n("inputtext.transition.duration")};\n    appearance: none;\n    border-radius: ${n("inputtext.border.radius")};\n    outline-color: transparent;\n    box-shadow: ${n("inputtext.shadow")};\n}\n\n.p-inputtext:enabled:hover {\n    border-color: ${n("inputtext.hover.border.color")};\n}\n\n.p-inputtext:enabled:focus {\n    border-color: ${n("inputtext.focus.border.color")};\n    box-shadow: ${n("inputtext.focus.ring.shadow")};\n    outline: ${n("inputtext.focus.ring.width")} ${n("inputtext.focus.ring.style")} ${n("inputtext.focus.ring.color")};\n    outline-offset: ${n("inputtext.focus.ring.offset")};\n}\n\n.p-inputtext.p-invalid {\n    border-color: ${n("inputtext.invalid.border.color")};\n}\n\n.p-inputtext.p-variant-filled {\n    background: ${n("inputtext.filled.background")};\n}\n\n.p-inputtext.p-variant-filled:enabled:hover {\n    background: ${n("inputtext.filled.hover.background")};\n}\n\n.p-inputtext.p-variant-filled:enabled:focus {\n    background: ${n("inputtext.filled.focus.background")};\n}\n\n.p-inputtext:disabled {\n    opacity: 1;\n    background: ${n("inputtext.disabled.background")};\n    color: ${n("inputtext.disabled.color")};\n}\n\n.p-inputtext::placeholder {\n    color: ${n("inputtext.placeholder.color")};\n}\n\n.p-inputtext.p-invalid::placeholder {\n    color: ${n("inputtext.invalid.placeholder.color")};\n}\n\n.p-inputtext-sm {\n    font-size: ${n("inputtext.sm.font.size")};\n    padding-block: ${n("inputtext.sm.padding.y")};\n    padding-inline: ${n("inputtext.sm.padding.x")};\n}\n\n.p-inputtext-lg {\n    font-size: ${n("inputtext.lg.font.size")};\n    padding-block: ${n("inputtext.lg.padding.y")};\n    padding-inline: ${n("inputtext.lg.padding.x")};\n}\n\n.p-inputtext-fluid {\n    width: 100%;\n}\n`;/* Injected with object hook! */
+var style$4=css`
+    .p-inputtext {
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-size: 1rem;
+        color: dt('inputtext.color');
+        background: dt('inputtext.background');
+        padding-block: dt('inputtext.padding.y');
+        padding-inline: dt('inputtext.padding.x');
+        border: 1px solid dt('inputtext.border.color');
+        transition:
+            background dt('inputtext.transition.duration'),
+            color dt('inputtext.transition.duration'),
+            border-color dt('inputtext.transition.duration'),
+            outline-color dt('inputtext.transition.duration'),
+            box-shadow dt('inputtext.transition.duration');
+        appearance: none;
+        border-radius: dt('inputtext.border.radius');
+        outline-color: transparent;
+        box-shadow: dt('inputtext.shadow');
+    }
+
+    .p-inputtext:enabled:hover {
+        border-color: dt('inputtext.hover.border.color');
+    }
+
+    .p-inputtext:enabled:focus {
+        border-color: dt('inputtext.focus.border.color');
+        box-shadow: dt('inputtext.focus.ring.shadow');
+        outline: dt('inputtext.focus.ring.width') dt('inputtext.focus.ring.style') dt('inputtext.focus.ring.color');
+        outline-offset: dt('inputtext.focus.ring.offset');
+    }
+
+    .p-inputtext.p-invalid {
+        border-color: dt('inputtext.invalid.border.color');
+    }
+
+    .p-inputtext.p-variant-filled {
+        background: dt('inputtext.filled.background');
+    }
+
+    .p-inputtext.p-variant-filled:enabled:hover {
+        background: dt('inputtext.filled.hover.background');
+    }
+
+    .p-inputtext.p-variant-filled:enabled:focus {
+        background: dt('inputtext.filled.focus.background');
+    }
+
+    .p-inputtext:disabled {
+        opacity: 1;
+        background: dt('inputtext.disabled.background');
+        color: dt('inputtext.disabled.color');
+    }
+
+    .p-inputtext::placeholder {
+        color: dt('inputtext.placeholder.color');
+    }
+
+    .p-inputtext.p-invalid::placeholder {
+        color: dt('inputtext.invalid.placeholder.color');
+    }
+
+    .p-inputtext-sm {
+        font-size: dt('inputtext.sm.font.size');
+        padding-block: dt('inputtext.sm.padding.y');
+        padding-inline: dt('inputtext.sm.padding.x');
+    }
+
+    .p-inputtext-lg {
+        font-size: dt('inputtext.lg.font.size');
+        padding-block: dt('inputtext.lg.padding.y');
+        padding-inline: dt('inputtext.lg.padding.x');
+    }
+
+    .p-inputtext-fluid {
+        width: 100%;
+    }
+`;/* Injected with object hook! */
 
 var classes$4 = {
   root: function root(_ref) {
@@ -1893,7 +2288,423 @@ script$9.render = render$8;
 
 /* Injected with object hook! */
 
-var style$3=({dt:e})=>`\n.p-datepicker {\n    display: inline-flex;\n    max-width: 100%;\n}\n\n.p-datepicker-input {\n    flex: 1 1 auto;\n    width: 1%;\n}\n\n.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n}\n\n.p-datepicker-dropdown {\n    cursor: pointer;\n    display: inline-flex;\n    user-select: none;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    width: ${e("datepicker.dropdown.width")};\n    border-start-end-radius: ${e("datepicker.dropdown.border.radius")};\n    border-end-end-radius: ${e("datepicker.dropdown.border.radius")};\n    background: ${e("datepicker.dropdown.background")};\n    border: 1px solid ${e("datepicker.dropdown.border.color")};\n    border-inline-start: 0 none;\n    color: ${e("datepicker.dropdown.color")};\n    transition: background ${e("datepicker.transition.duration")}, color ${e("datepicker.transition.duration")}, border-color ${e("datepicker.transition.duration")}, outline-color ${e("datepicker.transition.duration")};\n    outline-color: transparent;\n}\n\n.p-datepicker-dropdown:not(:disabled):hover {\n    background: ${e("datepicker.dropdown.hover.background")};\n    border-color: ${e("datepicker.dropdown.hover.border.color")};\n    color: ${e("datepicker.dropdown.hover.color")};\n}\n\n.p-datepicker-dropdown:not(:disabled):active {\n    background: ${e("datepicker.dropdown.active.background")};\n    border-color: ${e("datepicker.dropdown.active.border.color")};\n    color: ${e("datepicker.dropdown.active.color")};\n}\n\n.p-datepicker-dropdown:focus-visible {\n    box-shadow: ${e("datepicker.dropdown.focus.ring.shadow")};\n    outline: ${e("datepicker.dropdown.focus.ring.width")} ${e("datepicker.dropdown.focus.ring.style")} ${e("datepicker.dropdown.focus.ring.color")};\n    outline-offset: ${e("datepicker.dropdown.focus.ring.offset")};\n}\n\n.p-datepicker:has(.p-datepicker-input-icon-container) {\n    position: relative;\n}\n\n.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {\n    padding-inline-end: calc((${e("form.field.padding.x")} * 2) + ${e("icon.size")});\n}\n\n.p-datepicker-input-icon-container {\n    cursor: pointer;\n    position: absolute;\n    top: 50%;\n    inset-inline-end: ${e("form.field.padding.x")};\n    margin-block-start: calc(-1 * (${e("icon.size")} / 2));\n    color: ${e("datepicker.input.icon.color")};\n    line-height: 1;\n}\n\n.p-datepicker-fluid {\n    display: flex;\n}\n\n.p-datepicker-fluid .p-datepicker-input {\n    width: 1%;\n}\n\n.p-datepicker .p-datepicker-panel {\n    min-width: 100%;\n}\n\n.p-datepicker-panel {\n    width: auto;\n    padding: ${e("datepicker.panel.padding")};\n    background: ${e("datepicker.panel.background")};\n    color: ${e("datepicker.panel.color")};\n    border: 1px solid ${e("datepicker.panel.border.color")};\n    border-radius: ${e("datepicker.panel.border.radius")};\n    box-shadow: ${e("datepicker.panel.shadow")};\n}\n\n.p-datepicker-panel-inline {\n    display: inline-block;\n    overflow-x: auto;\n    box-shadow: none;\n}\n\n.p-datepicker-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: ${e("datepicker.header.padding")};\n    background: ${e("datepicker.header.background")};\n    color: ${e("datepicker.header.color")};\n    border-block-end: 1px solid ${e("datepicker.header.border.color")};\n}\n\n.p-datepicker-next-button:dir(rtl) {\n    order: -1;\n}\n\n.p-datepicker-prev-button:dir(rtl) {\n    order: 1;\n}\n\n.p-datepicker-title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: ${e("datepicker.title.gap")};\n    font-weight: ${e("datepicker.title.font.weight")};\n}\n\n.p-datepicker-select-year,\n.p-datepicker-select-month {\n    border: none;\n    background: transparent;\n    margin: 0;\n    cursor: pointer;\n    font-weight: inherit;\n    transition: background ${e("datepicker.transition.duration")}, color ${e("datepicker.transition.duration")}, border-color ${e("datepicker.transition.duration")}, outline-color ${e("datepicker.transition.duration")}, box-shadow ${e("datepicker.transition.duration")};\n}\n\n.p-datepicker-select-month {\n    padding: ${e("datepicker.select.month.padding")};\n    color: ${e("datepicker.select.month.color")};\n    border-radius: ${e("datepicker.select.month.border.radius")};\n}\n\n.p-datepicker-select-year {\n    padding: ${e("datepicker.select.year.padding")};\n    color: ${e("datepicker.select.year.color")};\n    border-radius: ${e("datepicker.select.year.border.radius")};\n}\n\n.p-datepicker-select-month:enabled:hover {\n    background: ${e("datepicker.select.month.hover.background")};\n    color: ${e("datepicker.select.month.hover.color")};\n}\n\n.p-datepicker-select-year:enabled:hover {\n    background: ${e("datepicker.select.year.hover.background")};\n    color: ${e("datepicker.select.year.hover.color")};\n}\n\n.p-datepicker-select-month:focus-visible,\n.p-datepicker-select-year:focus-visible {\n    box-shadow: ${e("datepicker.date.focus.ring.shadow")};\n    outline: ${e("datepicker.date.focus.ring.width")} ${e("datepicker.date.focus.ring.style")} ${e("datepicker.date.focus.ring.color")};\n    outline-offset: ${e("datepicker.date.focus.ring.offset")};\n}\n\n.p-datepicker-calendar-container {\n    display: flex;\n}\n\n.p-datepicker-calendar-container .p-datepicker-calendar {\n    flex: 1 1 auto;\n    border-inline-start: 1px solid ${e("datepicker.group.border.color")};\n    padding-inline-end: ${e("datepicker.group.gap")};\n    padding-inline-start: ${e("datepicker.group.gap")};\n}\n\n.p-datepicker-calendar-container .p-datepicker-calendar:first-child {\n    padding-inline-start: 0;\n    border-inline-start: 0 none;\n}\n\n.p-datepicker-calendar-container .p-datepicker-calendar:last-child {\n    padding-inline-end: 0;\n}\n\n.p-datepicker-day-view {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 1rem;\n    margin: ${e("datepicker.day.view.margin")};\n}\n\n.p-datepicker-weekday-cell {\n    padding: ${e("datepicker.week.day.padding")};\n}\n\n.p-datepicker-weekday {\n    font-weight: ${e("datepicker.week.day.font.weight")};\n    color: ${e("datepicker.week.day.color")};\n}\n\n.p-datepicker-day-cell {\n    padding: ${e("datepicker.date.padding")};\n}\n\n.p-datepicker-day {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    margin: 0 auto;\n    overflow: hidden;\n    position: relative;\n    width: ${e("datepicker.date.width")};\n    height: ${e("datepicker.date.height")};\n    border-radius: ${e("datepicker.date.border.radius")};\n    transition: background ${e("datepicker.transition.duration")}, color ${e("datepicker.transition.duration")}, border-color ${e("datepicker.transition.duration")}, box-shadow ${e("datepicker.transition.duration")}, outline-color ${e("datepicker.transition.duration")};\n    border: 1px solid transparent;\n    outline-color: transparent;\n    color: ${e("datepicker.date.color")};\n}\n\n.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {\n    background: ${e("datepicker.date.hover.background")};\n    color: ${e("datepicker.date.hover.color")};\n}\n\n.p-datepicker-day:focus-visible {\n    box-shadow: ${e("datepicker.date.focus.ring.shadow")};\n    outline: ${e("datepicker.date.focus.ring.width")} ${e("datepicker.date.focus.ring.style")} ${e("datepicker.date.focus.ring.color")};\n    outline-offset: ${e("datepicker.date.focus.ring.offset")};\n}\n\n.p-datepicker-day-selected {\n    background: ${e("datepicker.date.selected.background")};\n    color: ${e("datepicker.date.selected.color")};\n}\n\n.p-datepicker-day-selected-range {\n    background: ${e("datepicker.date.range.selected.background")};\n    color: ${e("datepicker.date.range.selected.color")};\n}\n\n.p-datepicker-today > .p-datepicker-day {\n    background: ${e("datepicker.today.background")};\n    color: ${e("datepicker.today.color")};\n}\n\n.p-datepicker-today > .p-datepicker-day-selected {\n    background: ${e("datepicker.date.selected.background")};\n    color: ${e("datepicker.date.selected.color")};\n}\n\n.p-datepicker-today > .p-datepicker-day-selected-range {\n    background: ${e("datepicker.date.range.selected.background")};\n    color: ${e("datepicker.date.range.selected.color")};\n}\n\n.p-datepicker-weeknumber {\n    text-align: center;\n}\n\n.p-datepicker-month-view {\n    margin: ${e("datepicker.month.view.margin")};\n}\n\n.p-datepicker-month {\n    width: 33.3%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n    padding: ${e("datepicker.month.padding")};\n    transition: background ${e("datepicker.transition.duration")}, color ${e("datepicker.transition.duration")}, border-color ${e("datepicker.transition.duration")}, box-shadow ${e("datepicker.transition.duration")}, outline-color ${e("datepicker.transition.duration")};\n    border-radius: ${e("datepicker.month.border.radius")};\n    outline-color: transparent;\n    color: ${e("datepicker.date.color")};\n}\n\n.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {\n    color: ${e("datepicker.date.hover.color")};\n    background: ${e("datepicker.date.hover.background")};\n}\n\n.p-datepicker-month-selected {\n    color: ${e("datepicker.date.selected.color")};\n    background: ${e("datepicker.date.selected.background")};\n}\n\n.p-datepicker-month:not(.p-disabled):focus-visible {\n    box-shadow: ${e("datepicker.date.focus.ring.shadow")};\n    outline: ${e("datepicker.date.focus.ring.width")} ${e("datepicker.date.focus.ring.style")} ${e("datepicker.date.focus.ring.color")};\n    outline-offset: ${e("datepicker.date.focus.ring.offset")};\n}\n\n.p-datepicker-year-view {\n    margin: ${e("datepicker.year.view.margin")};\n}\n\n.p-datepicker-year {\n    width: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n    padding: ${e("datepicker.year.padding")};\n    transition: background ${e("datepicker.transition.duration")}, color ${e("datepicker.transition.duration")}, border-color ${e("datepicker.transition.duration")}, box-shadow ${e("datepicker.transition.duration")}, outline-color ${e("datepicker.transition.duration")};\n    border-radius: ${e("datepicker.year.border.radius")};\n    outline-color: transparent;\n    color: ${e("datepicker.date.color")};\n}\n\n.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {\n    color: ${e("datepicker.date.hover.color")};\n    background: ${e("datepicker.date.hover.background")};\n}\n\n.p-datepicker-year-selected {\n    color: ${e("datepicker.date.selected.color")};\n    background: ${e("datepicker.date.selected.background")};\n}\n\n.p-datepicker-year:not(.p-disabled):focus-visible {\n    box-shadow: ${e("datepicker.date.focus.ring.shadow")};\n    outline: ${e("datepicker.date.focus.ring.width")} ${e("datepicker.date.focus.ring.style")} ${e("datepicker.date.focus.ring.color")};\n    outline-offset: ${e("datepicker.date.focus.ring.offset")};\n}\n\n.p-datepicker-buttonbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: ${e("datepicker.buttonbar.padding")};\n    border-block-start: 1px solid ${e("datepicker.buttonbar.border.color")};\n}\n\n.p-datepicker-buttonbar .p-button {\n    width: auto;\n}\n\n.p-datepicker-time-picker {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-block-start: 1px solid ${e("datepicker.time.picker.border.color")};\n    padding: 0;\n    gap: ${e("datepicker.time.picker.gap")};\n}\n\n.p-datepicker-calendar-container + .p-datepicker-time-picker {\n    padding: ${e("datepicker.time.picker.padding")};\n}\n\n.p-datepicker-time-picker > div {\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    gap: ${e("datepicker.time.picker.button.gap")};\n}\n\n.p-datepicker-time-picker span {\n    font-size: 1rem;\n}\n\n.p-datepicker-timeonly .p-datepicker-time-picker {\n    border-block-start: 0 none;\n}\n\n.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown {\n    width: ${e("datepicker.dropdown.sm.width")};\n}\n\n.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown .p-icon,\n.p-datepicker:has(.p-inputtext-sm) .p-datepicker-input-icon {\n    font-size: ${e("form.field.sm.font.size")};\n    width: ${e("form.field.sm.font.size")};\n    height: ${e("form.field.sm.font.size")};\n}\n\n.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown {\n    width: ${e("datepicker.dropdown.lg.width")};\n}\n\n.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown .p-icon,\n.p-datepicker:has(.p-inputtext-lg) .p-datepicker-input-icon {\n    font-size: ${e("form.field.lg.font.size")};\n    width: ${e("form.field.lg.font.size")};\n    height: ${e("form.field.lg.font.size")};\n}\n`;/* Injected with object hook! */
+var style$3=css`
+    .p-datepicker {
+        display: inline-flex;
+        max-width: 100%;
+    }
+
+    .p-datepicker-input {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+    }
+
+    .p-datepicker-dropdown {
+        cursor: pointer;
+        display: inline-flex;
+        user-select: none;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        width: dt('datepicker.dropdown.width');
+        border-start-end-radius: dt('datepicker.dropdown.border.radius');
+        border-end-end-radius: dt('datepicker.dropdown.border.radius');
+        background: dt('datepicker.dropdown.background');
+        border: 1px solid dt('datepicker.dropdown.border.color');
+        border-inline-start: 0 none;
+        color: dt('datepicker.dropdown.color');
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration');
+        outline-color: transparent;
+    }
+
+    .p-datepicker-dropdown:not(:disabled):hover {
+        background: dt('datepicker.dropdown.hover.background');
+        border-color: dt('datepicker.dropdown.hover.border.color');
+        color: dt('datepicker.dropdown.hover.color');
+    }
+
+    .p-datepicker-dropdown:not(:disabled):active {
+        background: dt('datepicker.dropdown.active.background');
+        border-color: dt('datepicker.dropdown.active.border.color');
+        color: dt('datepicker.dropdown.active.color');
+    }
+
+    .p-datepicker-dropdown:focus-visible {
+        box-shadow: dt('datepicker.dropdown.focus.ring.shadow');
+        outline: dt('datepicker.dropdown.focus.ring.width') dt('datepicker.dropdown.focus.ring.style') dt('datepicker.dropdown.focus.ring.color');
+        outline-offset: dt('datepicker.dropdown.focus.ring.offset');
+    }
+
+    .p-datepicker:has(.p-datepicker-input-icon-container) {
+        position: relative;
+    }
+
+    .p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
+        padding-inline-end: calc((dt('form.field.padding.x') * 2) + dt('icon.size'));
+    }
+
+    .p-datepicker-input-icon-container {
+        cursor: pointer;
+        position: absolute;
+        top: 50%;
+        inset-inline-end: dt('form.field.padding.x');
+        margin-block-start: calc(-1 * (dt('icon.size') / 2));
+        color: dt('datepicker.input.icon.color');
+        line-height: 1;
+    }
+
+    .p-datepicker-fluid {
+        display: flex;
+    }
+
+    .p-datepicker-fluid .p-datepicker-input {
+        width: 1%;
+    }
+
+    .p-datepicker .p-datepicker-panel {
+        min-width: 100%;
+    }
+
+    .p-datepicker-panel {
+        width: auto;
+        padding: dt('datepicker.panel.padding');
+        background: dt('datepicker.panel.background');
+        color: dt('datepicker.panel.color');
+        border: 1px solid dt('datepicker.panel.border.color');
+        border-radius: dt('datepicker.panel.border.radius');
+        box-shadow: dt('datepicker.panel.shadow');
+    }
+
+    .p-datepicker-panel-inline {
+        display: inline-block;
+        overflow-x: auto;
+        box-shadow: none;
+    }
+
+    .p-datepicker-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: dt('datepicker.header.padding');
+        background: dt('datepicker.header.background');
+        color: dt('datepicker.header.color');
+        border-block-end: 1px solid dt('datepicker.header.border.color');
+    }
+
+    .p-datepicker-next-button:dir(rtl) {
+        order: -1;
+    }
+
+    .p-datepicker-prev-button:dir(rtl) {
+        order: 1;
+    }
+
+    .p-datepicker-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: dt('datepicker.title.gap');
+        font-weight: dt('datepicker.title.font.weight');
+    }
+
+    .p-datepicker-select-year,
+    .p-datepicker-select-month {
+        border: none;
+        background: transparent;
+        margin: 0;
+        cursor: pointer;
+        font-weight: inherit;
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration'),
+            box-shadow dt('datepicker.transition.duration');
+    }
+
+    .p-datepicker-select-month {
+        padding: dt('datepicker.select.month.padding');
+        color: dt('datepicker.select.month.color');
+        border-radius: dt('datepicker.select.month.border.radius');
+    }
+
+    .p-datepicker-select-year {
+        padding: dt('datepicker.select.year.padding');
+        color: dt('datepicker.select.year.color');
+        border-radius: dt('datepicker.select.year.border.radius');
+    }
+
+    .p-datepicker-select-month:enabled:hover {
+        background: dt('datepicker.select.month.hover.background');
+        color: dt('datepicker.select.month.hover.color');
+    }
+
+    .p-datepicker-select-year:enabled:hover {
+        background: dt('datepicker.select.year.hover.background');
+        color: dt('datepicker.select.year.hover.color');
+    }
+
+    .p-datepicker-select-month:focus-visible,
+    .p-datepicker-select-year:focus-visible {
+        box-shadow: dt('datepicker.date.focus.ring.shadow');
+        outline: dt('datepicker.date.focus.ring.width') dt('datepicker.date.focus.ring.style') dt('datepicker.date.focus.ring.color');
+        outline-offset: dt('datepicker.date.focus.ring.offset');
+    }
+
+    .p-datepicker-calendar-container {
+        display: flex;
+    }
+
+    .p-datepicker-calendar-container .p-datepicker-calendar {
+        flex: 1 1 auto;
+        border-inline-start: 1px solid dt('datepicker.group.border.color');
+        padding-inline-end: dt('datepicker.group.gap');
+        padding-inline-start: dt('datepicker.group.gap');
+    }
+
+    .p-datepicker-calendar-container .p-datepicker-calendar:first-child {
+        padding-inline-start: 0;
+        border-inline-start: 0 none;
+    }
+
+    .p-datepicker-calendar-container .p-datepicker-calendar:last-child {
+        padding-inline-end: 0;
+    }
+
+    .p-datepicker-day-view {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 1rem;
+        margin: dt('datepicker.day.view.margin');
+    }
+
+    .p-datepicker-weekday-cell {
+        padding: dt('datepicker.week.day.padding');
+    }
+
+    .p-datepicker-weekday {
+        font-weight: dt('datepicker.week.day.font.weight');
+        color: dt('datepicker.week.day.color');
+    }
+
+    .p-datepicker-day-cell {
+        padding: dt('datepicker.date.padding');
+    }
+
+    .p-datepicker-day {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin: 0 auto;
+        overflow: hidden;
+        position: relative;
+        width: dt('datepicker.date.width');
+        height: dt('datepicker.date.height');
+        border-radius: dt('datepicker.date.border.radius');
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            box-shadow dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration');
+        border: 1px solid transparent;
+        outline-color: transparent;
+        color: dt('datepicker.date.color');
+    }
+
+    .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
+        background: dt('datepicker.date.hover.background');
+        color: dt('datepicker.date.hover.color');
+    }
+
+    .p-datepicker-day:focus-visible {
+        box-shadow: dt('datepicker.date.focus.ring.shadow');
+        outline: dt('datepicker.date.focus.ring.width') dt('datepicker.date.focus.ring.style') dt('datepicker.date.focus.ring.color');
+        outline-offset: dt('datepicker.date.focus.ring.offset');
+    }
+
+    .p-datepicker-day-selected {
+        background: dt('datepicker.date.selected.background');
+        color: dt('datepicker.date.selected.color');
+    }
+
+    .p-datepicker-day-selected-range {
+        background: dt('datepicker.date.range.selected.background');
+        color: dt('datepicker.date.range.selected.color');
+    }
+
+    .p-datepicker-today > .p-datepicker-day {
+        background: dt('datepicker.today.background');
+        color: dt('datepicker.today.color');
+    }
+
+    .p-datepicker-today > .p-datepicker-day-selected {
+        background: dt('datepicker.date.selected.background');
+        color: dt('datepicker.date.selected.color');
+    }
+
+    .p-datepicker-today > .p-datepicker-day-selected-range {
+        background: dt('datepicker.date.range.selected.background');
+        color: dt('datepicker.date.range.selected.color');
+    }
+
+    .p-datepicker-weeknumber {
+        text-align: center;
+    }
+
+    .p-datepicker-month-view {
+        margin: dt('datepicker.month.view.margin');
+    }
+
+    .p-datepicker-month {
+        width: 33.3%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+        padding: dt('datepicker.month.padding');
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            box-shadow dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration');
+        border-radius: dt('datepicker.month.border.radius');
+        outline-color: transparent;
+        color: dt('datepicker.date.color');
+    }
+
+    .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
+        color: dt('datepicker.date.hover.color');
+        background: dt('datepicker.date.hover.background');
+    }
+
+    .p-datepicker-month-selected {
+        color: dt('datepicker.date.selected.color');
+        background: dt('datepicker.date.selected.background');
+    }
+
+    .p-datepicker-month:not(.p-disabled):focus-visible {
+        box-shadow: dt('datepicker.date.focus.ring.shadow');
+        outline: dt('datepicker.date.focus.ring.width') dt('datepicker.date.focus.ring.style') dt('datepicker.date.focus.ring.color');
+        outline-offset: dt('datepicker.date.focus.ring.offset');
+    }
+
+    .p-datepicker-year-view {
+        margin: dt('datepicker.year.view.margin');
+    }
+
+    .p-datepicker-year {
+        width: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+        padding: dt('datepicker.year.padding');
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            box-shadow dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration');
+        border-radius: dt('datepicker.year.border.radius');
+        outline-color: transparent;
+        color: dt('datepicker.date.color');
+    }
+
+    .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
+        color: dt('datepicker.date.hover.color');
+        background: dt('datepicker.date.hover.background');
+    }
+
+    .p-datepicker-year-selected {
+        color: dt('datepicker.date.selected.color');
+        background: dt('datepicker.date.selected.background');
+    }
+
+    .p-datepicker-year:not(.p-disabled):focus-visible {
+        box-shadow: dt('datepicker.date.focus.ring.shadow');
+        outline: dt('datepicker.date.focus.ring.width') dt('datepicker.date.focus.ring.style') dt('datepicker.date.focus.ring.color');
+        outline-offset: dt('datepicker.date.focus.ring.offset');
+    }
+
+    .p-datepicker-buttonbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: dt('datepicker.buttonbar.padding');
+        border-block-start: 1px solid dt('datepicker.buttonbar.border.color');
+    }
+
+    .p-datepicker-buttonbar .p-button {
+        width: auto;
+    }
+
+    .p-datepicker-time-picker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-block-start: 1px solid dt('datepicker.time.picker.border.color');
+        padding: 0;
+        gap: dt('datepicker.time.picker.gap');
+    }
+
+    .p-datepicker-calendar-container + .p-datepicker-time-picker {
+        padding: dt('datepicker.time.picker.padding');
+    }
+
+    .p-datepicker-time-picker > div {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: dt('datepicker.time.picker.button.gap');
+    }
+
+    .p-datepicker-time-picker span {
+        font-size: 1rem;
+    }
+
+    .p-datepicker-timeonly .p-datepicker-time-picker {
+        border-block-start: 0 none;
+    }
+
+    .p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown {
+        width: dt('datepicker.dropdown.sm.width');
+    }
+
+    .p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown .p-icon,
+    .p-datepicker:has(.p-inputtext-sm) .p-datepicker-input-icon {
+        font-size: dt('form.field.sm.font.size');
+        width: dt('form.field.sm.font.size');
+        height: dt('form.field.sm.font.size');
+    }
+
+    .p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown {
+        width: dt('datepicker.dropdown.lg.width');
+    }
+
+    .p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown .p-icon,
+    .p-datepicker:has(.p-inputtext-lg) .p-datepicker-input-icon {
+        font-size: dt('form.field.lg.font.size');
+        width: dt('form.field.lg.font.size');
+        height: dt('form.field.lg.font.size');
+    }
+`;/* Injected with object hook! */
 
 var inlineStyles$1 = {
   root: function root(_ref) {
@@ -2578,6 +3389,9 @@ var script$8 = {
       if (this.autoZIndex) {
         ZIndex.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
       }
+
+      // Issue: #7508
+      this.$attrSelector && el.setAttribute(this.$attrSelector, '');
       this.alignOverlay();
       this.$emit('show');
     },
@@ -3133,7 +3947,7 @@ var script$8 = {
       event.preventDefault();
     },
     onClearButtonClick: function onClearButtonClick(event) {
-      this.updateModel(null);
+      this.updateModel(this.$formDefaultValue || null);
       this.overlayVisible = false;
       this.$emit('clear-click', event);
       event.preventDefault();
@@ -3180,11 +3994,11 @@ var script$8 = {
       }
     },
     repeat: function repeat(event, interval, type, direction) {
-      var _this10 = this;
+      var _this0 = this;
       var i = interval || 500;
       this.clearTimePickerTimer();
       this.timePickerTimer = setTimeout(function () {
-        _this10.repeat(event, 100, type, direction);
+        _this0.repeat(event, 100, type, direction);
       }, i);
       switch (type) {
         case 0:
@@ -3314,7 +4128,7 @@ var script$8 = {
       event.preventDefault();
     },
     updateModelTime: function updateModelTime() {
-      var _this11 = this;
+      var _this1 = this;
       this.timePickerChange = true;
       var value = this.isComparable() ? this.d_value : this.viewDate;
       if (this.isRangeSelection()) {
@@ -3340,7 +4154,7 @@ var script$8 = {
       this.updateModel(value);
       this.$emit('date-select', value);
       setTimeout(function () {
-        return _this11.timePickerChange = false;
+        return _this1.timePickerChange = false;
       }, 0);
     },
     toggleAMPM: function toggleAMPM(event) {
@@ -3402,7 +4216,7 @@ var script$8 = {
       }
     },
     isValidSelection: function isValidSelection(value) {
-      var _this12 = this;
+      var _this10 = this;
       if (value == null) {
         return true;
       }
@@ -3412,7 +4226,7 @@ var script$8 = {
           isValid = false;
         }
       } else if (value.every(function (v) {
-        return _this12.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false);
+        return _this10.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false);
       })) {
         if (this.isRangeSelection()) {
           isValid = value.length > 1 && value[1] >= value[0];
@@ -4071,7 +4885,11 @@ var script$8 = {
       if (this.navigationState) {
         if (this.navigationState.button) {
           this.initFocusableCell();
-          if (this.navigationState.backward) this.previousButton.focus();else this.nextButton.focus();
+          if (this.navigationState.backward) {
+            this.previousButton && this.previousButton.focus();
+          } else {
+            this.nextButton && this.nextButton.focus();
+          }
         } else {
           if (this.navigationState.backward) {
             var cells;
@@ -4464,20 +5282,20 @@ var script$8 = {
       return this.dateFormat || this.$primevue.config.locale.dateFormat;
     },
     monthPickerValues: function monthPickerValues() {
-      var _this13 = this;
+      var _this11 = this;
       var monthPickerValues = [];
       var isSelectableMonth = function isSelectableMonth(baseMonth) {
-        if (_this13.minDate) {
-          var minMonth = _this13.minDate.getMonth();
-          var minYear = _this13.minDate.getFullYear();
-          if (_this13.currentYear < minYear || _this13.currentYear === minYear && baseMonth < minMonth) {
+        if (_this11.minDate) {
+          var minMonth = _this11.minDate.getMonth();
+          var minYear = _this11.minDate.getFullYear();
+          if (_this11.currentYear < minYear || _this11.currentYear === minYear && baseMonth < minMonth) {
             return false;
           }
         }
-        if (_this13.maxDate) {
-          var maxMonth = _this13.maxDate.getMonth();
-          var maxYear = _this13.maxDate.getFullYear();
-          if (_this13.currentYear > maxYear || _this13.currentYear === maxYear && baseMonth > maxMonth) {
+        if (_this11.maxDate) {
+          var maxMonth = _this11.maxDate.getMonth();
+          var maxYear = _this11.maxDate.getFullYear();
+          if (_this11.currentYear > maxYear || _this11.currentYear === maxYear && baseMonth > maxMonth) {
             return false;
           }
         }
@@ -4492,15 +5310,15 @@ var script$8 = {
       return monthPickerValues;
     },
     yearPickerValues: function yearPickerValues() {
-      var _this14 = this;
+      var _this12 = this;
       var yearPickerValues = [];
       var base = this.currentYear - this.currentYear % 10;
       var isSelectableYear = function isSelectableYear(baseYear) {
-        if (_this14.minDate) {
-          if (_this14.minDate.getFullYear() > baseYear) return false;
+        if (_this12.minDate) {
+          if (_this12.minDate.getFullYear() > baseYear) return false;
         }
-        if (_this14.maxDate) {
-          if (_this14.maxDate.getFullYear() < baseYear) return false;
+        if (_this12.maxDate) {
+          if (_this12.maxDate.getFullYear() < baseYear) return false;
         }
         return true;
       };
@@ -4561,122 +5379,122 @@ var script$8 = {
       });
     },
     hourIncrementCallbacks: function hourIncrementCallbacks() {
-      var _this15 = this;
+      var _this13 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this15.onTimePickerElementMouseDown(event, 0, 1);
+          return _this13.onTimePickerElementMouseDown(event, 0, 1);
         },
         mouseup: function mouseup(event) {
-          return _this15.onTimePickerElementMouseUp(event);
+          return _this13.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this15.onTimePickerElementMouseLeave();
+          return _this13.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this15.onTimePickerElementKeyDown(event, 0, 1);
+          return _this13.onTimePickerElementKeyDown(event, 0, 1);
         },
         keyup: function keyup(event) {
-          return _this15.onTimePickerElementKeyUp(event);
+          return _this13.onTimePickerElementKeyUp(event);
         }
       };
     },
     hourDecrementCallbacks: function hourDecrementCallbacks() {
-      var _this16 = this;
+      var _this14 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this16.onTimePickerElementMouseDown(event, 0, -1);
+          return _this14.onTimePickerElementMouseDown(event, 0, -1);
         },
         mouseup: function mouseup(event) {
-          return _this16.onTimePickerElementMouseUp(event);
+          return _this14.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this16.onTimePickerElementMouseLeave();
+          return _this14.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this16.onTimePickerElementKeyDown(event, 0, -1);
+          return _this14.onTimePickerElementKeyDown(event, 0, -1);
         },
         keyup: function keyup(event) {
-          return _this16.onTimePickerElementKeyUp(event);
+          return _this14.onTimePickerElementKeyUp(event);
         }
       };
     },
     minuteIncrementCallbacks: function minuteIncrementCallbacks() {
-      var _this17 = this;
+      var _this15 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this17.onTimePickerElementMouseDown(event, 1, 1);
+          return _this15.onTimePickerElementMouseDown(event, 1, 1);
         },
         mouseup: function mouseup(event) {
-          return _this17.onTimePickerElementMouseUp(event);
+          return _this15.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this17.onTimePickerElementMouseLeave();
+          return _this15.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this17.onTimePickerElementKeyDown(event, 1, 1);
+          return _this15.onTimePickerElementKeyDown(event, 1, 1);
         },
         keyup: function keyup(event) {
-          return _this17.onTimePickerElementKeyUp(event);
+          return _this15.onTimePickerElementKeyUp(event);
         }
       };
     },
     minuteDecrementCallbacks: function minuteDecrementCallbacks() {
-      var _this18 = this;
+      var _this16 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this18.onTimePickerElementMouseDown(event, 1, -1);
+          return _this16.onTimePickerElementMouseDown(event, 1, -1);
         },
         mouseup: function mouseup(event) {
-          return _this18.onTimePickerElementMouseUp(event);
+          return _this16.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this18.onTimePickerElementMouseLeave();
+          return _this16.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this18.onTimePickerElementKeyDown(event, 1, -1);
+          return _this16.onTimePickerElementKeyDown(event, 1, -1);
         },
         keyup: function keyup(event) {
-          return _this18.onTimePickerElementKeyUp(event);
+          return _this16.onTimePickerElementKeyUp(event);
         }
       };
     },
     secondIncrementCallbacks: function secondIncrementCallbacks() {
-      var _this19 = this;
+      var _this17 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this19.onTimePickerElementMouseDown(event, 2, 1);
+          return _this17.onTimePickerElementMouseDown(event, 2, 1);
         },
         mouseup: function mouseup(event) {
-          return _this19.onTimePickerElementMouseUp(event);
+          return _this17.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this19.onTimePickerElementMouseLeave();
+          return _this17.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this19.onTimePickerElementKeyDown(event, 2, 1);
+          return _this17.onTimePickerElementKeyDown(event, 2, 1);
         },
         keyup: function keyup(event) {
-          return _this19.onTimePickerElementKeyUp(event);
+          return _this17.onTimePickerElementKeyUp(event);
         }
       };
     },
     secondDecrementCallbacks: function secondDecrementCallbacks() {
-      var _this20 = this;
+      var _this18 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this20.onTimePickerElementMouseDown(event, 2, -1);
+          return _this18.onTimePickerElementMouseDown(event, 2, -1);
         },
         mouseup: function mouseup(event) {
-          return _this20.onTimePickerElementMouseUp(event);
+          return _this18.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this20.onTimePickerElementMouseLeave();
+          return _this18.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this20.onTimePickerElementKeyDown(event, 2, -1);
+          return _this18.onTimePickerElementKeyDown(event, 2, -1);
         },
         keyup: function keyup(event) {
-          return _this20.onTimePickerElementKeyUp(event);
+          return _this18.onTimePickerElementKeyUp(event);
         }
       };
     }
@@ -4700,14 +5518,14 @@ var _hoisted_1$7 = ["id", "data-p"];
 var _hoisted_2$4 = ["disabled", "aria-label", "aria-expanded", "aria-controls"];
 var _hoisted_3$4 = ["data-p"];
 var _hoisted_4$3 = ["id", "role", "aria-modal", "aria-label", "data-p"];
-var _hoisted_5$3 = ["disabled", "aria-label"];
+var _hoisted_5$2 = ["disabled", "aria-label"];
 var _hoisted_6$2 = ["disabled", "aria-label"];
 var _hoisted_7$1 = ["disabled", "aria-label"];
 var _hoisted_8$1 = ["disabled", "aria-label"];
-var _hoisted_9$1 = ["data-p-disabled"];
-var _hoisted_10$1 = ["abbr"];
-var _hoisted_11$1 = ["data-p-disabled"];
-var _hoisted_12$1 = ["aria-label", "data-p-today", "data-p-other-month"];
+var _hoisted_9 = ["data-p-disabled"];
+var _hoisted_10 = ["abbr"];
+var _hoisted_11 = ["data-p-disabled"];
+var _hoisted_12 = ["aria-label", "data-p-today", "data-p-other-month"];
 var _hoisted_13 = ["onClick", "onKeydown", "aria-selected", "aria-disabled", "data-p"];
 var _hoisted_14 = ["onClick", "onKeydown", "data-p-disabled", "data-p-selected"];
 var _hoisted_15 = ["onClick", "onKeydown", "data-p-disabled", "data-p-selected"];
@@ -4756,7 +5574,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: $options.onKeyDown,
     "data-p-has-dropdown": _ctx.showIcon && _ctx.iconDisplay === 'button' && !_ctx.inline,
     "data-p-has-e-icon": _ctx.showIcon && _ctx.iconDisplay === 'input' && !_ctx.inline,
-    pt: _ctx.ptm('pcInputText')
+    pt: _ctx.ptm('pcInputText'),
+    formControl: {
+      novalidate: true
+    }
   }, null, 8, ["id", "class", "style", "defaultValue", "placeholder", "name", "size", "invalid", "variant", "fluid", "unstyled", "aria-expanded", "aria-controls", "aria-labelledby", "aria-label", "disabled", "readonly", "onInput", "onClick", "onFocus", "onBlur", "onKeydown", "data-p-has-dropdown", "data-p-has-e-icon", "pt"])) : createCommentVNode("", true), _ctx.showIcon && _ctx.iconDisplay === 'button' && !_ctx.inline ? renderSlot(_ctx.$slots, "dropdownbutton", {
     key: 1,
     toggleCallback: $options.onButtonClick
@@ -4834,10 +5655,12 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
           }, _ctx.ptm('calendarContainer')), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.months, function (month, groupIndex) {
             return openBlock(), createElementBlock("div", mergeProps({
               key: month.month + month.year,
-              "class": _ctx.cx('calendar'),
+              "class": _ctx.cx('calendar')
+            }, {
               ref_for: true
             }, _ctx.ptm('calendar')), [createBaseVNode("div", mergeProps({
-              "class": _ctx.cx('header'),
+              "class": _ctx.cx('header')
+            }, {
               ref_for: true
             }, _ctx.ptm('header')), [renderSlot(_ctx.$slots, "header"), renderSlot(_ctx.$slots, "prevbutton", {
               actionCallback: function actionCallback(event) {
@@ -4856,6 +5679,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 unstyled: _ctx.unstyled,
                 onClick: $options.onPrevButtonClick,
                 onKeydown: $options.onContainerButtonKeydown
+              }, {
+                ref_for: true
               }, _ctx.navigatorButtonProps, {
                 pt: _ctx.ptm('pcPrevButton'),
                 "data-pc-group-section": "navigator"
@@ -4863,7 +5688,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 icon: withCtx(function (slotProps) {
                   return [renderSlot(_ctx.$slots, "previcon", {}, function () {
                     return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.prevIcon ? 'span' : 'ChevronLeftIcon'), mergeProps({
-                      "class": [_ctx.prevIcon, slotProps["class"]],
+                      "class": [_ctx.prevIcon, slotProps["class"]]
+                    }, {
                       ref_for: true
                     }, _ctx.ptm('pcPrevButton')['icon']), null, 16, ["class"]))];
                   })];
@@ -4871,7 +5697,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 _: 2
               }, 1040, ["class", "disabled", "aria-label", "unstyled", "onClick", "onKeydown", "pt"]), [[vShow, groupIndex === 0]])];
             }), createBaseVNode("div", mergeProps({
-              "class": _ctx.cx('title'),
+              "class": _ctx.cx('title')
+            }, {
               ref_for: true
             }, _ctx.ptm('title')), [_ctx.$primevue.config.locale.showMonthAfterYear ? (openBlock(), createElementBlock(Fragment, {
               key: 0
@@ -4886,11 +5713,12 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
               }),
               "class": _ctx.cx('selectYear'),
               disabled: $options.switchViewButtonDisabled,
-              "aria-label": _ctx.$primevue.config.locale.chooseYear,
+              "aria-label": _ctx.$primevue.config.locale.chooseYear
+            }, {
               ref_for: true
             }, _ctx.ptm('selectYear'), {
               "data-pc-group-section": "view"
-            }), toDisplayString($options.getYear(month)), 17, _hoisted_5$3)) : createCommentVNode("", true), $data.currentView === 'date' ? (openBlock(), createElementBlock("button", mergeProps({
+            }), toDisplayString($options.getYear(month)), 17, _hoisted_5$2)) : createCommentVNode("", true), $data.currentView === 'date' ? (openBlock(), createElementBlock("button", mergeProps({
               key: 1,
               type: "button",
               onClick: _cache[3] || (_cache[3] = function () {
@@ -4901,7 +5729,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
               }),
               "class": _ctx.cx('selectMonth'),
               disabled: $options.switchViewButtonDisabled,
-              "aria-label": _ctx.$primevue.config.locale.chooseMonth,
+              "aria-label": _ctx.$primevue.config.locale.chooseMonth
+            }, {
               ref_for: true
             }, _ctx.ptm('selectMonth'), {
               "data-pc-group-section": "view"
@@ -4918,7 +5747,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
               }),
               "class": _ctx.cx('selectMonth'),
               disabled: $options.switchViewButtonDisabled,
-              "aria-label": _ctx.$primevue.config.locale.chooseMonth,
+              "aria-label": _ctx.$primevue.config.locale.chooseMonth
+            }, {
               ref_for: true
             }, _ctx.ptm('selectMonth'), {
               "data-pc-group-section": "view"
@@ -4933,13 +5763,15 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
               }),
               "class": _ctx.cx('selectYear'),
               disabled: $options.switchViewButtonDisabled,
-              "aria-label": _ctx.$primevue.config.locale.chooseYear,
+              "aria-label": _ctx.$primevue.config.locale.chooseYear
+            }, {
               ref_for: true
             }, _ctx.ptm('selectYear'), {
               "data-pc-group-section": "view"
             }), toDisplayString($options.getYear(month)), 17, _hoisted_8$1)) : createCommentVNode("", true)], 64)), $data.currentView === 'year' ? (openBlock(), createElementBlock("span", mergeProps({
               key: 2,
-              "class": _ctx.cx('decade'),
+              "class": _ctx.cx('decade')
+            }, {
               ref_for: true
             }, _ctx.ptm('decade')), [renderSlot(_ctx.$slots, "decade", {
               years: $options.yearPickerValues
@@ -4962,6 +5794,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 unstyled: _ctx.unstyled,
                 onClick: $options.onNextButtonClick,
                 onKeydown: $options.onContainerButtonKeydown
+              }, {
+                ref_for: true
               }, _ctx.navigatorButtonProps, {
                 pt: _ctx.ptm('pcNextButton'),
                 "data-pc-group-section": "navigator"
@@ -4969,7 +5803,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 icon: withCtx(function (slotProps) {
                   return [renderSlot(_ctx.$slots, "nexticon", {}, function () {
                     return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.nextIcon ? 'span' : 'ChevronRightIcon'), mergeProps({
-                      "class": [_ctx.nextIcon, slotProps["class"]],
+                      "class": [_ctx.nextIcon, slotProps["class"]]
+                    }, {
                       ref_for: true
                     }, _ctx.ptm('pcNextButton')['icon']), null, 16, ["class"]))];
                   })];
@@ -4979,7 +5814,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
             })], 16), $data.currentView === 'date' ? (openBlock(), createElementBlock("table", mergeProps({
               key: 0,
               "class": _ctx.cx('dayView'),
-              role: "grid",
+              role: "grid"
+            }, {
               ref_for: true
             }, _ctx.ptm('dayView')), [createBaseVNode("thead", mergeProps({
               ref_for: true
@@ -4988,7 +5824,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('tableHeaderRow')), [_ctx.showWeek ? (openBlock(), createElementBlock("th", mergeProps({
               key: 0,
               scope: "col",
-              "class": _ctx.cx('weekHeader'),
+              "class": _ctx.cx('weekHeader')
+            }, {
               ref_for: true
             }, _ctx.ptm('weekHeader', {
               context: {
@@ -5007,35 +5844,40 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
               }), {
                 "data-pc-group-section": "tableheadercelllabel"
               }), toDisplayString($options.weekHeaderLabel), 17)];
-            })], 16, _hoisted_9$1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList($options.weekDays, function (weekDay) {
+            })], 16, _hoisted_9)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList($options.weekDays, function (weekDay) {
               return openBlock(), createElementBlock("th", mergeProps({
                 key: weekDay,
                 scope: "col",
-                abbr: weekDay,
+                abbr: weekDay
+              }, {
                 ref_for: true
               }, _ctx.ptm('tableHeaderCell'), {
                 "data-pc-group-section": "tableheadercell",
                 "class": _ctx.cx('weekDayCell')
               }), [createBaseVNode("span", mergeProps({
-                "class": _ctx.cx('weekDay'),
+                "class": _ctx.cx('weekDay')
+              }, {
                 ref_for: true
               }, _ctx.ptm('weekDay'), {
                 "data-pc-group-section": "tableheadercelllabel"
-              }), toDisplayString(weekDay), 17)], 16, _hoisted_10$1);
+              }), toDisplayString(weekDay), 17)], 16, _hoisted_10);
             }), 128))], 16)], 16), createBaseVNode("tbody", mergeProps({
               ref_for: true
             }, _ctx.ptm('tableBody')), [(openBlock(true), createElementBlock(Fragment, null, renderList(month.dates, function (week, i) {
               return openBlock(), createElementBlock("tr", mergeProps({
-                key: week[0].day + '' + week[0].month,
+                key: week[0].day + '' + week[0].month
+              }, {
                 ref_for: true
               }, _ctx.ptm('tableBodyRow')), [_ctx.showWeek ? (openBlock(), createElementBlock("td", mergeProps({
                 key: 0,
-                "class": _ctx.cx('weekNumber'),
+                "class": _ctx.cx('weekNumber')
+              }, {
                 ref_for: true
               }, _ctx.ptm('weekNumber'), {
                 "data-pc-group-section": "tablebodycell"
               }), [createBaseVNode("span", mergeProps({
-                "class": _ctx.cx('weekLabelContainer'),
+                "class": _ctx.cx('weekLabelContainer')
+              }, {
                 ref_for: true
               }, _ctx.ptm('weekLabelContainer', {
                 context: {
@@ -5051,16 +5893,18 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   key: 0,
                   style: {
                     "visibility": "hidden"
-                  },
+                  }
+                }, {
                   ref_for: true
                 }, _ctx.ptm('weekLabel')), "0", 16)) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(month.weekNumbers[i]), 1)];
-              })], 16, _hoisted_11$1)], 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(week, function (date) {
+              })], 16, _hoisted_11)], 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(week, function (date) {
                 return openBlock(), createElementBlock("td", mergeProps({
                   key: date.day + '' + date.month,
                   "aria-label": date.day,
                   "class": _ctx.cx('dayCell', {
                     date: date
-                  }),
+                  })
+                }, {
                   ref_for: true
                 }, _ctx.ptm('dayCell', {
                   context: {
@@ -5087,7 +5931,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     return $options.onDateCellKeydown($event, date, groupIndex);
                   },
                   "aria-selected": $options.isSelected(date),
-                  "aria-disabled": !date.selectable,
+                  "aria-disabled": !date.selectable
+                }, {
                   ref_for: true
                 }, _ctx.ptm('day', {
                   context: {
@@ -5107,11 +5952,12 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 })], 16, _hoisted_13)), [[_directive_ripple]]) : createCommentVNode("", true), $options.isSelected(date) ? (openBlock(), createElementBlock("div", mergeProps({
                   key: 1,
                   "class": "p-hidden-accessible",
-                  "aria-live": "polite",
+                  "aria-live": "polite"
+                }, {
                   ref_for: true
                 }, _ctx.ptm('hiddenSelectedDay'), {
                   "data-p-hidden-accessible": true
-                }), toDisplayString(date.day), 17)) : createCommentVNode("", true)], 16, _hoisted_12$1);
+                }), toDisplayString(date.day), 17)) : createCommentVNode("", true)], 16, _hoisted_12);
               }), 128))], 16);
             }), 128))], 16)], 16)) : createCommentVNode("", true)], 16);
           }), 128))], 16), $data.currentView === 'month' ? (openBlock(), createElementBlock("div", mergeProps({
@@ -5135,7 +5981,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
               "class": _ctx.cx('month', {
                 month: m,
                 index: i
-              }),
+              })
+            }, {
               ref_for: true
             }, _ctx.ptm('month', {
               context: {
@@ -5150,7 +5997,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
             }), [createTextVNode(toDisplayString(m.value) + " ", 1), $options.isMonthSelected(i) ? (openBlock(), createElementBlock("div", mergeProps({
               key: 0,
               "class": "p-hidden-accessible",
-              "aria-live": "polite",
+              "aria-live": "polite"
+            }, {
               ref_for: true
             }, _ctx.ptm('hiddenMonth'), {
               "data-p-hidden-accessible": true
@@ -5169,7 +6017,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
               },
               "class": _ctx.cx('year', {
                 year: y
-              }),
+              })
+            }, {
               ref_for: true
             }, _ctx.ptm('year', {
               context: {
@@ -5183,7 +6032,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
             }), [createTextVNode(toDisplayString(y.value) + " ", 1), $options.isYearSelected(y.value) ? (openBlock(), createElementBlock("div", mergeProps({
               key: 0,
               "class": "p-hidden-accessible",
-              "aria-live": "polite",
+              "aria-live": "polite"
+            }, {
               ref_for: true
             }, _ctx.ptm('hiddenYear'), {
               "data-p-hidden-accessible": true
@@ -5654,7 +6504,174 @@ script$6.render = render$5;
 
 /* Injected with object hook! */
 
-var style$2=({dt:n})=>`\n.p-inputnumber {\n    display: inline-flex;\n    position: relative;\n}\n\n.p-inputnumber-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    cursor: pointer;\n    background: ${n("inputnumber.button.background")};\n    color: ${n("inputnumber.button.color")};\n    width: ${n("inputnumber.button.width")};\n    transition: background ${n("inputnumber.transition.duration")}, color ${n("inputnumber.transition.duration")}, border-color ${n("inputnumber.transition.duration")}, outline-color ${n("inputnumber.transition.duration")};\n}\n\n.p-inputnumber-button:disabled {\n    cursor: auto;\n}\n\n.p-inputnumber-button:not(:disabled):hover {\n    background: ${n("inputnumber.button.hover.background")};\n    color: ${n("inputnumber.button.hover.color")};\n}\n\n.p-inputnumber-button:not(:disabled):active {\n    background: ${n("inputnumber.button.active.background")};\n    color: ${n("inputnumber.button.active.color")};\n}\n\n.p-inputnumber-stacked .p-inputnumber-button {\n    position: relative;\n    border: 0 none;\n}\n\n.p-inputnumber-stacked .p-inputnumber-button-group {\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    inset-block-start: 1px;\n    inset-inline-end: 1px;\n    height: calc(100% - 2px);\n    z-index: 1;\n}\n\n.p-inputnumber-stacked .p-inputnumber-increment-button {\n    padding: 0;\n    border-start-end-radius: calc(${n("inputnumber.button.border.radius")} - 1px);\n}\n\n.p-inputnumber-stacked .p-inputnumber-decrement-button {\n    padding: 0;\n    border-end-end-radius: calc(${n("inputnumber.button.border.radius")} - 1px);\n}\n\n.p-inputnumber-stacked .p-inputnumber-button {\n    flex: 1 1 auto;\n    border: 0 none;\n}\n\n.p-inputnumber-horizontal .p-inputnumber-button {\n    border: 1px solid ${n("inputnumber.button.border.color")};\n}\n\n.p-inputnumber-horizontal .p-inputnumber-button:hover {\n    border-color: ${n("inputnumber.button.hover.border.color")};\n}\n\n.p-inputnumber-horizontal .p-inputnumber-button:active {\n    border-color: ${n("inputnumber.button.active.border.color")};\n}\n\n.p-inputnumber-horizontal .p-inputnumber-increment-button {\n    order: 3;\n    border-start-end-radius: ${n("inputnumber.button.border.radius")};\n    border-end-end-radius: ${n("inputnumber.button.border.radius")};\n    border-inline-start: 0 none;\n}\n\n.p-inputnumber-horizontal .p-inputnumber-input {\n    order: 2;\n    border-radius: 0;\n}\n\n.p-inputnumber-horizontal .p-inputnumber-decrement-button {\n    order: 1;\n    border-start-start-radius: ${n("inputnumber.button.border.radius")};\n    border-end-start-radius: ${n("inputnumber.button.border.radius")};\n    border-inline-end: 0 none;\n}\n\n.p-floatlabel:has(.p-inputnumber-horizontal) label {\n    margin-inline-start: ${n("inputnumber.button.width")};\n}\n\n.p-inputnumber-vertical {\n    flex-direction: column;\n}\n\n.p-inputnumber-vertical .p-inputnumber-button {\n    border: 1px solid ${n("inputnumber.button.border.color")};\n    padding: ${n("inputnumber.button.vertical.padding")};\n}\n\n.p-inputnumber-vertical .p-inputnumber-button:hover {\n    border-color: ${n("inputnumber.button.hover.border.color")};\n}\n\n.p-inputnumber-vertical .p-inputnumber-button:active {\n    border-color: ${n("inputnumber.button.active.border.color")};\n}\n\n.p-inputnumber-vertical .p-inputnumber-increment-button {\n    order: 1;\n    border-start-start-radius: ${n("inputnumber.button.border.radius")};\n    border-start-end-radius: ${n("inputnumber.button.border.radius")};\n    width: 100%;\n    border-block-end: 0 none;\n}\n\n.p-inputnumber-vertical .p-inputnumber-input {\n    order: 2;\n    border-radius: 0;\n    text-align: center;\n}\n\n.p-inputnumber-vertical .p-inputnumber-decrement-button {\n    order: 3;\n    border-end-start-radius: ${n("inputnumber.button.border.radius")};\n    border-end-end-radius: ${n("inputnumber.button.border.radius")};\n    width: 100%;\n    border-block-start: 0 none;\n}\n\n.p-inputnumber-input {\n    flex: 1 1 auto;\n}\n\n.p-inputnumber-fluid {\n    width: 100%;\n}\n\n.p-inputnumber-fluid .p-inputnumber-input {\n    width: 1%;\n}\n\n.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {\n    width: 100%;\n}\n\n.p-inputnumber:has(.p-inputtext-sm) .p-inputnumber-button .p-icon {\n    font-size: ${n("form.field.sm.font.size")};\n    width: ${n("form.field.sm.font.size")};\n    height: ${n("form.field.sm.font.size")};\n}\n\n.p-inputnumber:has(.p-inputtext-lg) .p-inputnumber-button .p-icon {\n    font-size: ${n("form.field.lg.font.size")};\n    width: ${n("form.field.lg.font.size")};\n    height: ${n("form.field.lg.font.size")};\n}\n`;/* Injected with object hook! */
+var style$2=css`
+    .p-inputnumber {
+        display: inline-flex;
+        position: relative;
+    }
+
+    .p-inputnumber-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        cursor: pointer;
+        background: dt('inputnumber.button.background');
+        color: dt('inputnumber.button.color');
+        width: dt('inputnumber.button.width');
+        transition:
+            background dt('inputnumber.transition.duration'),
+            color dt('inputnumber.transition.duration'),
+            border-color dt('inputnumber.transition.duration'),
+            outline-color dt('inputnumber.transition.duration');
+    }
+
+    .p-inputnumber-button:disabled {
+        cursor: auto;
+    }
+
+    .p-inputnumber-button:not(:disabled):hover {
+        background: dt('inputnumber.button.hover.background');
+        color: dt('inputnumber.button.hover.color');
+    }
+
+    .p-inputnumber-button:not(:disabled):active {
+        background: dt('inputnumber.button.active.background');
+        color: dt('inputnumber.button.active.color');
+    }
+
+    .p-inputnumber-stacked .p-inputnumber-button {
+        position: relative;
+        border: 0 none;
+    }
+
+    .p-inputnumber-stacked .p-inputnumber-button-group {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        inset-block-start: 1px;
+        inset-inline-end: 1px;
+        height: calc(100% - 2px);
+        z-index: 1;
+    }
+
+    .p-inputnumber-stacked .p-inputnumber-increment-button {
+        padding: 0;
+        border-start-end-radius: calc(dt('inputnumber.button.border.radius') - 1px);
+    }
+
+    .p-inputnumber-stacked .p-inputnumber-decrement-button {
+        padding: 0;
+        border-end-end-radius: calc(dt('inputnumber.button.border.radius') - 1px);
+    }
+
+    .p-inputnumber-stacked .p-inputnumber-button {
+        flex: 1 1 auto;
+        border: 0 none;
+    }
+
+    .p-inputnumber-horizontal .p-inputnumber-button {
+        border: 1px solid dt('inputnumber.button.border.color');
+    }
+
+    .p-inputnumber-horizontal .p-inputnumber-button:hover {
+        border-color: dt('inputnumber.button.hover.border.color');
+    }
+
+    .p-inputnumber-horizontal .p-inputnumber-button:active {
+        border-color: dt('inputnumber.button.active.border.color');
+    }
+
+    .p-inputnumber-horizontal .p-inputnumber-increment-button {
+        order: 3;
+        border-start-end-radius: dt('inputnumber.button.border.radius');
+        border-end-end-radius: dt('inputnumber.button.border.radius');
+        border-inline-start: 0 none;
+    }
+
+    .p-inputnumber-horizontal .p-inputnumber-input {
+        order: 2;
+        border-radius: 0;
+    }
+
+    .p-inputnumber-horizontal .p-inputnumber-decrement-button {
+        order: 1;
+        border-start-start-radius: dt('inputnumber.button.border.radius');
+        border-end-start-radius: dt('inputnumber.button.border.radius');
+        border-inline-end: 0 none;
+    }
+
+    .p-floatlabel:has(.p-inputnumber-horizontal) label {
+        margin-inline-start: dt('inputnumber.button.width');
+    }
+
+    .p-inputnumber-vertical {
+        flex-direction: column;
+    }
+
+    .p-inputnumber-vertical .p-inputnumber-button {
+        border: 1px solid dt('inputnumber.button.border.color');
+        padding: dt('inputnumber.button.vertical.padding');
+    }
+
+    .p-inputnumber-vertical .p-inputnumber-button:hover {
+        border-color: dt('inputnumber.button.hover.border.color');
+    }
+
+    .p-inputnumber-vertical .p-inputnumber-button:active {
+        border-color: dt('inputnumber.button.active.border.color');
+    }
+
+    .p-inputnumber-vertical .p-inputnumber-increment-button {
+        order: 1;
+        border-start-start-radius: dt('inputnumber.button.border.radius');
+        border-start-end-radius: dt('inputnumber.button.border.radius');
+        width: 100%;
+        border-block-end: 0 none;
+    }
+
+    .p-inputnumber-vertical .p-inputnumber-input {
+        order: 2;
+        border-radius: 0;
+        text-align: center;
+    }
+
+    .p-inputnumber-vertical .p-inputnumber-decrement-button {
+        order: 3;
+        border-end-start-radius: dt('inputnumber.button.border.radius');
+        border-end-end-radius: dt('inputnumber.button.border.radius');
+        width: 100%;
+        border-block-start: 0 none;
+    }
+
+    .p-inputnumber-input {
+        flex: 1 1 auto;
+    }
+
+    .p-inputnumber-fluid {
+        width: 100%;
+    }
+
+    .p-inputnumber-fluid .p-inputnumber-input {
+        width: 1%;
+    }
+
+    .p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
+        width: 100%;
+    }
+
+    .p-inputnumber:has(.p-inputtext-sm) .p-inputnumber-button .p-icon {
+        font-size: dt('form.field.sm.font.size');
+        width: dt('form.field.sm.font.size');
+        height: dt('form.field.sm.font.size');
+    }
+
+    .p-inputnumber:has(.p-inputtext-lg) .p-inputnumber-button .p-icon {
+        font-size: dt('form.field.lg.font.size');
+        width: dt('form.field.lg.font.size');
+        height: dt('form.field.lg.font.size');
+    }
+`;/* Injected with object hook! */
 
 var classes$2 = {
   root: function root(_ref) {
@@ -6726,7 +7743,7 @@ var _hoisted_1$6 = ["data-p"];
 var _hoisted_2$3 = ["data-p"];
 var _hoisted_3$3 = ["disabled", "data-p"];
 var _hoisted_4$2 = ["disabled", "data-p"];
-var _hoisted_5$2 = ["disabled", "data-p"];
+var _hoisted_5$1 = ["disabled", "data-p"];
 var _hoisted_6$1 = ["disabled", "data-p"];
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputText = resolveComponent("InputText");
@@ -6741,7 +7758,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     role: "spinbutton",
     "class": normalizeClass([_ctx.cx('pcInputText'), _ctx.inputClass]),
     style: normalizeStyle(_ctx.inputStyle),
-    value: $options.formattedValue,
+    defaultValue: $options.formattedValue,
     "aria-valuemin": _ctx.min,
     "aria-valuemax": _ctx.max,
     "aria-valuenow": _ctx.d_value,
@@ -6765,7 +7782,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     pt: _ctx.ptm('pcInputText'),
     unstyled: _ctx.unstyled,
     "data-p": $options.dataP
-  }, null, 8, ["id", "name", "class", "style", "value", "aria-valuemin", "aria-valuemax", "aria-valuenow", "inputmode", "disabled", "readonly", "placeholder", "aria-labelledby", "aria-label", "required", "size", "invalid", "variant", "onInput", "onKeydown", "onKeypress", "onPaste", "onClick", "onFocus", "onBlur", "pt", "unstyled", "data-p"]), _ctx.showButtons && _ctx.buttonLayout === 'stacked' ? (openBlock(), createElementBlock("span", mergeProps({
+  }, null, 8, ["id", "name", "class", "style", "defaultValue", "aria-valuemin", "aria-valuemax", "aria-valuenow", "inputmode", "disabled", "readonly", "placeholder", "aria-labelledby", "aria-label", "required", "size", "invalid", "variant", "onInput", "onKeydown", "onKeypress", "onPaste", "onClick", "onFocus", "onBlur", "pt", "unstyled", "data-p"]), _ctx.showButtons && _ctx.buttonLayout === 'stacked' ? (openBlock(), createElementBlock("span", mergeProps({
     key: 0,
     "class": _ctx.cx('buttonGroup')
   }, _ctx.ptm('buttonGroup'), {
@@ -6827,7 +7844,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       }, _ctx.ptm('incrementIcon'), {
         "data-pc-section": "incrementicon"
       }), null, 16, ["class"]))];
-    })], 16, _hoisted_5$2)) : createCommentVNode("", true)];
+    })], 16, _hoisted_5$1)) : createCommentVNode("", true)];
   }), renderSlot(_ctx.$slots, "decrementbutton", {
     listeners: $options.downButtonListeners
   }, function () {
@@ -6906,7 +7923,83 @@ script$3.render = render$2;
 
 /* Injected with object hook! */
 
-var style$1=({dt:n})=>`\n.p-password {\n    display: inline-flex;\n    position: relative;\n}\n\n.p-password .p-password-overlay {\n    min-width: 100%;\n}\n\n.p-password-meter {\n    height: ${n("password.meter.height")};\n    background: ${n("password.meter.background")};\n    border-radius: ${n("password.meter.border.radius")};\n}\n\n.p-password-meter-label {\n    height: 100%;\n    width: 0;\n    transition: width 1s ease-in-out;\n    border-radius: ${n("password.meter.border.radius")};\n}\n\n.p-password-meter-weak {\n    background: ${n("password.strength.weak.background")};\n}\n\n.p-password-meter-medium {\n    background: ${n("password.strength.medium.background")};\n}\n\n.p-password-meter-strong {\n    background: ${n("password.strength.strong.background")};\n}\n\n.p-password-fluid {\n    display: flex;\n}\n\n.p-password-fluid .p-password-input {\n    width: 100%;\n}\n\n.p-password-input::-ms-reveal,\n.p-password-input::-ms-clear {\n    display: none;\n}\n\n.p-password-overlay {\n    padding: ${n("password.overlay.padding")};\n    background: ${n("password.overlay.background")};\n    color: ${n("password.overlay.color")};\n    border: 1px solid ${n("password.overlay.border.color")};\n    box-shadow: ${n("password.overlay.shadow")};\n    border-radius: ${n("password.overlay.border.radius")};\n}\n\n.p-password-content {\n    display: flex;\n    flex-direction: column;\n    gap: ${n("password.content.gap")};\n}\n\n.p-password-toggle-mask-icon {\n    inset-inline-end: ${n("form.field.padding.x")};\n    color: ${n("password.icon.color")};\n    position: absolute;\n    top: 50%;\n    margin-top: calc(-1 * calc(${n("icon.size")} / 2));\n    width: ${n("icon.size")};\n    height: ${n("icon.size")};\n}\n\n.p-password:has(.p-password-toggle-mask-icon) .p-password-input {\n    padding-inline-end: calc((${n("form.field.padding.x")} * 2) + ${n("icon.size")});\n}\n`;/* Injected with object hook! */
+var style$1=css`
+    .p-password {
+        display: inline-flex;
+        position: relative;
+    }
+
+    .p-password .p-password-overlay {
+        min-width: 100%;
+    }
+
+    .p-password-meter {
+        height: dt('password.meter.height');
+        background: dt('password.meter.background');
+        border-radius: dt('password.meter.border.radius');
+    }
+
+    .p-password-meter-label {
+        height: 100%;
+        width: 0;
+        transition: width 1s ease-in-out;
+        border-radius: dt('password.meter.border.radius');
+    }
+
+    .p-password-meter-weak {
+        background: dt('password.strength.weak.background');
+    }
+
+    .p-password-meter-medium {
+        background: dt('password.strength.medium.background');
+    }
+
+    .p-password-meter-strong {
+        background: dt('password.strength.strong.background');
+    }
+
+    .p-password-fluid {
+        display: flex;
+    }
+
+    .p-password-fluid .p-password-input {
+        width: 100%;
+    }
+
+    .p-password-input::-ms-reveal,
+    .p-password-input::-ms-clear {
+        display: none;
+    }
+
+    .p-password-overlay {
+        padding: dt('password.overlay.padding');
+        background: dt('password.overlay.background');
+        color: dt('password.overlay.color');
+        border: 1px solid dt('password.overlay.border.color');
+        box-shadow: dt('password.overlay.shadow');
+        border-radius: dt('password.overlay.border.radius');
+    }
+
+    .p-password-content {
+        display: flex;
+        flex-direction: column;
+        gap: dt('password.content.gap');
+    }
+
+    .p-password-toggle-mask-icon {
+        inset-inline-end: dt('form.field.padding.x');
+        color: dt('password.icon.color');
+        position: absolute;
+        top: 50%;
+        margin-top: calc(-1 * calc(dt('icon.size') / 2));
+        width: dt('icon.size');
+        height: dt('icon.size');
+    }
+
+    .p-password:has(.p-password-toggle-mask-icon) .p-password-input {
+        padding-inline-end: calc((dt('form.field.padding.x') * 2) + dt('icon.size'));
+    }
+`;/* Injected with object hook! */
 
 var inlineStyles = {
   root: function root(_ref) {
@@ -7139,6 +8232,9 @@ var script$2 = {
       this.alignOverlay();
       this.bindScrollListener();
       this.bindResizeListener();
+
+      // Issue: #7508
+      this.$attrSelector && el.setAttribute(this.$attrSelector, '');
     },
     onOverlayLeave: function onOverlayLeave() {
       this.unbindScrollListener();
@@ -7363,7 +8459,6 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel,
     "aria-controls": _ctx.overlayProps && _ctx.overlayProps.id || _ctx.overlayId || _ctx.panelProps && _ctx.panelProps.id || _ctx.panelId || $options.overlayUniqueId,
-    "aria-expanded": $data.overlayVisible,
     "aria-haspopup": true,
     placeholder: _ctx.placeholder,
     required: _ctx.required,
@@ -7381,19 +8476,24 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.inputProps, {
     "data-p-has-e-icon": _ctx.toggleMask,
     pt: _ctx.ptm('pcInputText'),
-    unstyled: _ctx.unstyled
-  }), null, 16, ["id", "type", "class", "style", "defaultValue", "name", "aria-labelledby", "aria-label", "aria-controls", "aria-expanded", "placeholder", "required", "fluid", "disabled", "variant", "invalid", "size", "autofocus", "onInput", "onFocus", "onBlur", "onKeyup", "onInvalid", "data-p-has-e-icon", "pt", "unstyled"]), _ctx.toggleMask && $data.unmasked ? renderSlot(_ctx.$slots, _ctx.$slots.maskicon ? 'maskicon' : 'hideicon', {
+    unstyled: _ctx.unstyled,
+    formControl: {
+      novalidate: true
+    }
+  }), null, 16, ["id", "type", "class", "style", "defaultValue", "name", "aria-labelledby", "aria-label", "aria-controls", "placeholder", "required", "fluid", "disabled", "variant", "invalid", "size", "autofocus", "onInput", "onFocus", "onBlur", "onKeyup", "onInvalid", "data-p-has-e-icon", "pt", "unstyled"]), _ctx.toggleMask && $data.unmasked ? renderSlot(_ctx.$slots, _ctx.$slots.maskicon ? 'maskicon' : 'hideicon', mergeProps({
     key: 0,
-    toggleCallback: $options.onMaskToggle
-  }, function () {
+    toggleCallback: $options.onMaskToggle,
+    "class": [_ctx.cx('maskIcon'), _ctx.maskIcon]
+  }, _ctx.ptm('maskIcon')), function () {
     return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.maskIcon ? 'i' : 'EyeSlashIcon'), mergeProps({
       "class": [_ctx.cx('maskIcon'), _ctx.maskIcon],
       onClick: $options.onMaskToggle
     }, _ctx.ptm('maskIcon')), null, 16, ["class", "onClick"]))];
-  }) : createCommentVNode("", true), _ctx.toggleMask && !$data.unmasked ? renderSlot(_ctx.$slots, _ctx.$slots.unmaskicon ? 'unmaskicon' : 'showicon', {
+  }) : createCommentVNode("", true), _ctx.toggleMask && !$data.unmasked ? renderSlot(_ctx.$slots, _ctx.$slots.unmaskicon ? 'unmaskicon' : 'showicon', mergeProps({
     key: 1,
-    toggleCallback: $options.onMaskToggle
-  }, function () {
+    toggleCallback: $options.onMaskToggle,
+    "class": [_ctx.cx('unmaskIcon')]
+  }, _ctx.ptm('unmaskIcon')), function () {
     return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.unmaskIcon ? 'i' : 'EyeIcon'), mergeProps({
       "class": [_ctx.cx('unmaskIcon'), _ctx.unmaskIcon],
       onClick: $options.onMaskToggle
@@ -7423,7 +8523,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             onClick: _cache[0] || (_cache[0] = function () {
               return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
             }),
-            "data-p": $options.overlayDataP
+            "data-p": $options.overlayDataP,
+            role: "dialog",
+            "aria-live": "polite"
           }, _objectSpread(_objectSpread(_objectSpread({}, _ctx.panelProps), _ctx.overlayProps), _ctx.ptm('overlay'))), [renderSlot(_ctx.$slots, "header"), renderSlot(_ctx.$slots, "content", {}, function () {
             return [createBaseVNode("div", mergeProps({
               "class": _ctx.cx('content')
@@ -7452,7 +8554,90 @@ script$2.render = render$1;
 
 /* Injected with object hook! */
 
-var style=({dt:e})=>`\n.p-textarea {\n    font-family: inherit;\n    font-feature-settings: inherit;\n    font-size: 1rem;\n    color: ${e("textarea.color")};\n    background: ${e("textarea.background")};\n    padding-block: ${e("textarea.padding.y")};\n    padding-inline: ${e("textarea.padding.x")};\n    border: 1px solid ${e("textarea.border.color")};\n    transition: background ${e("textarea.transition.duration")}, color ${e("textarea.transition.duration")}, border-color ${e("textarea.transition.duration")}, outline-color ${e("textarea.transition.duration")}, box-shadow ${e("textarea.transition.duration")};\n    appearance: none;\n    border-radius: ${e("textarea.border.radius")};\n    outline-color: transparent;\n    box-shadow: ${e("textarea.shadow")};\n}\n\n.p-textarea:enabled:hover {\n    border-color: ${e("textarea.hover.border.color")};\n}\n\n.p-textarea:enabled:focus {\n    border-color: ${e("textarea.focus.border.color")};\n    box-shadow: ${e("textarea.focus.ring.shadow")};\n    outline: ${e("textarea.focus.ring.width")} ${e("textarea.focus.ring.style")} ${e("textarea.focus.ring.color")};\n    outline-offset: ${e("textarea.focus.ring.offset")};\n}\n\n.p-textarea.p-invalid {\n    border-color: ${e("textarea.invalid.border.color")};\n}\n\n.p-textarea.p-variant-filled {\n    background: ${e("textarea.filled.background")};\n}\n\n.p-textarea.p-variant-filled:enabled:hover {\n    background: ${e("textarea.filled.hover.background")};\n}\n\n.p-textarea.p-variant-filled:enabled:focus {\n    background: ${e("textarea.filled.focus.background")};\n}\n\n.p-textarea:disabled {\n    opacity: 1;\n    background: ${e("textarea.disabled.background")};\n    color: ${e("textarea.disabled.color")};\n}\n\n.p-textarea::placeholder {\n    color: ${e("textarea.placeholder.color")};\n}\n\n.p-textarea.p-invalid::placeholder {\n    color: ${e("textarea.invalid.placeholder.color")};\n}\n\n.p-textarea-fluid {\n    width: 100%;\n}\n\n.p-textarea-resizable {\n    overflow: hidden;\n    resize: none;\n}\n\n.p-textarea-sm {\n    font-size: ${e("textarea.sm.font.size")};\n    padding-block: ${e("textarea.sm.padding.y")};\n    padding-inline: ${e("textarea.sm.padding.x")};\n}\n\n.p-textarea-lg {\n    font-size: ${e("textarea.lg.font.size")};\n    padding-block: ${e("textarea.lg.padding.y")};\n    padding-inline: ${e("textarea.lg.padding.x")};\n}\n`;/* Injected with object hook! */
+var style=css`
+    .p-textarea {
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-size: 1rem;
+        color: dt('textarea.color');
+        background: dt('textarea.background');
+        padding-block: dt('textarea.padding.y');
+        padding-inline: dt('textarea.padding.x');
+        border: 1px solid dt('textarea.border.color');
+        transition:
+            background dt('textarea.transition.duration'),
+            color dt('textarea.transition.duration'),
+            border-color dt('textarea.transition.duration'),
+            outline-color dt('textarea.transition.duration'),
+            box-shadow dt('textarea.transition.duration');
+        appearance: none;
+        border-radius: dt('textarea.border.radius');
+        outline-color: transparent;
+        box-shadow: dt('textarea.shadow');
+    }
+
+    .p-textarea:enabled:hover {
+        border-color: dt('textarea.hover.border.color');
+    }
+
+    .p-textarea:enabled:focus {
+        border-color: dt('textarea.focus.border.color');
+        box-shadow: dt('textarea.focus.ring.shadow');
+        outline: dt('textarea.focus.ring.width') dt('textarea.focus.ring.style') dt('textarea.focus.ring.color');
+        outline-offset: dt('textarea.focus.ring.offset');
+    }
+
+    .p-textarea.p-invalid {
+        border-color: dt('textarea.invalid.border.color');
+    }
+
+    .p-textarea.p-variant-filled {
+        background: dt('textarea.filled.background');
+    }
+
+    .p-textarea.p-variant-filled:enabled:hover {
+        background: dt('textarea.filled.hover.background');
+    }
+
+    .p-textarea.p-variant-filled:enabled:focus {
+        background: dt('textarea.filled.focus.background');
+    }
+
+    .p-textarea:disabled {
+        opacity: 1;
+        background: dt('textarea.disabled.background');
+        color: dt('textarea.disabled.color');
+    }
+
+    .p-textarea::placeholder {
+        color: dt('textarea.placeholder.color');
+    }
+
+    .p-textarea.p-invalid::placeholder {
+        color: dt('textarea.invalid.placeholder.color');
+    }
+
+    .p-textarea-fluid {
+        width: 100%;
+    }
+
+    .p-textarea-resizable {
+        overflow: hidden;
+        resize: none;
+    }
+
+    .p-textarea-sm {
+        font-size: dt('textarea.sm.font.size');
+        padding-block: dt('textarea.sm.padding.y');
+        padding-inline: dt('textarea.sm.padding.x');
+    }
+
+    .p-textarea-lg {
+        font-size: dt('textarea.lg.font.size');
+        padding-block: dt('textarea.lg.padding.y');
+        padding-inline: dt('textarea.lg.padding.x');
+    }
+`;/* Injected with object hook! */
 
 var classes = {
   root: function root(_ref) {
@@ -7587,26 +8772,22 @@ const _hoisted_2$1 = {
   key: 0,
   class: "flex flex-col gap-2"
 };
-const _hoisted_3$1 = { class: "flex gap-2 text-sm min-h-8" };
-const _hoisted_4$1 = { class: "w-32 flex items-center h-8" };
-const _hoisted_5$1 = { class: "inline-flex items-center w-full min-h-8" };
-const _hoisted_6 = { class: "px-2 py-1 bg-gray-1 rounded text-xs" };
-const _hoisted_7 = { class: "w-32 flex items-center h-8" };
-const _hoisted_8 = {
+const _hoisted_3$1 = { class: "w-32 flex items-center h-8" };
+const _hoisted_4$1 = {
   key: 0,
   class: "inline-flex items-center w-full min-h-8"
 };
-const _hoisted_9 = {
+const _hoisted_5 = {
   key: 0,
   flex: "~ gap-1"
 };
-const _hoisted_10 = ["href"];
-const _hoisted_11 = ["src"];
-const _hoisted_12 = {
+const _hoisted_6 = ["href"];
+const _hoisted_7 = ["src"];
+const _hoisted_8 = {
   key: 9,
   class: "px-2 py-1 bg-gray-1 rounded text-xs"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "VDPageFrontmatter",
   props: {
     frontmatter: {}
@@ -7627,29 +8808,32 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const date = ref(dayjs(clientPageData.value?.frontmatter.date).toDate());
     const updated = ref(dayjs(clientPageData.value?.frontmatter.updated).toDate());
     return (_ctx, _cache) => {
-      const _component_VDTag = __unplugin_components_0;
-      const _component_VDPostCategories = _sfc_main$6;
-      const _component_VDFmExcerptType = _sfc_main$7;
+      const _component_VDFormItem = _sfc_main$6;
+      const _component_VDTag = __unplugin_components_1;
+      const _component_VDPostCategories = _sfc_main$8;
+      const _component_VDFmExcerptType = _sfc_main$9;
       return openBlock(), createElementBlock("div", _hoisted_1$3, [
         _ctx.frontmatter ? (openBlock(), createElementBlock("ul", _hoisted_2$1, [
-          createBaseVNode("li", _hoisted_3$1, [
-            createBaseVNode("div", _hoisted_4$1, [
-              createBaseVNode("strong", null, toDisplayString(unref(t)("pageData.path")), 1)
-            ]),
-            createBaseVNode("div", _hoisted_5$1, [
-              createBaseVNode("code", _hoisted_6, toDisplayString(unref(activePath)), 1)
-            ])
-          ]),
+          unref(clientPageData)?.routePath ? (openBlock(), createBlock(_component_VDFormItem, {
+            key: 0,
+            label: unref(t)("pageData.routePath"),
+            value: unref(clientPageData)?.routePath
+          }, null, 8, ["label", "value"])) : createCommentVNode("", true),
+          unref(clientPageData)?.routePath ? (openBlock(), createBlock(_component_VDFormItem, {
+            key: 1,
+            label: unref(t)("pageData.filePath"),
+            value: unref(clientPageData)?.filePath
+          }, null, 8, ["label", "value"])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.frontmatter, (value, key) => {
             return openBlock(), createElementBlock("li", {
               key,
               class: "flex gap-2 text-sm min-h-8"
             }, [
-              createBaseVNode("div", _hoisted_7, [
+              createBaseVNode("div", _hoisted_3$1, [
                 createBaseVNode("strong", null, toDisplayString(unref(t)(`frontmatter.${key}`, key)), 1)
               ]),
-              unref(clientPageData) ? (openBlock(), createElementBlock("div", _hoisted_8, [
-                key === "tags" ? (openBlock(), createElementBlock("div", _hoisted_9, [
+              unref(clientPageData) ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+                key === "tags" ? (openBlock(), createElementBlock("div", _hoisted_5, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(value, (tag) => {
                     return openBlock(), createBlock(_component_VDTag, { key: tag }, {
                       default: withCtx(() => [
@@ -7673,8 +8857,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   createBaseVNode("img", {
                     src: value,
                     class: "max-h-20 rounded shadow"
-                  }, null, 8, _hoisted_11)
-                ], 8, _hoisted_10)) : key === "date" ? (openBlock(), createBlock(unref(script$8), {
+                  }, null, 8, _hoisted_7)
+                ], 8, _hoisted_6)) : key === "date" ? (openBlock(), createBlock(unref(script$8), {
                   key: 5,
                   modelValue: date.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => date.value = $event),
@@ -7705,7 +8889,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   key: 8,
                   "excerpt-type": unref(clientPageData).frontmatter.excerpt_type,
                   "onUpdate:excerptType": _cache[3] || (_cache[3] = ($event) => unref(clientPageData).frontmatter.excerpt_type = $event)
-                }, null, 8, ["excerpt-type"])) : key === "pageTitleClass" ? (openBlock(), createElementBlock("code", _hoisted_12, toDisplayString(value), 1)) : key === "password" ? (openBlock(), createBlock(unref(script$2), {
+                }, null, 8, ["excerpt-type"])) : key === "pageTitleClass" ? (openBlock(), createElementBlock("code", _hoisted_8, toDisplayString(value), 1)) : key === "password" ? (openBlock(), createBlock(unref(script$2), {
                   key: 10,
                   modelValue: unref(clientPageData).frontmatter.password,
                   "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => unref(clientPageData).frontmatter.password = $event),
@@ -7752,14 +8936,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 /* Injected with object hook! */
 
 const _hoisted_1$2 = { p: "2" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "VDPostPanel",
   setup(__props) {
     onMounted(async () => {
       clientPageData.value = await rpc.getPageData("");
     });
     return (_ctx, _cache) => {
-      const _component_VDPageFrontmatter = _sfc_main$4;
+      const _component_VDPageFrontmatter = _sfc_main$5;
       return openBlock(), createElementBlock("div", _hoisted_1$2, [
         unref(clientPageData)?.frontmatter ? (openBlock(), createBlock(_component_VDPageFrontmatter, {
           key: 0,
@@ -7792,34 +8976,78 @@ var relativeTimeExports = requireRelativeTime();
 const relativeTime = /*@__PURE__*/getDefaultExportFromCjs(relativeTimeExports);
 /* Injected with object hook! */
 
+const _hoisted_1$1 = { class: "list-decimal text-sm" };
+const _hoisted_2 = { class: "text-xs" };
+const _hoisted_3 = { class: "op-80" };
+const _hoisted_4 = { class: "font-mono op-60" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "VDPostListItem",
+  props: {
+    post: {}
+  },
+  setup(__props) {
+    const props = __props;
+    dayjs.extend(relativeTime);
+    function onClickPost(post) {
+      devtoolsRouter.value?.push(post.routePath);
+      clientPageData.value = post;
+    }
+    const active = computed(() => {
+      return clientPageData.value?.routePath === props.post.routePath || activePath.value === props.post.routePath;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", _hoisted_1$1, [
+        createBaseVNode("div", {
+          flex: "~ gap-1",
+          class: normalizeClass(["items-center justify-center hover:op-100 op-80", { "text-blue-600 dark:text-blue-400": active.value }])
+        }, [
+          _ctx.post.filePath ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: "text-xs transition filter-grayscale-100 hover:filter-grayscale-0",
+            onClick: _cache[0] || (_cache[0] = ($event) => unref(openInEditor)({
+              file: _ctx.post.filePath,
+              line: 2
+            }))
+          }, _cache[2] || (_cache[2] = [
+            createBaseVNode("div", { "i-vscode-icons:file-type-vscode": "" }, null, -1)
+          ]))) : createCommentVNode("", true),
+          createBaseVNode("span", {
+            class: "inline-flex flex-grow cursor-pointer truncate",
+            onClick: _cache[1] || (_cache[1] = ($event) => onClickPost(_ctx.post))
+          }, toDisplayString(_ctx.post.frontmatter.title), 1),
+          createBaseVNode("div", _hoisted_2, [
+            createBaseVNode("span", _hoisted_3, toDisplayString(unref(dayjs)(_ctx.post.frontmatter.updated).fromNow()), 1),
+            _cache[3] || (_cache[3] = createBaseVNode("span", { class: "mx-1" }, "|", -1)),
+            createBaseVNode("span", _hoisted_4, toDisplayString(unref(dayjs)(_ctx.post.frontmatter.date).format("YYYY-MM-DD HH:MM")), 1)
+          ])
+        ], 2)
+      ]);
+    };
+  }
+});
+
+/* Injected with object hook! */
+
 /* unplugin-vue-components disabled */
 /* Injected with object hook! */
 
 /* unplugin-vue-components disabled */const _sfc_main$2 = {  };
 
-const _hoisted_1$1 = { class: "bottom-gradient" };
+const _hoisted_1 = { class: "bottom-gradient" };
 
 function _sfc_render(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$1))
+  return (openBlock(), createElementBlock("div", _hoisted_1))
 }
 const VDBottomGradient = /*#__PURE__*/_export_sfc(_sfc_main$2, [['render',_sfc_render],['__scopeId',"data-v-2102e92e"]]);
 /* Injected with object hook! */
 
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = { class: "text-xs" };
-const _hoisted_4 = { class: "op-80" };
-const _hoisted_5 = { class: "font-mono op-55" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "VDPostList",
   setup(__props) {
-    dayjs.extend(relativeTime);
-    function onClickPost(post) {
-      clientPageData.value = post;
-    }
     const postListElRef = ref();
     const { arrivedState } = useScroll(postListElRef);
     return (_ctx, _cache) => {
+      const _component_VDPostListItem = _sfc_main$3;
       return openBlock(), createElementBlock("ul", {
         ref_key: "postListElRef",
         ref: postListElRef,
@@ -7831,35 +9059,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         py: "4"
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(postList).posts, (post) => {
-          return openBlock(), createElementBlock("li", {
+          return openBlock(), createBlock(_component_VDPostListItem, {
             key: post.routePath,
+            post,
             class: "list-decimal text-sm"
-          }, [
-            createBaseVNode("div", {
-              flex: "~ gap-1",
-              class: normalizeClass(["items-center justify-center hover:text-blue-500", { "text-blue-500": unref(clientPageData)?.routePath === post.routePath }])
-            }, [
-              post.filePath ? (openBlock(), createElementBlock("button", {
-                key: 0,
-                class: "text-xs transition filter-grayscale-100 hover:filter-grayscale-0",
-                onClick: ($event) => unref(openInEditor)({
-                  file: post.filePath,
-                  line: 2
-                })
-              }, _cache[0] || (_cache[0] = [
-                createBaseVNode("div", { "i-vscode-icons:file-type-vscode": "" }, null, -1)
-              ]), 8, _hoisted_1)) : createCommentVNode("", true),
-              createBaseVNode("span", {
-                class: "inline-flex flex-grow cursor-pointer",
-                onClick: ($event) => onClickPost(post)
-              }, toDisplayString(post.frontmatter.title), 9, _hoisted_2),
-              createBaseVNode("div", _hoisted_3, [
-                createBaseVNode("span", _hoisted_4, toDisplayString(unref(dayjs)(post.frontmatter.updated).fromNow()), 1),
-                _cache[1] || (_cache[1] = createBaseVNode("span", { class: "mx-1" }, "|", -1)),
-                createBaseVNode("span", _hoisted_5, toDisplayString(unref(dayjs)(post.frontmatter.date).format("YYYY-MM-DD HH:MM")), 1)
-              ])
-            ], 2)
-          ]);
+          }, null, 8, ["post"]);
         }), 128)),
         createVNode(Transition, null, {
           default: withCtx(() => [
@@ -7886,7 +9090,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_VDPostList = _sfc_main$1;
-      const _component_VDPostPanel = _sfc_main$3;
+      const _component_VDPostPanel = _sfc_main$4;
       return openBlock(), createBlock(unref(Pe), { class: "h-full" }, {
         default: withCtx(() => [
           createVNode(unref(ge), null, {