@porsche-design-system/components-vue 2.19.0 → 2.20.0-rc.0

package/CHANGELOG.md

@@ -9,6 +9,35 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [2.20.0-rc.0] - 2023-01-30
+
+#### Added
+
+- `applyNormalizeStyles` option for `getInitialStyles()` partial which includes basic css styles for Light DOM
+
+### [2.19.1-rc.1] - 2023-01-18
+
+#### Added
+
+- `jsdom-polyfill` subpackage is available at `@porsche-design-system/components-{js|angular|react|vue}/jsdom-polyfill`
+  and can be used to have working web components in jsdom based tests (e.g. jest)
+- `testing` subpackage is available at `@porsche-design-system/components-{js|angular|react|vue}/testing` to provide
+  `getByRoleShadowed`, `getByLabelTextShadowed` and `getByTextShadowed` utilities which use `@testing-library/dom`
+  queries internally to support Shadow DOM
+- Validation if `prefix` is already reserved by a different version upon initialization of the Porsche Design System
+
+#### Fixed
+
+- `componentsReady()` waits for Porsche Design System being initialized before checking components which can happen in
+  certain test scenarios without partials
+
+### [2.19.1-rc.0] - 2023-01-18
+
+#### Fixed
+
+- Bug in `@porsche-design-system/components-react/ssr` where in some cases during SSG an error was thrown when
+  components render their children conditionally
+
 ### [2.19.0] - 2022-12-22
 
 ### [2.19.0-rc.2] - 2022-12-22
@@ -38,7 +67,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Validation to ensure crucial partials are used.  
   **Disclaimer:** The Porsche Design System will **not** inject its initial styles anymore. Please use the
   `getInitialStyles()` partial to reduce flash of unstyled content (FOUC) as described here:
-  **https://designsystem.porsche.com/v2/partials/initial-styles**
+  [getInitialStyles() documentation](https://designsystem.porsche.com/latest/partials/initial-styles)
 
 #### Changed
 
@@ -69,11 +98,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 #### Added
 
 - SSR/SSG ready components using Declarative Shadow DOM for Next JS are shipped via
-  `@porsche-design-system/components-react/ssr`. To use it simply change your imports:
+  `@porsche-design-system/components-react/ssr`. To use it simply change your imports.
+
+**Important:** make sure to apply the new `getDSRPonyfill()` partial right before your closing `</body>` tag. More
+information can be found here:
+[getDSRPonyfill() documentation](https://designsystem.porsche.com/latest/partials/dsr-ponyfill)
 
 ```diff
 - import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react';
 + import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react/ssr';
++ import { getDSRPonyfill } from '@porsche-design-system/components-react/partials';
 ```
 
 #### Changed

package/PorscheDesignSystemProvider.vue2.js

@@ -1,5 +1,4 @@
-import "./PorscheDesignSystemProvider.vue.js";
-import { default as t } from "./PorscheDesignSystemProvider.vue.js";
+import f from "./PorscheDesignSystemProvider.vue.js";
 export {
-  t as default
+  f as default
 };

package/jsdom-polyfill/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsdomPolyfill = require('@porsche-design-system/components-js/jsdom-polyfill');
+
+
+
+Object.keys(jsdomPolyfill).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return jsdomPolyfill[k]; }
+	});
+});

package/jsdom-polyfill.d.ts

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/jsdom-polyfill';

package/lib/components/AccordionWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./AccordionWrapper.vue.js";
-import { default as t } from "./AccordionWrapper.vue.js";
+import f from "./AccordionWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

package/lib/components/BannerWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./BannerWrapper.vue.js";
-import { default as t } from "./BannerWrapper.vue.js";
+import f from "./BannerWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

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

@@ -1,9 +1,9 @@
-import type { ButtonGroupDirection } from '../types';
+import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__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?: ButtonGroupDirection | undefined;
+    direction?: BreakpointCustomizable<"row" | "column"> | undefined;
 }>, {
     direction: () => {
         base: string;
@@ -13,14 +13,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * 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?: ButtonGroupDirection | undefined;
+    direction?: BreakpointCustomizable<"row" | "column"> | undefined;
 }>, {
     direction: () => {
         base: string;
         xs: string;
     };
 }>>>, {
-    direction: ButtonGroupDirection;
+    direction: BreakpointCustomizable<ButtonGroupDirection>;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/ButtonGroupWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./ButtonGroupWrapper.vue.js";
-import { default as t } from "./ButtonGroupWrapper.vue.js";
+import f from "./ButtonGroupWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

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

@@ -1,4 +1,4 @@
-import type { AlignLabel, SelectedAriaAttributes, BreakpointCustomizable, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Display button in active state.
@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel | undefined;
+    alignLabel?: BreakpointCustomizable<"left" | "right"> | undefined;
     /**
      * Add ARIA attributes.
      */
@@ -78,7 +78,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel | undefined;
+    alignLabel?: BreakpointCustomizable<"left" | "right"> | undefined;
     /**
      * Add ARIA attributes.
      */
@@ -148,7 +148,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: ThemeExtendedElectricDark;
     type: ButtonType;
     active: boolean;
-    alignLabel: AlignLabel;
+    alignLabel: BreakpointCustomizable<AlignLabel>;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: LinkButtonPureIconName;

package/lib/components/ButtonPureWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./ButtonPureWrapper.vue.js";
-import { default as t } from "./ButtonPureWrapper.vue.js";
+import f from "./ButtonPureWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

package/lib/components/ButtonWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./ButtonWrapper.vue.js";
-import { default as t } from "./ButtonWrapper.vue.js";
+import f from "./ButtonWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

package/lib/components/CarouselWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./CarouselWrapper.vue.js";
-import { default as t } from "./CarouselWrapper.vue.js";
+import f from "./CarouselWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

package/lib/components/CheckboxWrapperWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./CheckboxWrapperWrapper.vue.js";
-import { default as t } from "./CheckboxWrapperWrapper.vue.js";
+import f from "./CheckboxWrapperWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

package/lib/components/ContentWrapperWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./ContentWrapperWrapper.vue.js";
-import { default as t } from "./ContentWrapperWrapper.vue.js";
+import f from "./ContentWrapperWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

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

@@ -1,4 +1,4 @@
-import type { DividerColor, DividerOrientation, Theme } from '../types';
+import type { DividerColor, BreakpointCustomizable, DividerOrientation, Theme } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines color depending on theme.
@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Defines orientation.
      */
-    orientation?: DividerOrientation | undefined;
+    orientation?: BreakpointCustomizable<"horizontal" | "vertical"> | undefined;
     /**
      * Adapts color depending on theme.
      */
@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Defines orientation.
      */
-    orientation?: DividerOrientation | undefined;
+    orientation?: BreakpointCustomizable<"horizontal" | "vertical"> | undefined;
     /**
      * Adapts color depending on theme.
      */
@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>>>, {
     theme: Theme;
     color: DividerColor;
-    orientation: DividerOrientation;
+    orientation: BreakpointCustomizable<DividerOrientation>;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/lib/components/DividerWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./DividerWrapper.vue.js";
-import { default as t } from "./DividerWrapper.vue.js";
+import f from "./DividerWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

package/lib/components/FieldsetWrapperWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./FieldsetWrapperWrapper.vue.js";
-import { default as t } from "./FieldsetWrapperWrapper.vue.js";
+import f from "./FieldsetWrapperWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

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

@@ -1,29 +1,29 @@
-import type { FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
+import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */
-    alignSelf?: FlexItemAlignSelf | undefined;
+    alignSelf?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto"> | undefined;
     /**
      * The shorthand property for the combined definition of "shrink", "grow" and "basis"
      */
-    flex?: FlexItemFlex | undefined;
+    flex?: BreakpointCustomizable<"none" | "auto" | "initial" | "equal"> | undefined;
     /**
      * The ability to allow/disallow the flex child to grow.
      */
-    grow?: FlexItemGrow | undefined;
+    grow?: BreakpointCustomizable<0 | 1> | undefined;
     /**
      * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    offset?: FlexItemOffset | undefined;
+    offset?: BreakpointCustomizable<"none" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters"> | undefined;
     /**
      * The ability to allow/disallow the flex child to shrink.
      */
-    shrink?: FlexItemShrink | undefined;
+    shrink?: BreakpointCustomizable<0 | 1> | undefined;
     /**
      * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    width?: FlexItemWidth | undefined;
+    width?: BreakpointCustomizable<"auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters" | "full"> | undefined;
 }>, {
     alignSelf: string;
     flex: string;
@@ -35,27 +35,27 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */
-    alignSelf?: FlexItemAlignSelf | undefined;
+    alignSelf?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto"> | undefined;
     /**
      * The shorthand property for the combined definition of "shrink", "grow" and "basis"
      */
-    flex?: FlexItemFlex | undefined;
+    flex?: BreakpointCustomizable<"none" | "auto" | "initial" | "equal"> | undefined;
     /**
      * The ability to allow/disallow the flex child to grow.
      */
-    grow?: FlexItemGrow | undefined;
+    grow?: BreakpointCustomizable<0 | 1> | undefined;
     /**
      * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    offset?: FlexItemOffset | undefined;
+    offset?: BreakpointCustomizable<"none" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters"> | undefined;
     /**
      * The ability to allow/disallow the flex child to shrink.
      */
-    shrink?: FlexItemShrink | undefined;
+    shrink?: BreakpointCustomizable<0 | 1> | undefined;
     /**
      * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    width?: FlexItemWidth | undefined;
+    width?: BreakpointCustomizable<"auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters" | "full"> | undefined;
 }>, {
     alignSelf: string;
     flex: string;
@@ -64,12 +64,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shrink: number;
     width: string;
 }>>>, {
-    width: FlexItemWidth;
-    alignSelf: FlexItemAlignSelf;
-    flex: FlexItemFlex;
-    grow: FlexItemGrow;
-    offset: FlexItemOffset;
-    shrink: FlexItemShrink;
+    width: BreakpointCustomizable<FlexItemWidth>;
+    alignSelf: BreakpointCustomizable<FlexItemAlignSelf>;
+    flex: BreakpointCustomizable<FlexItemFlex>;
+    grow: BreakpointCustomizable<FlexItemGrow>;
+    offset: BreakpointCustomizable<FlexItemOffset>;
+    shrink: BreakpointCustomizable<FlexItemShrink>;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/FlexItemWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./FlexItemWrapper.vue.js";
-import { default as t } from "./FlexItemWrapper.vue.js";
+import f from "./FlexItemWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

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

@@ -1,29 +1,29 @@
-import type { FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
+import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */
-    alignContent?: FlexAlignContent | undefined;
+    alignContent?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch"> | undefined;
     /**
      * Defines how the flex items are aligned along the cross axis.
      */
-    alignItems?: FlexAlignItems | undefined;
+    alignItems?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline"> | undefined;
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
      */
-    direction?: FlexDirection | undefined;
+    direction?: BreakpointCustomizable<"row" | "column" | "row-reverse" | "column-reverse"> | undefined;
     /**
      * Defines the flex containers content flow if 2 or more containers are siblings of each other.
      */
-    inline?: FlexInline | undefined;
+    inline?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Defines how the flex items are aligned along the main axis.
      */
-    justifyContent?: FlexJustifyContent | undefined;
+    justifyContent?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly"> | undefined;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: FlexWrap | undefined;
+    wrap?: BreakpointCustomizable<"nowrap" | "wrap" | "wrap-reverse"> | undefined;
 }>, {
     alignContent: string;
     alignItems: string;
@@ -35,27 +35,27 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */
-    alignContent?: FlexAlignContent | undefined;
+    alignContent?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch"> | undefined;
     /**
      * Defines how the flex items are aligned along the cross axis.
      */
-    alignItems?: FlexAlignItems | undefined;
+    alignItems?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline"> | undefined;
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
      */
-    direction?: FlexDirection | undefined;
+    direction?: BreakpointCustomizable<"row" | "column" | "row-reverse" | "column-reverse"> | undefined;
     /**
      * Defines the flex containers content flow if 2 or more containers are siblings of each other.
      */
-    inline?: FlexInline | undefined;
+    inline?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Defines how the flex items are aligned along the main axis.
      */
-    justifyContent?: FlexJustifyContent | undefined;
+    justifyContent?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly"> | undefined;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: FlexWrap | undefined;
+    wrap?: BreakpointCustomizable<"nowrap" | "wrap" | "wrap-reverse"> | undefined;
 }>, {
     alignContent: string;
     alignItems: string;
@@ -64,12 +64,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     justifyContent: string;
     wrap: string;
 }>>>, {
-    inline: FlexInline;
-    wrap: FlexWrap;
-    direction: FlexDirection;
-    alignContent: FlexAlignContent;
-    alignItems: FlexAlignItems;
-    justifyContent: FlexJustifyContent;
+    inline: BreakpointCustomizable<FlexInline>;
+    wrap: BreakpointCustomizable<FlexWrap>;
+    direction: BreakpointCustomizable<FlexDirection>;
+    alignContent: BreakpointCustomizable<FlexAlignContent>;
+    alignItems: BreakpointCustomizable<FlexAlignItems>;
+    justifyContent: BreakpointCustomizable<FlexJustifyContent>;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/FlexWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./FlexWrapper.vue.js";
-import { default as t } from "./FlexWrapper.vue.js";
+import f from "./FlexWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

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

@@ -1,13 +1,13 @@
-import type { GridItemOffset, GridItemSize } from '../types';
+import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: GridItemOffset | undefined;
+    offset?: BreakpointCustomizable<0 | 3 | 4 | 6 | 2 | 10 | 5 | 7 | 1 | 8 | 9 | 11> | undefined;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: GridItemSize | undefined;
+    size?: BreakpointCustomizable<3 | 4 | 6 | 2 | 10 | 5 | 7 | 1 | 12 | 8 | 9 | 11> | undefined;
 }>, {
     offset: number;
     size: number;
@@ -15,17 +15,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: GridItemOffset | undefined;
+    offset?: BreakpointCustomizable<0 | 3 | 4 | 6 | 2 | 10 | 5 | 7 | 1 | 8 | 9 | 11> | undefined;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: GridItemSize | undefined;
+    size?: BreakpointCustomizable<3 | 4 | 6 | 2 | 10 | 5 | 7 | 1 | 12 | 8 | 9 | 11> | undefined;
 }>, {
     offset: number;
     size: number;
 }>>>, {
-    size: GridItemSize;
-    offset: GridItemOffset;
+    size: BreakpointCustomizable<GridItemSize>;
+    offset: BreakpointCustomizable<GridItemOffset>;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/GridItemWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./GridItemWrapper.vue.js";
-import { default as t } from "./GridItemWrapper.vue.js";
+import f from "./GridItemWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

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

@@ -1,17 +1,17 @@
-import type { GridDirection, GridGutter, GridWrap } from '../types';
+import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */
-    direction?: GridDirection | undefined;
+    direction?: BreakpointCustomizable<"row" | "column" | "row-reverse" | "column-reverse"> | undefined;
     /**
      * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
      */
-    gutter?: GridGutter | undefined;
+    gutter?: BreakpointCustomizable<16 | 24 | 36> | undefined;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: GridWrap | undefined;
+    wrap?: BreakpointCustomizable<"nowrap" | "wrap"> | undefined;
 }>, {
     direction: string;
     gutter: () => {
@@ -24,15 +24,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */
-    direction?: GridDirection | undefined;
+    direction?: BreakpointCustomizable<"row" | "column" | "row-reverse" | "column-reverse"> | undefined;
     /**
      * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
      */
-    gutter?: GridGutter | undefined;
+    gutter?: BreakpointCustomizable<16 | 24 | 36> | undefined;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: GridWrap | undefined;
+    wrap?: BreakpointCustomizable<"nowrap" | "wrap"> | undefined;
 }>, {
     direction: string;
     gutter: () => {
@@ -42,9 +42,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     };
     wrap: string;
 }>>>, {
-    wrap: GridWrap;
-    direction: GridDirection;
-    gutter: GridGutter;
+    wrap: BreakpointCustomizable<GridWrap>;
+    direction: BreakpointCustomizable<GridDirection>;
+    gutter: BreakpointCustomizable<GridGutter>;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/GridWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./GridWrapper.vue.js";
-import { default as t } from "./GridWrapper.vue.js";
+import f from "./GridWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

package/lib/components/HeadlineWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./HeadlineWrapper.vue.js";
-import { default as t } from "./HeadlineWrapper.vue.js";
+import f from "./HeadlineWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

package/lib/components/IconWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./IconWrapper.vue.js";
-import { default as t } from "./IconWrapper.vue.js";
+import f from "./IconWrapper.vue.js";
 export {
-  t as default
+  f as default
 };

package/lib/components/InlineNotificationWrapper.vue2.js

@@ -1,5 +1,4 @@
-import "./InlineNotificationWrapper.vue.js";
-import { default as t } from "./InlineNotificationWrapper.vue.js";
+import f from "./InlineNotificationWrapper.vue.js";
 export {
-  t as default
+  f as default
 };