@porsche-design-system/components-vue 2.20.0 → 3.0.0-alpha.1

package/lib/components/ButtonPureWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as u, onMounted as f, onUpdated as d, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as g } from "vue";
+import { defineComponent as r, ref as f, onMounted as u, onUpdated as d, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as g } from "vue";
 import { getPrefixedTagName as h, syncProperties as a } from "../../utils.js";
-const _ = /* @__PURE__ */ r({
+const B = /* @__PURE__ */ r({
   __name: "ButtonPureWrapper",
   props: {
     active: { type: Boolean, default: !1 },
@@ -8,23 +8,22 @@ const _ = /* @__PURE__ */ r({
     aria: null,
     disabled: { type: Boolean, default: !1 },
     hideLabel: { default: !1 },
-    icon: { default: "arrow-head-right" },
+    icon: { default: "arrow-right" },
     iconSource: null,
     loading: { type: Boolean, default: !1 },
     size: { default: "small" },
     stretch: { default: !1 },
-    tabbable: { type: Boolean, default: !0 },
     theme: { default: "light" },
     type: { default: "submit" },
     weight: { default: "regular" }
   },
   setup(o) {
-    const t = o, l = h("p-button-pure"), e = u();
-    return f(() => {
+    const t = o, l = h("p-button-pure"), e = f();
+    return u(() => {
       a(e.value, t);
     }), d(() => {
       a(e.value, t);
-    }), (n, b) => (p(), s(i(c(l)), {
+    }), (n, y) => (p(), s(i(c(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
@@ -36,5 +35,5 @@ const _ = /* @__PURE__ */ r({
   }
 });
 export {
-  _ as default
+  B as default
 };

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

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, BreakpointCustomizable, IconName, ThemeExtendedElectric, ButtonType, ButtonVariant } from '../types';
+import type { SelectedAriaAttributes, BreakpointCustomizable, LinkButtonIconName, Theme, ButtonType, ButtonVariant } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -13,9 +13,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     hideLabel?: BreakpointCustomizable<boolean> | undefined;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName | undefined;
+    icon?: LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -24,15 +24,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean | undefined;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean | undefined;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */
@@ -46,7 +41,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideLabel: boolean;
     icon: string;
     loading: boolean;
-    tabbable: boolean;
     theme: string;
     type: string;
     variant: string;
@@ -64,9 +58,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     hideLabel?: BreakpointCustomizable<boolean> | undefined;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName | undefined;
+    icon?: LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -75,15 +69,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean | undefined;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean | undefined;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */
@@ -97,18 +86,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideLabel: boolean;
     icon: string;
     loading: boolean;
-    tabbable: boolean;
     theme: string;
     type: string;
     variant: string;
 }>>>, {
-    theme: ThemeExtendedElectric;
-    type: ButtonType;
     disabled: boolean;
+    theme: Theme;
+    type: ButtonType;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: IconName;
+    icon: LinkButtonIconName;
     loading: boolean;
-    tabbable: boolean;
     variant: ButtonVariant;
 }>, {
     default: (_: {}) => any;

package/lib/components/ButtonWrapper.vue.js

@@ -1,36 +1,35 @@
-import { defineComponent as r, ref as d, onMounted as f, onUpdated as p, openBlock as u, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as b } from "vue";
-import { getPrefixedTagName as y, syncProperties as o } from "../../utils.js";
-const B = /* @__PURE__ */ r({
+import { defineComponent as r, ref as p, onMounted as f, onUpdated as u, openBlock as d, createBlock as s, resolveDynamicComponent as i, unref as m, withCtx as c, renderSlot as y } from "vue";
+import { getPrefixedTagName as _, syncProperties as o } from "../../utils.js";
+const h = /* @__PURE__ */ r({
   __name: "ButtonWrapper",
   props: {
     aria: null,
     disabled: { type: Boolean, default: !1 },
     hideLabel: { default: !1 },
-    icon: { default: "arrow-head-right" },
+    icon: { default: "none" },
     iconSource: null,
     loading: { type: Boolean, default: !1 },
-    tabbable: { type: Boolean, default: !0 },
     theme: { default: "light" },
     type: { default: "submit" },
-    variant: { default: "secondary" }
+    variant: { default: "primary" }
   },
-  setup(a) {
-    const t = a, n = y("p-button"), e = d();
+  setup(n) {
+    const t = n, a = _("p-button"), e = p();
     return f(() => {
       o(e.value, t);
-    }), p(() => {
+    }), u(() => {
       o(e.value, t);
-    }), (l, h) => (u(), s(i(c(n)), {
+    }), (l, C) => (d(), s(i(m(a)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: m(() => [
-        b(l.$slots, "default")
+      default: c(() => [
+        y(l.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  B as default
+  h as default
 };

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, FormState } from '../types';
+import type { BreakpointCustomizable, FormState, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
@@ -16,11 +16,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     hideLabel: boolean;
     label: string;
     message: string;
     state: string;
+    theme: 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<{
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
@@ -38,13 +43,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     hideLabel: boolean;
     label: string;
     message: string;
     state: string;
+    theme: string;
 }>>>, {
     label: string;
+    theme: Theme;
     state: FormState;
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;

package/lib/components/CheckboxWrapperWrapper.vue.js

@@ -1,30 +1,31 @@
-import { defineComponent as p, ref as s, onMounted as f, onUpdated as l, openBlock as d, createBlock as c, resolveDynamicComponent as m, unref as u, withCtx as i, renderSlot as C } from "vue";
-import { getPrefixedTagName as _, syncProperties as t } from "../../utils.js";
-const x = /* @__PURE__ */ p({
+import { defineComponent as p, ref as f, onMounted as l, onUpdated as s, openBlock as d, createBlock as c, resolveDynamicComponent as m, unref as u, withCtx as i, renderSlot as h } from "vue";
+import { getPrefixedTagName as C, syncProperties as o } from "../../utils.js";
+const k = /* @__PURE__ */ p({
   __name: "CheckboxWrapperWrapper",
   props: {
     hideLabel: { default: !1 },
     label: { default: "" },
     message: { default: "" },
-    state: { default: "none" }
+    state: { default: "none" },
+    theme: { default: "light" }
   },
   setup(n) {
-    const o = n, r = _("p-checkbox-wrapper"), e = s();
-    return f(() => {
-      t(e.value, o);
-    }), l(() => {
-      t(e.value, o);
-    }), (a, b) => (d(), c(m(u(r)), {
+    const t = n, a = C("p-checkbox-wrapper"), e = f();
+    return l(() => {
+      o(e.value, t);
+    }), s(() => {
+      o(e.value, t);
+    }), (r, _) => (d(), c(m(u(a)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: i(() => [
-        C(a.$slots, "default")
+        h(r.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  x as default
+  k as default
 };

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

@@ -1,34 +1,39 @@
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
-     * Defines the background color.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     backgroundColor?: "default" | "transparent" | undefined;
     /**
-     * Adapts the color when used on dark background.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     theme?: "light" | "dark" | undefined;
     /**
      * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
      */
-    width?: "basic" | "extended" | "fluid" | undefined;
+    width?: "basic" | "extended" | "fluid" | "narrow" | "full" | undefined;
 }>, {
     backgroundColor: string;
     theme: string;
     width: 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 background color.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     backgroundColor?: "default" | "transparent" | undefined;
     /**
-     * Adapts the color when used on dark background.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     theme?: "light" | "dark" | undefined;
     /**
      * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
      */
-    width?: "basic" | "extended" | "fluid" | undefined;
+    width?: "basic" | "extended" | "fluid" | "narrow" | "full" | undefined;
 }>, {
     backgroundColor: string;
     theme: string;

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

@@ -0,0 +1,92 @@
+import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, Theme } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Text alignment of the component.
+     */
+    align?: "center" | "left" | "right" | undefined;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: "primary" | "inherit" | undefined;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean | undefined;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "medium", l: "large"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<"inherit" | "medium" | "large"> | undefined;
+    /**
+     * Sets a custom HTML tag depending on the usage of the display component.
+     */
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    align: string;
+    color: string;
+    ellipsis: boolean;
+    size: string;
+    theme: 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<{
+    /**
+     * Text alignment of the component.
+     */
+    align?: "center" | "left" | "right" | undefined;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: "primary" | "inherit" | undefined;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean | undefined;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "medium", l: "large"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<"inherit" | "medium" | "large"> | undefined;
+    /**
+     * Sets a custom HTML tag depending on the usage of the display component.
+     */
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    align: string;
+    color: string;
+    ellipsis: boolean;
+    size: string;
+    theme: string;
+}>>>, {
+    size: BreakpointCustomizable<DisplaySize>;
+    theme: Theme;
+    align: DisplayAlign;
+    color: DisplayColor;
+    ellipsis: boolean;
+}>, {
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/DisplayWrapper.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent as r, ref as p, onMounted as s, onUpdated as f, openBlock as d, createBlock as i, resolveDynamicComponent as u, unref as m, withCtx as c, renderSlot as g } from "vue";
+import { getPrefixedTagName as y, syncProperties as o } from "../../utils.js";
+const k = /* @__PURE__ */ r({
+  __name: "DisplayWrapper",
+  props: {
+    align: { default: "left" },
+    color: { default: "primary" },
+    ellipsis: { type: Boolean, default: !1 },
+    size: { default: "large" },
+    tag: null,
+    theme: { default: "light" }
+  },
+  setup(n) {
+    const t = n, a = y("p-display"), e = p();
+    return s(() => {
+      o(e.value, t);
+    }), f(() => {
+      o(e.value, t);
+    }), (l, _) => (d(), i(u(m(a)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: c(() => [
+        g(l.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  k as default
+};

package/lib/components/DisplayWrapper.vue2.js

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

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

@@ -3,7 +3,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Defines color depending on theme.
      */
-    color?: "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | undefined;
+    color?: "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | undefined;
     /**
      * Defines orientation.
      */
@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Defines color depending on theme.
      */
-    color?: "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | undefined;
+    color?: "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | undefined;
     /**
      * Defines orientation.
      */

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

@@ -1,4 +1,4 @@
-import type { FieldsetWrapperLabelSize, FormState } from '../types';
+import type { FieldsetWrapperLabelSize, FormState, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * The label text.
@@ -20,12 +20,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     label: string;
     labelSize: string;
     message: string;
     required: boolean;
     state: string;
+    theme: 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<{
     /**
      * The label text.
@@ -47,14 +52,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     label: string;
     labelSize: string;
     message: string;
     required: boolean;
     state: string;
+    theme: string;
 }>>>, {
     label: string;
+    theme: Theme;
     state: FormState;
     message: string;
     labelSize: FieldsetWrapperLabelSize;

package/lib/components/FieldsetWrapperWrapper.vue.js

@@ -1,31 +1,32 @@
-import { defineComponent as p, ref as l, onMounted as s, onUpdated as f, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as i, withCtx as c, renderSlot as _ } from "vue";
+import { defineComponent as p, ref as l, onMounted as f, onUpdated as s, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as i, withCtx as c, renderSlot as _ } from "vue";
 import { getPrefixedTagName as C, syncProperties as o } from "../../utils.js";
-const k = /* @__PURE__ */ p({
+const b = /* @__PURE__ */ p({
   __name: "FieldsetWrapperWrapper",
   props: {
     label: { default: "" },
     labelSize: { default: "medium" },
     message: { default: "" },
     required: { type: Boolean, default: !1 },
-    state: { default: "none" }
+    state: { default: "none" },
+    theme: { default: "light" }
   },
-  setup(n) {
-    const t = n, r = C("p-fieldset-wrapper"), e = l();
-    return s(() => {
+  setup(a) {
+    const t = a, n = C("p-fieldset-wrapper"), e = l();
+    return f(() => {
       o(e.value, t);
-    }), f(() => {
+    }), s(() => {
       o(e.value, t);
-    }), (a, g) => (d(), u(m(i(r)), {
+    }), (r, g) => (d(), u(m(i(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: c(() => [
-        _(a.$slots, "default")
+        _(r.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  k as default
+  b as default
 };

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

@@ -1,4 +1,5 @@
 import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__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.
@@ -23,7 +24,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * 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?: BreakpointCustomizable<"auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters" | "full"> | undefined;
+    width?: BreakpointCustomizable<"full" | "auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters"> | undefined;
 }>, {
     alignSelf: string;
     flex: string;
@@ -55,7 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * 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?: BreakpointCustomizable<"auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters" | "full"> | undefined;
+    width?: BreakpointCustomizable<"full" | "auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters"> | undefined;
 }>, {
     alignSelf: string;
     flex: string;

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

@@ -1,4 +1,5 @@
 import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__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.

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

@@ -1,13 +1,14 @@
 import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__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?: BreakpointCustomizable<0 | 3 | 4 | 6 | 2 | 10 | 5 | 7 | 1 | 8 | 9 | 11> | undefined;
+    offset?: BreakpointCustomizable<0 | 3 | 4 | 6 | 2 | 5 | 7 | 1 | 8 | 9 | 10 | 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?: BreakpointCustomizable<3 | 4 | 6 | 2 | 10 | 5 | 7 | 1 | 12 | 8 | 9 | 11> | undefined;
+    size?: BreakpointCustomizable<3 | 4 | 6 | 2 | 5 | 7 | 1 | 12 | 8 | 9 | 10 | 11> | undefined;
 }>, {
     offset: number;
     size: number;
@@ -15,11 +16,11 @@ 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?: BreakpointCustomizable<0 | 3 | 4 | 6 | 2 | 10 | 5 | 7 | 1 | 8 | 9 | 11> | undefined;
+    offset?: BreakpointCustomizable<0 | 3 | 4 | 6 | 2 | 5 | 7 | 1 | 8 | 9 | 10 | 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?: BreakpointCustomizable<3 | 4 | 6 | 2 | 10 | 5 | 7 | 1 | 12 | 8 | 9 | 11> | undefined;
+    size?: BreakpointCustomizable<3 | 4 | 6 | 2 | 5 | 7 | 1 | 12 | 8 | 9 | 10 | 11> | undefined;
 }>, {
     offset: number;
     size: number;

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

@@ -1,11 +1,13 @@
 import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__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?: 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.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     gutter?: BreakpointCustomizable<16 | 24 | 36> | undefined;
     /**
@@ -26,7 +28,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     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.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     gutter?: BreakpointCustomizable<16 | 24 | 36> | undefined;
     /**