@dpa-id-components/dpa-shared-components 22.0.0-next.4 → 22.0.0-next.6

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

@@ -55,7 +55,7 @@ export const Default: Story = {
       return { args };
     },
     components: { UiSelect },
-    template: `
+    template: /*html*/ `
       <UiSelect
         v-model="args.modelValue"
         v-bind="args"

package/dist/src/components/UiSelect/UiSelect.vue

@@ -89,7 +89,7 @@ select,
 }
 
 ::picker(select) {
-  @apply shadow-lg border border-neutral-whisper;
+  @apply mt-1 overscroll-none rounded-lg border border-neutral-faint shadow-md;
 }
 
 select::picker-icon {
@@ -97,12 +97,24 @@ select::picker-icon {
 }
 
 select > :deep(option) {
-  @apply flex justify-between items-center px-4 py-3;
+  @apply flex items-center justify-between px-4 py-1.5 focus-visible:focus-outline;
+
+  &:first-child {
+    @apply rounded-t-lg;
+  }
+
+  &:last-child {
+    @apply rounded-b-lg;
+  }
 
   &:enabled:hover {
     @apply bg-neutral-pale;
   }
 
+  &:focus-visible {
+    @apply -outline-offset-2;
+  }
+
   &::checkmark {
     @apply order-1 text-lg;
   }

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

@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSkeletonBox from "./UiSkeletonBox.vue";
 
 describe("UiSkeletonBox", () => {
   const wrapper = mount(UiSkeletonBox);
 
-  it("renders default", () => {
+  test("renders default", () => {
     expect(wrapper.classes("inline-block")).toBe(true);
     expect(wrapper.classes("animate-pulse")).toBe(true);
     expect(wrapper.classes("rounded-sm")).toBe(true);

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

@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
 
 import UiSnackbar from "./UiSnackbar.vue";
 
 describe("UiSnackbar", () => {
-  it("displays a text message via the default slot", () => {
+  test("displays a text message via the default slot", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -19,7 +19,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.text()).toBe("Hello, from snackbar");
   });
 
-  it("Is not visible when props don't say so", () => {
+  test("Is not visible when props don't say so", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -32,7 +32,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.find("div").exists()).toBe(false);
   });
 
-  it("displays an SVG icon via the icon slot", () => {
+  test("displays an SVG icon via the icon slot", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -46,7 +46,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.findComponent(UiIcon)).toBeTruthy();
   });
 
-  it("has an action button via the action slot", () => {
+  test("has an action button via the action slot", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -62,7 +62,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.emitted()["action-click"]).toBeTruthy();
   });
 
-  it("snackbar type success has green background", () => {
+  test("snackbar type success has green background", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from success snackbar",
@@ -77,7 +77,7 @@ describe("UiSnackbar", () => {
     expect(coloredDiv.classes("bg-accent-green")).toBe(true);
   });
 
-  it("snackbar type error has red background", () => {
+  test("snackbar type error has red background", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from error snackbar",
@@ -92,7 +92,7 @@ describe("UiSnackbar", () => {
     expect(coloredDiv.classes("bg-accent-red")).toBe(true);
   });
 
-  it("snackbar type info has gray-900 background", () => {
+  test("snackbar type info has gray-900 background", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from info snackbar",

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

@@ -1,14 +1,14 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSpinner from "./UiSpinner.vue";
 
 describe("Spinner", () => {
-  it("renders with default props", () => {
+  test("renders with default props", () => {
     const wrapper = mount(UiSpinner);
 
     // Wrapper div should have size-6 class (lg size)
-    const wrapperDiv = wrapper.find("div");
+    const wrapperDiv = wrapper.find("svg");
     expect(wrapperDiv.classes()).toContain("size-6");
 
     // SVG should exist and animate
@@ -29,7 +29,7 @@ describe("Spinner", () => {
     expect(arcCircle.classes()).toContain("text-primary");
   });
 
-  it("renders neutral with opacity color class when appearance is neutral", () => {
+  test("renders neutral with opacity color class when appearance is neutral", () => {
     const wrapper = mount(UiSpinner, {
       props: {
         appearance: "neutral",

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

@@ -39,6 +39,6 @@ export const OnButton: Story = {
       return { args };
     },
     template:
-      '<UiButton color="blue"><UiSpinner v-bind="args" ></UiSpinner></UiButton>',
+      '<UiButton appearance="primary"><UiSpinner v-bind="args" ></UiSpinner></UiButton>',
   }),
 };

package/dist/src/components/UiSpinner/UiSpinner.vue

@@ -1,37 +1,36 @@
 <template>
-  <div :class="sizeClass">
-    <svg
-      class="animate-spin"
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
+  <svg
+    class="inline-flex animate-spin"
+    :class="sizeClass"
+    width="24"
+    height="24"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="16"
+      cy="16"
+      r="14.5"
+      data-testid="background-circle"
+      stroke="currentColor"
+      :class="backgroundClass"
+      stroke-width="3"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        cx="16"
-        cy="16"
-        r="14.5"
-        data-testid="background-circle"
-        stroke="currentColor"
-        :class="backgroundClass"
-        stroke-width="3"
-        fill="none"
-      />
-      <circle
-        cx="16"
-        cy="16"
-        r="14.5"
-        data-testid="arc-circle"
-        stroke="currentColor"
-        :class="arcClass"
-        stroke-width="3"
-        fill="none"
-        stroke-dasharray="22.78 68.33"
-        stroke-linecap="square"
-      />
-    </svg>
-  </div>
+    />
+    <circle
+      cx="16"
+      cy="16"
+      r="14.5"
+      data-testid="arc-circle"
+      stroke="currentColor"
+      :class="arcClass"
+      stroke-width="3"
+      fill="none"
+      stroke-dasharray="22.78 68.33"
+      stroke-linecap="square"
+    />
+  </svg>
 </template>
 
 <script setup lang="ts">

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

@@ -1,15 +1,15 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiTextButton from "./UiTextButton.vue";
 
 describe("UiTextButton", () => {
-  it("should render defaults", () => {
+  test("should render defaults", () => {
     const wrapper = mount(UiTextButton);
     expect(wrapper.classes("font-normal")).toBe(true);
   });
 
-  it("should render semibold font-weight", () => {
+  test("should render semibold font-weight", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         weight: "semibold",
@@ -18,7 +18,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("font-semibold")).toBe(true);
   });
 
-  it("should render xsmall font-size", () => {
+  test("should render xsmall font-size", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         size: "xsmall",
@@ -27,7 +27,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-xs")).toBe(true);
   });
 
-  it("should render small font-size", () => {
+  test("should render small font-size", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         size: "small",
@@ -36,7 +36,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-sm")).toBe(true);
   });
 
-  it("should render medium font-size", () => {
+  test("should render medium font-size", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         size: "medium",
@@ -45,7 +45,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-base")).toBe(true);
   });
 
-  it("should render blue text color", () => {
+  test("should render blue text color", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         color: "blue",
@@ -54,7 +54,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-primary")).toBe(true);
   });
 
-  it("should render gray text color", () => {
+  test("should render gray text color", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         color: "gray",
@@ -63,7 +63,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-neutral-subtle")).toBe(true);
   });
 
-  it("should render iconLeft", () => {
+  test("should render iconLeft", () => {
     const iconLeft = "alert";
     const wrapper = mount(UiTextButton, {
       props: {
@@ -75,7 +75,7 @@ describe("UiTextButton", () => {
     });
   });
 
-  it("should render iconRight", () => {
+  test("should render iconRight", () => {
     const iconRight = "alert";
     const wrapper = mount(UiTextButton, {
       props: {
@@ -87,7 +87,7 @@ describe("UiTextButton", () => {
     });
   });
 
-  it("should change gray text color when placement is oncanvas", () => {
+  test("should change gray text color when placement is oncanvas", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         color: "gray",

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

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiToggleButton from "./UiToggleButton.vue";
 
@@ -11,7 +11,7 @@ function mountToggle(props = {}, slotContent = "Label") {
 }
 
 describe("UiToggleButton", () => {
-  it("renders with correct defaults when no props are provided", () => {
+  test("renders with correct defaults when no props are provided", () => {
     const wrapper = mountToggle();
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -22,13 +22,13 @@ describe("UiToggleButton", () => {
     expect(input.attributes("id")).toBeTruthy();
   });
 
-  it("renders slot content", () => {
+  test("renders slot content", () => {
     const wrapper = mountToggle({}, "Slot Label");
 
     expect(wrapper.text()).toContain("Slot Label");
   });
 
-  it("emits update:modelValue when clicked", async () => {
+  test("emits update:modelValue when clicked", async () => {
     const wrapper = mountToggle({ modelValue: false });
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -38,7 +38,7 @@ describe("UiToggleButton", () => {
     expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([true]);
   });
 
-  it("emits update:modelValue false when toggled from true", async () => {
+  test("emits update:modelValue false when toggled from true", async () => {
     const wrapper = mountToggle({ modelValue: true });
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -48,7 +48,7 @@ describe("UiToggleButton", () => {
     expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
   });
 
-  it("disables the input when disabled prop is set", () => {
+  test("disables the input when disabled prop is set", () => {
     const wrapper = mountToggle({ disabled: true });
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -56,7 +56,7 @@ describe("UiToggleButton", () => {
     expect((input.element as HTMLInputElement).disabled).toBe(true);
   });
 
-  it("does not emit update:modelValue when disabled", async () => {
+  test("does not emit update:modelValue when disabled", async () => {
     const wrapper = mountToggle({ disabled: true, modelValue: false });
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -65,7 +65,7 @@ describe("UiToggleButton", () => {
     expect(wrapper.emitted("update:modelValue")).toBeFalsy();
   });
 
-  it("uses provided id on the input", () => {
+  test("uses provided id on the input", () => {
     const wrapper = mountToggle({ id: "custom-id" });
 
     const input = wrapper.find("[data-testid='toggleButton']");

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

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiTooltip from "./UiTooltip.vue";
 
@@ -8,7 +8,7 @@ document.body.innerHTML = `
 `;
 
 describe("UiTooltip", () => {
-  it("shows correct content", () => {
+  test("shows correct content", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -20,7 +20,7 @@ describe("UiTooltip", () => {
     expect(wrapper.text()).toBe("tooltip content");
   });
 
-  it("is not rendered without mouseover", () => {
+  test("is not rendered without mouseover", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -35,7 +35,7 @@ describe("UiTooltip", () => {
     ).toBeFalsy();
   });
 
-  it("is rendered upon mouseover", async () => {
+  test("is rendered upon mouseover", async () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -57,7 +57,7 @@ describe("UiTooltip", () => {
     );
   });
 
-  it("is rendered in the correct position", async () => {
+  test("is rendered in the correct position", async () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -75,7 +75,7 @@ describe("UiTooltip", () => {
     ).toBe("right");
   });
 
-  it("is in a fixed position", () => {
+  test("is in a fixed position", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: true,
@@ -94,7 +94,7 @@ describe("UiTooltip", () => {
     wrapper.unmount();
   });
 
-  it("shows no tooltip content when hidden", async () => {
+  test("shows no tooltip content when hidden", async () => {
     const wrapper = mount(UiTooltip, {
       props: {
         hidden: true,
@@ -114,7 +114,7 @@ describe("UiTooltip", () => {
     expect(wrapper.find('[data-testid="tooltipElement"]').exists()).toBe(false);
   });
 
-  it("applies no transition classes when animate is false", () => {
+  test("applies no transition classes when animate is false", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -132,7 +132,7 @@ describe("UiTooltip", () => {
     expect(transition.props("leaveToClass")).toBeUndefined();
   });
 
-  it("applies transition classes when animate is true", () => {
+  test("applies transition classes when animate is true", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,

package/dist/{standard-view-CmlAxXrM.js → standard-view-DfvAb3iJ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/standard-view.vue
 var i = {}, a = {

package/dist/{star-x38wQI5a.js → star-BdzEpiC-.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/star.vue
 var i = {}, a = {

package/dist/{star-filled-V0iRfD5M.js → star-filled-ZgHiwVZ0.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/star-filled.vue
 var i = {}, a = {

package/dist/{stop-BKrExcb1.js → stop-ugLlg2YL.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/stop.vue
 var i = {}, a = {

package/dist/{story-B2rvDIJr.js → story-D7qk5t65.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/story.vue
 var i = {}, a = {

package/dist/{story-6skLDsue.js → story-k_tWc66v.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/components/UiMediaTypeIcon/icons/story.vue
 var i = {}, a = {