@porsche-design-system/components-vue 2.20.0-rc.1 → 3.0.0-alpha.0

package/lib/components/LinkWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, BreakpointCustomizable, IconName, LinkTarget, ThemeExtendedElectric, LinkVariant } from '../types';
+import type { SelectedAriaAttributes, BreakpointCustomizable, LinkButtonIconName, LinkTarget, Theme, LinkVariant } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -17,9 +17,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     href?: string | undefined;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName | undefined;
+    icon?: LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -35,7 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * The style variant of the link.
      */
@@ -64,9 +64,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     href?: string | undefined;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName | undefined;
+    icon?: LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -82,7 +82,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * The style variant of the link.
      */
@@ -94,9 +94,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
     variant: string;
 }>>>, {
-    theme: ThemeExtendedElectric;
+    theme: Theme;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: IconName;
+    icon: LinkButtonIconName;
     variant: LinkVariant;
     target: LinkTarget;
 }>, {

package/lib/components/LinkWrapper.vue.js

@@ -1,31 +1,31 @@
-import { defineComponent as l, ref as f, onMounted as d, onUpdated as p, openBlock as u, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as h } from "vue";
-import { getPrefixedTagName as _, syncProperties as o } from "../../utils.js";
-const v = /* @__PURE__ */ l({
+import { defineComponent as a, ref as f, onMounted as p, onUpdated as u, openBlock as d, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as _ } from "vue";
+import { getPrefixedTagName as h, syncProperties as o } from "../../utils.js";
+const v = /* @__PURE__ */ a({
   __name: "LinkWrapper",
   props: {
     aria: null,
     download: null,
     hideLabel: { default: !1 },
     href: null,
-    icon: { default: "arrow-head-right" },
+    icon: { default: "none" },
     iconSource: null,
     rel: null,
     target: { default: "_self" },
     theme: { default: "light" },
-    variant: { default: "secondary" }
+    variant: { default: "primary" }
   },
   setup(t) {
-    const n = t, r = _("p-link"), e = f();
-    return d(() => {
+    const n = t, l = h("p-link"), e = f();
+    return p(() => {
       o(e.value, n);
-    }), p(() => {
+    }), u(() => {
       o(e.value, n);
-    }), (a, g) => (u(), s(i(c(r)), {
+    }), (r, C) => (d(), s(i(c(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: m(() => [
-        h(a.$slots, "default")
+        _(r.$slots, "default")
       ]),
       _: 3
     }, 512));

package/lib/components/PopoverWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, PopoverDirection } from '../types';
+import type { SelectedAriaAttributes, PopoverDirection, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -12,8 +12,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: "top" | "left" | "right" | "bottom" | undefined;
+    /**
+     * Adapts the popover color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     direction: string;
+    theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -27,9 +32,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: "top" | "left" | "right" | "bottom" | undefined;
+    /**
+     * Adapts the popover color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     direction: string;
+    theme: string;
 }>>>, {
+    theme: Theme;
     direction: PopoverDirection;
 }>, {
     default: (_: {}) => any;

package/lib/components/PopoverWrapper.vue.js

@@ -1,19 +1,20 @@
-import { defineComponent as a, ref as s, onMounted as f, onUpdated as l, openBlock as c, createBlock as d, resolveDynamicComponent as m, unref as i, withCtx as u, renderSlot as _ } from "vue";
+import { defineComponent as a, ref as l, onMounted as s, onUpdated as f, openBlock as d, createBlock as m, resolveDynamicComponent as c, unref as i, withCtx as u, renderSlot as _ } from "vue";
 import { getPrefixedTagName as C, syncProperties as t } from "../../utils.js";
-const x = /* @__PURE__ */ a({
+const k = /* @__PURE__ */ a({
   __name: "PopoverWrapper",
   props: {
     aria: null,
     description: null,
-    direction: { default: "bottom" }
+    direction: { default: "bottom" },
+    theme: { default: "light" }
   },
   setup(n) {
-    const o = n, r = C("p-popover"), e = s();
-    return f(() => {
+    const o = n, r = C("p-popover"), e = l();
+    return s(() => {
       t(e.value, o);
-    }), l(() => {
+    }), f(() => {
       t(e.value, o);
-    }), (p, v) => (c(), d(m(i(r)), {
+    }), (p, v) => (d(), m(c(i(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
@@ -25,5 +26,5 @@ const x = /* @__PURE__ */ a({
   }
 });
 export {
-  x as default
+  k as default
 };

package/lib/components/RadioButtonWrapperWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, FormState } from '../types';
+import type { BreakpointCustomizable, FormState, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
@@ -16,11 +16,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     hideLabel: boolean;
     label: string;
     message: string;
     state: string;
+    theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
@@ -38,13 +43,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     hideLabel: boolean;
     label: string;
     message: string;
     state: string;
+    theme: string;
 }>>>, {
     label: string;
+    theme: Theme;
     state: FormState;
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;

package/lib/components/RadioButtonWrapperWrapper.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as p, ref as s, onMounted as f, onUpdated as d, openBlock as l, createBlock as u, resolveDynamicComponent as m, unref as c, withCtx as i, renderSlot as _ } from "vue";
+import { defineComponent as p, ref as f, onMounted as l, onUpdated as s, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as c, withCtx as i, renderSlot as _ } from "vue";
 import { getPrefixedTagName as C, syncProperties as o } from "../../utils.js";
 const k = /* @__PURE__ */ p({
   __name: "RadioButtonWrapperWrapper",
@@ -6,15 +6,16 @@ const k = /* @__PURE__ */ p({
     hideLabel: { default: !1 },
     label: { default: "" },
     message: { default: "" },
-    state: { default: "none" }
+    state: { default: "none" },
+    theme: { default: "light" }
   },
   setup(n) {
-    const t = n, a = C("p-radio-button-wrapper"), e = s();
-    return f(() => {
+    const t = n, a = C("p-radio-button-wrapper"), e = f();
+    return l(() => {
       o(e.value, t);
-    }), d(() => {
+    }), s(() => {
       o(e.value, t);
-    }), (r, b) => (l(), u(m(c(a)), {
+    }), (r, g) => (d(), u(m(c(a)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

package/lib/components/ScrollerWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, ThemeExtendedElectric } from '../types';
+import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Adapts the background gradient color of prev and next button.
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     gradientColorScheme: string;
     scrollIndicatorPosition: string;
@@ -36,13 +36,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     gradientColorScheme: string;
     scrollIndicatorPosition: string;
     theme: string;
 }>>>, {
-    theme: ThemeExtendedElectric;
+    theme: Theme;
     gradientColorScheme: GradientColorTheme;
     scrollIndicatorPosition: ScrollIndicatorPosition;
 }>, {

package/lib/components/SegmentedControlItemWrapper.vue.d.ts

@@ -1,4 +1,3 @@
-import type { IconName } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Disables the button. No events will be triggered while disabled state is active.
@@ -7,7 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown.
      */
-    icon?: IconName | undefined;
+    icon?: "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "document" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "grid" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "list" | "locate" | "lock" | "lock-open" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "route" | "rss" | "save" | "screen" | "search" | "send" | "share" | "shopping-bag" | "shopping-cart" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "switch" | "tablet" | "tachometer" | "truck" | "upload" | "user" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -30,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown.
      */
-    icon?: IconName | undefined;
+    icon?: "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "document" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "grid" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "list" | "locate" | "lock" | "lock-open" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "route" | "rss" | "save" | "screen" | "search" | "send" | "share" | "shopping-bag" | "shopping-cart" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "switch" | "tablet" | "tachometer" | "truck" | "upload" | "user" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
     /**
      * A URL path to a custom icon.
      */

package/lib/components/SegmentedControlWrapper.vue.d.ts

@@ -1,7 +1,7 @@
-import type { SegmentedControlBackgroundColor, SegmentedControlChangeEvent, Theme } from '../types';
+import type { SegmentedControlChangeEvent, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
-     * Background color variations
+     * @deprecated Background color variations
      */
     backgroundColor?: "background-surface" | "background-default" | undefined;
     /**
@@ -13,13 +13,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     value?: string | number | undefined;
 }>, {
-    backgroundColor: string;
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     segmentedControlChange: (value: SegmentedControlChangeEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
-     * Background color variations
+     * @deprecated Background color variations
      */
     backgroundColor?: "background-surface" | "background-default" | undefined;
     /**
@@ -31,13 +30,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     value?: string | number | undefined;
 }>, {
-    backgroundColor: string;
     theme: string;
 }>>> & {
     onSegmentedControlChange?: ((value: SegmentedControlChangeEvent) => any) | undefined;
 }, {
     theme: Theme;
-    backgroundColor: SegmentedControlBackgroundColor;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/SegmentedControlWrapper.vue.js

@@ -1,30 +1,30 @@
-import { defineComponent as d, ref as p, onMounted as s, onUpdated as m, openBlock as f, createBlock as u, resolveDynamicComponent as c, unref as g, withCtx as C, renderSlot as i } from "vue";
-import { getPrefixedTagName as _, syncProperties as t, addEventListenerToElementRef as h } from "../../utils.js";
-const x = /* @__PURE__ */ d({
+import { defineComponent as p, ref as s, onMounted as m, onUpdated as d, openBlock as f, createBlock as u, resolveDynamicComponent as c, unref as C, withCtx as g, renderSlot as i } from "vue";
+import { getPrefixedTagName as _, syncProperties as o, addEventListenerToElementRef as h } from "../../utils.js";
+const y = /* @__PURE__ */ p({
   __name: "SegmentedControlWrapper",
   props: {
-    backgroundColor: { default: "background-default" },
+    backgroundColor: null,
     theme: { default: "light" },
     value: null
   },
   emits: ["segmentedControlChange"],
-  setup(n, { emit: r }) {
-    const o = n, a = _("p-segmented-control"), e = p();
-    return s(() => {
-      t(e.value, o), h(e.value, "segmentedControlChange", r);
-    }), m(() => {
-      t(e.value, o);
-    }), (l, v) => (f(), u(c(g(a)), {
+  setup(t, { emit: r }) {
+    const n = t, l = _("p-segmented-control"), e = s();
+    return m(() => {
+      o(e.value, n), h(e.value, "segmentedControlChange", r);
+    }), d(() => {
+      o(e.value, n);
+    }), (a, v) => (f(), u(c(C(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: C(() => [
-        i(l.$slots, "default")
+      default: g(() => [
+        i(a.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  x as default
+  y as default
 };

package/lib/components/SpinnerWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, BreakpointCustomizable, SpinnerSize, ThemeExtendedElectricDark } from '../types';
+import type { SelectedAriaAttributes, BreakpointCustomizable, SpinnerSize, Theme } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -7,11 +7,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Size of the spinner.
      */
-    size?: BreakpointCustomizable<"small" | "medium" | "large" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large"> | undefined;
     /**
      * Adapts the spinner color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     size: string;
     theme: string;
@@ -23,17 +23,17 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Size of the spinner.
      */
-    size?: BreakpointCustomizable<"small" | "medium" | "large" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large"> | undefined;
     /**
      * Adapts the spinner color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     size: string;
     theme: string;
 }>>>, {
     size: BreakpointCustomizable<SpinnerSize>;
-    theme: ThemeExtendedElectricDark;
+    theme: Theme;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/lib/components/SwitchWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, AlignLabel, SwitchChangeEvent, ThemeExtendedElectric } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SwitchChangeEvent, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Aligns the label.
@@ -24,15 +24,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Stretches the contents to max available space.
      */
     stretch?: BreakpointCustomizable<boolean> | undefined;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean | undefined;
     /**
      * Adapts the switch color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     alignLabel: string;
     checked: boolean;
@@ -40,7 +35,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideLabel: boolean;
     loading: boolean;
     stretch: boolean;
-    tabbable: boolean;
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     switchChange: (value: SwitchChangeEvent) => void;
@@ -69,15 +63,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Stretches the contents to max available space.
      */
     stretch?: BreakpointCustomizable<boolean> | undefined;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean | undefined;
     /**
      * Adapts the switch color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     alignLabel: string;
     checked: boolean;
@@ -85,18 +74,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideLabel: boolean;
     loading: boolean;
     stretch: boolean;
-    tabbable: boolean;
     theme: string;
 }>>> & {
     onSwitchChange?: ((value: SwitchChangeEvent) => any) | undefined;
 }, {
     stretch: BreakpointCustomizable<boolean>;
-    theme: ThemeExtendedElectric;
+    theme: Theme;
     alignLabel: BreakpointCustomizable<AlignLabel>;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     loading: boolean;
-    tabbable: boolean;
     checked: boolean;
 }>, {
     default: (_: {}) => any;

package/lib/components/SwitchWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as s, onMounted as d, onUpdated as p, openBlock as i, createBlock as u, resolveDynamicComponent as c, unref as m, withCtx as h, renderSlot as g } from "vue";
-import { getPrefixedTagName as C, syncProperties as a, addEventListenerToElementRef as b } from "../../utils.js";
-const B = /* @__PURE__ */ r({
+import { defineComponent as f, ref as r, onMounted as d, onUpdated as p, openBlock as i, createBlock as c, resolveDynamicComponent as u, unref as m, withCtx as h, renderSlot as g } from "vue";
+import { getPrefixedTagName as C, syncProperties as a, addEventListenerToElementRef as _ } from "../../utils.js";
+const B = /* @__PURE__ */ f({
   __name: "SwitchWrapper",
   props: {
     alignLabel: { default: "right" },
@@ -9,22 +9,21 @@ const B = /* @__PURE__ */ r({
     hideLabel: { default: !1 },
     loading: { type: Boolean, default: !1 },
     stretch: { default: !1 },
-    tabbable: { type: Boolean, default: !0 },
     theme: { default: "light" }
   },
   emits: ["switchChange"],
   setup(o, { emit: n }) {
-    const t = o, l = C("p-switch"), e = s();
+    const t = o, l = C("p-switch"), e = r();
     return d(() => {
-      a(e.value, t), b(e.value, "switchChange", n);
+      a(e.value, t), _(e.value, "switchChange", n);
     }), p(() => {
       a(e.value, t);
-    }), (f, y) => (i(), u(c(m(l)), {
+    }), (s, w) => (i(), c(u(m(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: h(() => [
-        g(f.$slots, "default")
+        g(s.$slots, "default")
       ]),
       _: 3
     }, 512));

package/lib/components/TabsBarWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, ThemeExtendedElectric, TabWeight } from '../types';
+import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, Theme, TabWeight } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * The text weight.
      */
@@ -43,7 +43,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * The text weight.
      */
@@ -58,7 +58,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     weight: TabWeight;
     size: BreakpointCustomizable<TabSize>;
-    theme: ThemeExtendedElectric;
+    theme: Theme;
     gradientColorScheme: TabGradientColorTheme;
 }>, {
     default: (_: {}) => any;

package/lib/components/TabsWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, ThemeExtendedElectric, TabWeight } from '../types';
+import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, Theme, TabWeight } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * The text weight.
      */
@@ -44,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * The text weight.
      */
@@ -60,7 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     weight: TabWeight;
     size: BreakpointCustomizable<TabSize>;
-    theme: ThemeExtendedElectric;
+    theme: Theme;
     gradientColorScheme: TabGradientColorTheme;
     activeTabIndex: number;
 }>, {