@porsche-design-system/components-vue 3.28.0-rc.3 → 3.28.0

package/CHANGELOG.md

@@ -14,6 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.28.0] - 2025-06-02
+
+#### Added
+
+- `Input Number`: ([#3855](https://github.com/porsche-design-system/porsche-design-system/pull/3855))
+
+#### Fixed
+
+- `Select Wrapper`: update of scroll position if dropdown is navigated with keyboard
+  ([#3858](https://github.com/porsche-design-system/porsche-design-system/pull/3858))
+- `Select`, `Multi Select`: replacement of static (english) a11y announcement of active `option` with dynamic
+  announcement through `ariaActiveDescendantElement`
+  ([#3826](https://github.com/porsche-design-system/porsche-design-system/pull/3826))
+
 ## [3.28.0-rc.3] - 2025-05-19
 
 ### Added

package/cjs/lib/components/InputNumberWrapper.vue.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"InputNumberWrapper",props:{autoComplete:{default:""},compact:{type:Boolean,default:!1},controls:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},label:{default:""},max:{},message:{default:""},min:{},name:{},placeholder:{default:""},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:"none"},step:{default:1},theme:{},value:{default:""}},emits:["blur","change","input"],setup(u,{emit:d}){const f=t.usePrefix("p-input-number"),o=u,n=e.ref(),a=d,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",a),t.addEventListenerToElementRef(n,"change",a),t.addEventListenerToElementRef(n,"input",a)}),e.onUpdated(r),e.watch(s,l=>{t.syncProperties(n,{theme:o.theme||l})}),(l,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(f)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=p;

package/cjs/lib/components/InputNumberWrapper.vue2.cjs

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

package/cjs/public-api.cjs

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

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

@@ -0,0 +1,113 @@
+import type { InputNumberAutoComplete, BreakpointCustomizable, InputNumberState, Theme } from '../types';
+type PInputNumberProps = {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputNumberAutoComplete;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Show or hide the increment/decrement stepper controls.
+     */
+    controls?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the number input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the number input should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max value of the number input.
+     */
+    max?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min value of the number input.
+     */
+    min?: number;
+    /**
+     * The name of the number input.
+     */
+    name: string;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the number input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the number input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputNumberState;
+    /**
+     * The granularity that the value must adhere to.
+     */
+    step?: number;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The number input value.
+     */
+    value?: string;
+};
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<PInputNumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (value: Event) => void;
+    change: (value: Event) => void;
+    input: (value: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<PInputNumberProps> & Readonly<{
+    onBlur?: ((value: Event) => any) | undefined;
+    onChange?: ((value: Event) => any) | undefined;
+    onInput?: ((value: InputEvent) => any) | undefined;
+}>, {
+    step: number;
+    label: string;
+    description: string;
+    disabled: boolean;
+    compact: boolean;
+    state: InputNumberState;
+    required: boolean;
+    hideLabel: BreakpointCustomizable<boolean>;
+    value: string;
+    message: string;
+    autoComplete: InputNumberAutoComplete;
+    controls: boolean;
+    placeholder: string;
+    readOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,46 @@
+import { defineComponent as d, ref as m, inject as c, onMounted as i, onUpdated as h, watch as y, openBlock as b, createBlock as B, resolveDynamicComponent as C, unref as _, withCtx as g, renderSlot as v } from "vue";
+import { usePrefix as x, themeInjectionKey as R, addEventListenerToElementRef as a, syncProperties as r } from "../../utils.mjs";
+const j = /* @__PURE__ */ d({
+  __name: "InputNumberWrapper",
+  props: {
+    autoComplete: { default: "" },
+    compact: { type: Boolean, default: !1 },
+    controls: { type: Boolean, default: !1 },
+    description: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    form: {},
+    hideLabel: { default: !1 },
+    label: { default: "" },
+    max: {},
+    message: { default: "" },
+    min: {},
+    name: {},
+    placeholder: { default: "" },
+    readOnly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    state: { default: "none" },
+    step: { default: 1 },
+    theme: {},
+    value: { default: "" }
+  },
+  emits: ["blur", "change", "input"],
+  setup(s, { emit: p }) {
+    const u = x("p-input-number"), t = s, e = m(), n = p, l = c(R), f = () => r(e, { ...t, theme: t.theme || l.value });
+    return i(() => {
+      f(), a(e, "blur", n), a(e, "change", n), a(e, "input", n);
+    }), h(f), y(l, (o) => {
+      r(e, { theme: t.theme || o });
+    }), (o, k) => (b(), B(C(_(u)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: g(() => [
+        v(o.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  j as default
+};

package/esm/lib/components/InputNumberWrapper.vue2.mjs

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

package/esm/lib/components/index.d.ts

@@ -26,6 +26,7 @@ export { default as PHeading } from './HeadingWrapper.vue';
 export { default as PHeadline } from './HeadlineWrapper.vue';
 export { default as PIcon } from './IconWrapper.vue';
 export { default as PInlineNotification } from './InlineNotificationWrapper.vue';
+export { default as PInputNumber } from './InputNumberWrapper.vue';
 export { default as PInputPassword } from './InputPasswordWrapper.vue';
 export { default as PLink } from './LinkWrapper.vue';
 export { default as PLinkPure } from './LinkPureWrapper.vue';

package/esm/lib/types.d.ts

@@ -1088,13 +1088,23 @@ declare const ICON_COLORS: readonly [
     "state-disabled"
 ];
 export type IconColor = (typeof ICON_COLORS)[number];
+export type InputNumberState = FormState;
+declare const INPUT_NUMBER_AUTO_COMPLETE: readonly [
+    "off",
+    "on",
+    ""
+];
+export type InputNumberAutoComplete = (typeof INPUT_NUMBER_AUTO_COMPLETE)[number];
+export type InputNumberChangeEventDetail = Event;
+export type InputNumberBlurEventDetail = Event;
+export type InputNumberInputEventDetail = InputEvent;
 export type InputPasswordState = FormState;
 declare const INPUT_PASSWORD_AUTO_COMPLETE: readonly [
     "off",
     "on",
+    "",
     "current-password",
-    "new-password",
-    ""
+    "new-password"
 ];
 export type InputPasswordAutoComplete = (typeof INPUT_PASSWORD_AUTO_COMPLETE)[number];
 export type InputPasswordChangeEventDetail = Event;

package/esm/public-api.mjs

@@ -1,4 +1,4 @@
-import { componentsReady as o } from "@porsche-design-system/components-js";
+import { componentsReady as r } from "@porsche-design-system/components-js";
 import { default as a } from "./lib/components/AccordionWrapper.vue.mjs";
 import { default as l } from "./lib/components/BannerWrapper.vue.mjs";
 import { default as s } from "./lib/components/ButtonWrapper.vue.mjs";
@@ -7,8 +7,8 @@ import { default as x } from "./lib/components/ButtonPureWrapper.vue.mjs";
 import { default as i } from "./lib/components/ButtonTileWrapper.vue.mjs";
 import { default as T } from "./lib/components/CanvasWrapper.vue.mjs";
 import { default as S } from "./lib/components/CarouselWrapper.vue.mjs";
-import { default as b } from "./lib/components/CheckboxWrapper.vue.mjs";
-import { default as I } from "./lib/components/CheckboxWrapperWrapper.vue.mjs";
+import { default as g } from "./lib/components/CheckboxWrapper.vue.mjs";
+import { default as C } from "./lib/components/CheckboxWrapperWrapper.vue.mjs";
 import { default as D } from "./lib/components/ContentWrapperWrapper.vue.mjs";
 import { default as h } from "./lib/components/CrestWrapper.vue.mjs";
 import { default as B } from "./lib/components/DisplayWrapper.vue.mjs";
@@ -17,67 +17,68 @@ import { default as M } from "./lib/components/DrilldownWrapper.vue.mjs";
 import { default as v } from "./lib/components/DrilldownItemWrapper.vue.mjs";
 import { default as G } from "./lib/components/DrilldownLinkWrapper.vue.mjs";
 import { default as z } from "./lib/components/FieldsetWrapper.vue.mjs";
-import { default as q } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
-import { default as K } from "./lib/components/FlexWrapper.vue.mjs";
+import { default as j } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
+import { default as A } from "./lib/components/FlexWrapper.vue.mjs";
 import { default as E } from "./lib/components/FlexItemWrapper.vue.mjs";
 import { default as Q } from "./lib/components/FlyoutWrapper.vue.mjs";
 import { default as V } from "./lib/components/GridWrapper.vue.mjs";
 import { default as Y } from "./lib/components/GridItemWrapper.vue.mjs";
 import { default as _ } from "./lib/components/HeadingWrapper.vue.mjs";
 import { default as ee } from "./lib/components/HeadlineWrapper.vue.mjs";
-import { default as oe } from "./lib/components/IconWrapper.vue.mjs";
+import { default as re } from "./lib/components/IconWrapper.vue.mjs";
 import { default as ae } from "./lib/components/InlineNotificationWrapper.vue.mjs";
-import { default as le } from "./lib/components/InputPasswordWrapper.vue.mjs";
-import { default as se } from "./lib/components/LinkWrapper.vue.mjs";
-import { default as ue } from "./lib/components/LinkPureWrapper.vue.mjs";
-import { default as xe } from "./lib/components/LinkSocialWrapper.vue.mjs";
-import { default as ie } from "./lib/components/LinkTileWrapper.vue.mjs";
-import { default as Te } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
-import { default as Se } from "./lib/components/LinkTileProductWrapper.vue.mjs";
-import { default as be } from "./lib/components/MarqueWrapper.vue.mjs";
-import { default as Ie } from "./lib/components/ModalWrapper.vue.mjs";
-import { default as De } from "./lib/components/ModelSignatureWrapper.vue.mjs";
-import { default as he } from "./lib/components/MultiSelectWrapper.vue.mjs";
-import { default as Be } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
-import { default as we } from "./lib/components/OptgroupWrapper.vue.mjs";
-import { default as Me } from "./lib/components/PaginationWrapper.vue.mjs";
-import { default as ve } from "./lib/components/PinCodeWrapper.vue.mjs";
-import { default as Ge } from "./lib/components/PopoverWrapper.vue.mjs";
-import { default as ze } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
-import { default as qe } from "./lib/components/ScrollerWrapper.vue.mjs";
-import { default as Ke } from "./lib/components/SegmentedControlWrapper.vue.mjs";
-import { default as Ee } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
-import { default as Qe } from "./lib/components/SelectWrapper.vue.mjs";
-import { default as Ve } from "./lib/components/SelectOptionWrapper.vue.mjs";
-import { default as Ye } from "./lib/components/SelectWrapperWrapper.vue.mjs";
-import { default as _e } from "./lib/components/SheetWrapper.vue.mjs";
-import { default as et } from "./lib/components/SpinnerWrapper.vue.mjs";
-import { default as ot } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
-import { default as at } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
-import { default as lt } from "./lib/components/SwitchWrapper.vue.mjs";
-import { default as st } from "./lib/components/TableWrapper.vue.mjs";
-import { default as ut } from "./lib/components/TableBodyWrapper.vue.mjs";
-import { default as xt } from "./lib/components/TableCellWrapper.vue.mjs";
-import { default as it } from "./lib/components/TableHeadWrapper.vue.mjs";
-import { default as Tt } from "./lib/components/TableHeadCellWrapper.vue.mjs";
-import { default as St } from "./lib/components/TableHeadRowWrapper.vue.mjs";
-import { default as bt } from "./lib/components/TableRowWrapper.vue.mjs";
-import { default as It } from "./lib/components/TabsWrapper.vue.mjs";
-import { default as Dt } from "./lib/components/TabsBarWrapper.vue.mjs";
-import { default as ht } from "./lib/components/TabsItemWrapper.vue.mjs";
-import { default as Bt } from "./lib/components/TagWrapper.vue.mjs";
-import { default as wt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
-import { default as Mt } from "./lib/components/TextWrapper.vue.mjs";
-import { default as vt } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
-import { default as Gt } from "./lib/components/TextListWrapper.vue.mjs";
-import { default as zt } from "./lib/components/TextListItemWrapper.vue.mjs";
-import { default as qt } from "./lib/components/TextareaWrapper.vue.mjs";
-import { default as Kt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
-import { default as Et } from "./lib/components/ToastWrapper.vue.mjs";
-import { default as Qt } from "./lib/components/WordmarkWrapper.vue.mjs";
-import { themeInjectionKey as Vt, useToastManager as Xt } from "./utils.mjs";
-import { default as Zt } from "./PorscheDesignSystemProvider.vue.mjs";
-import { createPorscheDesignSystem as $t, usePorscheDesignSystemPlugin as eo } from "./plugin.mjs";
+import { default as le } from "./lib/components/InputNumberWrapper.vue.mjs";
+import { default as se } from "./lib/components/InputPasswordWrapper.vue.mjs";
+import { default as ue } from "./lib/components/LinkWrapper.vue.mjs";
+import { default as xe } from "./lib/components/LinkPureWrapper.vue.mjs";
+import { default as ie } from "./lib/components/LinkSocialWrapper.vue.mjs";
+import { default as Te } from "./lib/components/LinkTileWrapper.vue.mjs";
+import { default as Se } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
+import { default as ge } from "./lib/components/LinkTileProductWrapper.vue.mjs";
+import { default as Ce } from "./lib/components/MarqueWrapper.vue.mjs";
+import { default as De } from "./lib/components/ModalWrapper.vue.mjs";
+import { default as he } from "./lib/components/ModelSignatureWrapper.vue.mjs";
+import { default as Be } from "./lib/components/MultiSelectWrapper.vue.mjs";
+import { default as we } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
+import { default as Me } from "./lib/components/OptgroupWrapper.vue.mjs";
+import { default as ve } from "./lib/components/PaginationWrapper.vue.mjs";
+import { default as Ge } from "./lib/components/PinCodeWrapper.vue.mjs";
+import { default as ze } from "./lib/components/PopoverWrapper.vue.mjs";
+import { default as je } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
+import { default as Ae } from "./lib/components/ScrollerWrapper.vue.mjs";
+import { default as Ee } from "./lib/components/SegmentedControlWrapper.vue.mjs";
+import { default as Qe } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
+import { default as Ve } from "./lib/components/SelectWrapper.vue.mjs";
+import { default as Ye } from "./lib/components/SelectOptionWrapper.vue.mjs";
+import { default as _e } from "./lib/components/SelectWrapperWrapper.vue.mjs";
+import { default as et } from "./lib/components/SheetWrapper.vue.mjs";
+import { default as rt } from "./lib/components/SpinnerWrapper.vue.mjs";
+import { default as at } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
+import { default as lt } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
+import { default as st } from "./lib/components/SwitchWrapper.vue.mjs";
+import { default as ut } from "./lib/components/TableWrapper.vue.mjs";
+import { default as xt } from "./lib/components/TableBodyWrapper.vue.mjs";
+import { default as it } from "./lib/components/TableCellWrapper.vue.mjs";
+import { default as Tt } from "./lib/components/TableHeadWrapper.vue.mjs";
+import { default as St } from "./lib/components/TableHeadCellWrapper.vue.mjs";
+import { default as gt } from "./lib/components/TableHeadRowWrapper.vue.mjs";
+import { default as Ct } from "./lib/components/TableRowWrapper.vue.mjs";
+import { default as Dt } from "./lib/components/TabsWrapper.vue.mjs";
+import { default as ht } from "./lib/components/TabsBarWrapper.vue.mjs";
+import { default as Bt } from "./lib/components/TabsItemWrapper.vue.mjs";
+import { default as wt } from "./lib/components/TagWrapper.vue.mjs";
+import { default as Mt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
+import { default as vt } from "./lib/components/TextWrapper.vue.mjs";
+import { default as Gt } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
+import { default as zt } from "./lib/components/TextListWrapper.vue.mjs";
+import { default as jt } from "./lib/components/TextListItemWrapper.vue.mjs";
+import { default as At } from "./lib/components/TextareaWrapper.vue.mjs";
+import { default as Et } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
+import { default as Qt } from "./lib/components/ToastWrapper.vue.mjs";
+import { default as Vt } from "./lib/components/WordmarkWrapper.vue.mjs";
+import { themeInjectionKey as Yt, useToastManager as Zt } from "./utils.mjs";
+import { default as $t } from "./PorscheDesignSystemProvider.vue.mjs";
+import { createPorscheDesignSystem as tr, usePorscheDesignSystemPlugin as rr } from "./plugin.mjs";
 export {
   a as PAccordion,
   l as PBanner,
@@ -87,8 +88,8 @@ export {
   i as PButtonTile,
   T as PCanvas,
   S as PCarousel,
-  b as PCheckbox,
-  I as PCheckboxWrapper,
+  g as PCheckbox,
+  C as PCheckboxWrapper,
   D as PContentWrapper,
   h as PCrest,
   B as PDisplay,
@@ -97,68 +98,69 @@ export {
   v as PDrilldownItem,
   G as PDrilldownLink,
   z as PFieldset,
-  q as PFieldsetWrapper,
-  K as PFlex,
+  j as PFieldsetWrapper,
+  A as PFlex,
   E as PFlexItem,
   Q as PFlyout,
   V as PGrid,
   Y as PGridItem,
   _ as PHeading,
   ee as PHeadline,
-  oe as PIcon,
+  re as PIcon,
   ae as PInlineNotification,
-  le as PInputPassword,
-  se as PLink,
-  ue as PLinkPure,
-  xe as PLinkSocial,
-  ie as PLinkTile,
-  Te as PLinkTileModelSignature,
-  Se as PLinkTileProduct,
-  be as PMarque,
-  Ie as PModal,
-  De as PModelSignature,
-  he as PMultiSelect,
-  Be as PMultiSelectOption,
-  we as POptgroup,
-  Me as PPagination,
-  ve as PPinCode,
-  Ge as PPopover,
-  ze as PRadioButtonWrapper,
-  qe as PScroller,
-  Ke as PSegmentedControl,
-  Ee as PSegmentedControlItem,
-  Qe as PSelect,
-  Ve as PSelectOption,
-  Ye as PSelectWrapper,
-  _e as PSheet,
-  et as PSpinner,
-  ot as PStepperHorizontal,
-  at as PStepperHorizontalItem,
-  lt as PSwitch,
-  st as PTable,
-  ut as PTableBody,
-  xt as PTableCell,
-  it as PTableHead,
-  Tt as PTableHeadCell,
-  St as PTableHeadRow,
-  bt as PTableRow,
-  It as PTabs,
-  Dt as PTabsBar,
-  ht as PTabsItem,
-  Bt as PTag,
-  wt as PTagDismissible,
-  Mt as PText,
-  vt as PTextFieldWrapper,
-  Gt as PTextList,
-  zt as PTextListItem,
-  qt as PTextarea,
-  Kt as PTextareaWrapper,
-  Et as PToast,
-  Qt as PWordmark,
-  Zt as PorscheDesignSystemProvider,
-  o as componentsReady,
-  $t as createPorscheDesignSystem,
-  Vt as themeInjectionKey,
-  eo as usePorscheDesignSystemPlugin,
-  Xt as useToastManager
+  le as PInputNumber,
+  se as PInputPassword,
+  ue as PLink,
+  xe as PLinkPure,
+  ie as PLinkSocial,
+  Te as PLinkTile,
+  Se as PLinkTileModelSignature,
+  ge as PLinkTileProduct,
+  Ce as PMarque,
+  De as PModal,
+  he as PModelSignature,
+  Be as PMultiSelect,
+  we as PMultiSelectOption,
+  Me as POptgroup,
+  ve as PPagination,
+  Ge as PPinCode,
+  ze as PPopover,
+  je as PRadioButtonWrapper,
+  Ae as PScroller,
+  Ee as PSegmentedControl,
+  Qe as PSegmentedControlItem,
+  Ve as PSelect,
+  Ye as PSelectOption,
+  _e as PSelectWrapper,
+  et as PSheet,
+  rt as PSpinner,
+  at as PStepperHorizontal,
+  lt as PStepperHorizontalItem,
+  st as PSwitch,
+  ut as PTable,
+  xt as PTableBody,
+  it as PTableCell,
+  Tt as PTableHead,
+  St as PTableHeadCell,
+  gt as PTableHeadRow,
+  Ct as PTableRow,
+  Dt as PTabs,
+  ht as PTabsBar,
+  Bt as PTabsItem,
+  wt as PTag,
+  Mt as PTagDismissible,
+  vt as PText,
+  Gt as PTextFieldWrapper,
+  zt as PTextList,
+  jt as PTextListItem,
+  At as PTextarea,
+  Et as PTextareaWrapper,
+  Qt as PToast,
+  Vt as PWordmark,
+  $t as PorscheDesignSystemProvider,
+  r as componentsReady,
+  tr as createPorscheDesignSystem,
+  Yt as themeInjectionKey,
+  rr as usePorscheDesignSystemPlugin,
+  Zt as useToastManager
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.28.0-rc.3",
+  "version": "3.28.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.28.0-rc.3"
+    "@porsche-design-system/components-js": "3.28.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 33.0.0 <34.0.0",
@@ -63,7 +63,7 @@
       "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
     },
     "./tailwindcss": {
-      "style": "./tailwind/index.css"
+      "style": "./tailwindcss/index.css"
     },
     "./ag-grid": {
       "types": "./ag-grid/esm/index.d.ts",

package/{tailwind → tailwindcss}/index.css

@@ -1,74 +1,83 @@
 @custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
+  /* Color */
   --color-primary: #010205;
-  --color-base: #fff;
-  --color-surface: #eeeff2;
-  --color-shading: rgba(1, 2, 5, 0.67);
-  --color-frosted: hsla(240, 4%, 85%, 0.35);
-  --color-contrast-low: #d8d8db;
-  --color-contrast-medium: #6b6d70;
+  --color-base: #FFF;
+  --color-surface: #EEEFF2;
+  --color-shading: rgba(1,2,5,.67);
+  --color-frosted: hsl(240 4% 85%/35%);
+  --color-contrast-low: #D8D8DB;
+  --color-contrast-medium: #6B6D70;
   --color-contrast-high: #535457;
-  --color-success: #197e10;
-  --color-success-soft: #e4ffec;
-  --color-warning: #f3be00;
-  --color-warning-soft: #fff4d2;
-  --color-error: #cc1922;
-  --color-error-soft: #ffe2e4;
-  --color-info: #2762ec;
-  --color-info-soft: #d3e1ff;
-  --color-hover: rgba(148, 149, 152, 0.18);
-  --color-active: rgba(148, 149, 152, 0.2);
-  --color-focus: #1a44ea;
+  --color-success: #197E10;
+  --color-success-soft: #E4FFEC;
+  --color-warning: #F3BE00;
+  --color-warning-soft: #FFF4D2;
+  --color-error: #CC1922;
+  --color-error-soft: #FFE2E4;
+  --color-info: #2762EC;
+  --color-info-soft: #D3E1FF;
+  --color-hover: rgba(148,149,152,.18);
+  --color-active: rgba(148,149,152,.2);
+  --color-focus: #1A44EA;
   --color-disabled: #949598;
   --color-skeleton: #f7f7f7;
+
   --color-primary-light: #010205;
-  --color-base-light: #fff;
-  --color-surface-light: #eeeff2;
-  --color-shading-light: rgba(1, 2, 5, 0.67);
-  --color-frosted-light: hsla(240, 4%, 85%, 0.35);
-  --color-contrast-low-light: #d8d8db;
-  --color-contrast-medium-light: #6b6d70;
+  --color-base-light: #FFF;
+  --color-surface-light: #EEEFF2;
+  --color-shading-light: rgba(1,2,5,.67);
+  --color-frosted-light: hsl(240 4% 85%/35%);
+  --color-contrast-low-light: #D8D8DB;
+  --color-contrast-medium-light: #6B6D70;
   --color-contrast-high-light: #535457;
-  --color-success-light: #197e10;
-  --color-success-soft-light: #e4ffec;
-  --color-warning-light: #f3be00;
-  --color-warning-soft-light: #fff4d2;
-  --color-error-light: #cc1922;
-  --color-error-soft-light: #ffe2e4;
-  --color-info-light: #2762ec;
-  --color-info-soft-light: #d3e1ff;
-  --color-hover-light: rgba(148, 149, 152, 0.18);
-  --color-active-light: rgba(148, 149, 152, 0.2);
-  --color-focus-light: #1a44ea;
+  --color-success-light: #197E10;
+  --color-success-soft-light: #E4FFEC;
+  --color-warning-light: #F3BE00;
+  --color-warning-soft-light: #FFF4D2;
+  --color-error-light: #CC1922;
+  --color-error-soft-light: #FFE2E4;
+  --color-info-light: #2762EC;
+  --color-info-soft-light: #D3E1FF;
+  --color-hover-light: rgba(148,149,152,.18);
+  --color-active-light: rgba(148,149,152,.2);
+  --color-focus-light: #1A44EA;
   --color-disabled-light: #949598;
   --color-skeleton-light: #f7f7f7;
-  --color-primary-dark: #fbfcff;
-  --color-base-dark: #0e0e12;
+
+  --color-primary-dark: #FBFCFF;
+  --color-base-dark: #0E0E12;
   --color-surface-dark: #212225;
-  --color-shading-dark: rgba(38, 38, 41, 0.67);
-  --color-frosted-dark: hsla(240, 3%, 26%, 0.35);
+  --color-shading-dark: rgba(38,38,41,.67);
+  --color-frosted-dark: hsl(240 3% 26%/35%);
   --color-contrast-low-dark: #404044;
-  --color-contrast-medium-dark: #88898c;
-  --color-contrast-high-dark: #afb0b3;
-  --color-success-dark: #09d087;
+  --color-contrast-medium-dark: #88898C;
+  --color-contrast-high-dark: #AFB0B3;
+  --color-success-dark: #09D087;
   --color-success-soft-dark: #003320;
-  --color-warning-dark: #f7cb47;
-  --color-warning-soft-dark: #362b0a;
-  --color-error-dark: #fc4040;
-  --color-error-soft-dark: #3a0f0f;
-  --color-info-dark: #178bff;
-  --color-info-soft-dark: #04294e;
-  --color-hover-dark: rgba(148, 149, 152, 0.18);
-  --color-active-dark: rgba(126, 127, 130, 0.2);
-  --color-focus-dark: #1a44ea;
-  --color-disabled-dark: #7e7f82;
+  --color-warning-dark: #F7CB47;
+  --color-warning-soft-dark: #362B0A;
+  --color-error-dark: #FC4040;
+  --color-error-soft-dark: #3A0F0F;
+  --color-info-dark: #178BFF;
+  --color-info-soft-dark: #04294E;
+  --color-hover-dark: rgba(148,149,152,.18);
+  --color-active-dark: rgba(126,127,130,.2);
+  --color-focus-dark: #1A44EA;
+  --color-disabled-dark: #7E7F82;
   --color-skeleton-dark: #1a1b1e;
-  --font-porsche-next: Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif;
+
+  /* Typography */
+  --font-porsche-next: 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;
+
   --font-weight-normal: 400;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
+
   --leading-normal: calc(6px + 2.125ex);
-  --text-2xs: 0.75rem;
+
+  --text-2xs: .75rem;
   --text-2xs--line-height: calc(6px + 2.125ex);
   --text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
   --text-xs--line-height: calc(6px + 2.125ex);
@@ -84,45 +93,67 @@
   --text-xl--line-height: calc(6px + 2.125ex);
   --text-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
   --text-2xl--line-height: calc(6px + 2.125ex);
+
+  /* Breakpoint */
   --breakpoint-xs: 480px;
   --breakpoint-sm: 760px;
   --breakpoint-md: 1000px;
   --breakpoint-lg: 1300px;
   --breakpoint-xl: 1760px;
   --breakpoint-2xl: 1920px;
-  --spacing: 0.25rem;
+
+  /* Spacing */
+  --spacing: .25rem;
+
   --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
   --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
   --spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
   --spacing-fluid-lg: clamp(32px, 2.75vw + 23px, 76px);
   --spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
   --spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
+
   --spacing-static-xs: 4px;
   --spacing-static-sm: 8px;
   --spacing-static-md: 16px;
   --spacing-static-lg: 32px;
   --spacing-static-xl: 48px;
   --spacing-static-2xl: 80px;
+
+  /* Border */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
+
   --default-border-width: 2px;
+  --border-width-regular: 2px;
   --border-width-thin: 1px;
+
+  /* Blur */
   --blur-frosted: 32px;
+
+  /* Shadow */
   --shadow-low: 0px 3px 8px rgba(0,0,0,.16);
   --shadow-medium: 0px 4px 16px rgba(0,0,0,.16);
   --shadow-high: 0px 8px 40px rgba(0,0,0,.16);
+
+  /* Outline */
   --default-outline-width: 2px;
-  --default-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
-  --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
-  --ease-in: cubic-bezier(0, 0, 0.2, 1);
-  --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
-  --default-transition-duration: 0.25s;
-  --transition-duration-short: 0.25s;
-  --transition-duration-moderate: 0.4s;
-  --transition-duration-long: 0.6s;
+
+  /* Motion */
+  --default-transition-timing-function: cubic-bezier(.25,.1,.25,1);
+  --ease-in-out: cubic-bezier(.25,.1,.25,1);
+  --ease-in: cubic-bezier(0,0,.2,1);
+  --ease-out: cubic-bezier(.4,0,.5,1);
+
+  --default-transition-duration: .25s;
+  --transition-duration-short: .25s;
+  --transition-duration-moderate: .4s;
+  --transition-duration-long: .6s;
   --transition-duration-very-long: 1.2s;
+
+  /* Animation */
   --animate-skeleton: skeleton var(--transition-duration-long) var(--ease-in-out) infinite;
+
   @keyframes skeleton {
     from {
       background-position-x: 100%;
@@ -132,93 +163,104 @@
     }
   }
 }
+
 @layer theme {
   .light {
     --color-primary: #010205;
-    --color-base: #fff;
-    --color-surface: #eeeff2;
-    --color-shading: rgba(1, 2, 5, 0.67);
-    --color-frosted: hsla(240, 4%, 85%, 0.35);
-    --color-contrast-low: #d8d8db;
-    --color-contrast-medium: #6b6d70;
+    --color-base: #FFF;
+    --color-surface: #EEEFF2;
+    --color-shading: rgba(1,2,5,.67);
+    --color-frosted: hsl(240 4% 85%/35%);
+    --color-contrast-low: #D8D8DB;
+    --color-contrast-medium: #6B6D70;
     --color-contrast-high: #535457;
-    --color-success: #197e10;
-    --color-success-soft: #e4ffec;
-    --color-warning: #f3be00;
-    --color-warning-soft: #fff4d2;
-    --color-error: #cc1922;
-    --color-error-soft: #ffe2e4;
-    --color-info: #2762ec;
-    --color-info-soft: #d3e1ff;
-    --color-hover: rgba(148, 149, 152, 0.18);
-    --color-active: rgba(148, 149, 152, 0.2);
-    --color-focus: #1a44ea;
+    --color-success: #197E10;
+    --color-success-soft: #E4FFEC;
+    --color-warning: #F3BE00;
+    --color-warning-soft: #FFF4D2;
+    --color-error: #CC1922;
+    --color-error-soft: #FFE2E4;
+    --color-info: #2762EC;
+    --color-info-soft: #D3E1FF;
+    --color-hover: rgba(148,149,152,.18);
+    --color-active: rgba(148,149,152,.2);
+    --color-focus: #1A44EA;
     --color-disabled: #949598;
     --color-skeleton: #f7f7f7;
   }
+
   .dark {
-    --color-primary: #fbfcff;
-    --color-base: #0e0e12;
+    --color-primary: #FBFCFF;
+    --color-base: #0E0E12;
     --color-surface: #212225;
-    --color-shading: rgba(38, 38, 41, 0.67);
-    --color-frosted: hsla(240, 3%, 26%, 0.35);
+    --color-shading: rgba(38,38,41,.67);
+    --color-frosted: hsl(240 3% 26%/35%);
     --color-contrast-low: #404044;
-    --color-contrast-medium: #88898c;
-    --color-contrast-high: #afb0b3;
-    --color-success: #09d087;
+    --color-contrast-medium: #88898C;
+    --color-contrast-high: #AFB0B3;
+    --color-success: #09D087;
     --color-success-soft: #003320;
-    --color-warning: #f7cb47;
-    --color-warning-soft: #362b0a;
-    --color-error: #fc4040;
-    --color-error-soft: #3a0f0f;
-    --color-info: #178bff;
-    --color-info-soft: #04294e;
-    --color-hover: rgba(148, 149, 152, 0.18);
-    --color-active: rgba(126, 127, 130, 0.2);
-    --color-focus: #1a44ea;
-    --color-disabled: #7e7f82;
+    --color-warning: #F7CB47;
+    --color-warning-soft: #362B0A;
+    --color-error: #FC4040;
+    --color-error-soft: #3A0F0F;
+    --color-info: #178BFF;
+    --color-info-soft: #04294E;
+    --color-hover: rgba(148,149,152,.18);
+    --color-active: rgba(126,127,130,.2);
+    --color-focus: #1A44EA;
+    --color-disabled: #7E7F82;
     --color-skeleton: #1a1b1e;
   }
-  @media (prefers-color-scheme: dark) {
-    .auto {
-      --color-primary: #fbfcff;
-      --color-base: #0e0e12;
+
+  .auto {
+    @media (prefers-color-scheme: dark) {
+      --color-primary: #FBFCFF;
+      --color-base: #0E0E12;
       --color-surface: #212225;
-      --color-shading: rgba(38, 38, 41, 0.67);
-      --color-frosted: hsla(240, 3%, 26%, 0.35);
+      --color-shading: rgba(38,38,41,.67);
+      --color-frosted: hsl(240 3% 26%/35%);
       --color-contrast-low: #404044;
-      --color-contrast-medium: #88898c;
-      --color-contrast-high: #afb0b3;
-      --color-success: #09d087;
+      --color-contrast-medium: #88898C;
+      --color-contrast-high: #AFB0B3;
+      --color-success: #09D087;
       --color-success-soft: #003320;
-      --color-warning: #f7cb47;
-      --color-warning-soft: #362b0a;
-      --color-error: #fc4040;
-      --color-error-soft: #3a0f0f;
-      --color-info: #178bff;
-      --color-info-soft: #04294e;
-      --color-hover: rgba(148, 149, 152, 0.18);
-      --color-active: rgba(126, 127, 130, 0.2);
-      --color-focus: #1a44ea;
-      --color-disabled: #7e7f82;
+      --color-warning: #F7CB47;
+      --color-warning-soft: #362B0A;
+      --color-error: #FC4040;
+      --color-error-soft: #3A0F0F;
+      --color-info: #178BFF;
+      --color-info-soft: #04294E;
+      --color-hover: rgba(148,149,152,.18);
+      --color-active: rgba(126,127,130,.2);
+      --color-focus: #1A44EA;
+      --color-disabled: #7E7F82;
       --color-skeleton: #1a1b1e;
     }
   }
 }
+
+/* Gradient */
 @utility bg-fade-to-t {
   @apply bg-linear-[to_top,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
 }
+
 @utility bg-fade-to-r {
   @apply bg-linear-[to_right,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
 }
+
 @utility bg-fade-to-b {
   @apply bg-linear-[to_bottom,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
 }
+
 @utility bg-fade-to-l {
   @apply bg-linear-[to_left,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
 }
+
+/* Grid */
 @utility grid-template {
-  @apply [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
+  @apply
+    [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
     [--_pds-grid-col:minmax(0,var(--pds-internal-grid-outer-column,calc(var(--pds-internal-grid-safe-zone)-var(--spacing-fluid-md))))]
     grid
     grid-cols-[[full-start]_var(--_pds-grid-col)_[wide-start_extended-start_basic-start_narrow-start]_repeat(6,minmax(0,1fr))_[narrow-end_basic-end_extended-end_wide-end]_var(--_pds-grid-col)_[full-end]]
@@ -232,75 +274,93 @@
     sm:grid-cols-[[full-start]_var(--_pds-grid-col)_[wide-start]_minmax(0,1fr)_[extended-start]_minmax(0,1fr)_[basic-start]_repeat(2,minmax(0,1fr))_[narrow-start]_repeat(8,minmax(0,1fr))_[narrow-end]_repeat(2,minmax(0,1fr))_[basic-end]_minmax(0,1fr)_[extended-end]_minmax(0,1fr)_[wide-end]_var(--_pds-grid-col)[full-end]]
     2xl:[--pds-internal-grid-safe-zone:min(50vw-880px,400px)];
 }
+
+/* Grid: Area Narrow */
 @utility col-narrow {
   @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-[narrow];
 }
+
 @utility col-start-narrow {
   @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-start-[narrow-start];
 }
+
 @utility col-end-narrow {
   @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-end-[narrow-end];
 }
+
+/* Grid: Area Basic */
 @utility col-basic {
   @apply [--_pds-grid-one-half:3] [--_pds-grid-one-third:2] [--_pds-grid-two-thirds:4] sm:[--_pds-grid-one-half:6] sm:[--_pds-grid-one-third:4] sm:[--_pds-grid-two-thirds:8] col-[basic];
 }
+
 @utility col-start-basic {
   @apply [--_pds-grid-one-half:3] [--_pds-grid-one-third:2] [--_pds-grid-two-thirds:4] sm:[--_pds-grid-one-half:6] sm:[--_pds-grid-one-third:4] sm:[--_pds-grid-two-thirds:8] col-start-[basic-start];
 }
+
 @utility col-end-basic {
   @apply [--_pds-grid-one-half:3] [--_pds-grid-one-third:2] [--_pds-grid-two-thirds:4] sm:[--_pds-grid-one-half:6] sm:[--_pds-grid-one-third:4] sm:[--_pds-grid-two-thirds:8] col-end-[basic-end];
 }
+
+/* Grid: Area Extended */
 @utility col-extended {
   @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-[extended];
 }
+
 @utility col-start-extended {
   @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-start-[extended-start];
 }
+
 @utility col-end-extended {
   @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-end-[extended-end];
 }
+
+/* Grid: Area Wide */
 @utility col-wide {
   @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-[wide];
 }
+
 @utility col-start-wide {
   @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-start-[wide-start];
 }
+
 @utility col-end-wide {
   @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-end-[wide-end];
 }
+
+/* Grid: Area Full */
 @utility col-full {
   @apply col-[full];
 }
+
 @utility col-start-full {
   @apply col-start-[full-start];
 }
+
 @utility col-end-full {
   @apply col-end-[full-end];
 }
+
+/* Grid: Division */
 @utility col-span-one-half {
   @apply col-span-(--_pds-grid-one-half,1);
 }
+
 @utility col-span-one-third {
   @apply col-span-(--_pds-grid-one-third,1);
 }
+
 @utility col-span-two-thirds {
   @apply col-span-(--_pds-grid-two-thirds,1);
 }
+
+/* Skeleton */
 @utility skeleton {
   @apply animate-skeleton;
   @apply block rounded-sm;
   @apply bg-surface bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
 }
-@utility skeleton-light {
-  @apply animate-skeleton;
-  @apply block rounded-sm;
-  @apply bg-surface-light bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton-light)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
-}
-@utility skeleton-dark {
-  @apply animate-skeleton;
-  @apply block rounded-sm;
-  @apply bg-surface-dark bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton-dark)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
-}
+
+/* Typography: Text */
 @utility prose-text-2xs {
   @apply font-porsche-next not-italic font-normal text-2xs text-primary;
 }
@@ -319,6 +379,8 @@
 @utility prose-text-xl {
   @apply font-porsche-next not-italic font-normal text-xl text-primary;
 }
+
+/* Typography: Heading */
 @utility prose-heading-sm {
   @apply font-porsche-next not-italic font-semibold text-sm text-primary;
 }
@@ -334,15 +396,14 @@
 @utility prose-heading-2xl {
   @apply font-porsche-next not-italic font-semibold text-2xl text-primary;
 }
+
+/* Typography: Display */
 @utility prose-display-sm {
-  @apply font-porsche-next not-italic font-normal leading-normal text-primary;
-  font-size: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(1.8rem,2.41vw+1.32rem,4.21rem)];
 }
 @utility prose-display-md {
-  @apply font-porsche-next not-italic font-normal leading-normal text-primary;
-  font-size: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.03rem,3.58vw+1.31rem,5.61rem)];
 }
 @utility prose-display-lg {
-  @apply font-porsche-next not-italic font-normal leading-normal text-primary;
-  font-size: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
-}
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.28rem,5.2vw+1.24rem,7.48rem)];
+}