@dpa-id-components/dpa-shared-components 17.0.3 → 18.0.0-next.0

package/dist/src/components/UiButton/UiButton.vue

@@ -1,13 +1,15 @@
 <template>
   <component
     :is="component"
-    class="UiButton focus-visible:outline-blue inline-flex items-center whitespace-nowrap font-medium leading-normal focus:outline-none"
-    :class="{
-      'px-4': size !== 'xs',
-      'px-2': size === 'xs',
-      [variantClassName]: true,
-      [sizeClassName]: true,
-    }"
+    :class="
+      cn(
+        'UiButton inline-flex items-center leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:outline-blue disabled:cursor-not-allowed',
+        size === 'xs' ? 'px-2' : 'px-4',
+        variantClassName,
+        sizeClassName,
+        $attrs.class as string,
+      )
+    "
     v-bind="attributes"
     @click="emit('click')"
   >
@@ -21,6 +23,7 @@ import { computed } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+import { cn } from "../../utils/cn.js";
 
 const emit = defineEmits<{
   click: [];
@@ -83,10 +86,10 @@ const variantClassName = computed((): string => {
       return `${roundedClass} text-white bg-green-primary hover:bg-night-green`;
     }
     case "transparent": {
-      return `${roundedClass} text-blue-default bg-transparent border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
+      return `${roundedClass} text-blue-default bg-transparent border border-gray-300 hover:text-blue-dark hover:border-gray-700`;
     }
     case "white": {
-      return `${roundedClass} text-blue-default bg-white border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
+      return `${roundedClass} text-blue-default bg-white border border-gray-300 hover:text-blue-dark hover:border-gray-700`;
     }
     case "gray": {
       return `${roundedClass} text-white bg-gray-700 hover:bg-gray-800`;
@@ -96,9 +99,9 @@ const variantClassName = computed((): string => {
     }
     case "disabled": {
       if (props.disabledVariant === "primary") {
-        return `${roundedClass} text-gray-400 bg-gray-100 cursor-not-allowed`;
+        return `${roundedClass} text-gray-400 bg-gray-100`;
       } else
-        return `${roundedClass} text-gray-400 bg-white cursor-not-allowed border border-gray-400`;
+        return `${roundedClass} text-gray-400 bg-white border border-gray-400`;
     }
     default: {
       return `${roundedClass} text-white bg-blue-default hover:bg-blue-dark`;

package/dist/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r [&>*]:border [&>*]:border-r-0 [&>*]:border-gray-300"
+    class="flex *:border *:border-r-0 *:border-gray-300 [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
   >
     <slot />
   </div>

package/dist/src/components/UiCheckbox/UiCheckbox.vue

@@ -1,17 +1,17 @@
 <template>
   <label
-    class="text-small flex flex-col"
+    class="flex flex-col"
     :class="
       cn(
         disabled ? 'text-gray-400' : 'cursor-pointer text-gray-900',
-        $attrs.class as HTMLAttributes['class'],
+        $attrs.class as string,
       )
     "
     :data-testid="$attrs['data-testid']"
   >
     <input
       :id="id"
-      class="peer relative size-0 appearance-none self-center focus:outline-none"
+      class="peer relative size-0 appearance-none self-center focus:outline-hidden"
       :class="size"
       type="checkbox"
       :checked="checked"
@@ -25,13 +25,13 @@
       @change="handleChange"
     />
     <span
-      class="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=)]"
+      class="flex items-center peer-checked:opacity-100 before:box-border before:inline-block before:shrink-0 before:border-2 before:transition-colors before:content-[''] after:absolute after:block peer-checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZSc+PHJlY3QgLz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTguMjE5NjUgMTVDNy45ODk2NSAxNSA3Ljc2OTY1IDE0LjkwNSA3LjYxMjE1IDE0LjczNzVMMy41NTk2NSAxMC40MjE3QzMuMjQzODEgMTAuMDg2NyAzLjI2MTMxIDkuNTU5MTggMy41OTYzMSA5LjI0NDE4QzMuOTMyMTUgOC45MjkxOCA0LjQ1OTY1IDguOTQ1ODUgNC43NzM4MSA5LjI4MDg1TDguMjExMzEgMTIuOTRMMTUuMjE4IDUuMjcxNjhDMTUuNTI5NiA0LjkzMDg1IDE2LjA1NjMgNC45MDgzNSAxNi4zOTYzIDUuMjE4MzVDMTYuNzM1NSA1LjUyODM1IDE2Ljc1ODggNi4wNTU4NSAxNi40NDg4IDYuMzk1MDFMOC44MzQ2NSAxNC43MjgzQzguNjc4ODEgMTQuOSA4LjQ1NzE1IDE0Ljk5ODMgOC4yMjU0OCAxNUg4LjIxOTY1WicgZmlsbD0nd2hpdGUnLz48L3N2Zz4=)]"
       :class="{
         'before:size-5 after:size-5': size === 'medium',
         'before:size-4 after:size-4': 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':
+        'before:border-blue-default peer-checked:before:bg-blue-default peer-hover:before:border-blue-dark peer-checked:peer-hover:before:bg-blue-dark':
           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':
+        'before:border-gray-800 peer-checked:before:bg-gray-800 peer-hover:before:border-gray-900 peer-checked:peer-hover:before:bg-gray-900':
           color === 'gray',
         'before:border-gray-500 peer-checked:before:bg-gray-500': disabled,
         'before:mr-2': !!$slots.default,
@@ -44,7 +44,7 @@
       v-if="'errors' in $slots || showError"
       :id="`${id}-errors`"
       data-testid="errorMessage"
-      class="relative order-last mt-2 bg-alert-red-default px-4 py-1 text-xs font-medium leading-normal text-white transition-all duration-300 ease-in-out"
+      class="relative order-last mt-2 bg-alert-red-default px-4 py-1 text-xs leading-normal font-medium text-white transition-all duration-300 ease-in-out"
     >
       <slot v-if="'errors' in $slots" name="errors" />
 
@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from "vue";
+import { computed } from "vue";
 import { v4 as uuidv4 } from "uuid";
 
 import { cn } from "../../utils/cn.js";

package/dist/src/components/UiChip/UiChip.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="whitespace-no-wrap min-w-max items-center rounded-full bg-gray-300 align-middle leading-normal text-gray-900"
+    class="min-w-max items-center rounded-full bg-gray-300 align-middle leading-normal whitespace-nowrap text-gray-900"
     :class="[isVisible ? 'inline-flex' : 'hidden', sizeClass, cursorStyle]"
   >
     <slot></slot>

package/dist/src/components/UiCollapseNavigation/UiCollapseNavigation.vue

@@ -1,11 +1,11 @@
 <template>
-  <div :class="hasBorderTop ? 'border-t-[1px] border-t-gray-300' : ''" />
+  <div :class="hasBorderTop ? 'border-t border-t-gray-300' : ''" />
   <UiButton
     color="transparent"
     class="flex w-full justify-between border-none"
     @click="toggleMenuHandler"
   >
-    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-700">
+    <h3 class="text-xs font-semibold tracking-widest text-gray-700 uppercase">
       {{ headline }}
     </h3>
     <UiIcon

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

@@ -15,7 +15,7 @@ import {
 } from "date-fns";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import UiDatePicker from "./UiDatePicker.vue";
-import { iconNames } from "../UiIcon/iconNames.js";
+import { icons } from "../UiIcon/icons.js";
 
 const singleDate = "2022-03-07T23:00:00.000Z";
 const dateRange = ["2022-03-07T23:00:00.000Z", "2022-03-11T23:00:00.000Z"];
@@ -109,7 +109,7 @@ const meta = {
     },
     iconLeft: {
       control: "select",
-      options: Object.values(iconNames),
+      options: Object.keys(icons),
     },
   },
   args: {

package/dist/src/components/UiDatePicker/UiDatePicker.vue

@@ -88,7 +88,7 @@
             @click="mobileQuickfiltersOpen = !mobileQuickfiltersOpen"
           >
             <span
-              class="p-3 text-xs font-semibold leading-4 tracking-wider text-gray-700"
+              class="p-3 text-xs leading-4 font-semibold tracking-wider text-gray-700"
             >
               {{ props.quickFilterHeadline }}
             </span>
@@ -346,6 +346,8 @@ const mobileQuickfiltersOpen = ref(false);
 </script>
 
 <style>
+@reference "../../tailwindPreset.css";
+
 .singleCalWidth .dp__instance_calendar {
   @apply md:w-[269px];
 }
@@ -391,7 +393,7 @@ const mobileQuickfiltersOpen = ref(false);
 }
 
 .dp__action_extra {
-  @apply order-3 md:order-none md:w-[634px] basis-full border-t border-gray-300 text-gray-700;
+  @apply order-3 md:order-0 md:w-[634px] basis-full border-t border-gray-300 text-gray-700;
 }
 
 .dp__action_extra:empty {
@@ -438,7 +440,7 @@ const mobileQuickfiltersOpen = ref(false);
 }
 
 .dp__range_between {
-  @apply bg-gray-200 !important;
+  @apply bg-gray-200!;
   @apply border-none;
   @apply text-gray-900;
 }

package/dist/src/components/UiDialog/UiDialog.vue

@@ -2,7 +2,7 @@
   <UiOverlay @close="handleClickAway">
     <div
       :class="{
-        'scrolling-touch overflow-y-auto': scrollable,
+        'overflow-y-auto': scrollable,
         'rounded-[24px]': roundedBorder,
       }"
       :style="`
@@ -22,7 +22,7 @@
         v-if="$slots.header"
         :class="
           cn(
-            'flex h-12 items-center justify-between bg-gray-100 py-3 pl-4 pr-2 lg:h-14 lg:py-4 lg:pl-6 lg:pr-3',
+            'flex h-12 items-center justify-between bg-gray-100 py-3 pr-2 pl-4 lg:h-14 lg:py-4 lg:pr-3 lg:pl-6',
             headerClasses,
             { 'rounded-t-[24px]': roundedBorder },
           )
@@ -43,7 +43,7 @@
         :class="
           cn(mainClasses, {
             'px-4 lg:px-6': hasPaddingX,
-            'pb-3 pt-6': hasPaddingY,
+            'pt-6 pb-3': hasPaddingY,
           })
         "
       >

package/dist/src/components/UiFilterBadgeButton/UiFilterBadgeButton.vue

@@ -14,7 +14,7 @@
       :style="{ backgroundColor: fill }"
     />
     <p
-      class="z-0 w-full cursor-pointer text-sm font-medium leading-normal"
+      class="z-0 w-full cursor-pointer text-sm leading-normal font-medium"
       :style="{ color }"
       data-testid="labelText"
       @click.self="emit('click')"

package/dist/src/components/UiFilterButton/UiFilterButton.stories.ts

@@ -1,5 +1,5 @@
 import UiFilterButton from "./UiFilterButton.vue";
-import { iconNames } from "../UiIcon/iconNames.js";
+import { icons } from "../UiIcon/icons.js";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 const meta = {
@@ -21,7 +21,7 @@ const meta = {
     },
     chevronIcon: {
       control: "select",
-      options: Object.values(iconNames),
+      options: Object.keys(icons),
     },
     rotateIcon: {
       control: "boolean",
@@ -37,7 +37,7 @@ const meta = {
     },
     iconLeft: {
       control: "select",
-      options: Object.values(iconNames),
+      options: Object.keys(icons),
     },
     iconSize: {
       control: "select",

package/dist/src/components/UiFilterButton/UiFilterButton.vue

@@ -2,9 +2,9 @@
   <div
     :class="
       cn(
-        'w-full pl-3 pr-4',
-        $attrs.class as HTMLAttributes['class'],
-        'flex max-w-max cursor-pointer select-none items-center rounded-full ',
+        'w-full pr-4 pl-3',
+        $attrs.class as string,
+        'flex max-w-max cursor-pointer items-center rounded-full select-none',
         variantClasses,
         props.size === 'xs' ? 'py-0.5' : 'py-1.5',
       )
@@ -12,14 +12,14 @@
     @click="onClick"
   >
     <button
-      class="focus-visible:outline-blue w-full rounded-full focus:outline-none"
+      class="w-full rounded-full focus:outline-hidden focus-visible:outline-blue"
       :disabled="disabled"
       type="button"
       data-testid="filter-button"
     >
       <span
         data-testid="filterbutton-title"
-        class="flex w-full items-center justify-between text-sm font-medium leading-normal"
+        class="flex w-full items-center justify-between text-sm leading-normal font-medium"
         :class="`${textColorClass} ${
           props.size === 'xs' ? 'text-xs' : 'text-sm'
         }`"
@@ -65,7 +65,7 @@
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 import { cn } from "../../utils/cn.js";
 import type { ClassValue } from "clsx";
-import { computed, type HTMLAttributes } from "vue";
+import { computed } from "vue";
 
 const emit = defineEmits<{
   click: [];

package/dist/src/components/UiIcon/IconOverview.stories.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="grid grid-cols-6 gap-8">
     <div
-      v-for="icon in iconNames"
+      v-for="(_import, icon) in icons"
       :key="icon"
       class="h-25 content-center border-2 p-2 text-center"
     >
@@ -12,7 +12,7 @@
 </template>
 <script setup lang="ts">
 import UiIcon from "./UiIcon.vue";
-import { iconNames } from "./iconNames.js";
+import { icons } from "./icons.js";
 
 const props = withDefaults(
   defineProps<{

package/dist/src/components/UiIcon/UiIcon.spec.ts

@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { mount, type ComponentMountingOptions } from "@vue/test-utils";
 
 import UiIcon from "./UiIcon.vue";
-import { iconNames } from "./iconNames.js";
+import { icons } from "./icons.js";
 
 function createWrapper(options: ComponentMountingOptions<typeof UiIcon> = {}) {
   return mount(UiIcon, {
@@ -35,10 +35,8 @@ describe("UiIcon", () => {
     expect(wrapper.classes(expectedClassNames)).toBe(true);
   });
 
-  it("should be able to resolve all iconNames", async () => {
-    await Promise.all(
-      iconNames.map((name) => import(`../../assets/icons/${name}.vue`)),
-    );
+  it("should be able to resolve all icons", async () => {
+    await Promise.all(Object.values(icons));
   });
 
   it("throws on non-existing icon name", async () => {

package/dist/src/components/UiIcon/UiIcon.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import UiIcon from "./UiIcon.vue";
 import IconOverview from "./IconOverview.stories.vue";
-import { iconNames } from "./iconNames.js";
+import { icons } from "./icons.js";
 
 const meta = {
   title: "Ui/UiIcon",
@@ -9,7 +9,7 @@ const meta = {
   argTypes: {
     name: {
       control: "select",
-      options: Object.values(iconNames),
+      options: Object.keys(icons),
     },
     size: {
       control: "select",

package/dist/src/components/UiIcon/UiIcon.vue

@@ -7,14 +7,14 @@
 </template>
 
 <script lang="ts">
-export type UiIconName = (typeof iconNames)[number];
+export type UiIconName = keyof typeof icons;
 </script>
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent, watchEffect } from "vue";
 
 import UiIconLoading from "./UiIconLoading.vue";
-import { iconNames } from "./iconNames.js";
+import { icons } from "./icons.js";
 
 const props = withDefaults(
   defineProps<{
@@ -30,7 +30,7 @@ const props = withDefaults(
 
 const iconComponent = computed(() =>
   defineAsyncComponent({
-    loader: () => import(`../../assets/icons/${props.name}.vue`),
+    loader: icons[props.name] ?? icons.close,
     // Render a substitute element while loading for classes to attach to.
     loadingComponent: UiIconLoading,
     // Immediately render the loadingComponent so that it can receive classes.
@@ -53,7 +53,7 @@ const sizeClass = computed(() => {
 });
 
 watchEffect(() => {
-  if (!iconNames.includes(props.name)) {
+  if (!icons[props.name]) {
     throw new Error(`UiIcon: No icon named “${props.name}” exists.`);
   }
 });

package/dist/src/components/UiIcon/icons.ts

@@ -0,0 +1,187 @@
+export const icons = {
+  activities: () => import("../../assets/icons/activities.vue"),
+  alert: () => import("../../assets/icons/alert.vue"),
+  "alert-fill": () => import("../../assets/icons/alert-fill.vue"),
+  "alert-octagon": () => import("../../assets/icons/alert-octagon.vue"),
+  ai: () => import("../../assets/icons/ai.vue"),
+  apps: () => import("../../assets/icons/apps.vue"),
+  archive: () => import("../../assets/icons/archive.vue"),
+  "arrow-left": () => import("../../assets/icons/arrow-left.vue"),
+  "arrow-nav-left": () => import("../../assets/icons/arrow-nav-left.vue"),
+  "arrow-nav-right": () => import("../../assets/icons/arrow-nav-right.vue"),
+  "arrow-up": () => import("../../assets/icons/arrow-up.vue"),
+  "arrow-right": () => import("../../assets/icons/arrow-right.vue"),
+  "arrow-down": () => import("../../assets/icons/arrow-down.vue"),
+  "arrowhead-left": () => import("../../assets/icons/arrowhead-left.vue"),
+  "arrowhead-right": () => import("../../assets/icons/arrowhead-right.vue"),
+  "arrowhead-top": () => import("../../assets/icons/arrowhead-top.vue"),
+  atmo: () => import("../../assets/icons/atmo.vue"),
+  audio: () => import("../../assets/icons/audio.vue"),
+  "audio-circled": () => import("../../assets/icons/audio-circled.vue"),
+  "audio-filled": () => import("../../assets/icons/audio-filled.vue"),
+  bag: () => import("../../assets/icons/bag.vue"),
+  bell: () => import("../../assets/icons/bell.vue"),
+  "bell-fill": () => import("../../assets/icons/bell-fill.vue"),
+  book: () => import("../../assets/icons/book.vue"),
+  bookmark: () => import("../../assets/icons/bookmark.vue"),
+  "bookmark-fill": () => import("../../assets/icons/bookmark-fill.vue"),
+  "bookmark-outlined": () => import("../../assets/icons/bookmark-outlined.vue"),
+  box: () => import("../../assets/icons/box.vue"),
+  bulb: () => import("../../assets/icons/bulb.vue"),
+  call: () => import("../../assets/icons/call.vue"),
+  camera: () => import("../../assets/icons/camera.vue"),
+  check: () => import("../../assets/icons/check.vue"),
+  checklist: () => import("../../assets/icons/checklist.vue"),
+  checkmark: () => import("../../assets/icons/checkmark.vue"),
+  "checkmark-double": () => import("../../assets/icons/checkmark-double.vue"),
+  "chevron-down": () => import("../../assets/icons/chevron-down.vue"),
+  "chevron-left": () => import("../../assets/icons/chevron-left.vue"),
+  "chevron-right": () => import("../../assets/icons/chevron-right.vue"),
+  "chevron-up": () => import("../../assets/icons/chevron-up.vue"),
+  clipboard: () => import("../../assets/icons/clipboard.vue"),
+  clock: () => import("../../assets/icons/clock.vue"),
+  close: () => import("../../assets/icons/close.vue"),
+  "cloud-save": () => import("../../assets/icons/cloud-save.vue"),
+  code: () => import("../../assets/icons/code.vue"),
+  collapse: () => import("../../assets/icons/collapse.vue"),
+  "color-palette": () => import("../../assets/icons/color-palette.vue"),
+  comment: () => import("../../assets/icons/comment.vue"),
+  "comment-fill": () => import("../../assets/icons/comment-fill.vue"),
+  copy: () => import("../../assets/icons/copy.vue"),
+  "copy-link": () => import("../../assets/icons/copy-link.vue"),
+  delete: () => import("../../assets/icons/delete.vue"),
+  download: () => import("../../assets/icons/download.vue"),
+  "dpa-id": () => import("../../assets/icons/dpa-id.vue"),
+  edit: () => import("../../assets/icons/edit.vue"),
+  "edit-add": () => import("../../assets/icons/edit-add.vue"),
+  eil: () => import("../../assets/icons/eil.vue"),
+  emoji: () => import("../../assets/icons/emoji.vue"),
+  "emoji-add": () => import("../../assets/icons/emoji-add.vue"),
+  envelope: () => import("../../assets/icons/envelope.vue"),
+  event: () => import("../../assets/icons/event.vue"),
+  expand: () => import("../../assets/icons/expand.vue"),
+  "external-link": () => import("../../assets/icons/external-link.vue"),
+  file: () => import("../../assets/icons/file.vue"),
+  "file-pdf": () => import("../../assets/icons/file-pdf.vue"),
+  filter: () => import("../../assets/icons/filter.vue"),
+  "filter-outline": () => import("../../assets/icons/filter-outline.vue"),
+  flag: () => import("../../assets/icons/flag.vue"),
+  "flag-fill": () => import("../../assets/icons/flag-fill.vue"),
+  "flag-filled": () => import("../../assets/icons/flag-filled.vue"),
+  "flag-outline": () => import("../../assets/icons/flag-outline.vue"),
+  flags: () => import("../../assets/icons/flags.vue"),
+  flash: () => import("../../assets/icons/flash.vue"),
+  folder: () => import("../../assets/icons/folder.vue"),
+  "folder-add": () => import("../../assets/icons/folder-add.vue"),
+  "folder-fill": () => import("../../assets/icons/folder-fill.vue"),
+  "folder-filled": () => import("../../assets/icons/folder-filled.vue"),
+  gallery: () => import("../../assets/icons/gallery.vue"),
+  graphic: () => import("../../assets/icons/graphic.vue"),
+  "graphic-circled": () => import("../../assets/icons/graphic-circled.vue"),
+  "graphic-filled": () => import("../../assets/icons/graphic-filled.vue"),
+  graphics: () => import("../../assets/icons/graphics.vue"),
+  "grid-1": () => import("../../assets/icons/grid-1.vue"),
+  "grid-2": () => import("../../assets/icons/grid-2.vue"),
+  "grid-3": () => import("../../assets/icons/grid-3.vue"),
+  "grid-4": () => import("../../assets/icons/grid-4.vue"),
+  "grid-6": () => import("../../assets/icons/grid-6.vue"),
+  "grid-9": () => import("../../assets/icons/grid-9.vue"),
+  "grid-masonry": () => import("../../assets/icons/grid-masonry.vue"),
+  "grid-masonry-9": () => import("../../assets/icons/grid-masonry-9.vue"),
+  help: () => import("../../assets/icons/help.vue"),
+  home: () => import("../../assets/icons/home.vue"),
+  image: () => import("../../assets/icons/image.vue"),
+  "image focus point": () => import("../../assets/icons/image focus point.vue"),
+  "impact-high": () => import("../../assets/icons/impact-high.vue"),
+  "impact-low": () => import("../../assets/icons/impact-low.vue"),
+  "impact-medium": () => import("../../assets/icons/impact-medium.vue"),
+  "impact-very-high": () => import("../../assets/icons/impact-very-high.vue"),
+  "impact-very-low": () => import("../../assets/icons/impact-very-low.vue"),
+  info: () => import("../../assets/icons/info.vue"),
+  "info-fill": () => import("../../assets/icons/info-fill.vue"),
+  "info-filled": () => import("../../assets/icons/info-filled.vue"),
+  label: () => import("../../assets/icons/label.vue"),
+  "label-filled": () => import("../../assets/icons/label-filled.vue"),
+  language: () => import("../../assets/icons/language.vue"),
+  latest: () => import("../../assets/icons/latest.vue"),
+  lightbulb: () => import("../../assets/icons/lightbulb.vue"),
+  list: () => import("../../assets/icons/list.vue"),
+  "list-search": () => import("../../assets/icons/list-search.vue"),
+  lock: () => import("../../assets/icons/lock.vue"),
+  "lock-filled": () => import("../../assets/icons/lock-filled.vue"),
+  mail: () => import("../../assets/icons/mail.vue"),
+  map: () => import("../../assets/icons/map.vue"),
+  "map-outline": () => import("../../assets/icons/map-outline.vue"),
+  menu: () => import("../../assets/icons/menu.vue"),
+  minus: () => import("../../assets/icons/minus.vue"),
+  "more-horizontal": () => import("../../assets/icons/more-horizontal.vue"),
+  "more-vertical": () => import("../../assets/icons/more-vertical.vue"),
+  move: () => import("../../assets/icons/move.vue"),
+  "move-up-down": () => import("../../assets/icons/move-up-down.vue"),
+  navigation: () => import("../../assets/icons/navigation.vue"),
+  note: () => import("../../assets/icons/note.vue"),
+  offline: () => import("../../assets/icons/offline.vue"),
+  package: () => import("../../assets/icons/package.vue"),
+  "paper-plane": () => import("../../assets/icons/paper-plane.vue"),
+  paperplane: () => import("../../assets/icons/paperplane.vue"),
+  pause: () => import("../../assets/icons/pause.vue"),
+  "pause-circle": () => import("../../assets/icons/pause-circle.vue"),
+  pdf: () => import("../../assets/icons/pdf.vue"),
+  pen: () => import("../../assets/icons/pen.vue"),
+  "pen-check": () => import("../../assets/icons/pen-check.vue"),
+  people: () => import("../../assets/icons/people.vue"),
+  phone: () => import("../../assets/icons/phone.vue"),
+  picture: () => import("../../assets/icons/picture.vue"),
+  "picture-circled": () => import("../../assets/icons/picture-circled.vue"),
+  "picture-filled": () => import("../../assets/icons/picture-filled.vue"),
+  pin: () => import("../../assets/icons/pin.vue"),
+  planning: () => import("../../assets/icons/planning.vue"),
+  play: () => import("../../assets/icons/play.vue"),
+  "play-circle": () => import("../../assets/icons/play-circle.vue"),
+  "play-fill": () => import("../../assets/icons/play-fill.vue"),
+  plus: () => import("../../assets/icons/plus.vue"),
+  "plus-circle": () => import("../../assets/icons/plus-circle.vue"),
+  print: () => import("../../assets/icons/print.vue"),
+  refresh: () => import("../../assets/icons/refresh.vue"),
+  reset: () => import("../../assets/icons/reset.vue"),
+  responsive: () => import("../../assets/icons/responsive.vue"),
+  "rubix-thema": () => import("../../assets/icons/rubix-thema.vue"),
+  save: () => import("../../assets/icons/save.vue"),
+  "saved-search": () => import("../../assets/icons/saved-search.vue"),
+  "saved-search-fill": () => import("../../assets/icons/saved-search-fill.vue"),
+  search: () => import("../../assets/icons/search.vue"),
+  settings: () => import("../../assets/icons/settings.vue"),
+  share: () => import("../../assets/icons/share.vue"),
+  "share-alternative": () => import("../../assets/icons/share-alternative.vue"),
+  sidebar: () => import("../../assets/icons/sidebar.vue"),
+  "sidebar-fill": () => import("../../assets/icons/sidebar-fill.vue"),
+  slack: () => import("../../assets/icons/slack.vue"),
+  "slider-config": () => import("../../assets/icons/slider-config.vue"),
+  spellcheck: () => import("../../assets/icons/spellcheck.vue"),
+  spinner: () => import("../../assets/icons/spinner.vue"),
+  "standard-view": () => import("../../assets/icons/standard-view.vue"),
+  star: () => import("../../assets/icons/star.vue"),
+  "star-fill": () => import("../../assets/icons/star-fill.vue"),
+  "star-filled": () => import("../../assets/icons/star-filled.vue"),
+  stop: () => import("../../assets/icons/stop.vue"),
+  story: () => import("../../assets/icons/story.vue"),
+  sync: () => import("../../assets/icons/sync.vue"),
+  tasks: () => import("../../assets/icons/tasks.vue"),
+  text: () => import("../../assets/icons/text.vue"),
+  "text-circled": () => import("../../assets/icons/text-circled.vue"),
+  "text-filled": () => import("../../assets/icons/text-filled.vue"),
+  "thumbs-down": () => import("../../assets/icons/thumbs-down.vue"),
+  "thumbs-up": () => import("../../assets/icons/thumbs-up.vue"),
+  "thumbs-up-double": () => import("../../assets/icons/thumbs-up-double.vue"),
+  topic: () => import("../../assets/icons/topic.vue"),
+  union: () => import("../../assets/icons/union.vue"),
+  upload: () => import("../../assets/icons/upload.vue"),
+  video: () => import("../../assets/icons/video.vue"),
+  "video overlay": () => import("../../assets/icons/video overlay.vue"),
+  "video-circled": () => import("../../assets/icons/video-circled.vue"),
+  "video-filled": () => import("../../assets/icons/video-filled.vue"),
+  "video-rounded": () => import("../../assets/icons/video-rounded.vue"),
+  view: () => import("../../assets/icons/view.vue"),
+  "view-off": () => import("../../assets/icons/view-off.vue"),
+  "volume-up": () => import("../../assets/icons/volume-up.vue"),
+} as const;

package/dist/src/components/UiIconButton/UiIconButton.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { iconNames } from "../UiIcon/iconNames.js";
+import { icons } from "../UiIcon/icons.js";
 import UiIconButton from "./UiIconButton.vue";
 import { action } from "storybook/actions";
 
@@ -9,7 +9,7 @@ const meta = {
   argTypes: {
     iconName: {
       control: "select",
-      options: Object.values(iconNames),
+      options: Object.keys(icons),
     },
     size: {
       control: "select",

package/dist/src/components/UiIconButton/UiIconButton.vue

@@ -2,7 +2,7 @@
   <button
     :disabled="disabled"
     :aria-label="title"
-    class="focus-visible:outline-blue group flex flex-none items-center justify-center rounded-full focus:outline-none"
+    class="group flex flex-none items-center justify-center rounded-full focus:outline-hidden focus-visible:outline-blue"
     :class="[colorClass, backgroundClass, buttonSizeClass]"
     type="button"
     @click="($event) => emit('click', $event)"

package/dist/src/components/UiInfoContent/UiInfoContent.stories.ts

@@ -1,5 +1,5 @@
 import UiInfoContent from "./UiInfoContent.vue";
-import { iconNames } from "../UiIcon/iconNames.js";
+import { icons } from "../UiIcon/icons.js";
 import UiButton from "../UiButton/UiButton.vue";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
@@ -17,7 +17,7 @@ const meta = {
     },
     iconName: {
       control: "select",
-      options: iconNames,
+      options: Object.keys(icons),
     },
     iconSize: {
       control: "select",