@porsche-design-system/components-vue 3.6.1 → 3.7.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,44 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.7.0-rc.1] - 2023-09-20
+
+#### Added
+
+- **[EXPERIMENTAL]** Prop `loading` for `Radio Button Wrapper`
+  ([#2774](https://github.com/porsche-design-system/porsche-design-system/pull/2774))
+- Theme property supports `auto` for all themeable components, reflecting `prefers-color-scheme` based on OS system
+  settings ([#2719](https://github.com/porsche-design-system/porsche-design-system/pull/2719))
+- `hyphens` CSS property can now be overwritten in `Button Tile`, `Link Tile` and `Link Tile Model Signature` components
+  ([#2758](https://github.com/porsche-design-system/porsche-design-system/pull/2758))
+- Partials that produce innerHTML support `{ format: 'sha256' }` option for whitelisting in
+  [Content-Security-Policy (CSP)](must-know/security/content-security-policy)
+  ([#2773](https://github.com/porsche-design-system/porsche-design-system/pull/2773))
+- `Pin Code` ([#2691](https://github.com/porsche-design-system/porsche-design-system/pull/2691))
+
+#### Fixed
+
+- Dragging of `Carousel` can become stucked
+  ([#2768](https://github.com/porsche-design-system/porsche-design-system/pull/2768))
+- Color of `message` for `Fieldset`, `Fieldset Wrapper`, `Text Field Wrapper` and `Textarea Wrapper` in dark theme
+  ([#2769](https://github.com/porsche-design-system/porsche-design-system/pull/2769))
+
+#### Changed
+
+- Usage of `getInitialStyles()` partial is required and validated with an exception
+  ([#2749](https://github.com/porsche-design-system/porsche-design-system/pull/2749))
+
+### [3.7.0-rc.0] - 2023-09-05
+
+#### Added
+
+- `Multi Select` ([#2658](https://github.com/porsche-design-system/porsche-design-system/pull/2658))
+
+#### Changed
+
+- Partials: `Cdn` and `Format` types are exposed
+  ([#2760](https://github.com/porsche-design-system/porsche-design-system/pull/2760))
+
 ### [3.6.1] - 2023-08-29
 
 ### [3.6.1-rc.0] - 2023-08-29

package/cjs/lib/components/MultiSelectOptionWrapper.vue.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),o=require("../../utils.cjs"),a=e.defineComponent({__name:"MultiSelectOptionWrapper",props:{disabled:{type:Boolean,default:!1},value:{}},setup(r){const n=r,s=o.getPrefixedTagName("p-multi-select-option"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,n)}),e.onUpdated(()=>{o.syncProperties(t.value,n)}),(p,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=a;

package/cjs/lib/components/MultiSelectOptionWrapper.vue2.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./MultiSelectOptionWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/MultiSelectWrapper.vue.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),a=require("../../utils.cjs"),u=e.defineComponent({__name:"MultiSelectWrapper",props:{description:{default:""},disabled:{type:Boolean,default:!1},dropdownDirection:{default:"auto"},hideLabel:{default:!1},label:{default:""},message:{default:""},name:{},required:{type:Boolean,default:!1},state:{default:"none"},theme:{default:"light"},value:{default:()=>[]}},emits:["update"],setup(o,{emit:l}){const n=o,s=a.getPrefixedTagName("p-multi-select"),t=e.ref();return e.onMounted(()=>{a.syncProperties(t.value,n),a.addEventListenerToElementRef(t.value,"update",l)}),e.onUpdated(()=>{a.syncProperties(t.value,n)}),(r,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;

package/cjs/lib/components/MultiSelectWrapper.vue2.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./MultiSelectWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/PinCodeWrapper.vue.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),a=require("../../utils.cjs"),r=e.defineComponent({__name:"PinCodeWrapper",props:{description:{default:""},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},label:{default:""},length:{default:4},loading:{type:Boolean,default:!1},message:{default:""},name:{},required:{type:Boolean,default:!1},state:{default:"none"},theme:{default:"light"},type:{default:"number"},value:{default:""}},emits:["update"],setup(o,{emit:l}){const n=o,d=a.getPrefixedTagName("p-pin-code"),t=e.ref();return e.onMounted(()=>{a.syncProperties(t.value,n),a.addEventListenerToElementRef(t.value,"update",l)}),e.onUpdated(()=>{a.syncProperties(t.value,n)}),(s,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(d)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=r;

package/cjs/lib/components/PinCodeWrapper.vue2.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./PinCodeWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/RadioButtonWrapperWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),p=e.defineComponent({__name:"RadioButtonWrapperWrapper",props:{hideLabel:{default:!1},label:{default:""},message:{default:""},state:{default:"none"},theme:{default:"light"}},setup(r){const n=r,a=o.getPrefixedTagName("p-radio-button-wrapper"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,n)}),e.onUpdated(()=>{o.syncProperties(t.value,n)}),(s,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=p;
+"use strict";const e=require("vue"),o=require("../../utils.cjs"),p=e.defineComponent({__name:"RadioButtonWrapperWrapper",props:{hideLabel:{default:!1},label:{default:""},loading:{type:Boolean,default:!1},message:{default:""},state:{default:"none"},theme:{default:"light"}},setup(a){const n=a,r=o.getPrefixedTagName("p-radio-button-wrapper"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,n)}),e.onUpdated(()=>{o.syncProperties(t.value,n)}),(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(r)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=p;

package/cjs/public-api.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@porsche-design-system/components-js"),_=require("./lib/components/AccordionWrapper.vue.cjs"),t=require("./lib/components/BannerWrapper.vue.cjs"),p=require("./lib/components/ButtonWrapper.vue.cjs"),u=require("./lib/components/ButtonGroupWrapper.vue.cjs"),s=require("./lib/components/ButtonPureWrapper.vue.cjs"),a=require("./lib/components/ButtonTileWrapper.vue.cjs"),i=require("./lib/components/CarouselWrapper.vue.cjs"),n=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),o=require("./lib/components/ContentWrapperWrapper.vue.cjs"),c=require("./lib/components/CrestWrapper.vue.cjs"),l=require("./lib/components/DisplayWrapper.vue.cjs"),v=require("./lib/components/DividerWrapper.vue.cjs"),g=require("./lib/components/FieldsetWrapper.vue.cjs"),P=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),y=require("./lib/components/FlexWrapper.vue.cjs"),W=require("./lib/components/FlexItemWrapper.vue.cjs"),q=require("./lib/components/FlyoutWrapper.vue.cjs"),d=require("./lib/components/GridWrapper.vue.cjs"),T=require("./lib/components/GridItemWrapper.vue.cjs"),m=require("./lib/components/HeadingWrapper.vue.cjs"),S=require("./lib/components/HeadlineWrapper.vue.cjs"),b=require("./lib/components/IconWrapper.vue.cjs"),x=require("./lib/components/InlineNotificationWrapper.vue.cjs"),B=require("./lib/components/LinkWrapper.vue.cjs"),C=require("./lib/components/LinkPureWrapper.vue.cjs"),I=require("./lib/components/LinkSocialWrapper.vue.cjs"),k=require("./lib/components/LinkTileWrapper.vue.cjs"),H=require("./lib/components/LinkTileModelSignatureWrapper.vue.cjs"),L=require("./lib/components/MarqueWrapper.vue.cjs"),D=require("./lib/components/ModalWrapper.vue.cjs"),F=require("./lib/components/ModelSignatureWrapper.vue.cjs"),M=require("./lib/components/PaginationWrapper.vue.cjs"),h=require("./lib/components/PopoverWrapper.vue.cjs"),R=require("./lib/components/RadioButtonWrapperWrapper.vue.cjs"),w=require("./lib/components/ScrollerWrapper.vue.cjs"),G=require("./lib/components/SegmentedControlWrapper.vue.cjs"),f=require("./lib/components/SegmentedControlItemWrapper.vue.cjs"),z=require("./lib/components/SelectWrapperWrapper.vue.cjs"),j=require("./lib/components/SpinnerWrapper.vue.cjs"),A=require("./lib/components/StepperHorizontalWrapper.vue.cjs"),N=require("./lib/components/StepperHorizontalItemWrapper.vue.cjs"),O=require("./lib/components/SwitchWrapper.vue.cjs"),J=require("./lib/components/TableWrapper.vue.cjs"),E=require("./lib/components/TableBodyWrapper.vue.cjs"),K=require("./lib/components/TableCellWrapper.vue.cjs"),Q=require("./lib/components/TableHeadWrapper.vue.cjs"),U=require("./lib/components/TableHeadCellWrapper.vue.cjs"),V=require("./lib/components/TableHeadRowWrapper.vue.cjs"),X=require("./lib/components/TableRowWrapper.vue.cjs"),Y=require("./lib/components/TabsWrapper.vue.cjs"),Z=require("./lib/components/TabsBarWrapper.vue.cjs"),$=require("./lib/components/TabsItemWrapper.vue.cjs"),ee=require("./lib/components/TagWrapper.vue.cjs"),re=require("./lib/components/TagDismissibleWrapper.vue.cjs"),_e=require("./lib/components/TextWrapper.vue.cjs"),te=require("./lib/components/TextFieldWrapperWrapper.vue.cjs"),pe=require("./lib/components/TextListWrapper.vue.cjs"),ue=require("./lib/components/TextListItemWrapper.vue.cjs"),se=require("./lib/components/TextareaWrapperWrapper.vue.cjs"),ae=require("./lib/components/ToastWrapper.vue.cjs"),ie=require("./lib/components/WordmarkWrapper.vue.cjs"),ne=require("./utils.cjs"),oe=require("./PorscheDesignSystemProvider.vue.cjs"),e=require("./plugin.cjs");Object.defineProperty(exports,"componentsReady",{enumerable:!0,get:()=>r.componentsReady});exports.PAccordion=_;exports.PBanner=t;exports.PButton=p;exports.PButtonGroup=u;exports.PButtonPure=s;exports.PButtonTile=a;exports.PCarousel=i;exports.PCheckboxWrapper=n;exports.PContentWrapper=o;exports.PCrest=c;exports.PDisplay=l;exports.PDivider=v;exports.PFieldset=g;exports.PFieldsetWrapper=P;exports.PFlex=y;exports.PFlexItem=W;exports.PFlyout=q;exports.PGrid=d;exports.PGridItem=T;exports.PHeading=m;exports.PHeadline=S;exports.PIcon=b;exports.PInlineNotification=x;exports.PLink=B;exports.PLinkPure=C;exports.PLinkSocial=I;exports.PLinkTile=k;exports.PLinkTileModelSignature=H;exports.PMarque=L;exports.PModal=D;exports.PModelSignature=F;exports.PPagination=M;exports.PPopover=h;exports.PRadioButtonWrapper=R;exports.PScroller=w;exports.PSegmentedControl=G;exports.PSegmentedControlItem=f;exports.PSelectWrapper=z;exports.PSpinner=j;exports.PStepperHorizontal=A;exports.PStepperHorizontalItem=N;exports.PSwitch=O;exports.PTable=J;exports.PTableBody=E;exports.PTableCell=K;exports.PTableHead=Q;exports.PTableHeadCell=U;exports.PTableHeadRow=V;exports.PTableRow=X;exports.PTabs=Y;exports.PTabsBar=Z;exports.PTabsItem=$;exports.PTag=ee;exports.PTagDismissible=re;exports.PText=_e;exports.PTextFieldWrapper=te;exports.PTextList=pe;exports.PTextListItem=ue;exports.PTextareaWrapper=se;exports.PToast=ae;exports.PWordmark=ie;exports.useToastManager=ne.useToastManager;exports.PorscheDesignSystemProvider=oe;exports.createPorscheDesignSystem=e.createPorscheDesignSystem;exports.usePorscheDesignSystemPlugin=e.usePorscheDesignSystemPlugin;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@porsche-design-system/components-js"),_=require("./lib/components/AccordionWrapper.vue.cjs"),t=require("./lib/components/BannerWrapper.vue.cjs"),p=require("./lib/components/ButtonWrapper.vue.cjs"),u=require("./lib/components/ButtonGroupWrapper.vue.cjs"),s=require("./lib/components/ButtonPureWrapper.vue.cjs"),i=require("./lib/components/ButtonTileWrapper.vue.cjs"),a=require("./lib/components/CarouselWrapper.vue.cjs"),n=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),c=require("./lib/components/ContentWrapperWrapper.vue.cjs"),o=require("./lib/components/CrestWrapper.vue.cjs"),l=require("./lib/components/DisplayWrapper.vue.cjs"),v=require("./lib/components/DividerWrapper.vue.cjs"),g=require("./lib/components/FieldsetWrapper.vue.cjs"),P=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),y=require("./lib/components/FlexWrapper.vue.cjs"),W=require("./lib/components/FlexItemWrapper.vue.cjs"),q=require("./lib/components/FlyoutWrapper.vue.cjs"),d=require("./lib/components/GridWrapper.vue.cjs"),T=require("./lib/components/GridItemWrapper.vue.cjs"),S=require("./lib/components/HeadingWrapper.vue.cjs"),m=require("./lib/components/HeadlineWrapper.vue.cjs"),b=require("./lib/components/IconWrapper.vue.cjs"),C=require("./lib/components/InlineNotificationWrapper.vue.cjs"),x=require("./lib/components/LinkWrapper.vue.cjs"),B=require("./lib/components/LinkPureWrapper.vue.cjs"),I=require("./lib/components/LinkSocialWrapper.vue.cjs"),M=require("./lib/components/LinkTileWrapper.vue.cjs"),k=require("./lib/components/LinkTileModelSignatureWrapper.vue.cjs"),H=require("./lib/components/MarqueWrapper.vue.cjs"),L=require("./lib/components/ModalWrapper.vue.cjs"),D=require("./lib/components/ModelSignatureWrapper.vue.cjs"),F=require("./lib/components/MultiSelectWrapper.vue.cjs"),h=require("./lib/components/MultiSelectOptionWrapper.vue.cjs"),R=require("./lib/components/PaginationWrapper.vue.cjs"),w=require("./lib/components/PinCodeWrapper.vue.cjs"),G=require("./lib/components/PopoverWrapper.vue.cjs"),f=require("./lib/components/RadioButtonWrapperWrapper.vue.cjs"),z=require("./lib/components/ScrollerWrapper.vue.cjs"),O=require("./lib/components/SegmentedControlWrapper.vue.cjs"),j=require("./lib/components/SegmentedControlItemWrapper.vue.cjs"),A=require("./lib/components/SelectWrapperWrapper.vue.cjs"),N=require("./lib/components/SpinnerWrapper.vue.cjs"),J=require("./lib/components/StepperHorizontalWrapper.vue.cjs"),E=require("./lib/components/StepperHorizontalItemWrapper.vue.cjs"),K=require("./lib/components/SwitchWrapper.vue.cjs"),Q=require("./lib/components/TableWrapper.vue.cjs"),U=require("./lib/components/TableBodyWrapper.vue.cjs"),V=require("./lib/components/TableCellWrapper.vue.cjs"),X=require("./lib/components/TableHeadWrapper.vue.cjs"),Y=require("./lib/components/TableHeadCellWrapper.vue.cjs"),Z=require("./lib/components/TableHeadRowWrapper.vue.cjs"),$=require("./lib/components/TableRowWrapper.vue.cjs"),ee=require("./lib/components/TabsWrapper.vue.cjs"),re=require("./lib/components/TabsBarWrapper.vue.cjs"),_e=require("./lib/components/TabsItemWrapper.vue.cjs"),te=require("./lib/components/TagWrapper.vue.cjs"),pe=require("./lib/components/TagDismissibleWrapper.vue.cjs"),ue=require("./lib/components/TextWrapper.vue.cjs"),se=require("./lib/components/TextFieldWrapperWrapper.vue.cjs"),ie=require("./lib/components/TextListWrapper.vue.cjs"),ae=require("./lib/components/TextListItemWrapper.vue.cjs"),ne=require("./lib/components/TextareaWrapperWrapper.vue.cjs"),ce=require("./lib/components/ToastWrapper.vue.cjs"),oe=require("./lib/components/WordmarkWrapper.vue.cjs"),le=require("./utils.cjs"),ve=require("./PorscheDesignSystemProvider.vue.cjs"),e=require("./plugin.cjs");Object.defineProperty(exports,"componentsReady",{enumerable:!0,get:()=>r.componentsReady});exports.PAccordion=_;exports.PBanner=t;exports.PButton=p;exports.PButtonGroup=u;exports.PButtonPure=s;exports.PButtonTile=i;exports.PCarousel=a;exports.PCheckboxWrapper=n;exports.PContentWrapper=c;exports.PCrest=o;exports.PDisplay=l;exports.PDivider=v;exports.PFieldset=g;exports.PFieldsetWrapper=P;exports.PFlex=y;exports.PFlexItem=W;exports.PFlyout=q;exports.PGrid=d;exports.PGridItem=T;exports.PHeading=S;exports.PHeadline=m;exports.PIcon=b;exports.PInlineNotification=C;exports.PLink=x;exports.PLinkPure=B;exports.PLinkSocial=I;exports.PLinkTile=M;exports.PLinkTileModelSignature=k;exports.PMarque=H;exports.PModal=L;exports.PModelSignature=D;exports.PMultiSelect=F;exports.PMultiSelectOption=h;exports.PPagination=R;exports.PPinCode=w;exports.PPopover=G;exports.PRadioButtonWrapper=f;exports.PScroller=z;exports.PSegmentedControl=O;exports.PSegmentedControlItem=j;exports.PSelectWrapper=A;exports.PSpinner=N;exports.PStepperHorizontal=J;exports.PStepperHorizontalItem=E;exports.PSwitch=K;exports.PTable=Q;exports.PTableBody=U;exports.PTableCell=V;exports.PTableHead=X;exports.PTableHeadCell=Y;exports.PTableHeadRow=Z;exports.PTableRow=$;exports.PTabs=ee;exports.PTabsBar=re;exports.PTabsItem=_e;exports.PTag=te;exports.PTagDismissible=pe;exports.PText=ue;exports.PTextFieldWrapper=se;exports.PTextList=ie;exports.PTextListItem=ae;exports.PTextareaWrapper=ne;exports.PToast=ce;exports.PWordmark=oe;exports.useToastManager=le.useToastManager;exports.PorscheDesignSystemProvider=ve;exports.createPorscheDesignSystem=e.createPorscheDesignSystem;exports.usePorscheDesignSystemPlugin=e.usePorscheDesignSystemPlugin;

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

@@ -18,7 +18,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -43,7 +43,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
 }>> & {
@@ -52,7 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     size: BreakpointCustomizable<"small" | "medium">;
     tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
 }, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -9,7 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     description: {
@@ -43,7 +43,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     description: {
@@ -69,7 +69,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     heading: string;
     open: boolean;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     description: string;
     dismissButton: boolean;
     state: "warning" | "error" | "info" | "neutral";

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

@@ -17,7 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     active: {
@@ -68,7 +68,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     active: {
@@ -106,7 +106,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     stretch: BreakpointCustomizable<boolean>;
     type: "button" | "reset" | "submit";
     size: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     active: boolean;
     alignLabel: BreakpointCustomizable<"left" | "right">;
     disabled: boolean;

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

@@ -51,7 +51,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     background: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     gradient: {
@@ -110,7 +110,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     background: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     gradient: {
@@ -127,7 +127,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loading: boolean;
     align: "top" | "bottom";
     aspectRatio: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">;
-    background: "light" | "dark";
+    background: "light" | "dark" | "auto";
     gradient: boolean;
 }, {}>, {
     default?(_: {}): any;

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

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     aria: {
@@ -40,7 +40,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     aria: {
@@ -71,7 +71,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     type: "button" | "reset" | "submit";
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: import("../types").LinkButtonIconName;

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

@@ -4,7 +4,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     description: {
@@ -54,7 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     description: {
@@ -100,7 +100,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onUpdate?: ((value: CarouselUpdateEvent) => any) | undefined;
     onCarouselChange?: ((value: CarouselUpdateEvent) => any) | undefined;
 }, {
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     width: "extended" | "basic";
     activeSlideIndex: number;
     alignHeader: "center" | "left";

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

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     state: {
@@ -30,7 +30,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     state: {
@@ -51,7 +51,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     label: string;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     state: "none" | "success" | "error";
     hideLabel: BreakpointCustomizable<boolean>;
     loading: boolean;

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

@@ -1,7 +1,7 @@
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     width: {
@@ -14,7 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     width: {
@@ -26,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     width: "extended" | "basic" | "fluid" | "narrow" | "full";
     backgroundColor: "default" | "transparent";
 }, {}>, {

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

@@ -8,7 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     align: {
@@ -32,7 +32,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     align: {
@@ -49,7 +49,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large">;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     align: "center" | "left" | "right";
     color: "inherit" | "primary";
     ellipsis: boolean;

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

@@ -1,7 +1,7 @@
 import type { BreakpointCustomizable } from '../types';
 declare const _default: import("vue").DefineComponent<{
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     direction: {
@@ -17,7 +17,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     direction: {
@@ -32,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<BreakpointCustomizable<"horizontal" | "vertical">>;
     };
 }>>, {
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     direction: BreakpointCustomizable<"horizontal" | "vertical">;
     color: "contrast-low" | "contrast-medium" | "contrast-high" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high";
 }, {}>;

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

@@ -4,7 +4,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     state: {
@@ -29,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     state: {
@@ -50,7 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     label: string;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     state: "none" | "success" | "error";
     required: boolean;
     message: string;

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

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     state: {
@@ -30,7 +30,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     state: {
@@ -51,7 +51,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     label: string;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     state: "none" | "success" | "error";
     required: boolean;
     message: string;

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

@@ -2,11 +2,11 @@ import type { BreakpointCustomizable } from '../types';
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     width: {
-        type: import("vue").PropType<BreakpointCustomizable<"full" | "auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">>;
+        type: import("vue").PropType<BreakpointCustomizable<"auto" | "full" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">>;
         default: string;
     };
     alignSelf: {
-        type: import("vue").PropType<BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto">>;
+        type: import("vue").PropType<BreakpointCustomizable<"auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline">>;
         default: string;
     };
     flex: {
@@ -27,11 +27,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     width: {
-        type: import("vue").PropType<BreakpointCustomizable<"full" | "auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">>;
+        type: import("vue").PropType<BreakpointCustomizable<"auto" | "full" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">>;
         default: string;
     };
     alignSelf: {
-        type: import("vue").PropType<BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto">>;
+        type: import("vue").PropType<BreakpointCustomizable<"auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline">>;
         default: string;
     };
     flex: {
@@ -51,8 +51,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: number;
     };
 }>>, {
-    width: BreakpointCustomizable<"full" | "auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">;
-    alignSelf: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto">;
+    width: BreakpointCustomizable<"auto" | "full" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">;
+    alignSelf: BreakpointCustomizable<"auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline">;
     flex: BreakpointCustomizable<"none" | "auto" | "initial" | "equal">;
     grow: BreakpointCustomizable<0 | 1>;
     offset: BreakpointCustomizable<"none" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">;

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

@@ -6,7 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     aria: {
@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     aria: {
@@ -39,7 +39,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onDismiss?: ((value?: void | undefined) => any) | undefined;
 }, {
     open: boolean;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     position: "left" | "right";
 }, {}>, {
     default?(_: {}): any;

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

@@ -8,7 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     align: {
@@ -32,7 +32,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     align: {
@@ -49,7 +49,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large">;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     align: "center" | "left" | "right";
     color: "inherit" | "primary";
     ellipsis: boolean;

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

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     align: {
@@ -29,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     align: {
@@ -49,7 +49,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     align: "center" | "left" | "right";
     variant: HeadlineVariant;
     color: "default" | "inherit" | "primary";

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

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     aria: {
@@ -34,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     aria: {
@@ -53,7 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     size: "inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large";
-    theme: "light" | "dark";
+    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";
 }, {}>;

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

@@ -4,7 +4,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     description: {
@@ -42,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     theme: {
-        type: import("vue").PropType<"light" | "dark">;
+        type: import("vue").PropType<"light" | "dark" | "auto">;
         default: string;
     };
     description: {
@@ -76,7 +76,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onAction?: ((value?: void | undefined) => any) | undefined;
 }, {
     heading: string;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "auto";
     description: string;
     dismissButton: boolean;
     state: "success" | "warning" | "error" | "info" | "neutral";