@porsche-design-system/components-vue 3.0.0-alpha.2 → 3.0.0-alpha.3

package/CHANGELOG.md

@@ -9,6 +9,308 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-alpha.3] - 2023-03-17
+
+#### 🤖 Property deprecations 🤖
+
+##### Accordion:
+
+- Event `accordionChange` is deprecated, use `change` event instead.
+
+```diff
+- <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
++ <PAccordion onChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
+```
+
+#### Banner:
+
+- Named `slot="title"` is deprecated, use `heading` prop or `slot="heading"` instead.
+
+```diff
+<p-banner>
+-  <span slot="title">Some heading</span>
++  <span slot="heading">Some heading</span>
+   <span slot="description">Some notification description.</span>
+</p-banner>
+
+-<p-banner>
++<p-banner heading="Some heading" description="Some notification description.">
+-  <span slot="title">Some heading</span>
+-  <span slot="description">Some notification description.</span>
+</p-banner>
+```
+
+##### Carousel:
+
+- Prop `disablePagination` is deprecated, use `pagination` instead.
+- Event `carouselChange` is deprecated, use `change` event instead.
+
+```diff
+- <p-carousel disable-pagination="true"></p-carousel>
++ <p-carousel pagination="false"></p-carousel>
+
+- <PCarousel onCarouselChange={(e: CustomEvent<CarouselChangeEvent>) => {}} />
++ <PCarousel onChange={(e: CustomEvent<CarouselChangeEvent>) => {}} />
+```
+
+##### Divider:
+
+- Prop `orientation` is deprecated, use `direction` instead.
+
+```diff
+- <p-divider orientation="horizontal"></p-divider>
++ <p-divider direction="horizontal"></p-divider>
+```
+
+##### Icon:
+
+- Prop `colors`'s value `disabled` is removed, use `state-disabled` instead.
+
+```diff
+- <p-icon color="disabled"></p-icon>
++ <p-icon color="state-disabled"></p-icon>
+```
+
+##### Link Tile:
+
+- Prop `weight`'s value `semibold` is deprecated, use `semi-bold` instead.
+
+```diff
+- <p-link-tile weight="semibold"></p-link-tile>
++ <p-link-tile weight="semi-bold"></p-link-tile>
+```
+
+#### Modal:
+
+- Prop `disableCloseButton` is deprecated, use `dismissButton` instead.
+- Event `close` is deprecated, use `dismiss` event instead.
+
+```diff
+- <p-modal disable-close-button="true"></p-modal>
++ <p-modal dismiss-button="false"></p-modal>
+
+- <PModal onClose={(e: CustomEvent<void>) => {}} />
++ <PModal onDismiss={(e: CustomEvent<void>) => {}} />
+```
+
+##### Pagination:
+
+- Props `allyLabelNext`, `allyLabelPage`, `allyLabelPrev` and `allyLabel` are deprecated.
+- Event `pageChange` is deprecated, use `change` event instead.
+
+```diff
+- <p-pagination ally-label="Paginierung" ally-label-prev="Vorherige Seite" ally-label-next="Nächste Seite" ally-label-page="Seite"></p-pagination>
++ <p-pagination intl="{root: 'Paginierung', prev: 'Vorherige Seite', next: 'Nächste Seite', page: 'Seite'}"></p-pagination>
+
+- <PPagination onPageChange={(e: CustomEvent<PageChangeEvent>) => {}} />
++ <PPagination onChange={(e: CustomEvent<PaginationChangeEvent>) => {}} />
+```
+
+##### Scroller:
+
+- Prop `gradientColorScheme` is deprecated, use `gradientColor` instead.
+- Prop `scrollIndicatorPosition` is deprecated, use `alignScrollIndicator` instead.
+
+```diff
+- <p-scroller gradient-color-scheme="surface"></p-scroller>
++ <p-scroller gradient-color="background-surface"></p-scroller>
+
+- <p-scroller scroll-indicator-position="top"></p-scroller>
++ <p-scroller align-scroll-indicator="top"></p-scroller>
+```
+
+#### Segmented Control:
+
+- Event `segmentedControlChange` is deprecated, use `change` event instead.
+
+```diff
+- <PSegmentedControl onSegmentedControlChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
++ <PSegmentedControl onChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
+```
+
+#### Stepper Horizontal:
+
+- Event `stepChange` is deprecated, use `change` event instead.
+
+```diff
+- <PStepperHorizontal onStepChange={(e: CustomEvent<StepChangeEvent>) => {}} />
++ <PStepperHorizontal onChange={(e: CustomEvent<StepperHorizontalChangeEvent>) => {}} />
+```
+
+#### Switch:
+
+- Event `switchChange` is deprecated, use `change` event instead.
+
+```diff
+- <PSwitch onSwitchChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
++ <PSwitch onChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
+```
+
+#### Table:
+
+- Event `sortingChange` is deprecated, use `change` event instead.
+
+```diff
+- <PTable onSortingChange={(e: CustomEvent<SortingChangeEvent>) => {}} />
++ <PTable onChange={(e: CustomEvent<TableChangeEvent>) => {}} />
+```
+
+##### Tabs:
+
+- Prop `gradientColorScheme` is deprecated, use `gradientColor` instead.
+- Prop `weight`'s value `semibold` is deprecated, use `semi-bold` instead.
+- Event `tabChange` is deprecated, use `change` event instead.
+
+```diff
+- <p-tabs gradient-color-scheme="surface"></p-tabs>
++ <p-tabs gradient-color="background-surface"></p-tabs>
+
+- <p-tabs weight="semibold"></p-tabs>
++ <p-tabs weight="semi-bold"></p-tabs>
+
+- <PTabs onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
++ <PTabs onChange={(e: CustomEvent<TabsChangeEvent>) => {}} />
+```
+
+##### Tabs Bar:
+
+- Prop `gradientColorScheme` is deprecated, use `gradientColor` instead.
+- Prop `weight`'s value `semibold` is deprecated, use `semi-bold` instead.
+- Event `tabChange` is deprecated, use `change` event instead.
+
+```diff
+- <p-tabs-bar gradient-color-scheme="surface"></p-tabs-bar>
++ <p-tabs-bar gradient-color="background-surface"></p-tabs-bar>
+
+- <p-tabs-bar weight="semibold"></p-tabs>
++ <p-tabs-bar weight="semi-bold"></p-tabs>
+
+- <PTabsBar onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
++ <PTabsBar onChange={(e: CustomEvent<TabsChangeEvent>) => {}} />
+```
+
+##### Tag:
+
+- Prop `color`'s value `notification-warning`, `notification-success` and `notification-error` are deprecated, use
+  `notification-warning-soft`, `notification-success-soft` and `notification-error-soft` instead.
+
+```diff
+- <p-tag color="notification-warning"></p-tag>
++ <p-tag color="notification-warning-soft"></p-tag>
+
+- <p-tag color="notification-success"></p-tag>
++ <p-tag color="notification-success-soft"></p-tag>
+
+- <p-tag color="notification-error"></p-tag>
++ <p-tag color="notification-error-soft"></p-tag>
+```
+
+##### Text Field Wrapper:
+
+- Prop `showCharacterCount` is deprecated, use `showCounter` instead.
+
+```diff
+-<p-text-field-wrapper show-character-count="false">
++<p-text-field-wrapper show-counter="false">
+  <input type="text" maxlength="20" />
+</p-text-field-wrapper>
+```
+
+##### Textarea Wrapper:
+
+- Prop `showCharacterCount` is deprecated, use `showCounter` instead.
+
+```diff
+-<p-textarea-wrapper show-character-count="false">
++<p-textarea-wrapper show-counter="false">
+  <textarea maxlength="80"></textarea>
+</p-textarea-wrapper>
+```
+
+##### Text List
+
+- Props `listType` and `orderType` are deprecated, use `type` instead.
+
+```diff
+- <p-text-list list-type="unordered"></p-text-list>
++ <p-text-list type="unordered"></p-text-list>
+
+- <p-text-list list-type="ordered" order-type="numbered"></p-text-list>
++ <p-text-list type="numbered"></p-text-list>
+
+- <p-text-list list-type="ordered" order-type="alphabetically"></p-text-list>
++ <p-text-list type="alphabetically"></p-text-list>
+```
+
+#### Added
+
+- `Text`, `Icon`, `Button Pure` and `Link Pure` support value `xx-small` for prop `size`
+- `Display` supports value `small` for prop `size`
+- Partials: `getInitialStyles` supports multi prefix, e.g.
+  `getInitialStyles({ prefix: ['', 'some-prefix', 'another-prefix'] });`
+- Styles: `displaySmallStyle` and `pds-display-small`
+- Styles: `textXXSmallStyle` and `pds-text-xx-small`
+- Styles: `fontSizeDisplaySmall` and `$pds-font-size-display-small`
+- Styles: `fontSizeTextXXSmall` and `$pds-font-size-text-xx-small`
+- Styles: `getHoverStyle` and `pds-hover`
+- `Banner` has `heading` and `description` prop as well as `slot="heading"` and deprecated `slot="title"`
+- Custom events have consistent names across components and deprecated old event names
+  - `Accordion` emits `change` and deprecated `accordionChange` event
+  - `Carousel` emits `change` and deprecated `carouselChange` event
+  - `Modal` emits `dismiss` and deprecated `close` event
+  - `Pagination` emits `change` and deprecated `pageChange` event
+  - `Segmented Control` emits `change` and deprecated `segmentedControlChange` event
+  - `Stepper Horizontal` emits `change` and deprecated `stepChange` event
+  - `Switch` emits `change`and deprecated `switchChange` event
+  - `Table` emits `change`and deprecated `sortingChange` event
+  - `Tabs` emits `change`and deprecated `tabChange` event
+  - `Tabs Bar` emits `change`and deprecated `tabChange` event
+- Props have consistent names across components and deprecated old props
+  - `Carousel` got `pagination` prop and deprecated `disablePagination` prop
+  - `Divider` got `direction` prop and deprecated `orientation` prop
+  - `Modal` got `dismissButton` prop and deprecated `disableCloseButton` prop
+  - `Pagination` got `intl` prop and deprecated `allyLabelNext`, `allyLabelPage`, `allyLabelPrev` and `allyLabel` props
+  - `Scroller` got `gradientColor` prop and deprecated `gradientColorScheme` prop
+  - `Scroller` got `alignScrollIndicator` prop and deprecated `scrollIndicatorPosition` prop
+  - `Tabs` got `gradientColor` prop and deprecated `gradientColorScheme` prop
+  - `Tabs Bar` got `gradientColor` prop and deprecated `gradientColorScheme` prop
+  - `Text Field Wrapper` got `showCounter` prop and deprecated `showCharacterCount` prop
+  - `Textarea Wrapper` got `showCounter` prop and deprecated `showCharacterCount` prop
+  - `Text List` got `type` prop and deprecated `listType` and `orderType` prop
+- Props have consistent values across components and deprecated old values
+  - `Icon` prop `color` got value `state-disabled` and removed `disabled` value
+  - `Link Tile` prop `weight` got value `semi-bold` and deprecated `semibold` value
+  - `Tabs Bar` and `Tabs` prop `weight` got value `semi-bold` and deprecated `semibold` value
+  - `Tag` prop `color` got values `notification-info-soft`, `notification-warning-soft`, `notification-success-soft`,
+    `notification-error-soft` and deprecated `notification-warning`, `notification-success`, `notification-error` values
+
+#### Changed
+
+- `Display` uses font-weight regular and font-style normal
+- Partials: `getInitialStyles` matches new design language
+- Partials: All component related, slotted Light DOM styles have been moved to `getInitialStyles`
+- Styles: `getFocusStyle` and `pds-focus` doesn't need `theme` parameter anymore
+- Styles: `breakpoint{Base|XS|S|M|L|XL|XXL}` and `$pds-breakpoint-{base|xs|s|m|l|xl|xxl}` are provided as number without
+  unit (px)
+- `Link Tile` matches new design language
+- Typings for all component props start with the component name, e.g. `SwitchAlignLabel`, `TabsBarGradientColor` or
+  `LinkPureIcon`
+- `Icon` prop `color` value `disabled` is renamed to `state-disabled`
+- `Tag` prop `color` value `notification-info` is renamed to `notification-info-soft`
+
+#### Fixed
+
+- `Text Field Wrapper` calendar and time indicator icons respect color definition in dark theme
+- `Text Field Wrapper` has correct height when type date or time is used
+- Partials: Typings of return value with and without options parameter
+- `Modal` scrolling behavior on mouse drag
+
+#### Removed
+
+- `Heading`: value `xxx-large` for prop `size`
+- Styles: `headingXXXLargeStyle` and `pds-heading-xxx-large`
+- Styles: `fontSizeHeadingXXLarge` and `$pds-font-size-heading-xx-large`
+
 ### [3.0.0-alpha.2] - 2023-02-27
 
 #### 🤖 Property deprecations 🤖

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

@@ -30,6 +30,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     accordionChange: (value: AccordionChangeEvent) => void;
+} & {
+    change: (value: AccordionChangeEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
@@ -60,6 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tag: string;
     theme: string;
 }>>> & {
+    onChange?: ((value: AccordionChangeEvent) => any) | undefined;
     onAccordionChange?: ((value: AccordionChangeEvent) => any) | undefined;
 }, {
     size: BreakpointCustomizable<AccordionSize>;

package/lib/components/AccordionWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as c, ref as l, onMounted as d, onUpdated as s, openBlock as f, createBlock as m, resolveDynamicComponent as i, unref as u, withCtx as g, renderSlot as h } from "vue";
-import { getPrefixedTagName as C, syncProperties as n, addEventListenerToElementRef as _ } from "../../utils.js";
-const k = /* @__PURE__ */ c({
+import { defineComponent as l, ref as d, onMounted as s, onUpdated as f, openBlock as m, createBlock as i, resolveDynamicComponent as u, unref as g, withCtx as h, renderSlot as C } from "vue";
+import { getPrefixedTagName as _, syncProperties as t, addEventListenerToElementRef as a } from "../../utils.js";
+const k = /* @__PURE__ */ l({
   __name: "AccordionWrapper",
   props: {
     compact: { type: Boolean },
@@ -10,19 +10,19 @@ const k = /* @__PURE__ */ c({
     tag: { default: "h2" },
     theme: { default: "light" }
   },
-  emits: ["accordionChange"],
-  setup(t, { emit: a }) {
-    const o = t, r = C("p-accordion"), e = l();
-    return d(() => {
-      n(e.value, o), _(e.value, "accordionChange", a);
-    }), s(() => {
-      n(e.value, o);
-    }), (p, v) => (f(), m(i(u(r)), {
+  emits: ["accordionChange", "change"],
+  setup(r, { emit: o }) {
+    const n = r, p = _("p-accordion"), e = d();
+    return s(() => {
+      t(e.value, n), a(e.value, "accordionChange", o), a(e.value, "change", o);
+    }), f(() => {
+      t(e.value, n);
+    }), (c, v) => (m(), i(u(g(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: g(() => [
-        h(p.$slots, "default")
+      default: h(() => [
+        C(c.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,5 +1,16 @@
 import type { BannerState, Theme, BannerWidth } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Description of the banner.
+     */
+    description?: string | undefined;
+    /**
+     * Heading of the banner.
+     */
+    heading?: string | undefined;
+    /**
+     * Defines if the banner can be closed/removed by the user.
+     */
     persistent?: boolean | undefined;
     /**
      * State of the banner.
@@ -14,6 +25,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     width?: "extended" | "basic" | "fluid" | undefined;
 }>, {
+    description: string;
+    heading: string;
     persistent: boolean;
     state: string;
     theme: string;
@@ -21,6 +34,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: (value?: void | undefined) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Description of the banner.
+     */
+    description?: string | undefined;
+    /**
+     * Heading of the banner.
+     */
+    heading?: string | undefined;
+    /**
+     * Defines if the banner can be closed/removed by the user.
+     */
     persistent?: boolean | undefined;
     /**
      * State of the banner.
@@ -35,6 +59,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     width?: "extended" | "basic" | "fluid" | undefined;
 }>, {
+    description: string;
+    heading: string;
     persistent: boolean;
     state: string;
     theme: string;
@@ -42,7 +68,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     onDismiss?: ((value?: void | undefined) => any) | undefined;
 }, {
+    heading: string;
     theme: Theme;
+    description: string;
     persistent: boolean;
     state: BannerState;
     width: BannerWidth;

package/lib/components/BannerWrapper.vue.js

@@ -1,26 +1,28 @@
-import { defineComponent as p, ref as d, onMounted as f, onUpdated as l, openBlock as i, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as C } from "vue";
-import { getPrefixedTagName as h, syncProperties as n, addEventListenerToElementRef as v } from "../../utils.js";
-const B = /* @__PURE__ */ p({
+import { defineComponent as d, ref as p, onMounted as f, onUpdated as i, openBlock as l, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as h } from "vue";
+import { getPrefixedTagName as C, syncProperties as n, addEventListenerToElementRef as g } from "../../utils.js";
+const B = /* @__PURE__ */ d({
   __name: "BannerWrapper",
   props: {
+    description: { default: "" },
+    heading: { default: "" },
     persistent: { type: Boolean, default: !1 },
     state: { default: "info" },
     theme: { default: "light" },
     width: { default: "extended" }
   },
   emits: ["dismiss"],
-  setup(o, { emit: r }) {
-    const t = o, s = h("p-banner"), e = d();
+  setup(o, { emit: a }) {
+    const t = o, r = C("p-banner"), e = p();
     return f(() => {
-      n(e.value, t), v(e.value, "dismiss", r);
-    }), l(() => {
+      n(e.value, t), g(e.value, "dismiss", a);
+    }), i(() => {
       n(e.value, t);
-    }), (a, g) => (i(), m(u(c(s)), {
+    }), (s, v) => (l(), m(u(c(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: _(() => [
-        C(a.$slots, "default")
+        h(s.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkButtonIconName, TextSize, Theme, ButtonType, TextWeight } from '../types';
+import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Display button in active state.
@@ -23,7 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown.
      */
-    icon?: LinkButtonIconName | undefined;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -35,7 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -89,7 +89,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown.
      */
-    icon?: LinkButtonIconName | undefined;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -101,7 +101,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -132,16 +132,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     weight: string;
 }>>>, {
-    weight: TextWeight;
+    weight: ButtonPureWeight;
     stretch: BreakpointCustomizable<boolean>;
-    disabled: boolean;
-    size: BreakpointCustomizable<TextSize>;
+    size: BreakpointCustomizable<ButtonPureSize>;
     theme: Theme;
-    type: ButtonType;
+    type: ButtonPureType;
     active: boolean;
-    alignLabel: BreakpointCustomizable<AlignLabel>;
+    alignLabel: BreakpointCustomizable<ButtonPureAlignLabel>;
+    disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: LinkButtonIconName;
+    icon: ButtonPureIcon;
     loading: boolean;
 }>, {
     default: (_: {}) => any;

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

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, BreakpointCustomizable, LinkButtonIconName, Theme, ButtonType, ButtonVariant } from '../types';
+import type { SelectedAriaAttributes, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName | undefined;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -60,7 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName | undefined;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -90,11 +90,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     variant: string;
 }>>>, {
-    disabled: boolean;
     theme: Theme;
     type: ButtonType;
+    disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: LinkButtonIconName;
+    icon: ButtonIcon;
     loading: boolean;
     variant: ButtonVariant;
 }>, {

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

@@ -9,7 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     description?: string | undefined;
     /**
-     * If true, the carousel will not show pagination bullets at the bottom.
+     * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean> | undefined;
     /**
@@ -20,6 +20,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
     intl?: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | undefined;
+    /**
+     * If false, the carousel will not show pagination bullets at the bottom.
+     */
+    pagination?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
      */
@@ -43,14 +47,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     wrapContent?: boolean | undefined;
 }>, {
     alignHeader: string;
-    disablePagination: boolean;
     intl: () => {};
+    pagination: boolean;
     rewind: boolean;
     slidesPerPage: number;
     theme: string;
     width: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     carouselChange: (value: CarouselChangeEvent) => void;
+} & {
+    change: (value: CarouselChangeEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Alignment of heading and description
@@ -61,7 +67,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     description?: string | undefined;
     /**
-     * If true, the carousel will not show pagination bullets at the bottom.
+     * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean> | undefined;
     /**
@@ -72,6 +78,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
     intl?: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | undefined;
+    /**
+     * If false, the carousel will not show pagination bullets at the bottom.
+     */
+    pagination?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
      */
@@ -95,20 +105,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     wrapContent?: boolean | undefined;
 }>, {
     alignHeader: string;
-    disablePagination: boolean;
     intl: () => {};
+    pagination: boolean;
     rewind: boolean;
     slidesPerPage: number;
     theme: string;
     width: string;
 }>>> & {
+    onChange?: ((value: CarouselChangeEvent) => any) | undefined;
     onCarouselChange?: ((value: CarouselChangeEvent) => any) | undefined;
 }, {
     theme: Theme;
     width: CarouselWidth;
     alignHeader: CarouselAlignHeader;
-    disablePagination: BreakpointCustomizable<boolean>;
     intl: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
+    pagination: BreakpointCustomizable<boolean>;
     rewind: boolean;
     slidesPerPage: BreakpointCustomizable<number>;
 }>, {