@dpa-id-components/dpa-shared-components 22.0.0-next.1 → 22.0.0-next.11

package/dist/{responsive-BHNmDmM6.js → responsive-DxkuLBT-.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/responsive.vue
 var i = {}, a = {
@@ -14,6 +14,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{rubix-thema-BZvVEFud.js → rubix-thema-C_AFU2TJ.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/rubix-thema.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{save-mTHDeUnL.js → save-CXjuYnpN.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/save.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{saved-search-DJO4_yPH.js → saved-search-CFvfKYcT.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/saved-search.vue
 var i = {}, a = {
@@ -14,6 +14,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{saved-search-filled-CNz5iwu_.js → saved-search-filled-CzEFnSAz.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/saved-search-filled.vue
 var i = {}, a = {
@@ -16,6 +16,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{search-B5yHBLf_.js → search-DCYa9f-a.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/search.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{settings-Hb_Y7Y53.js → settings-D744QSWD.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/settings.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{share-OpdW8ZmZ.js → share-D4fImRnp.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/share.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{share-alternative-C3pSVTYb.js → share-alternative-jYDTaOhB.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/share-alternative.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{sidebar-DtAUGBof.js → sidebar-CymSOARn.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, createStaticVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/sidebar.vue
 var i = {}, a = {
@@ -10,6 +10,6 @@ var i = {}, a = {
 function o(e, i) {
 	return r(), t("svg", a, [...i[0] ||= [n("<path fill-rule=\"evenodd\" d=\"M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V19C22 20.1046 21.1046 21 20 21H4C2.89543 21 2 20.1046 2 19V5ZM4 5H20V19H4V5Z\" fill=\"currentColor\"></path><path fill-rule=\"evenodd\" d=\"M11 19V5H13V19H11Z\" fill=\"currentColor\"></path><path fill-rule=\"evenodd\" d=\"M5 8.5C5 8.22386 5.22386 8 5.5 8H9.5C9.77614 8 10 8.22386 10 8.5C10 8.77614 9.77614 9 9.5 9H5.5C5.22386 9 5 8.77614 5 8.5Z\" fill=\"currentColor\"></path><path fill-rule=\"evenodd\" d=\"M5 10.9C5 10.6239 5.22386 10.4 5.5 10.4H9.5C9.77614 10.4 10 10.6239 10 10.9C10 11.1762 9.77614 11.4 9.5 11.4H5.5C5.22386 11.4 5 11.1762 5 10.9Z\" fill=\"currentColor\"></path><path fill-rule=\"evenodd\" d=\"M5 13.3C5 13.0239 5.22386 12.8 5.5 12.8H9.5C9.77614 12.8 10 13.0239 10 13.3C10 13.5762 9.77614 13.8 9.5 13.8H5.5C5.22386 13.8 5 13.5762 5 13.3Z\" fill=\"currentColor\"></path>", 5)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{sidebar-filled-BnnqCUYl.js → sidebar-filled-gWTXdyC3.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/sidebar-filled.vue
 var i = {}, a = {
@@ -14,6 +14,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{slack-mCoCq7b9.js → slack-CxvOlRRy.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/slack.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{slider-config-yjKG-9r9.js → slider-config-D65lpbtz.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/slider-config.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{spellcheck-bP4DPCKJ.js → spellcheck-CAd06Iwp.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/spellcheck.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{spinner-CrCQ6H6L.js → spinner-C2v5HebP.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/spinner.vue
 var i = {}, a = {
@@ -27,6 +27,6 @@ function o(e, i) {
 		"stroke-linecap": "square"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/src/assets/icons/lock-filled.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 2.11C13.0609 2.11 14.078 2.53173 14.8281 3.28188C15.5783 4.03202 16 5.04913 16 6.11V9.99965H17C17.7956 9.99965 18.5585 10.3161 19.1211 10.8786C19.6836 11.4411 19.9999 12.2041 20 12.9996V18.9996C20 19.7953 19.6837 20.5591 19.1211 21.1217C18.5585 21.6841 17.7955 21.9996 17 21.9996H7C6.2045 21.9996 5.44149 21.6841 4.87891 21.1217C4.3163 20.5591 4 19.7953 4 18.9996V12.9996C4.00009 12.2041 4.31638 11.4411 4.87891 10.8786C5.4415 10.3161 6.20443 9.99965 7 9.99965H8V6.11C8 5.04913 8.42173 4.03202 9.17188 3.28188C9.92202 2.53173 10.9391 2.11 12 2.11ZM12 13.7496C11.4478 13.7496 11.0002 14.1975 11 14.7496V16.7496C11 17.3019 11.4477 17.7496 12 17.7496C12.5523 17.7496 13 17.3019 13 16.7496V14.7496C12.9998 14.1975 12.5522 13.7496 12 13.7496ZM12 3.99965C11.4554 4.01535 10.9393 4.24678 10.5645 4.64223C10.1896 5.03767 9.98655 5.56531 10 6.11V9.99965H14V6.11C14.0135 5.56531 13.8104 5.03767 13.4355 4.64223C13.0607 4.24678 12.5446 4.01535 12 3.99965Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/dist/src/assets/icons/play-filled.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 4.91861C6 3.73014 7.31627 3.0137 8.31435 3.65892L18.9129 10.5105C19.8119 11.0917 19.8302 12.4005 18.9478 13.0066L8.34926 20.2864C7.35396 20.9701 6 20.2575 6 19.05V4.91861Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/dist/src/assets/icons/play.vue

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10.3846 18.0028C10.0776 18.0028 9.76759 17.9368 9.47859 17.8008C8.83059 17.4948 8.42859 16.8878 8.42859 16.2148V7.78878C8.42859 7.11578 8.83059 6.50878 9.47859 6.20278C10.2106 5.85778 11.0786 5.95878 11.6876 6.46178L16.7866 10.6758C17.1956 11.0118 17.4286 11.4958 17.4286 12.0018C17.4286 12.5078 17.1956 12.9918 16.7866 13.3278L11.6876 17.5408C11.3196 17.8458 10.8556 18.0028 10.3846 18.0028Z"
+      d="M8 5.83723V18.1L17.197 11.7828L8 5.83723ZM6 4.91861C6 3.73014 7.31627 3.0137 8.31435 3.65892L18.9129 10.5105C19.8119 11.0917 19.8302 12.4005 18.9478 13.0066L8.34926 20.2864C7.35396 20.9701 6 20.2575 6 19.05V4.91861Z"
       fill="currentColor"
     />
   </svg>

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

@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import DpaMediaItem from "./DpaMediaItem.vue";
 
 describe("DpaMediaItem", () => {
-  it("displays items in the time published slot", () => {
+  test("displays items in the time published slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         timePublished: "Time Slot",
@@ -13,7 +13,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Time Slot");
   });
 
-  it("displays items in the description slot", () => {
+  test("displays items in the description slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         description: "Description",
@@ -22,7 +22,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Description");
   });
 
-  it("displays items in the planning slot", () => {
+  test("displays items in the planning slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         planning: "Planning",
@@ -31,7 +31,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Planning");
   });
 
-  it("displays items in the textLength slot", () => {
+  test("displays items in the textLength slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         textLength: "Text Length",
@@ -40,7 +40,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Text Length");
   });
 
-  it("changes icon according to the genre", () => {
+  test("changes icon according to the genre", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         genre: "audio",
@@ -52,7 +52,7 @@ describe("DpaMediaItem", () => {
     });
   });
 
-  it("changes icon when fulfilled", () => {
+  test("changes icon when fulfilled", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         genre: "audio",
@@ -66,7 +66,7 @@ describe("DpaMediaItem", () => {
     });
   });
 
-  it("is styled differently when fulfilled", () => {
+  test("is styled differently when fulfilled", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         isFulfilled: true,
@@ -77,7 +77,7 @@ describe("DpaMediaItem", () => {
     expect(rootDiv.classes("border-neutral-faint")).toBe(true);
   });
 
-  it("renders images with the correct source", () => {
+  test("renders images with the correct source", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         imgSrc: "Source",
@@ -87,7 +87,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.find("img").attributes().src).toBe("Source");
   });
 
-  it("renders images with correct alt-text", () => {
+  test("renders images with correct alt-text", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         imgSrc: "Source",
@@ -98,7 +98,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.find("img").attributes().alt).toBe("Thumbnail :Alternative");
   });
 
-  it("displays the correct image count", () => {
+  test("displays the correct image count", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         imgSrc: "Source",
@@ -109,7 +109,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.find("[data-testid='imageCount']").text()).toBe("2");
   });
 
-  it("is styled differently when disabled", () => {
+  test("is styled differently when disabled", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         isFulfilled: true,

package/dist/src/components/UiBadge/UiBadge.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 UiBadge from "./UiBadge.vue";
 
 describe("UiBadge", () => {
-  it("renders red color by default", () => {
+  test("renders red color by default", () => {
     const wrapper = mount(UiBadge);
     expect(wrapper.classes("bg-accent-red")).toBe(true);
   });
 
-  it("renders badge for top-entry case", () => {
+  test("renders badge for top-entry case", () => {
     const wrapper = mount(UiBadge, {
       props: {
         appearance: "accent-green",

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

@@ -41,7 +41,7 @@ export const PlanningItem: Story = {
     template: `<UiBadge v-bind='args'>3</UiBadge>`,
   }),
   args: {
-    appearance: "neutral-emphasis",
+    appearance: "neutral-medium",
     iconName: "video",
   },
 };

package/dist/src/components/UiBadge/UiBadge.vue

@@ -16,31 +16,26 @@ import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 const { appearance = "accent-red", iconName = undefined } = defineProps<{
   appearance?:
     | "accent-red"
-    | "accent-red-dark"
     | "accent-orange"
     | "accent-purple"
     | "accent-green"
     | "primary"
     | "neutral-primary"
-    | "neutral-emphasis"
     | "neutral-medium"
     | "neutral-faint";
   iconName?: UiIconName;
 }>();
 
 const colorClass = computed(() => {
-  const colorClasses: Record<string, string> = {
+  return {
     "accent-red": "bg-accent-red text-neutral",
-    "accent-red-dark": "bg-accent-red-dark text-neutral",
     "accent-orange": "bg-accent-orange text-neutral",
     "accent-purple": "bg-accent-purple text-neutral",
     "accent-green": "bg-accent-green text-neutral",
     primary: "bg-primary text-neutral",
     "neutral-primary": "bg-neutral-primary text-neutral",
-    "neutral-emphasis": "bg-neutral-emphasis text-neutral",
     "neutral-medium": "bg-neutral-medium text-neutral",
-    "neutral-faint": "bg-neutral-faint text-neutral-emphasis",
-  };
-  return colorClasses[appearance];
+    "neutral-faint": "bg-neutral-faint text-neutral-subtle",
+  }[appearance];
 });
 </script>

package/dist/src/components/UiButton/README.md

@@ -40,15 +40,15 @@ import { UiButton } from "@dpa-id-components/dpa-shared-components";
 
 ### Props
 
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `to` | `RouteLocationRaw` | `undefined` | `RouterLink` `to` prop |
-| `size` | `"xs"`, `"sm"`, `"md"`, or `"lg"` | `"md"`  |  |
-| `appearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, `"tertiary"`, or `"ghost"` | `"primary"` |  |
-| `disabled` | `boolean` | `false` | Whether the `button` is disabled |
+| Name         | Type                                                                                       | Default     | Description                      |
+|--------------|--------------------------------------------------------------------------------------------|-------------|----------------------------------|
+| `to`         | `RouteLocationRaw`                                                                         | `undefined` | `RouterLink` `to` prop           |
+| `size`       | `"xs"`, `"sm"`, `"md"`, or `"lg"`                                                          | `"md"`      |                                  |
+| `appearance` | `"fill-emphasis"`, `"fill-subtle"`, `"outline-emphasis"`, `"outline-subtle"`, or `"ghost"` | `"primary"` |                                  |
+| `disabled`   | `boolean`                                                                                  | `false`     | Whether the `button` is disabled |
 
 ### Slots
 
-| Name      | Description                                 |
-|-----------|---------------------------------------------|
+| Name      | Description                                                                                                                                                                      |
+|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `default` | Button content. Note, that text nodes are wrapped in a `span` element to ensure they can be detected using the CSS selectors responsible for applying icon-only-specific styles. |

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

@@ -10,7 +10,9 @@ const router = createRouter({
     {
       path: "/",
       component: {
-        template: "<RouterView />",
+        template: /*html*/ `
+          <RouterView />
+        `,
       },
     },
   ],

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
 
@@ -9,7 +10,7 @@ const meta = {
   component: UiButton,
   args: {
     disabled: false,
-    appearance: "primary",
+    appearance: "fill-emphasis",
     size: "md",
     to: undefined,
   },
@@ -76,3 +77,19 @@ export const IconOnlyAndAriaLabel: Story = {
     `,
   }),
 };
+
+export const ToggleIcon: Story = {
+  render: (args) => ({
+    setup() {
+      const isVisible = ref(false);
+
+      return { args, isVisible };
+    },
+    components: { UiButton, UiIcon },
+    template: /*html*/ `
+      <UiButton v-bind="args" aria-label="Is visible" @click="isVisible = !isVisible">
+        <UiIcon :name="isVisible ? 'view' : 'view-off'" />
+      </UiButton>
+    `,
+  }),
+};

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

@@ -42,12 +42,17 @@ defineSlots<{
 const {
   to = undefined,
   size = "md",
-  appearance = "primary",
+  appearance = "fill-emphasis",
   disabled = false,
 } = defineProps<{
   to?: RouteLocationRaw;
   size?: keyof typeof BUTTON_SIZE_CLASSES;
-  appearance?: "primary" | "secondary" | "secondary-alt" | "tertiary" | "ghost";
+  appearance?:
+    | "fill-emphasis"
+    | "fill-subtle"
+    | "outline-emphasis"
+    | "outline-subtle"
+    | "ghost";
   disabled?: boolean;
 }>();
 
@@ -69,13 +74,13 @@ const attributes = computed(() => {
 const appearanceClasses = computed(
   () =>
     ({
-      primary:
+      "fill-emphasis":
         "border-transparent bg-primary text-neutral not-disabled:hover:bg-primary-hover disabled:bg-neutral-faint disabled:text-neutral-soft",
-      secondary:
+      "outline-emphasis":
         "border-neutral-faint bg-transparent text-primary-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-primary-hover disabled:text-neutral-faint",
-      "secondary-alt":
-        "border-neutral-faint bg-neutral text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
-      tertiary:
+      "outline-subtle":
+        "border-neutral-faint bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
+      "fill-subtle":
         "border-transparent bg-neutral-subtle text-neutral not-disabled:hover:bg-neutral-emphasis disabled:bg-neutral-faint disabled:text-neutral-soft",
       ghost:
         "border-transparent bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",

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

@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiButtonGroup from "./UiButtonGroup.vue";
 
 describe("UiButtonGroup", () => {
-  it("renders UiButtonGroup with default slot content", () => {
+  test("renders UiButtonGroup with default slot content", () => {
     const wrapper = mount(UiButtonGroup, {
       slots: {
         default: "Default Slot",

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

@@ -1,11 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 import { ref } from "vue";
 
 import UiButton from "../UiButton/UiButton.vue";
 
 import UiButtonGroup from "./UiButtonGroup.vue";
 
-type PropsAndStoryProps = InstanceType<typeof UiButtonGroup> & {
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiButtonGroup> & {
   activeButton: number;
 };
 
@@ -15,14 +19,14 @@ const meta = {
     activeButton: { control: "number" },
   },
   args: {
-    activeButton: 0,
+    activeButton: 1,
   },
   title: "Ui/UiButtonGroup",
   component: UiButtonGroup,
-} satisfies Meta<PropsAndStoryProps>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<PropsAndStoryProps>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
   render: (args) => ({
@@ -46,7 +50,4 @@ export const Default: Story = {
       </UiButtonGroup>
     `,
   }),
-  args: {
-    activeButton: 1,
-  },
 };

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

@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiCard from "./UiCard.vue";
 
 describe("UiCard", () => {
-  it("renders Card with default slot content", () => {
+  test("renders Card with default slot content", () => {
     const wrapper = mount(UiCard, {
       slots: {
         default: "Default Slot",