@porsche-design-system/components-vue 3.8.0 → 3.9.0-rc.0

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

@@ -1,60 +1,63 @@
-import type { SelectedAriaAttributes } from '../types';
-declare const _default: import("vue").DefineComponent<{
-    source: {
-        type: import("vue").PropType<string>;
-    };
-    size: {
-        type: import("vue").PropType<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label">>;
-    };
-    color: {
-        type: import("vue").PropType<"default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | "state-disabled">;
-        default: string;
-    };
-    lazy: {
-        type: import("vue").PropType<boolean>;
-    };
-    name: {
-        type: import("vue").PropType<"list" | "copy" | "grid" | "document" | "search" | "switch" | "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" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "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-spotify" | "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" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out">;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    source: {
-        type: import("vue").PropType<string>;
-    };
-    size: {
-        type: import("vue").PropType<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label">>;
-    };
-    color: {
-        type: import("vue").PropType<"default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | "state-disabled">;
-        default: string;
-    };
-    lazy: {
-        type: import("vue").PropType<boolean>;
-    };
-    name: {
-        type: import("vue").PropType<"list" | "copy" | "grid" | "document" | "search" | "switch" | "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" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "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-spotify" | "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" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out">;
-        default: string;
-    };
-}>>, {
+import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize, Theme } from '../types';
+type PIconProps = {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<IconAriaAttribute>;
+    /**
+     * Basic color variations depending on theme property.
+     */
+    color?: IconColor;
+    /**
+     * Has no effect anymore (the component is now using the native `loading="lazy"` attribute by default)
+     * @deprecated since v3.0.0, will be removed with next major release
+     */
+    lazy?: boolean;
+    /**
+     * Specifies which icon to use.
+     */
+    name?: IconName;
+    /**
+     * The size of the icon.
+     */
+    size?: IconSize;
+    /**
+     * Specifies a whole icon path which can be used for custom icons.
+     */
+    source?: string;
+    /**
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PIconProps>, {
+    color: string;
+    name: string;
+    size: 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<PIconProps>, {
+    color: string;
+    name: string;
+    size: string;
+}>>>, {
     size: "inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large";
-    theme: "light" | "dark" | "auto";
-    color: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | "state-disabled";
     name: "list" | "copy" | "grid" | "document" | "search" | "switch" | "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" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "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-spotify" | "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" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out";
+    color: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | "state-disabled";
 }, {}>;
 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 ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/esm/lib/components/IconWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as a, ref as p, onMounted as l, onUpdated as c, openBlock as m, createBlock as s, resolveDynamicComponent as f, unref as u } from "vue";
-import { getPrefixedTagName as i, syncProperties as n } from "../../utils.mjs";
-const C = /* @__PURE__ */ a({
+import { defineComponent as m, ref as s, inject as f, onMounted as l, onUpdated as i, watch as u, openBlock as d, createBlock as h, resolveDynamicComponent as y, unref as _ } from "vue";
+import { usePrefix as C, themeInjectionKey as k, syncProperties as p } from "../../utils.mjs";
+const P = /* @__PURE__ */ m({
   __name: "IconWrapper",
   props: {
     aria: {},
@@ -9,20 +9,18 @@ const C = /* @__PURE__ */ a({
     name: { default: "arrow-right" },
     size: { default: "small" },
     source: {},
-    theme: { default: "light" }
+    theme: {}
   },
-  setup(r) {
-    const o = r, t = i("p-icon"), e = p();
-    return l(() => {
-      n(e.value, o);
-    }), c(() => {
-      n(e.value, o);
-    }), (d, _) => (m(), s(f(u(t)), {
+  setup(a) {
+    const c = C("p-icon"), e = a, o = s(), t = f(k), n = () => p(o, { ...e, theme: e.theme || t.value });
+    return l(n), i(n), u(t, (r) => {
+      p(o, { theme: e.theme || r });
+    }), (r, w) => (d(), h(y(_(c)), {
       ref_key: "pdsComponentRef",
-      ref: e
+      ref: o
     }, null, 512));
   }
 });
 export {
-  C as default
+  P as default
 };

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

@@ -1,78 +1,60 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    heading: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    dismissButton: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    persistent: {
-        type: import("vue").PropType<boolean>;
-    };
-    state: {
-        type: import("vue").PropType<"success" | "warning" | "error" | "info" | "neutral">;
-        default: string;
-    };
-    actionIcon: {
-        type: import("vue").PropType<"list" | "copy" | "grid" | "document" | "search" | "switch" | "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" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "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-spotify" | "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" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out">;
-        default: string;
-    };
-    actionLabel: {
-        type: import("vue").PropType<string>;
-    };
-    actionLoading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { InlineNotificationActionIcon, InlineNotificationState, Theme } from '../types';
+type PInlineNotificationProps = {
+    /**
+     * Action icon of the inline-notification.
+     */
+    actionIcon?: InlineNotificationActionIcon;
+    /**
+     * Action label of the inline-notification.
+     */
+    actionLabel?: string;
+    /**
+     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    actionLoading?: boolean;
+    /**
+     * Description of the inline-notification.
+     */
+    description?: string;
+    /**
+     * If false, the inline-notification will not have a dismiss button.
+     */
+    dismissButton?: boolean;
+    /**
+     * Heading of the inline-notification.
+     */
+    heading?: string;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the inline-notification can be closed/removed by the user.
+     */
+    persistent?: boolean;
+    /**
+     * State of the inline-notification.
+     */
+    state?: InlineNotificationState;
+    /**
+     * Adapts the inline-notification color depending on the theme.
+     */
+    theme?: Theme;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PInlineNotificationProps>, {
+    actionIcon: string;
+    actionLoading: boolean;
+    description: string;
+    dismissButton: boolean;
+    heading: string;
+    state: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     [x: string]: (...args: unknown[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    heading: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    dismissButton: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    persistent: {
-        type: import("vue").PropType<boolean>;
-    };
-    state: {
-        type: import("vue").PropType<"success" | "warning" | "error" | "info" | "neutral">;
-        default: string;
-    };
-    actionIcon: {
-        type: import("vue").PropType<"list" | "copy" | "grid" | "document" | "search" | "switch" | "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" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "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-spotify" | "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" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out">;
-        default: string;
-    };
-    actionLabel: {
-        type: import("vue").PropType<string>;
-    };
-    actionLoading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}>>, {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PInlineNotificationProps>, {
+    actionIcon: string;
+    actionLoading: boolean;
+    description: string;
+    dismissButton: boolean;
+    heading: string;
+    state: string;
+}>>>, {
     heading: string;
-    theme: "light" | "dark" | "auto";
     description: string;
     dismissButton: boolean;
     state: "success" | "warning" | "error" | "info" | "neutral";
@@ -82,6 +64,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     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 ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/esm/lib/components/InlineNotificationWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as l, ref as d, onMounted as f, 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 n, addEventListenerToElementRef as a } from "../../utils.mjs";
-const k = /* @__PURE__ */ l({
+import { defineComponent as m, ref as d, inject as l, onMounted as u, onUpdated as h, watch as y, openBlock as _, createBlock as B, resolveDynamicComponent as C, unref as g, withCtx as w, renderSlot as R } from "vue";
+import { usePrefix as k, themeInjectionKey as v, addEventListenerToElementRef as a, syncProperties as r } from "../../utils.mjs";
+const P = /* @__PURE__ */ m({
   __name: "InlineNotificationWrapper",
   props: {
     actionIcon: { default: "arrow-right" },
@@ -11,26 +11,26 @@ const k = /* @__PURE__ */ l({
     heading: { default: "" },
     persistent: { type: Boolean },
     state: { default: "info" },
-    theme: { default: "light" }
+    theme: {}
   },
   emits: ["action", "dismiss"],
-  setup(i, { emit: t }) {
-    const o = i, s = v("p-inline-notification"), e = d();
-    return f(() => {
-      n(e.value, o), a(e.value, "action", t), a(e.value, "dismiss", t);
-    }), p(() => {
-      n(e.value, o);
-    }), (r, y) => (c(), u(m(g(s)), {
+  setup(c, { emit: p }) {
+    const f = k("p-inline-notification"), t = c, e = d(), o = p, i = l(v), s = () => r(e, { ...t, theme: t.theme || i.value });
+    return u(() => {
+      s(), a(e, "action", o), a(e, "dismiss", o);
+    }), h(s), y(i, (n) => {
+      r(e, { theme: t.theme || n });
+    }), (n, x) => (_(), B(C(g(f)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: _(() => [
-        h(r.$slots, "default")
+      default: w(() => [
+        R(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  k as default
+  P as default
 };