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

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

@@ -0,0 +1,92 @@
+import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, Theme } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Text alignment of the component.
+     */
+    align?: "center" | "left" | "right" | undefined;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: "primary" | "inherit" | undefined;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean | undefined;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large"> | undefined;
+    /**
+     * Sets a custom HTML tag depending on the usage of the heading component.
+     */
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    align: string;
+    color: string;
+    ellipsis: boolean;
+    size: 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<{
+    /**
+     * Text alignment of the component.
+     */
+    align?: "center" | "left" | "right" | undefined;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: "primary" | "inherit" | undefined;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean | undefined;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large"> | undefined;
+    /**
+     * Sets a custom HTML tag depending on the usage of the heading component.
+     */
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    align: string;
+    color: string;
+    ellipsis: boolean;
+    size: string;
+    theme: string;
+}>>>, {
+    size: BreakpointCustomizable<HeadingSize>;
+    theme: Theme;
+    align: HeadingAlign;
+    color: HeadingColor;
+    ellipsis: boolean;
+}>, {
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/HeadingWrapper.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent as l, ref as p, onMounted as f, onUpdated as s, openBlock as d, createBlock as i, resolveDynamicComponent as u, unref as m, withCtx as c, renderSlot as g } from "vue";
+import { getPrefixedTagName as _, syncProperties as o } from "../../utils.js";
+const y = /* @__PURE__ */ l({
+  __name: "HeadingWrapper",
+  props: {
+    align: { default: "left" },
+    color: { default: "primary" },
+    ellipsis: { type: Boolean, default: !1 },
+    size: { default: "xx-large" },
+    tag: null,
+    theme: { default: "light" }
+  },
+  setup(n) {
+    const t = n, a = _("p-heading"), e = p();
+    return f(() => {
+      o(e.value, t);
+    }), s(() => {
+      o(e.value, t);
+    }), (r, C) => (d(), i(u(m(a)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: c(() => [
+        g(r.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  y as default
+};

package/lib/components/HeadingWrapper.vue2.js

@@ -0,0 +1,4 @@
+import f from "./HeadingWrapper.vue.js";
+export {
+  f as default
+};

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

@@ -1,4 +1,5 @@
-import type { TextAlign, TextColor, Theme, HeadlineVariant } from '../types';
+import type { HeadlineAlign, HeadlineColor, Theme, HeadlineVariant } from '../types';
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Text alignment of the component.
@@ -7,13 +8,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "default" | "inherit" | undefined;
+    color?: "default" | "primary" | "inherit" | undefined;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
     ellipsis?: boolean | undefined;
     /**
-     * Sets a custom HTML tag depending of the usage of the headline component.
+     * Sets a custom HTML tag depending on the usage of the headline component.
      */
     tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**
@@ -38,13 +39,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "default" | "inherit" | undefined;
+    color?: "default" | "primary" | "inherit" | undefined;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
     ellipsis?: boolean | undefined;
     /**
-     * Sets a custom HTML tag depending of the usage of the headline component.
+     * Sets a custom HTML tag depending on the usage of the headline component.
      */
     tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**
@@ -64,8 +65,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     theme: Theme;
     variant: HeadlineVariant;
-    color: Extract<TextColor, "default" | "inherit">;
-    align: TextAlign;
+    align: HeadlineAlign;
+    color: HeadlineColor;
     ellipsis: boolean;
 }>, {
     default: (_: {}) => any;

package/lib/components/HeadlineWrapper.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as r, ref as p, onMounted as f, onUpdated as d, openBlock as s, createBlock as u, resolveDynamicComponent as i, unref as m, withCtx as c, renderSlot as _ } from "vue";
+import { defineComponent as r, ref as p, onMounted as f, onUpdated as d, openBlock as s, createBlock as i, resolveDynamicComponent as u, unref as m, withCtx as c, renderSlot as _ } from "vue";
 import { getPrefixedTagName as g, syncProperties as o } from "../../utils.js";
-const y = /* @__PURE__ */ r({
+const v = /* @__PURE__ */ r({
   __name: "HeadlineWrapper",
   props: {
     align: { default: "left" },
-    color: { default: "default" },
+    color: { default: "primary" },
     ellipsis: { type: Boolean, default: !1 },
     tag: null,
     theme: { default: "light" },
@@ -16,7 +16,7 @@ const y = /* @__PURE__ */ r({
       o(e.value, t);
     }), d(() => {
       o(e.value, t);
-    }), (l, h) => (s(), u(i(m(a)), {
+    }), (l, h) => (s(), i(u(m(a)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
@@ -28,5 +28,5 @@ const y = /* @__PURE__ */ r({
   }
 });
 export {
-  y as default
+  v as default
 };

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

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, TextColor, IconName, IconSize, ThemeExtendedElectricDark } from '../types';
+import type { SelectedAriaAttributes, IconColor, IconName, IconSize, Theme } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -7,27 +7,28 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Basic color variations depending on theme property.
      */
-    color?: "default" | "inherit" | "brand" | "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | "notification-success" | "notification-warning" | "notification-error" | "notification-neutral" | undefined;
+    color?: "default" | "primary" | "brand" | "contrast-low" | "neutral-contrast-low" | "contrast-medium" | "neutral-contrast-medium" | "contrast-high" | "neutral-contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "notification-neutral" | "inherit" | "disabled" | undefined;
     /**
-     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     lazy?: boolean | undefined;
     /**
      * Specifies which icon to use.
      */
-    name?: IconName | undefined;
+    name?: "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;
     /**
      * The size of the icon.
      */
-    size?: "small" | "medium" | "large" | "inherit" | undefined;
+    size?: "inherit" | "x-small" | "small" | "medium" | "large" | "x-large" | undefined;
     /**
      * Specifies a whole icon path which can be used for custom icons.
      */
     source?: string | undefined;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     color: string;
     lazy: boolean;
@@ -42,27 +43,28 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Basic color variations depending on theme property.
      */
-    color?: "default" | "inherit" | "brand" | "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | "notification-success" | "notification-warning" | "notification-error" | "notification-neutral" | undefined;
+    color?: "default" | "primary" | "brand" | "contrast-low" | "neutral-contrast-low" | "contrast-medium" | "neutral-contrast-medium" | "contrast-high" | "neutral-contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "notification-neutral" | "inherit" | "disabled" | undefined;
     /**
-     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     lazy?: boolean | undefined;
     /**
      * Specifies which icon to use.
      */
-    name?: IconName | undefined;
+    name?: "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;
     /**
      * The size of the icon.
      */
-    size?: "small" | "medium" | "large" | "inherit" | undefined;
+    size?: "inherit" | "x-small" | "small" | "medium" | "large" | "x-large" | undefined;
     /**
      * Specifies a whole icon path which can be used for custom icons.
      */
     source?: string | undefined;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     color: string;
     lazy: boolean;
@@ -71,8 +73,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     theme: string;
 }>>>, {
     size: IconSize;
-    theme: ThemeExtendedElectricDark;
-    color: TextColor;
+    theme: Theme;
+    color: IconColor;
     lazy: boolean;
     name: IconName;
 }>;

package/lib/components/IconWrapper.vue.js

@@ -1,28 +1,28 @@
-import { defineComponent as r, ref as l, onMounted as p, onUpdated as f, openBlock as s, createBlock as u, resolveDynamicComponent as c, unref as m } from "vue";
+import { defineComponent as a, ref as l, onMounted as p, onUpdated as f, openBlock as s, createBlock as c, resolveDynamicComponent as m, unref as u } from "vue";
 import { getPrefixedTagName as d, syncProperties as n } from "../../utils.js";
-const y = /* @__PURE__ */ r({
+const C = /* @__PURE__ */ a({
   __name: "IconWrapper",
   props: {
     aria: null,
-    color: { default: "default" },
+    color: { default: "primary" },
     lazy: { type: Boolean, default: !1 },
-    name: { default: "arrow-head-right" },
+    name: { default: "arrow-right" },
     size: { default: "small" },
     source: null,
     theme: { default: "light" }
   },
   setup(t) {
-    const o = t, a = d("p-icon"), e = l();
+    const o = t, r = d("p-icon"), e = l();
     return p(() => {
       n(e.value, o);
     }), f(() => {
       n(e.value, o);
-    }), (i, _) => (s(), u(c(m(a)), {
+    }), (i, _) => (s(), c(m(u(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, null, 512));
   }
 });
 export {
-  y as default
+  C as default
 };

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

@@ -3,7 +3,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Action icon of the inline-notification.
      */
-    actionIcon?: IconName | undefined;
+    actionIcon?: "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;
     /**
      * Action label of the inline-notification.
      */
@@ -27,7 +27,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * State of the inline-notification.
      */
-    state?: "success" | "warning" | "error" | "neutral" | undefined;
+    state?: "success" | "warning" | "error" | "info" | "neutral" | undefined;
     /**
      * Adapts the inline-notification color depending on the theme.
      */
@@ -48,7 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Action icon of the inline-notification.
      */
-    actionIcon?: IconName | undefined;
+    actionIcon?: "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;
     /**
      * Action label of the inline-notification.
      */
@@ -72,7 +72,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * State of the inline-notification.
      */
-    state?: "success" | "warning" | "error" | "neutral" | undefined;
+    state?: "success" | "warning" | "error" | "info" | "neutral" | undefined;
     /**
      * Adapts the inline-notification color depending on the theme.
      */

package/lib/components/InlineNotificationWrapper.vue.js

@@ -1,21 +1,21 @@
-import { defineComponent as s, ref as d, onMounted as f, onUpdated as p, openBlock as c, createBlock as u, resolveDynamicComponent as m, unref as g, withCtx as h, renderSlot as _ } from "vue";
+import { defineComponent as s, ref as f, onMounted as d, onUpdated as p, openBlock as c, createBlock as u, resolveDynamicComponent as m, unref as g, withCtx as _, renderSlot as h } from "vue";
 import { getPrefixedTagName as v, syncProperties as o, addEventListenerToElementRef as a } from "../../utils.js";
 const k = /* @__PURE__ */ s({
   __name: "InlineNotificationWrapper",
   props: {
-    actionIcon: { default: "arrow-head-right" },
+    actionIcon: { default: "arrow-right" },
     actionLabel: null,
     actionLoading: { type: Boolean, default: !1 },
     description: { default: "" },
     heading: { default: "" },
     persistent: { type: Boolean, default: !1 },
-    state: { default: "neutral" },
+    state: { default: "info" },
     theme: { default: "light" }
   },
   emits: ["action", "dismiss"],
   setup(i, { emit: t }) {
-    const n = i, l = v("p-inline-notification"), e = d();
-    return f(() => {
+    const n = i, l = v("p-inline-notification"), e = f();
+    return d(() => {
       o(e.value, n), a(e.value, "action", t), a(e.value, "dismiss", t);
     }), p(() => {
       o(e.value, n);
@@ -23,8 +23,8 @@ const k = /* @__PURE__ */ s({
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: h(() => [
-        _(r.$slots, "default")
+      default: _(() => [
+        h(r.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkButtonPureIconName, TextSize, LinkTarget, ThemeExtendedElectricDark, TextWeight } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkButtonIconName, TextSize, LinkTarget, Theme, TextWeight } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Display link in active state.
@@ -27,7 +27,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown. By choosing 'none', no icon is displayed
      */
-    icon?: LinkButtonPureIconName | undefined;
+    icon?: LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -39,7 +39,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the link.
      */
-    size?: BreakpointCustomizable<"x-small" | "small" | "medium" | "large" | "x-large" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -51,11 +51,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean | undefined;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+    weight?: "thin" | "regular" | "semibold" | "semi-bold" | "bold" | undefined;
 }>, {
     active: boolean;
     alignLabel: string;
@@ -65,6 +70,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     stretch: boolean;
     target: string;
     theme: string;
+    underline: boolean;
     weight: 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<{
     /**
@@ -94,7 +100,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown. By choosing 'none', no icon is displayed
      */
-    icon?: LinkButtonPureIconName | undefined;
+    icon?: LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -106,7 +112,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the link.
      */
-    size?: BreakpointCustomizable<"x-small" | "small" | "medium" | "large" | "x-large" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -118,11 +124,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean | undefined;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+    weight?: "thin" | "regular" | "semibold" | "semi-bold" | "bold" | undefined;
 }>, {
     active: boolean;
     alignLabel: string;
@@ -132,17 +143,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     stretch: boolean;
     target: string;
     theme: string;
+    underline: boolean;
     weight: string;
 }>>>, {
     weight: TextWeight;
     stretch: BreakpointCustomizable<boolean>;
     size: BreakpointCustomizable<TextSize>;
-    theme: ThemeExtendedElectricDark;
+    theme: Theme;
     active: boolean;
     alignLabel: BreakpointCustomizable<AlignLabel>;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: LinkButtonPureIconName;
+    icon: LinkButtonIconName;
     target: LinkTarget;
+    underline: boolean;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/LinkPureWrapper.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as r, ref as f, onMounted as u, onUpdated as d, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as h } from "vue";
-import { getPrefixedTagName as g, syncProperties as l } from "../../utils.js";
+import { defineComponent as r, ref as f, onMounted as u, onUpdated as d, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as g } from "vue";
+import { getPrefixedTagName as h, syncProperties as l } from "../../utils.js";
 const w = /* @__PURE__ */ r({
   __name: "LinkPureWrapper",
   props: {
@@ -9,17 +9,18 @@ const w = /* @__PURE__ */ r({
     download: null,
     hideLabel: { default: !1 },
     href: null,
-    icon: { default: "arrow-head-right" },
+    icon: { default: "arrow-right" },
     iconSource: null,
     rel: null,
     size: { default: "small" },
     stretch: { default: !1 },
     target: { default: "_self" },
     theme: { default: "light" },
+    underline: { type: Boolean, default: !1 },
     weight: { default: "regular" }
   },
   setup(a) {
-    const t = a, n = g("p-link-pure"), e = f();
+    const t = a, n = h("p-link-pure"), e = f();
     return u(() => {
       l(e.value, t);
     }), d(() => {
@@ -29,7 +30,7 @@ const w = /* @__PURE__ */ r({
       ref: e
     }, {
       default: m(() => [
-        h(o.$slots, "default")
+        g(o.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,4 +1,5 @@
 import type { BreakpointCustomizable, SocialIconName, LinkTarget, Theme } from '../types';
+/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Show or hide label.