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

package/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/src/components/UiInfoContent/UiInfoContent.vue

@@ -17,7 +17,7 @@
     </h2>
     <span
       v-if="$slots.default"
-      class="font-regular pt-4 text-center text-base text-gray-800"
+      class="pt-4 text-center text-base text-gray-800"
       data-testid="info-text"
     >
       <slot name="default" />

package/src/components/UiInput/UiInput.vue

@@ -15,7 +15,7 @@
         )
       "
       :for="id"
-      class="pointer-events-none absolute left-3 origin-left select-none px-1 transition-all duration-150"
+      class="pointer-events-none absolute left-3 origin-left px-1 transition-all duration-150 select-none"
     >
       {{ label }}
     </label>
@@ -29,7 +29,7 @@
       :aria-label="label ? label : undefined"
       :readonly="readonly"
       :disabled="disabled"
-      class="peer block h-24 w-full rounded-none text-sm outline-none transition duration-150 placeholder:text-gray-400"
+      class="peer block h-24 w-full rounded-none text-sm outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-100"
       :class="
         cn(
           componentClass,
@@ -55,7 +55,7 @@
       :aria-label="label ? label : undefined"
       :readonly="readonly"
       :disabled="disabled"
-      class="peer block h-14 w-full rounded-none text-sm outline-none transition duration-150 placeholder:text-gray-400"
+      class="peer block h-14 w-full rounded-none text-sm outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-50"
       :class="
         cn(
           componentClass,
@@ -86,7 +86,7 @@
       :id="addonTextId"
       :class="
         cn(
-          'px-4 py-1 text-xs font-medium leading-normal transition-all duration-150 ease-in-out peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-aria-invalid:peer-hover:bg-alert-red-dark peer-aria-invalid:peer-focus:bg-alert-red-dark',
+          'px-4 py-1 text-xs leading-normal font-medium transition-all duration-150 ease-in-out peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-hover:peer-aria-invalid:bg-alert-red-dark peer-focus:peer-aria-invalid:bg-alert-red-dark',
           addonClass,
         )
       "
@@ -101,7 +101,7 @@
     <slot name="buttons"></slot>
     <svg
       v-if="chevron"
-      class="pointer-events-none absolute right-4 top-4 size-6 fill-current text-gray-900"
+      class="pointer-events-none absolute top-4 right-4 size-6 fill-current text-gray-900"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

package/src/components/UiList/UiList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul
-    class="border text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
+    class="border text-base leading-6 focus:outline-hidden sm:text-sm sm:leading-5"
   >
     <slot />
   </ul>

package/src/components/UiListItem/UiListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <li
     ref="itemEl"
-    class="focus-visible:outline-blue relative cursor-pointer select-none list-none border-t fill-current text-gray-900 shadow-none first-of-type:border-none focus:outline-none"
+    class="relative cursor-pointer list-none border-t fill-current text-gray-900 shadow-none select-none first-of-type:border-none focus:outline-hidden focus-visible:outline-blue"
     :class="disabled ? 'cursor-default' : 'cursor-pointer'"
     style="outline-offset: -2px"
     tabindex="0"
@@ -31,7 +31,7 @@
           class="mr-2 w-4"
           :class="{
             'aspect-square': imageShape === 'square',
-            'object-fit aspect-square rounded-full object-center':
+            'aspect-square rounded-full object-center':
               imageShape === 'rounded',
           }"
           :src="imageSrc"

package/src/components/UiMenu/UiMenu.vue

@@ -18,9 +18,9 @@
         v-if="isOpen"
         ref="uiMenuDropdown"
         :class="[
-          'absolute ',
+          'absolute',
           cn(
-            'z-10 [--transition-duration:200ms] [--transition-close-duration:100ms]',
+            'z-10 [--transition-close-duration:100ms] [--transition-duration:200ms]',
             placedListClass,
           ),
         ]"
@@ -41,7 +41,7 @@
           :data-side="floatingUi.placement.value"
           :class="[
             cn(
-              'block min-w-max border-none bg-white shadow-lg data-[side*=top]:mb-1 data-[side*=bottom]:mt-1',
+              'block min-w-max border-none bg-white shadow-lg data-[side*=bottom]:mt-1 data-[side*=top]:mb-1',
               menuClasses,
             ),
           ]"
@@ -82,7 +82,7 @@
               >
                 <li
                   v-if="!!groupedOption.groupLabel"
-                  class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold uppercase tracking-wider text-gray-700 first:border-t-0"
+                  class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold tracking-wider text-gray-700 uppercase first:border-t-0"
                 >
                   {{ groupedOption.groupLabel }}
                 </li>

package/src/components/UiOverlayMenu/UiOverlayMenu.vue

@@ -5,7 +5,7 @@
     class="relative size-full border-none"
   >
     <div
-      class="absolute right-3 top-12 z-10 block border-t bg-white px-4 py-3 shadow-lg"
+      class="absolute top-12 right-3 z-10 block border-t bg-white px-4 py-3 shadow-lg"
     >
       <slot />
     </div>

package/src/components/UiRadioInputGroup/UiRadioInputGroup.vue

@@ -2,7 +2,7 @@
   <ul
     class="flex"
     :class="[
-      cn('gap-4', $attrs.class as HTMLAttributes['class']),
+      cn('gap-4', $attrs.class as string),
       {
         'flex-col': direction === 'vertical',
       },
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends string | number">
-import { computed, type HTMLAttributes } from "vue";
+import { computed } from "vue";
 import { cn } from "../../utils/cn.js";
 
 export interface UiRadioInputGroupOption<T> {

package/src/components/UiSearchBar/UiSearchBar.vue

@@ -22,7 +22,7 @@
         <input
           ref="searchInputRef"
           :value="modelValue"
-          class="size-full bg-transparent outline-none placeholder:text-gray-700 lg:text-sm"
+          class="size-full bg-transparent outline-hidden placeholder:text-gray-700 lg:text-sm"
           :class="[
             isFilterChipEditable ? 'px-4' : 'px-2',
             !isFocused && hasChips ? 'text-transparent' : '',
@@ -46,7 +46,7 @@
         <!-- gradient -->
         <div
           v-if="!isFocused"
-          class="h-full w-12 flex-none bg-gradient-to-l"
+          class="h-full w-12 flex-none bg-linear-to-l"
           :class="gradientClass"
         ></div>
         <div

package/src/components/UiSearchInput/UiSearchInput.vue

@@ -24,7 +24,7 @@
           ref="inputs"
           :value="internalValue[index]"
           type="text"
-          class="w-full py-1 pb-2 text-sm focus:outline-none"
+          class="w-full py-1 pb-2 text-sm focus:outline-hidden"
           :placeholder="placeholder"
           @input="updateValue(index, ($event.target as HTMLInputElement).value)"
           @blur="handleBlur"
@@ -136,7 +136,7 @@ const hasLabel = computed(() => {
 });
 
 const inputWrapperClass = computed(() => {
-  const baseClass = "border-b border-b-gray-200 self-start flex-shrink-0";
+  const baseClass = "border-b border-b-gray-200 self-start shrink-0";
   return hasLabel.value
     ? ["lg:col-start-2 lg:text-base", baseClass]
     : [baseClass];

package/src/components/UiSimpleInput/UiSimpleInput.vue

@@ -12,7 +12,7 @@
       v-bind="{ ...$attrs, class: null }"
       type="text"
       spellcheck="false"
-      class="w-full focus:outline-none"
+      class="w-full focus:outline-hidden"
       :class="[paddingClasses, fontSizeClasses]"
       :placeholder="placeholder"
       :value="value"

package/src/components/UiSkeletonBox/UiSkeletonBox.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block animate-pulse rounded bg-gray-200"
+    class="inline-block animate-pulse rounded-sm bg-gray-200"
     :class="{
       'h-4 w-full': dynamicSize,
     }"

package/src/components/UiSnackbar/UiSnackbar.vue

@@ -31,7 +31,7 @@
           class="mr-2 text-white"
         />
 
-        <p class="text-sm font-normal leading-5">
+        <p class="text-sm leading-5 font-normal">
           <slot />
         </p>
 
@@ -39,7 +39,7 @@
           v-if="$slots.action"
           ref="actionBtn"
           type="button"
-          class="pointer ml-3 text-sm font-bold leading-5 hover:underline focus:outline-none focus-visible:underline"
+          class="ml-3 cursor-pointer text-sm leading-5 font-bold hover:underline focus:outline-hidden focus-visible:underline"
           @click="emit('action-click')"
         >
           <slot name="action" />

package/src/components/UiToggleButton/UiToggleButton.vue

@@ -14,7 +14,7 @@
       </div>
       <div
         v-if="isLabelPositionLeft && !$slots.default"
-        class="whitespace-nowrap font-normal leading-4 text-gray-800"
+        class="leading-4 font-normal whitespace-nowrap text-gray-800"
         :class="[labelSpaceClass, labelTextSizeClass]"
       >
         {{ labelText }}
@@ -48,12 +48,12 @@
             'bg-gray-500': !modelValue,
             [dotSize]: true,
           }"
-          class="dot absolute -left-1 rounded-full shadow transition-transform duration-200 ease-in-out"
+          class="dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"
         />
       </div>
       <div
         v-if="!isLabelPositionLeft && !$slots.default"
-        class="whitespace-nowrap font-normal leading-4 text-gray-800"
+        class="leading-4 font-normal whitespace-nowrap text-gray-800"
         :class="[labelSpaceClass, labelTextSizeClass]"
       >
         {{ labelText }}

package/src/components/UiTooltip/UiTooltip.vue

@@ -29,7 +29,7 @@
             <ul
               v-show="isShown"
               data-testid="tooltipElement"
-              class="border-1 my-1 w-72 rounded-2xl border-gray-300 bg-white text-xs leading-5 shadow-lg"
+              class="my-1 w-72 rounded-2xl border border-gray-300 bg-white text-xs leading-5 shadow-lg"
               :class="[tooltipClasses]"
             >
               <slot>
@@ -71,7 +71,7 @@
               :class="[
                 tooltipClasses,
                 multilines
-                  ? 'h-auto max-w-[300px] flex-wrap rounded-2xl '
+                  ? 'h-auto max-w-[300px] flex-wrap rounded-2xl'
                   : 'h-6 w-max rounded-full',
               ]"
             >

package/src/compositions/useBreakpoints/useBreakpoints.ts

@@ -6,11 +6,11 @@ import { computed } from "vue";
 
 // Deliberately not using `breakpointsTailwind` as exported by `@vueuse/core` as it doesn't pick up custom values from the CSS configuration meaning if we customize the breakpoints at some point, these values wouldn't be correct.
 const breakpointsTailwind: Breakpoints = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  xxl: "1600px",
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem",
 };
 
 export function useBreakpoints() {
@@ -22,7 +22,7 @@ export function useBreakpoints() {
   const md = computed(() => currentBreakpoint.value.includes("md"));
   const lg = computed(() => currentBreakpoint.value.includes("lg"));
   const xl = computed(() => currentBreakpoint.value.includes("xl"));
-  const xxl = computed(() => currentBreakpoint.value.includes("xxl"));
+  const twoXl = computed(() => currentBreakpoint.value.includes("2xl"));
 
-  return { currentBreakpoint, sm, md, lg, xl, xxl };
+  return { currentBreakpoint, sm, md, lg, xl, "2xl": twoXl };
 }

package/src/index.ts

@@ -1,4 +1,4 @@
-import "./tailwind/imports.css";
+import "./tailwindPreset.css";
 
 export * from "./utils/index.js";
 export * from "./components/index.js";

package/src/tailwindPreset.css

@@ -0,0 +1,120 @@
+/* This line is needed for `@reference`s in Vue SFC `style` blocks within the shared components library to work. */
+@import "tailwindcss";
+
+@plugin "@tailwindcss/typography";
+
+@custom-variant aria-invalid (&[aria-invalid="true"]);
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+/* TODO: This utility seems to have been broken previously. */
+@utility outline-blue {
+  outline: 2px solid rgba(0, 62, 219, 0.5);
+  outline-offset: 2px;
+}
+
+@theme {
+  /**
+   * COLORS
+   */
+
+  --color-transparent: rgba(255, 255, 255, 0);
+
+  --color-gray-100: #f5f5f5;
+  --color-gray-200: #eeeeee;
+  --color-gray-300: #e3e3e3;
+  --color-gray-400: #bababa;
+  --color-gray-500: #8c8c8c;
+  --color-gray-600: #7e7e7e;
+  --color-gray-700: #757575;
+  --color-gray-800: #4d4d4d;
+  --color-gray-900: #212121;
+
+  --color-green-neon: #00e281;
+  --color-green-primary: #00b064;
+  --color-green-night: #006345;
+
+  --color-blue-default: #003edb;
+  --color-blue-dark: #0030aa;
+
+  --color-red-default: #e53935;
+  --color-red-dark: #ab000d;
+
+  --color-pink-default: #f5138d;
+  --color-pink-dark: #bd0060;
+
+  --color-purple-default: #8e24aa;
+  --color-purple-dark: #5c007a;
+
+  --color-cyan-default: #00acc1;
+  --color-cyan-dark: #007c91;
+
+  --color-teal-default: #00897b;
+  --color-teal-dark: #005b4f;
+
+  --color-yellow-default: #f9f500;
+  --color-yellow-dark: #c1be00;
+
+  --color-orange-default: #ffb300;
+  --color-orange-dark: #c68400;
+
+  --color-alert-red-default: #f53000;
+  --color-alert-red-dark: #ba2400;
+
+  --color-alert-green-default: #00d200;
+  --color-alert-green-dark: #00aa00;
+
+  --color-rainbow-red: #e53935;
+  --color-rainbow-red-dark: #ab000d;
+  --color-rainbow-orange: #ffb300;
+  --color-rainbow-purple: #8e24aa;
+
+  --shadow-default: 0px 1px 1px rgba(0, 0, 0, 0.1);
+  --shadow-negative: 0px -1px 1px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0px 1px 5px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0px 2px 6px rgba(0, 0, 0, 0.25);
+
+  /**
+   * TYPOGRAPHY
+   */
+
+  --font-sans: Inter, sans-serif;
+  --font-marketing: Futura, sans-serif;
+
+  --text-xs--line-height: calc(1.125 / 0.75);
+  --text-sm--line-height: calc(1.3125 / 0.875);
+  --text-lg--line-height: calc(1.6875 / 1.125);
+  --text-xl--line-height: calc(1.875 / 1.25);
+  --text-2xl--line-height: calc(2.25 / 1.5);
+
+  /**
+   * SPACING
+   */
+
+  --spacing: 4px;
+
+  --spacing-inherit: inherit;
+  --spacing-half: 2px;
+  /* Used for form controls that receive a 2px border on :focus instead of the usual 1px and so a padding of 15px is applied instead of 16px to stop the content from jumping around. */
+  --spacing-inputFocused: 15px;
+
+  --inset-1/2: 50%;
+  --inset-full: 100%;
+  --inset-auto: auto;
+}

package/dist/components/UiIcon/iconNames.d.ts

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

package/dist/imports.css

@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";

package/dist/screens.js

@@ -1,7 +0,0 @@
-export default {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  xxl: "1600px",
-};

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

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

package/dist/src/tailwind/imports.css

@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";

package/dist/src/tailwind/screens.js

@@ -1,7 +0,0 @@
-export default {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  xxl: "1600px",
-};