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

package/CHANGELOG.md

@@ -9,6 +9,94 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-alpha.5] - 2023-03-30
+
+#### Added
+
+- `Wordmark` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2418)
+- `Crest` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2437)
+- Styles: changed color values of `theme[Light|Dark]ContrastMedium` and `theme[Light|Dark]Notification[*]` color tokens
+  of `Styles` subpackage [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2436)
+
+### [3.0.0-alpha.4] - 2023-03-28
+
+#### Changed
+
+- `Table` matches new design language [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
+
+#### Added
+
+- Styles: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  - `gridWide`
+  - `gridWideColumnStart` and `pds-grid-wide-column-start`
+  - `gridWideColumnEnd` and `pds-grid-wide-column-end`
+  - `gridNarrowOffset`, `gridNarrowOffsetBase`, `gridNarrowOffsetS`, `gridNarrowOffsetXXL` and
+    `$pds-grid-narrow-offset-base`, `$pds-grid-narrow-offset-s`, `$pds-grid-narrow-offset-xxl`
+  - `gridBasicOffset`, `gridBasicOffsetBase`, `gridBasicOffsetS`, `gridBasicOffsetXXL` and
+    `$pds-grid-basic-offset-base`, `$pds-grid-basic-offset-s`, `$pds-grid-basic-offset-xxl`
+  - `gridExtendedOffset`, `gridExtendedOffsetBase`, `gridExtendedOffsetS`, `gridExtendedOffsetXXL` and
+    `$pds-grid-extended-offset-base`, `$pds-grid-extended-offset-s`, `$pds-grid-extended-offset-xxl`
+  - `gridWideOffset`, `gridWideOffsetBase`, `gridWideOffsetS`, `gridWideOffsetXXL` and `$pds-grid-wide-offset-base`,
+    `$pds-grid-wide-offset-s`, `$pds-grid-wide-offset-xxl`
+  - `gridFullOffset` and `$pds-grid-full-offset`
+- `Button Tile` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2381)
+- `Fieldset` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
+- `Link Tile Model Signature` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2388)
+- Prop `activeSlideIndex` to `Carousel` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2421)
+- Prop `slidesPerPage` supports value `auto` of `Carousel`
+  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2421)
+- Prop `scrollbar` for `Scroller` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
+- Prop `theme` for `Table` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
+
+#### Fixed
+
+- React: missing animation of `Carousel` in certain scenarios
+
+#### Changed
+
+- Styles: `gridStyles` and `pds-grid` are supporting an additional column range called `wide`
+  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+- Styles: SCSS version needs to be imported by `@porsche-design-system/components-js/styles` instead of
+  `@porsche-design-system/components-js/styles/scss`
+  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+
+#### Removed
+
+- `Banner`: CSS variable `--p-banner-position-type`
+  [PR](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`
+  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+- `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
+  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+
+#### 🤖 Property deprecations 🤖
+
+##### Banner:
+
+- Prop `width` has no effect anymore, instead the component is aligned with Porsche Grid "extended" by default.
+  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+
+#### 🤡 Component deprecations 🤡
+
+##### Marque [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2418)
+
+```diff
+- <p-marque></p-marque>
++ <p-wordmark></p-wordmark>
+```
+
+##### Fieldset Wrapper: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
+
+```diff
+- <p-fieldset-wrapper label="Some legend label">
++ <p-fieldset label="Some legend label">
+  <p-text-field-wrapper label="Some label">
+    <input type="text" name="some-name" />
+  </p-text-field-wrapper>
+- </p-fieldset-wrapper>
++ </p-fieldset>
+```
+
 ### [3.0.0-alpha.3] - 2023-03-17
 
 #### 🤖 Property deprecations 🤖
@@ -464,6 +552,17 @@ possible. Nevertheless, there are a few breaking changes and some more deprecati
 </p-link-pure>
 ```
 
+##### Marque:
+
+- Removed `variant` property.
+
+```diff
+- <p-marque variant="75-years"></p-marque>
++ <p-marque></p-marque>
+// or even better, replace component by wordmark
++ <p-wordmark></p-wordmark>
+```
+
 ##### Switch:
 
 - Removed deprecated prop `tabbable`.

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

@@ -21,7 +21,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     theme?: "light" | "dark" | undefined;
     /**
-     * Defines the width of the banner corresponding to the `content-wrapper` dimensions
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     width?: "extended" | "basic" | "fluid" | undefined;
 }>, {
@@ -55,7 +56,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     theme?: "light" | "dark" | undefined;
     /**
-     * Defines the width of the banner corresponding to the `content-wrapper` dimensions
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     width?: "extended" | "basic" | "fluid" | undefined;
 }>, {

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

@@ -0,0 +1,171 @@
+import type { ButtonTileAlign, SelectedAriaAttributes, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Alignment of button and description.
+     */
+    align?: "top" | "bottom" | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
+    /**
+     * Aspect ratio of the button-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
+    /**
+     * Displays the button-tile as compact version with description and button icon only.
+     */
+    compact?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean | undefined;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed.
+     */
+    icon?: import("../types").LinkButtonIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Label of the button.
+     */
+    label: string;
+    /**
+     * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean | undefined;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: "reset" | "button" | "submit" | undefined;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<"regular" | "semi-bold"> | undefined;
+}>, {
+    align: string;
+    aspectRatio: string;
+    compact: boolean;
+    disabled: boolean;
+    gradient: boolean;
+    icon: string;
+    loading: boolean;
+    size: string;
+    type: string;
+    weight: 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<{
+    /**
+     * Alignment of button and description.
+     */
+    align?: "top" | "bottom" | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
+    /**
+     * Aspect ratio of the button-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
+    /**
+     * Displays the button-tile as compact version with description and button icon only.
+     */
+    compact?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean | undefined;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed.
+     */
+    icon?: import("../types").LinkButtonIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Label of the button.
+     */
+    label: string;
+    /**
+     * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean | undefined;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: "reset" | "button" | "submit" | undefined;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<"regular" | "semi-bold"> | undefined;
+}>, {
+    align: string;
+    aspectRatio: string;
+    compact: boolean;
+    disabled: boolean;
+    gradient: boolean;
+    icon: string;
+    loading: boolean;
+    size: string;
+    type: string;
+    weight: string;
+}>>>, {
+    weight: BreakpointCustomizable<ButtonTileWeight>;
+    compact: BreakpointCustomizable<boolean>;
+    size: BreakpointCustomizable<ButtonTileSize>;
+    type: ButtonTileType;
+    disabled: boolean;
+    icon: ButtonTileIcon;
+    loading: boolean;
+    align: ButtonTileAlign;
+    aspectRatio: BreakpointCustomizable<ButtonTileAspectRatio>;
+    gradient: 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/ButtonTileWrapper.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent as u, ref as r, onMounted as d, onUpdated as f, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as b } from "vue";
+import { getPrefixedTagName as g, syncProperties as o } from "../../utils.js";
+const C = /* @__PURE__ */ u({
+  __name: "ButtonTileWrapper",
+  props: {
+    align: { default: "bottom" },
+    aria: null,
+    aspectRatio: { default: "4:3" },
+    compact: { default: !1 },
+    description: null,
+    disabled: { type: Boolean, default: !1 },
+    gradient: { type: Boolean, default: !0 },
+    icon: { default: "none" },
+    iconSource: null,
+    label: null,
+    loading: { type: Boolean, default: !1 },
+    size: { default: "default" },
+    type: { default: "submit" },
+    weight: { default: "semi-bold" }
+  },
+  setup(n) {
+    const t = n, a = g("p-button-tile"), e = r();
+    return d(() => {
+      o(e.value, t);
+    }), f(() => {
+      o(e.value, t);
+    }), (l, y) => (p(), s(i(c(a)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: m(() => [
+        b(l.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  C as default
+};

package/lib/components/ButtonTileWrapper.vue2.js

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

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

@@ -1,5 +1,9 @@
 import type { CarouselAlignHeader, BreakpointCustomizable, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Defines which slide to be active (zero-based numbering).
+     */
+    activeSlideIndex?: number | undefined;
     /**
      * Alignment of heading and description
      */
@@ -29,9 +33,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     rewind?: boolean | undefined;
     /**
-     * Sets the amount of slides visible at the same time.
+     * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: BreakpointCustomizable<number> | undefined;
+    slidesPerPage?: "auto" | BreakpointCustomizable<number> | undefined;
     /**
      * Adapts the color when used on dark background.
      */
@@ -46,8 +50,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     wrapContent?: boolean | undefined;
 }>, {
+    activeSlideIndex: number;
     alignHeader: string;
-    intl: () => {};
     pagination: boolean;
     rewind: boolean;
     slidesPerPage: number;
@@ -58,6 +62,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 } & {
     change: (value: CarouselChangeEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Defines which slide to be active (zero-based numbering).
+     */
+    activeSlideIndex?: number | undefined;
     /**
      * Alignment of heading and description
      */
@@ -87,9 +95,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     rewind?: boolean | undefined;
     /**
-     * Sets the amount of slides visible at the same time.
+     * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: BreakpointCustomizable<number> | undefined;
+    slidesPerPage?: "auto" | BreakpointCustomizable<number> | undefined;
     /**
      * Adapts the color when used on dark background.
      */
@@ -104,8 +112,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     wrapContent?: boolean | undefined;
 }>, {
+    activeSlideIndex: number;
     alignHeader: string;
-    intl: () => {};
     pagination: boolean;
     rewind: boolean;
     slidesPerPage: number;
@@ -117,11 +125,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     theme: Theme;
     width: CarouselWidth;
+    activeSlideIndex: number;
     alignHeader: CarouselAlignHeader;
-    intl: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
     pagination: BreakpointCustomizable<boolean>;
     rewind: boolean;
-    slidesPerPage: BreakpointCustomizable<number>;
+    slidesPerPage: BreakpointCustomizable<number> | "auto";
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/CarouselWrapper.vue.js

@@ -1,13 +1,14 @@
-import { defineComponent as d, ref as s, onMounted as p, onUpdated as i, openBlock as f, createBlock as c, resolveDynamicComponent as m, unref as g, withCtx as h, renderSlot as C } from "vue";
-import { getPrefixedTagName as _, syncProperties as a, addEventListenerToElementRef as o } from "../../utils.js";
-const P = /* @__PURE__ */ d({
+import { defineComponent as u, ref as s, onMounted as i, onUpdated as p, openBlock as f, createBlock as c, resolveDynamicComponent as m, unref as g, withCtx as h, renderSlot as C } from "vue";
+import { getPrefixedTagName as v, syncProperties as a, addEventListenerToElementRef as o } from "../../utils.js";
+const P = /* @__PURE__ */ u({
   __name: "CarouselWrapper",
   props: {
+    activeSlideIndex: { default: 0 },
     alignHeader: { default: "left" },
     description: null,
     disablePagination: null,
     heading: null,
-    intl: { default: () => ({}) },
+    intl: null,
     pagination: { default: !0 },
     rewind: { type: Boolean, default: !0 },
     slidesPerPage: { default: 1 },
@@ -16,18 +17,18 @@ const P = /* @__PURE__ */ d({
     wrapContent: { type: Boolean }
   },
   emits: ["carouselChange", "change"],
-  setup(l, { emit: t }) {
-    const n = l, r = _("p-carousel"), e = s();
-    return p(() => {
-      a(e.value, n), o(e.value, "carouselChange", t), o(e.value, "change", t);
-    }), i(() => {
-      a(e.value, n);
-    }), (u, v) => (f(), c(m(g(r)), {
+  setup(l, { emit: n }) {
+    const t = l, r = v("p-carousel"), e = s();
+    return i(() => {
+      a(e.value, t), o(e.value, "carouselChange", n), o(e.value, "change", n);
+    }), p(() => {
+      a(e.value, t);
+    }), (d, _) => (f(), c(m(g(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: h(() => [
-        C(u.$slots, "default")
+        C(d.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -0,0 +1,49 @@
+import type { SelectedAriaAttributes, CrestTarget } from '../types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+}>, {
+    target: 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<{
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+}>, {
+    target: string;
+}>>>, {
+    target: CrestTarget;
+}>;
+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];
+};

package/lib/components/CrestWrapper.vue.js

@@ -0,0 +1,24 @@
+import { defineComponent as p, ref as a, onMounted as s, onUpdated as f, openBlock as c, createBlock as l, resolveDynamicComponent as m, unref as u } from "vue";
+import { getPrefixedTagName as d, syncProperties as o } from "../../utils.js";
+const k = /* @__PURE__ */ p({
+  __name: "CrestWrapper",
+  props: {
+    aria: null,
+    href: null,
+    target: { default: "_self" }
+  },
+  setup(r) {
+    const n = r, t = d("p-crest"), e = a();
+    return s(() => {
+      o(e.value, n);
+    }), f(() => {
+      o(e.value, n);
+    }), (i, _) => (c(), l(m(u(t)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, null, 512));
+  }
+});
+export {
+  k as default
+};

package/lib/components/CrestWrapper.vue2.js

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

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

@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "primary" | "inherit" | undefined;
+    color?: "inherit" | "primary" | undefined;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
@@ -38,7 +38,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "primary" | "inherit" | undefined;
+    color?: "inherit" | "primary" | undefined;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */

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

@@ -0,0 +1,95 @@
+import type { FieldsetLabelSize, FieldsetState, Theme } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * The size of the label text.
+     */
+    labelSize?: "small" | "medium" | undefined;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string | undefined;
+    /**
+     * Marks the Fieldset as required.
+     */
+    required?: boolean | undefined;
+    /**
+     * 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.
+     */
+    label?: string | undefined;
+    /**
+     * The size of the label text.
+     */
+    labelSize?: "small" | "medium" | undefined;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string | undefined;
+    /**
+     * Marks the Fieldset as required.
+     */
+    required?: boolean | undefined;
+    /**
+     * 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: FieldsetState;
+    required: boolean;
+    message: string;
+    labelSize: FieldsetLabelSize;
+}>, {
+    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;
+    };
+};