@porsche-design-system/components-vue 3.0.0-rc.0 → 3.0.0-rc.2

package/CHANGELOG.md

@@ -9,12 +9,71 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-rc.2] - 2023-05-09
+
+#### Fixed
+
+- `Checkbox Wrapper` Safari visual state change while hovering
+  [#2508](https://github.com/porsche-design-system/porsche-design-system/pull/2508)
+- `Checkbox Wrapper` keyboard arrow navigation
+  [#2508](https://github.com/porsche-design-system/porsche-design-system/pull/2508)
+- `Modal` fix hover state of dismiss button
+  ([#2510](https://github.com/porsche-design-system/porsche-design-system/pull/2510))
+- `Link Pure`, `Button Pure`: adjust offset of `:hover` and `active` styles
+  ([#2511](https://github.com/porsche-design-system/porsche-design-system/pull/2511))
+- `Tabs Bar`, `Tabs` ([#2521](https://github.com/porsche-design-system/porsche-design-system/pull/2521)):
+  - `focus` state of tabpanel
+  - Indicator bar height
+- Optimize icon/text alignment of `Link Pure` and `Button Pure` in Safari
+- `Select Wrapper` multiline option height and scaling behavior
+  ([#2524](https://github.com/porsche-design-system/porsche-design-system/pull/2524))
+- Fixed accessibility issues of `Tabs`, `Tabs Bar` and `Stepper Horizontal` to comply with v.4.7.0 of `axe-core`
+  ([#2530](https://github.com/porsche-design-system/porsche-design-system/pull/2530))
+- React: `patchRemixRunProcessBrowserGlobalIdentifier` binary now supports Remix 1.16.0
+  ([#2537](https://github.com/porsche-design-system/porsche-design-system/pull/2537))
+- Angular: added optional modifier to optional properties for better type checking in strict mode
+  ([#2544](https://github.com/porsche-design-system/porsche-design-system/pull/2544))
+
+#### Added
+
+- Deprecation warning to `Icon` component if `lazy` prop is used
+  ([#2521](https://github.com/porsche-design-system/porsche-design-system/pull/2521))
+- `aria` prop to `Scroller` component
+  ([#2530](https://github.com/porsche-design-system/porsche-design-system/pull/2530))
+
+#### Changed
+
+- Model signature asset of 718 model ([#2532](https://github.com/porsche-design-system/porsche-design-system/pull/2532))
+
+### [3.0.0-rc.1] - 2023-04-19
+
+#### Added
+
+- Prop `name` for `Icon` supports `push-pin`, `push-pin-off`, `qr`, `pin-filled`, `shopping-cart-filled`,
+  `shopping-bag-filled`, `logo-apple-podcast`, `logo-spotify` and `user-filled`
+  ([#2471](https://github.com/porsche-design-system/porsche-design-system/pull/2471)).
+- **[EXPERIMENTAL]** Prop `loading` for `Checkbox Wrapper`
+  ([#2483](https://github.com/porsche-design-system/porsche-design-system/pull/2483))
+
+#### Fixed
+
+- `Wordmark`, `Crest` and `Model Signature` respect parent width/height
+  ([#2479](https://github.com/porsche-design-system/porsche-design-system/pull/2479))
+- `Button Tile`, `Link Tile` and `Link Tile Model Signature` are using correct border radius of
+  `pds-border-radius-large` ([#2473](https://github.com/porsche-design-system/porsche-design-system/pull/2473))
+- `Text Field Wrapper` with `input type="search"` has better accessibility for clear button
+  ([#2476](https://github.com/porsche-design-system/porsche-design-system/pull/2476))
+- `Accordion` layout shift with nested accordions
+  ([#2465](https://github.com/porsche-design-system/porsche-design-system/pull/2465))
+- Color Contrast issues and rendering in Windows High Contrast Mode
+  ([#2420](https://github.com/porsche-design-system/porsche-design-system/pull/2420))
+
 ### [3.0.0-rc.0] - 2023-04-11
 
-### Fixed
+#### Fixed
 
 - Styles: `borderRadiusLarge` and `pds-border-radius-large` are exposing correct value
-  ([#2463](https://github.com/porsche-design-system/porsche-design-system/pull/2461))
+  ([#2463](https://github.com/porsche-design-system/porsche-design-system/pull/2463))
 
 ### [3.0.0-alpha.6] - 2023-04-06
 
@@ -50,7 +109,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ```diff
 - <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
-+ <PAccordion onUpdate={(e: CustomEvent<AccordionUPdateEvent>) => {}} />
++ <PAccordion onUpdate={(e: CustomEvent<AccordionUpdateEvent>) => {}} />
 ```
 
 ##### Banner:
@@ -89,7 +148,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PPagination onUpdate={(e: CustomEvent<PaginationUpdateEvent>) => {}} />
 ```
 
-#### Segmented Control:
+##### Segmented Control:
 
 - Event `segmentedControlChange` is deprecated, use `update` event instead.
 
@@ -98,7 +157,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSegmentedControl onUpdate={(e: CustomEvent<SegmentedControlUpdateEvent>) => {}} />
 ```
 
-#### Stepper Horizontal:
+##### Stepper Horizontal:
 
 - Event `stepChange` is deprecated, use `update` event instead.
 
@@ -107,7 +166,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PStepperHorizontal onUpdate={(e: CustomEvent<StepperHorizontalUpdateEvent>) => {}} />
 ```
 
-#### Switch:
+##### Switch:
 
 - Event `switchChange` is deprecated, use `update` event instead.
 
@@ -116,7 +175,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSwitch onUpdate={(e: CustomEvent<SwitchUpdateEvent>) => {}} />
 ```
 
-#### Table:
+##### Table:
 
 - Event `sortingChange` is deprecated, use `update` event instead.
 
@@ -149,6 +208,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - `Wordmark` ([#2418](https://github.com/porsche-design-system/porsche-design-system/pull/2418))
 - `Crest` ([#2437](https://github.com/porsche-design-system/porsche-design-system/pull/2437))
+
+#### Changed
+
 - Styles: changed color values of `theme[Light|Dark]ContrastMedium` and `theme[Light|Dark]Notification[*]` color tokens
   of `Styles` subpackage ([#2436](https://github.com/porsche-design-system/porsche-design-system/pull/2436))
 
@@ -200,9 +262,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - `Banner`: CSS variable `--p-banner-position-type`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
+- Styles: `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
+- Styles: `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### 🤖 Property deprecations 🤖
@@ -246,7 +308,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PAccordion onChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
 ```
 
-#### Banner:
+##### Banner:
 
 - Named `slot="title"` is deprecated, use `heading` prop or `slot="heading"` instead.
 
@@ -304,7 +366,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <p-link-tile weight="semi-bold"></p-link-tile>
 ```
 
-#### Modal:
+##### Modal:
 
 - Prop `disableCloseButton` is deprecated, use `dismissButton` instead.
 - Event `close` is deprecated, use `dismiss` event instead.
@@ -343,7 +405,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <p-scroller align-scroll-indicator="top"></p-scroller>
 ```
 
-#### Segmented Control:
+##### Segmented Control:
 
 - Event `segmentedControlChange` is deprecated, use `change` event instead.
 
@@ -352,7 +414,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSegmentedControl onChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
 ```
 
-#### Stepper Horizontal:
+##### Stepper Horizontal:
 
 - Event `stepChange` is deprecated, use `change` event instead.
 
@@ -361,7 +423,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PStepperHorizontal onChange={(e: CustomEvent<StepperHorizontalChangeEvent>) => {}} />
 ```
 
-#### Switch:
+##### Switch:
 
 - Event `switchChange` is deprecated, use `change` event instead.
 
@@ -370,7 +432,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSwitch onChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
 ```
 
-#### Table:
+##### Table:
 
 - Event `sortingChange` is deprecated, use `change` event instead.
 
@@ -434,9 +496,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - 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 show-character-count="false">
++ <p-text-field-wrapper show-counter="false">
+    <input type="text" maxlength="20" />
 </p-text-field-wrapper>
 ```
 
@@ -445,9 +507,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - 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 show-character-count="false">
++ <p-textarea-wrapper show-counter="false">
+    <textarea maxlength="80"></textarea>
 </p-textarea-wrapper>
 ```
 
@@ -485,10 +547,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
   - `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
+  - `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

package/PorscheDesignSystemProvider.vue.d.ts

@@ -1,3 +1,4 @@
+/** __vue_virtual_code_placeholder */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     prefix?: string | undefined;
 }>, {
@@ -9,7 +10,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     prefix: string;
 }>, {
-    default: (_: {}) => any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -22,12 +23,19 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
+        $props: __VLS_PropsChildren<S>;
     };
 };
+type __VLS_PropsChildren<S> = {
+    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,63 +1,39 @@
+/** __vue_virtual_code_placeholder */
 import type { AccordionUpdateEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+type PAccordionProps = {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
-    compact?: boolean | undefined;
+    compact?: boolean;
     /**
      * Defines the heading used in accordion.
      */
-    heading?: string | undefined;
+    heading?: string;
     /**
      * Defines if accordion is open.
      */
-    open?: boolean | undefined;
+    open?: boolean;
     /**
      * The text size.
      */
-    size?: BreakpointCustomizable<"small" | "medium"> | undefined;
+    size?: BreakpointCustomizable<AccordionSize>;
     /**
      * Sets a headline tag, so it fits correctly within the outline of the page.
      */
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    tag?: AccordionTag;
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
-}>, {
+    theme?: Theme;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PAccordionProps>, {
     size: string;
     tag: string;
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     accordionChange: (value: AccordionUpdateEvent) => void;
-} & {
     update: (value: AccordionUpdateEvent) => 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.
-     */
-    compact?: boolean | undefined;
-    /**
-     * Defines the heading used in accordion.
-     */
-    heading?: string | undefined;
-    /**
-     * Defines if accordion is open.
-     */
-    open?: boolean | undefined;
-    /**
-     * The text size.
-     */
-    size?: BreakpointCustomizable<"small" | "medium"> | undefined;
-    /**
-     * Sets a headline tag, so it fits correctly within the outline of the page.
-     */
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: "light" | "dark" | undefined;
-}>, {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PAccordionProps>, {
     size: string;
     tag: string;
     theme: string;
@@ -65,11 +41,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onAccordionChange?: ((value: AccordionUpdateEvent) => any) | undefined;
     onUpdate?: ((value: AccordionUpdateEvent) => any) | undefined;
 }, {
-    size: BreakpointCustomizable<AccordionSize>;
-    tag: AccordionTag;
-    theme: Theme;
+    size: BreakpointCustomizable<"small" | "medium">;
+    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    theme: "light" | "dark";
 }>, {
-    default: (_: {}) => any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -82,12 +58,19 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
+        $props: __VLS_PropsChildren<S>;
     };
 };
+type __VLS_PropsChildren<S> = {
+    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,17 +1,18 @@
-import type { BannerState, Theme } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+/** __vue_virtual_code_placeholder */
+import type { BannerState, Theme, BannerWidth } from '../types';
+type PBannerProps = {
     /**
      * Description of the banner.
      */
-    description?: string | undefined;
+    description?: string;
     /**
      * If false, the banner will not have a dismiss button.
      */
-    dismissButton?: boolean | undefined;
+    dismissButton?: boolean;
     /**
      * Heading of the banner.
      */
-    heading?: string | undefined;
+    heading?: string;
     /**
      * If true, the banner is open.
      */
@@ -19,21 +20,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
      */
-    persistent?: boolean | undefined;
+    persistent?: boolean;
     /**
      * State of the banner.
      */
-    state?: "warning" | "error" | "info" | "neutral" | undefined;
+    state?: BannerState;
     /**
      * Adapts the banner color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: Theme;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    width?: "extended" | "basic" | "fluid" | undefined;
-}>, {
+    width?: BannerWidth;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PBannerProps>, {
     description: string;
     dismissButton: boolean;
     heading: string;
@@ -42,41 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
 }>, {}, 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;
-    /**
-     * If false, the banner will not have a dismiss button.
-     */
-    dismissButton?: boolean | undefined;
-    /**
-     * Heading of the banner.
-     */
-    heading?: string | undefined;
-    /**
-     * If true, the banner is open.
-     */
-    open: boolean;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
-     */
-    persistent?: boolean | undefined;
-    /**
-     * State of the banner.
-     */
-    state?: "warning" | "error" | "info" | "neutral" | undefined;
-    /**
-     * Adapts the banner color depending on the theme.
-     */
-    theme?: "light" | "dark" | undefined;
-    /**
-     * Has no effect anymore
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    width?: "extended" | "basic" | "fluid" | undefined;
-}>, {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PBannerProps>, {
     description: string;
     dismissButton: boolean;
     heading: string;
@@ -88,12 +56,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     heading: string;
     open: boolean;
-    theme: Theme;
+    theme: "light" | "dark";
     description: string;
     dismissButton: boolean;
-    state: BannerState;
+    state: "warning" | "error" | "info" | "neutral";
 }>, {
-    default: (_: {}) => any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -106,12 +74,19 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
+        $props: __VLS_PropsChildren<S>;
     };
 };
+type __VLS_PropsChildren<S> = {
+    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,28 +1,25 @@
+/** __vue_virtual_code_placeholder */
 import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+type PButtonGroupProps = {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
-    direction?: BreakpointCustomizable<"row" | "column"> | undefined;
-}>, {
+    direction?: BreakpointCustomizable<ButtonGroupDirection>;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PButtonGroupProps>, {
     direction: () => {
         base: string;
         xs: string;
     };
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /**
-     * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
-     */
-    direction?: BreakpointCustomizable<"row" | "column"> | undefined;
-}>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PButtonGroupProps>, {
     direction: () => {
         base: string;
         xs: string;
     };
 }>>>, {
-    direction: BreakpointCustomizable<ButtonGroupDirection>;
+    direction: BreakpointCustomizable<"row" | "column">;
 }>, {
-    default: (_: {}) => any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -35,12 +32,19 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
+        $props: __VLS_PropsChildren<S>;
     };
 };
+type __VLS_PropsChildren<S> = {
+    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};