@dpa-id-components/dpa-shared-components 11.0.0-alpha.0 → 11.0.0

package/README.md

@@ -56,6 +56,35 @@ The tailwind config is located at `./src/tailwind/tailwind.config.ts`.
 Please be aware that used plugins must be listed in the dependencies or the projects using the components have to
 install it.
 
+### ESLint
+
+As of version `11.x.x`, this project is setup to use ESLint 9+ which no longer supports the `.eslintrc` configuration format. The [ESLint flat configuration file](https://eslint.org/docs/latest/use/configure/configuration-files) for this project is located at `./eslint.config.mjs`. The base ESLint configuration `./eslint.base.config.mjs` is exported in the published npm package as a [shareable config file](https://eslint.org/docs/latest/extend/shareable-configs) and can be used as the base configuration for host projects. Plugins and third party configs used in `./eslint.base.config.mjs` should be added to `dependencies` in `package.json`. 
+
+Please note the following when configuring the `eslint.config.mjs` file in a host project:
+- Project specific third-party plugins and config (updated accordingly for flat config support) should be added as `devDependencies`
+- Files to be included or ignored by ESLint should be configured here
+- Adjust the `lint` script in `package.json` to `"lint": "eslint . --fix"`
+
+To use the shared ESLint config in a host project's `eslint.config.mjs`:
+
+```JavaScript
+import sharedConfig from "@dpa-id-components/dpa-shared-components/eslint.config";
+// Other project specific plugins
+import pluginCypress from "eslint-plugin-cypress/flat";
+
+export default [
+  // Files to include or ignore under linting
+  {
+    files: ["**/*.js", "**/*.mjs", "**/*.ts", "**/*.mts", "**/*.vue"],
+  },
+  {
+    ignores: ["_infrastructure/*", "**/dist/**", "**/coverage/**"],
+  },
+  ...sharedConfig,
+  pluginCypress.configs.recommended,
+];
+```
+
 ## Add a component
 
 To add a new component please add at least the following files:

package/dist/components/UiCheckBoxGroup/UiCheckBoxGroup.stories.d.ts

@@ -8,11 +8,7 @@ declare const meta: {
             default: boolean;
         };
         item: {
-            type: import('vue').PropType<{
-                name: string;
-                isChecked: boolean;
-                iconName: string;
-            }[]>;
+            type: import('vue').PropType<import('./UiCheckBoxGroup.vue').CheckboxItem[]>;
             default: () => never[];
         };
         firstEntryChecksAll: {
@@ -29,11 +25,7 @@ declare const meta: {
             default: boolean;
         };
         item: {
-            type: import('vue').PropType<{
-                name: string;
-                isChecked: boolean;
-                iconName: string;
-            }[]>;
+            type: import('vue').PropType<import('./UiCheckBoxGroup.vue').CheckboxItem[]>;
             default: () => never[];
         };
         firstEntryChecksAll: {
@@ -46,11 +38,7 @@ declare const meta: {
         "onItem-checked"?: ((...args: any[]) => any) | undefined;
     }>, {
         disabled: boolean;
-        item: {
-            name: string;
-            isChecked: boolean;
-            iconName: string;
-        }[];
+        item: import('./UiCheckBoxGroup.vue').CheckboxItem[];
         firstEntryChecksAll: boolean;
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     argTypes: {

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

@@ -1,7 +1,7 @@
-type CheckboxItem = {
+export type CheckboxItem = {
     name: string;
     isChecked: boolean;
-    iconName: string;
+    iconName?: string;
 };
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     item?: CheckboxItem[];

package/dist/components/UiCollapseNavigation/UiCollapseNavigation.stories.d.ts

@@ -16,7 +16,9 @@ declare const meta: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
-        }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        }>> & Readonly<{}>, {
+            openMenu: import('vue').Ref<any, any>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
             headline: string;
             hasBorderTop: boolean;
             openAsDefault: boolean;
@@ -40,7 +42,9 @@ declare const meta: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
-        }>> & Readonly<{}>, {}, {}, {}, {}, {
+        }>> & Readonly<{}>, {
+            openMenu: import('vue').Ref<any, any>;
+        }, {}, {}, {}, {
             headline: string;
             hasBorderTop: boolean;
             openAsDefault: boolean;
@@ -61,7 +65,9 @@ declare const meta: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    }>> & Readonly<{}>, {
+        openMenu: import('vue').Ref<any, any>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
         headline: string;
         hasBorderTop: boolean;
         openAsDefault: boolean;

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

@@ -9,7 +9,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     headline: string;
     hasBorderTop: boolean;
     openAsDefault: boolean;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>>, {
+    openMenu: import('vue').Ref<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     headline?: string;
     hasBorderTop?: boolean;
     openAsDefault?: boolean;

package/dist/components/UiDatePicker/UiDatePicker.stories.d.ts

@@ -114,7 +114,6 @@ declare const meta: {
             };
             customFormatCallback: {
                 type: import('vue').PropType<any>;
-                required: true;
                 default: undefined;
             };
             inputLabel: {
@@ -302,7 +301,6 @@ declare const meta: {
             };
             customFormatCallback: {
                 type: import('vue').PropType<any>;
-                required: true;
                 default: undefined;
             };
             inputLabel: {
@@ -481,7 +479,6 @@ declare const meta: {
         };
         customFormatCallback: {
             type: import('vue').PropType<any>;
-            required: true;
             default: undefined;
         };
         inputLabel: {
@@ -777,7 +774,6 @@ declare const meta: {
                     };
                     customFormatCallback: {
                         type: import('vue').PropType<any>;
-                        required: true;
                         default: undefined;
                     };
                     inputLabel: {
@@ -965,7 +961,6 @@ declare const meta: {
                     };
                     customFormatCallback: {
                         type: import('vue').PropType<any>;
-                        required: true;
                         default: undefined;
                     };
                     inputLabel: {
@@ -1144,7 +1139,6 @@ declare const meta: {
                 };
                 customFormatCallback: {
                     type: import('vue').PropType<any>;
-                    required: true;
                     default: undefined;
                 };
                 inputLabel: {

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

@@ -39,7 +39,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     activeState?: boolean;
     disabledState?: boolean;
     monthPicker?: boolean;
-    customFormatCallback: any;
+    customFormatCallback?: any;
     inputLabel?: string;
     iconLeft?: (typeof iconNames)[number] | null;
     utc?: boolean;
@@ -114,7 +114,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     activeState?: boolean;
     disabledState?: boolean;
     monthPicker?: boolean;
-    customFormatCallback: any;
+    customFormatCallback?: any;
     inputLabel?: string;
     iconLeft?: (typeof iconNames)[number] | null;
     utc?: boolean;

package/dist/components/UiFilterBadgeButton/UiFilterBadgeButton.stories.d.ts

@@ -22,7 +22,6 @@ declare const meta: {
             };
             isActive: {
                 type: import('vue').PropType<boolean>;
-                required: true;
                 default: boolean;
             };
         }>> & Readonly<{
@@ -60,7 +59,6 @@ declare const meta: {
             };
             isActive: {
                 type: import('vue').PropType<boolean>;
-                required: true;
                 default: boolean;
             };
         }>> & Readonly<{
@@ -93,7 +91,6 @@ declare const meta: {
         };
         isActive: {
             type: import('vue').PropType<boolean>;
-            required: true;
             default: boolean;
         };
     }>> & Readonly<{
@@ -164,7 +161,6 @@ declare const meta: {
                     };
                     isActive: {
                         type: import('vue').PropType<boolean>;
-                        required: true;
                         default: boolean;
                     };
                 }>> & Readonly<{
@@ -202,7 +198,6 @@ declare const meta: {
                     };
                     isActive: {
                         type: import('vue').PropType<boolean>;
-                        required: true;
                         default: boolean;
                     };
                 }>> & Readonly<{
@@ -235,7 +230,6 @@ declare const meta: {
                 };
                 isActive: {
                     type: import('vue').PropType<boolean>;
-                    required: true;
                     default: boolean;
                 };
             }>> & Readonly<{

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

@@ -6,7 +6,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fill?: string;
     iconIsFilled?: boolean;
     label: string;
-    isActive: boolean;
+    isActive?: boolean;
 }>, {
     color: string;
     fill: string;
@@ -19,7 +19,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fill?: string;
     iconIsFilled?: boolean;
     label: string;
-    isActive: boolean;
+    isActive?: boolean;
 }>, {
     color: string;
     fill: string;

package/dist/components/UiInput/UiInput.stories.d.ts

@@ -5,7 +5,7 @@ declare const meta: {
     component: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
             type: {
-                type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                 default: string;
             };
             disabled: {
@@ -99,7 +99,7 @@ declare const meta: {
             keyup: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
         }, import('vue').PublicProps, {
-            type: "text" | "number" | "time" | "date" | "password";
+            type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
             disabled: boolean;
             label: string;
             readonly: boolean;
@@ -127,7 +127,7 @@ declare const meta: {
             Defaults: {};
         }, Readonly<import('vue').ExtractPropTypes<{
             type: {
-                type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                 default: string;
             };
             disabled: {
@@ -215,7 +215,7 @@ declare const meta: {
         }>, {
             inputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
         }, {}, {}, {}, {
-            type: "text" | "number" | "time" | "date" | "password";
+            type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
             disabled: boolean;
             label: string;
             readonly: boolean;
@@ -240,7 +240,7 @@ declare const meta: {
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
         type: {
-            type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+            type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
             default: string;
         };
         disabled: {
@@ -334,7 +334,7 @@ declare const meta: {
         keyup: (...args: any[]) => void;
         "update:modelValue": (...args: any[]) => void;
     }, string, {
-        type: "text" | "number" | "time" | "date" | "password";
+        type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
         disabled: boolean;
         label: string;
         readonly: boolean;
@@ -431,7 +431,7 @@ declare const meta: {
             UiInput: {
                 new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
                     type: {
-                        type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                        type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                         default: string;
                     };
                     disabled: {
@@ -525,7 +525,7 @@ declare const meta: {
                     keyup: (...args: any[]) => void;
                     "update:modelValue": (...args: any[]) => void;
                 }, import('vue').PublicProps, {
-                    type: "text" | "number" | "time" | "date" | "password";
+                    type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
                     disabled: boolean;
                     label: string;
                     readonly: boolean;
@@ -553,7 +553,7 @@ declare const meta: {
                     Defaults: {};
                 }, Readonly<import('vue').ExtractPropTypes<{
                     type: {
-                        type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                        type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                         default: string;
                     };
                     disabled: {
@@ -641,7 +641,7 @@ declare const meta: {
                 }>, {
                     inputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
                 }, {}, {}, {}, {
-                    type: "text" | "number" | "time" | "date" | "password";
+                    type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
                     disabled: boolean;
                     label: string;
                     readonly: boolean;
@@ -666,7 +666,7 @@ declare const meta: {
                 __isSuspense?: never;
             } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
                 type: {
-                    type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                    type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                     default: string;
                 };
                 disabled: {
@@ -760,7 +760,7 @@ declare const meta: {
                 keyup: (...args: any[]) => void;
                 "update:modelValue": (...args: any[]) => void;
             }, string, {
-                type: "text" | "number" | "time" | "date" | "password";
+                type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
                 disabled: boolean;
                 label: string;
                 readonly: boolean;

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

@@ -4,7 +4,7 @@ declare function __VLS_template(): {
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     id?: string;
     modelValue: string;
-    type?: "text" | "number" | "time" | "date" | "password";
+    type?: "text" | "number" | "time" | "date" | "password" | "datetime-local";
     label?: string;
     placeholder?: string;
     autofocus?: boolean;
@@ -53,7 +53,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     id?: string;
     modelValue: string;
-    type?: "text" | "number" | "time" | "date" | "password";
+    type?: "text" | "number" | "time" | "date" | "password" | "datetime-local";
     label?: string;
     placeholder?: string;
     autofocus?: boolean;
@@ -98,7 +98,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onKeyup?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    type: "text" | "number" | "time" | "date" | "password";
+    type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
     disabled: boolean;
     label: string;
     readonly: boolean;

package/dist/components/UiSearchInput/UiSearchInput.stories.d.ts

@@ -125,7 +125,9 @@ declare const meta: {
             control: "text";
         };
         modelValue: {
-            control: "array";
+            control: {
+                type: "object";
+            };
         };
         placeholder: {
             control: "text";

package/dist/dpa-shared-components.mjs

@@ -7550,7 +7550,7 @@ const Ps = /* @__PURE__ */ Va(wh, [["render", _h]]), xh = ["checked", "aria-chec
       class: fe(["text-small flex flex-col", [a.disabled ? "text-gray-400" : "cursor-pointer text-gray-900"]])
     }, [
       se("input", {
-        class: fe(["peer relative h-0 w-0 appearance-none self-center focus:outline-none", a.size]),
+        class: fe(["peer relative size-0 appearance-none self-center focus:outline-none", a.size]),
         type: "checkbox",
         checked: a.checked,
         "aria-checked": a.checked,
@@ -7559,8 +7559,8 @@ const Ps = /* @__PURE__ */ Va(wh, [["render", _h]]), xh = ["checked", "aria-chec
       }, null, 42, xh),
       se("span", {
         class: fe(["flex items-center before:box-border before:inline-block before:shrink-0 before:border-2 before:transition-colors before:content-[''] after:absolute after:block peer-checked:opacity-100 peer-checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZSc+PHJlY3QgLz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTguMjE5NjUgMTVDNy45ODk2NSAxNSA3Ljc2OTY1IDE0LjkwNSA3LjYxMjE1IDE0LjczNzVMMy41NTk2NSAxMC40MjE3QzMuMjQzODEgMTAuMDg2NyAzLjI2MTMxIDkuNTU5MTggMy41OTYzMSA5LjI0NDE4QzMuOTMyMTUgOC45MjkxOCA0LjQ1OTY1IDguOTQ1ODUgNC43NzM4MSA5LjI4MDg1TDguMjExMzEgMTIuOTRMMTUuMjE4IDUuMjcxNjhDMTUuNTI5NiA0LjkzMDg1IDE2LjA1NjMgNC45MDgzNSAxNi4zOTYzIDUuMjE4MzVDMTYuNzM1NSA1LjUyODM1IDE2Ljc1ODggNi4wNTU4NSAxNi40NDg4IDYuMzk1MDFMOC44MzQ2NSAxNC43MjgzQzguNjc4ODEgMTQuOSA4LjQ1NzE1IDE0Ljk5ODMgOC4yMjU0OCAxNUg4LjIxOTY1WicgZmlsbD0nd2hpdGUnLz48L3N2Zz4=)]", {
-          "before:h-5 before:w-5 after:h-5 after:w-5": a.size === "medium",
-          "before:h-4 before:w-4 after:h-4 after:w-4": a.size === "small",
+          "before:size-5 after:size-5": a.size === "medium",
+          "before:size-4 after:size-4": a.size === "small",
           "before:border-blue-default peer-checked:before:bg-blue-default peer-hover:before:border-blue-dark peer-hover:peer-checked:before:bg-blue-dark": a.color === "blue",
           "before:border-gray-800 peer-checked:before:bg-gray-800 peer-hover:before:border-gray-900 peer-hover:peer-checked:before:bg-gray-900": a.color === "gray",
           "before:border-gray-500 peer-checked:before:bg-gray-500": a.disabled,
@@ -7881,7 +7881,7 @@ const Ps = /* @__PURE__ */ Va(wh, [["render", _h]]), xh = ["checked", "aria-chec
       _: 3
     }, 8, ["class", "disabled", "href"]));
   }
-}), $h = {}, Eh = { class: "flex [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r [&>*]:border-[1px] [&>*]:border-r-0 [&>*]:border-gray-300" };
+}), $h = {}, Eh = { class: "flex [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r [&>*]:border [&>*]:border-r-0 [&>*]:border-gray-300" };
 function Ih(e, t) {
   return P(), z("div", Eh, [
     de(e.$slots, "default")
@@ -7968,28 +7968,28 @@ const Rw = /* @__PURE__ */ Va(Bh, [["render", Rh]]), zw = /* @__PURE__ */ Ae({
     hasBorderTop: { type: Boolean, default: !0 },
     openAsDefault: { type: Boolean, default: !0 }
   },
-  setup(e) {
-    const t = e, r = re();
+  setup(e, { expose: t }) {
+    const r = e, n = re();
     Un(() => {
-      r.value = t.openAsDefault;
+      n.value = r.openAsDefault;
     });
-    const n = () => {
-      r.value = !r.value;
+    const a = () => {
+      n.value = !n.value;
     };
-    return (a, o) => (P(), z($e, null, [
+    return t({ openMenu: n }), (o, s) => (P(), z($e, null, [
       se("div", {
-        class: fe(a.hasBorderTop ? "border-t-[1px] border-t-gray-300" : "")
+        class: fe(o.hasBorderTop ? "border-t-[1px] border-t-gray-300" : "")
       }, null, 2),
       Ne(Da, {
         color: "transparent",
         class: "flex w-full justify-between border-none",
-        onClick: n
+        onClick: a
       }, {
         default: Te(() => [
-          se("h3", zh, Be(a.headline), 1),
+          se("h3", zh, Be(o.headline), 1),
           Ne(gt, {
             name: "chevron-down",
-            class: fe(["rounded-full text-gray-700 transition-transform duration-500 hover:bg-gray-300", { "rotate-180": r.value }])
+            class: fe(["rounded-full text-gray-700 transition-transform duration-500 hover:bg-gray-300", { "rotate-180": n.value }])
           }, null, 8, ["class"])
         ]),
         _: 1
@@ -8003,8 +8003,8 @@ const Rw = /* @__PURE__ */ Va(Bh, [["render", Rh]]), zw = /* @__PURE__ */ Ae({
         "leave-to-class": "transform -translate-y-[20px] opacity-0"
       }, {
         default: Te(() => [
-          r.value ? (P(), z("div", Nh, [
-            de(a.$slots, "default")
+          n.value ? (P(), z("div", Nh, [
+            de(o.$slots, "default")
           ])) : K("", !0)
         ]),
         _: 3
@@ -17698,7 +17698,7 @@ const Vi = {
         },
         v.monthPicker ? {} : {
           range: s.value,
-          startDate: Array.isArray(v.selectedDate) ? v.selectedDate[0] : v.selectedDate
+          startDate: Array.isArray(n.selectedDate) ? n.selectedDate[0] : n.selectedDate
         },
         {
           "focus-start-date": "",
@@ -18122,7 +18122,7 @@ const Vb = {
         name: n.iconIsFilled ? "saved-search-fill" : "saved-search"
       }, null, 8, ["name"]),
       se("div", {
-        class: fe(["absolute inset-0 mt-0 h-full w-full rounded-full opacity-10 group-hover:block", { hidden: !n.isActive }]),
+        class: fe(["absolute inset-0 mt-0 size-full rounded-full opacity-10 group-hover:block", { hidden: !n.isActive }]),
         style: rt({ backgroundColor: n.fill })
       }, null, 6),
       se("p", {
@@ -19454,7 +19454,7 @@ const O1 = { class: "flex items-center" }, D1 = ["placeholder"], C1 = /* @__PURE
       [C(Wa), f]
     ]);
   }
-}), Hw = /* @__PURE__ */ Va(z1, [["__scopeId", "data-v-1546f346"]]), jw = /* @__PURE__ */ Ae({
+}), Hw = /* @__PURE__ */ Va(z1, [["__scopeId", "data-v-50966021"]]), jw = /* @__PURE__ */ Ae({
   __name: "UiMenuList",
   props: {
     class: { default: void 0 }
@@ -19479,14 +19479,15 @@ const O1 = { class: "flex items-center" }, D1 = ["placeholder"], C1 = /* @__PURE
     checkboxColor: { default: "blue" }
   },
   setup(e) {
-    return (t, r) => (P(), xe(na, wt({
-      selectable: t.listVariant === "selectable",
-      "check-box-menu": t.listVariant === "checkbox",
-      "icon-size": t.iconSize,
-      "image-shape": t.imageShape,
-      "checkbox-size": t.checkboxSize,
-      "check-box-color": t.checkboxColor,
-      class: C(Oa)("hover:bg-gray-100 focus:bg-gray-300", t.$props.class)
+    const t = e;
+    return (r, n) => (P(), xe(na, wt({
+      selectable: r.listVariant === "selectable",
+      "check-box-menu": r.listVariant === "checkbox",
+      "icon-size": r.iconSize,
+      "image-shape": r.imageShape,
+      "checkbox-size": r.checkboxSize,
+      "check-box-color": r.checkboxColor,
+      class: C(Oa)("hover:bg-gray-100 focus:bg-gray-300", r.$props.class)
     }, {
       ...t.option ? {
         selected: t.option.selected,
@@ -19495,12 +19496,12 @@ const O1 = { class: "flex items-center" }, D1 = ["placeholder"], C1 = /* @__PURE
       } : {}
     }), {
       default: Te(() => [
-        de(t.$slots, "default", { option: t.option })
+        de(r.$slots, "default", { option: r.option })
       ]),
       _: 3
     }, 16, ["selectable", "check-box-menu", "icon-size", "image-shape", "checkbox-size", "check-box-color", "class"]));
   }
-}), N1 = { class: "relative h-full w-full border-none" }, F1 = { class: "absolute right-3 top-12 z-10 block border-t bg-white px-4 py-3 shadow-lg" }, Gw = /* @__PURE__ */ Ae({
+}), N1 = { class: "relative size-full border-none" }, F1 = { class: "absolute right-3 top-12 z-10 block border-t bg-white px-4 py-3 shadow-lg" }, Gw = /* @__PURE__ */ Ae({
   __name: "UiOverlayMenu",
   props: {
     isOpen: { type: Boolean, default: !1 }
@@ -20072,7 +20073,11 @@ const O1 = { class: "flex items-center" }, D1 = ["placeholder"], C1 = /* @__PURE
             onInput: (_) => c(v, _.target.value),
             onBlur: h,
             onKeyup: or((_) => i(v, _.target.value), ["delete"]),
-            onKeydown: (_) => f(v, _.target.value, _)
+            onKeydown: (_) => f(
+              v,
+              _.target.value,
+              _
+            )
           }, null, 40, tw),
           g.hasAddEntryOption && w(v) ? (P(), xe(Ia, {
             key: 0,
@@ -20154,7 +20159,7 @@ const O1 = { class: "flex items-center" }, D1 = ["placeholder"], C1 = /* @__PURE
             ref_key: "searchInputRef",
             ref: l,
             value: x.modelValue,
-            class: fe(["h-full w-full bg-transparent outline-none placeholder:text-gray-700 lg:text-sm", [
+            class: fe(["size-full bg-transparent outline-none placeholder:text-gray-700 lg:text-sm", [
               x.isFilterChipEditable ? "px-4" : "px-2",
               !o.value && x.hasChips ? "text-transparent" : "",
               !o.value && (x.modelValue || !x.isFilterChipEditable) ? "absolute" : ""
@@ -21198,7 +21203,7 @@ const $o = /* @__PURE__ */ Xc(Ow), Dw = { class: "flex" }, Cw = ["id", "aria-che
       (P(!0), z($e, null, We(C(tr), (u, c) => (P(), z("div", {
         id: `color-${u}`,
         key: `ui-cp-${c}`,
-        class: "mr-3 flex h-4 w-4 rotate-45 cursor-pointer items-center justify-center",
+        class: "mr-3 flex size-4 rotate-45 cursor-pointer items-center justify-center",
         style: rt({ backgroundColor: `#${u}` }),
         "aria-checked": a.value === u,
         onClick: (f) => {
@@ -21214,7 +21219,7 @@ const $o = /* @__PURE__ */ Xc(Ow), Dw = { class: "flex" }, Cw = ["id", "aria-che
         }, null, 8, ["class"])) : K("", !0)
       ], 12, Cw))), 128)),
       se("div", {
-        class: "UiColorPicker-inputWrapper flex h-4 w-4 rotate-45 items-center justify-center",
+        class: "UiColorPicker-inputWrapper flex size-4 rotate-45 items-center justify-center",
         style: rt({
           backgroundColor: C(tr).includes(a.value) ? "" : o.value
         }),
@@ -21223,7 +21228,7 @@ const $o = /* @__PURE__ */ Xc(Ow), Dw = { class: "flex" }, Cw = ["id", "aria-che
         Kt(se("input", {
           "onUpdate:modelValue": i[0] || (i[0] = (u) => o.value = u),
           type: "color",
-          class: "UiColorPicker-input h-inherit w-inherit absolute z-10 cursor-pointer bg-gray-200 opacity-0"
+          class: "UiColorPicker-input absolute z-10 size-inherit cursor-pointer bg-gray-200 opacity-0"
         }, null, 512), [
           [Gc, o.value]
         ]),