@porsche-design-system/components-vue 3.31.0-rc.0 → 4.0.0-alpha.0

package/tailwindcss/index.css

@@ -1,75 +1,52 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
+  /* Reset */
+  --color-*: initial;
+
   /* Color */
-  --color-primary: #010205;
-  --color-canvas: #FFF;
-  --color-surface: #EEEFF2;
-  --color-shading: rgba(1,2,5,.67);
-  --color-frosted: hsl(240 4% 85%/35%);
-  --color-contrast-low: #D8D8DB;
-  --color-contrast-medium: #6B6D70;
-  --color-contrast-high: #535457;
-  --color-success: #197E10;
-  --color-success-soft: #E4FFEC;
-  --color-warning: #F3BE00;
-  --color-warning-soft: #FFF4D2;
-  --color-error: #CC1922;
-  --color-error-soft: #FFE2E4;
-  --color-info: #2762EC;
-  --color-info-soft: #D3E1FF;
-  --color-hover: rgba(148,149,152,.18);
-  --color-active: rgba(148,149,152,.2);
-  --color-focus: #1A44EA;
-  --color-disabled: #949598;
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-focus: #1a44ea;
+  --color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+  --color-canvas: #fff;
+  --color-surface: hsl(240, 7.7%, 97.5%);
+  --color-frosted: hsla(236, 6.4%, 51%, 0.148);
+  --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+  --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+  --color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
+  --color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
+  --color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
+  --color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
+  --color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
+  --color-primary: hsl(225, 66.7%, 1.2%);
+  --color-success: hsl(115, 77.5%, 27.8%);
+  --color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
+  --color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
+  --color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
+  --color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
+  --color-warning: hsl(28, 97.7%, 34.1%);
+  --color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
+  --color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
+  --color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
+  --color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
+  --color-error: hsl(357, 78%, 41%);
+  --color-error-low: hsla(357, 78%, 41%, 0.18);
+  --color-error-medium: hsla(357, 78%, 41%, 0.6);
+  --color-error-frosted: hsla(357, 78%, 41%, 0.18);
+  --color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
+  --color-info: hsl(228, 83.2%, 51%);
+  --color-info-low: hsla(228, 83.2%, 51%, 0.18);
+  --color-info-medium: hsla(228, 83.2%, 51%, 0.6);
+  --color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
+  --color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
   --color-skeleton: #f7f7f7;
 
-  --color-primary-light: #010205;
-  --color-canvas-light: #FFF;
-  --color-surface-light: #EEEFF2;
-  --color-shading-light: rgba(1,2,5,.67);
-  --color-frosted-light: hsl(240 4% 85%/35%);
-  --color-contrast-low-light: #D8D8DB;
-  --color-contrast-medium-light: #6B6D70;
-  --color-contrast-high-light: #535457;
-  --color-success-light: #197E10;
-  --color-success-soft-light: #E4FFEC;
-  --color-warning-light: #F3BE00;
-  --color-warning-soft-light: #FFF4D2;
-  --color-error-light: #CC1922;
-  --color-error-soft-light: #FFE2E4;
-  --color-info-light: #2762EC;
-  --color-info-soft-light: #D3E1FF;
-  --color-hover-light: rgba(148,149,152,.18);
-  --color-active-light: rgba(148,149,152,.2);
-  --color-focus-light: #1A44EA;
-  --color-disabled-light: #949598;
-  --color-skeleton-light: #f7f7f7;
-
-  --color-primary-dark: #FBFCFF;
-  --color-canvas-dark: #0E0E12;
-  --color-surface-dark: #212225;
-  --color-shading-dark: rgba(38,38,41,.67);
-  --color-frosted-dark: hsl(240 3% 26%/35%);
-  --color-contrast-low-dark: #404044;
-  --color-contrast-medium-dark: #88898C;
-  --color-contrast-high-dark: #AFB0B3;
-  --color-success-dark: #09D087;
-  --color-success-soft-dark: #003320;
-  --color-warning-dark: #F7CB47;
-  --color-warning-soft-dark: #362B0A;
-  --color-error-dark: #FC4040;
-  --color-error-soft-dark: #3A0F0F;
-  --color-info-dark: #178BFF;
-  --color-info-soft-dark: #04294E;
-  --color-hover-dark: rgba(148,149,152,.18);
-  --color-active-dark: rgba(126,127,130,.2);
-  --color-focus-dark: #1A44EA;
-  --color-disabled-dark: #7E7F82;
-  --color-skeleton-dark: #1a1b1e;
-
   /* Typography */
-  --font-porsche-next: 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;
+  --font-porsche-next:
+    "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
+  --font-sans: var(--font-porsche-next);
 
   --font-weight-normal: 400;
   --font-weight-semibold: 600;
@@ -77,7 +54,7 @@
 
   --leading-normal: calc(6px + 2.125ex);
 
-  --text-2xs: .75rem;
+  --text-2xs: 0.75rem;
   --text-2xs--line-height: calc(6px + 2.125ex);
   --text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
   --text-xs--line-height: calc(6px + 2.125ex);
@@ -103,7 +80,7 @@
   --breakpoint-2xl: 1920px;
 
   /* Spacing */
-  --spacing: .25rem;
+  --spacing: 0.25rem;
 
   --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
   --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
@@ -120,11 +97,17 @@
   --spacing-static-2xl: 80px;
 
   /* Border */
+  --radius-xs: 2px;
   --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-
-  --default-border-width: 2px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-4xl: 32px;
+  --radius-full: calc(infinity * 1px);
+
+  --default-border-width: 1px;
   --border-width-regular: 2px;
   --border-width-thin: 1px;
 
@@ -132,27 +115,28 @@
   --blur-frosted: 32px;
 
   /* Shadow */
-  --shadow-low: 0px 3px 8px rgba(0,0,0,.16);
-  --shadow-medium: 0px 4px 16px rgba(0,0,0,.16);
-  --shadow-high: 0px 8px 40px rgba(0,0,0,.16);
+  --shadow-low: 0px 3px 8px rgba(0, 0, 0, 0.16);
+  --shadow-medium: 0px 4px 16px rgba(0, 0, 0, 0.16);
+  --shadow-high: 0px 8px 40px rgba(0, 0, 0, 0.16);
 
   /* Outline */
   --default-outline-width: 2px;
 
   /* Motion */
-  --default-transition-timing-function: cubic-bezier(.25,.1,.25,1);
-  --ease-in-out: cubic-bezier(.25,.1,.25,1);
-  --ease-in: cubic-bezier(0,0,.2,1);
-  --ease-out: cubic-bezier(.4,0,.5,1);
-
-  --default-transition-duration: .25s;
-  --transition-duration-short: .25s;
-  --transition-duration-moderate: .4s;
-  --transition-duration-long: .6s;
+  --default-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-in: cubic-bezier(0, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
+
+  --default-transition-duration: 0.25s;
+  --transition-duration-short: 0.25s;
+  --transition-duration-moderate: 0.4s;
+  --transition-duration-long: 0.6s;
   --transition-duration-very-long: 1.2s;
 
   /* Animation */
-  --animate-skeleton: skeleton var(--transition-duration-long) var(--ease-in-out) infinite;
+  --animate-skeleton: skeleton var(--transition-duration-long)
+    var(--ease-in-out) infinite;
 
   @keyframes skeleton {
     from {
@@ -166,75 +150,114 @@
 
 @layer theme {
   .light {
-    --color-primary: #010205;
-    --color-canvas: #FFF;
-    --color-surface: #EEEFF2;
-    --color-shading: rgba(1,2,5,.67);
-    --color-frosted: hsl(240 4% 85%/35%);
-    --color-contrast-low: #D8D8DB;
-    --color-contrast-medium: #6B6D70;
-    --color-contrast-high: #535457;
-    --color-success: #197E10;
-    --color-success-soft: #E4FFEC;
-    --color-warning: #F3BE00;
-    --color-warning-soft: #FFF4D2;
-    --color-error: #CC1922;
-    --color-error-soft: #FFE2E4;
-    --color-info: #2762EC;
-    --color-info-soft: #D3E1FF;
-    --color-hover: rgba(148,149,152,.18);
-    --color-active: rgba(148,149,152,.2);
-    --color-focus: #1A44EA;
-    --color-disabled: #949598;
+    --color-focus: #1a44ea;
+    --color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+    --color-canvas: #fff;
+    --color-surface: hsl(240, 7.7%, 97.5%);
+    --color-frosted: hsla(236, 6.4%, 51%, 0.148);
+    --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+    --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+    --color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
+    --color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
+    --color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
+    --color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
+    --color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
+    --color-primary: hsl(225, 66.7%, 1.2%);
+    --color-success: hsl(115, 77.5%, 27.8%);
+    --color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
+    --color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
+    --color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
+    --color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
+    --color-warning: hsl(28, 97.7%, 34.1%);
+    --color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
+    --color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
+    --color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
+    --color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
+    --color-error: hsl(357, 78%, 41%);
+    --color-error-low: hsla(357, 78%, 41%, 0.18);
+    --color-error-medium: hsla(357, 78%, 41%, 0.6);
+    --color-error-frosted: hsla(357, 78%, 41%, 0.18);
+    --color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
+    --color-info: hsl(228, 83.2%, 51%);
+    --color-info-low: hsla(228, 83.2%, 51%, 0.18);
+    --color-info-medium: hsla(228, 83.2%, 51%, 0.6);
+    --color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
+    --color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
     --color-skeleton: #f7f7f7;
   }
 
   .dark {
-    --color-primary: #FBFCFF;
-    --color-canvas: #0E0E12;
-    --color-surface: #212225;
-    --color-shading: rgba(38,38,41,.67);
-    --color-frosted: hsl(240 3% 26%/35%);
-    --color-contrast-low: #404044;
-    --color-contrast-medium: #88898C;
-    --color-contrast-high: #AFB0B3;
-    --color-success: #09D087;
-    --color-success-soft: #003320;
-    --color-warning: #F7CB47;
-    --color-warning-soft: #362B0A;
-    --color-error: #FC4040;
-    --color-error-soft: #3A0F0F;
-    --color-info: #178BFF;
-    --color-info-soft: #04294E;
-    --color-hover: rgba(148,149,152,.18);
-    --color-active: rgba(126,127,130,.2);
-    --color-focus: #1A44EA;
-    --color-disabled: #7E7F82;
+    --color-focus: #1a44ea;
+    --color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+    --color-canvas: hsl(225, 66.7%, 1.2%);
+    --color-surface: hsl(240, 2%, 10%);
+    --color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+    --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+    --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+    --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+    --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+    --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+    --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+    --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+    --color-primary: hsl(240, 12.5%, 96.9%);
+    --color-success: hsl(157, 84.9%, 41.6%);
+    --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+    --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+    --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
+    --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+    --color-warning: hsl(28, 90.2%, 56.1%);
+    --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+    --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+    --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
+    --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+    --color-error: hsl(0, 96.9%, 62%);
+    --color-error-low: hsla(0, 96.9%, 62%, 0.18);
+    --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+    --color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
+    --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+    --color-info: hsl(210, 100%, 54.5%);
+    --color-info-low: hsla(210, 100%, 54.5%, 0.18);
+    --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+    --color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
+    --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
     --color-skeleton: #1a1b1e;
   }
 
   .auto {
     @media (prefers-color-scheme: dark) {
-      --color-primary: #FBFCFF;
-      --color-canvas: #0E0E12;
-      --color-surface: #212225;
-      --color-shading: rgba(38,38,41,.67);
-      --color-frosted: hsl(240 3% 26%/35%);
-      --color-contrast-low: #404044;
-      --color-contrast-medium: #88898C;
-      --color-contrast-high: #AFB0B3;
-      --color-success: #09D087;
-      --color-success-soft: #003320;
-      --color-warning: #F7CB47;
-      --color-warning-soft: #362B0A;
-      --color-error: #FC4040;
-      --color-error-soft: #3A0F0F;
-      --color-info: #178BFF;
-      --color-info-soft: #04294E;
-      --color-hover: rgba(148,149,152,.18);
-      --color-active: rgba(126,127,130,.2);
-      --color-focus: #1A44EA;
-      --color-disabled: #7E7F82;
+      --color-focus: #1a44ea;
+      --color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+      --color-canvas: hsl(225, 66.7%, 1.2%);
+      --color-surface: hsl(240, 2%, 10%);
+      --color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+      --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+      --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+      --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+      --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+      --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+      --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+      --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+      --color-primary: hsl(240, 12.5%, 96.9%);
+      --color-success: hsl(157, 84.9%, 41.6%);
+      --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+      --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+      --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
+      --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+      --color-warning: hsl(28, 90.2%, 56.1%);
+      --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+      --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+      --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
+      --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+      --color-error: hsl(0, 96.9%, 62%);
+      --color-error-low: hsla(0, 96.9%, 62%, 0.18);
+      --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+      --color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
+      --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+      --color-info: hsl(210, 100%, 54.5%);
+      --color-info-low: hsla(210, 100%, 54.5%, 0.18);
+      --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+      --color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
+      --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
       --color-skeleton: #1a1b1e;
     }
   }
@@ -259,8 +282,7 @@
 
 /* Grid */
 @utility grid-template {
-  @apply
-    [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
+  @apply [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
     [--_pds-grid-col:minmax(0,var(--pds-internal-grid-outer-column,calc(var(--pds-internal-grid-safe-zone)-var(--spacing-fluid-md))))]
     grid
     grid-cols-[[full-start]_var(--_pds-grid-col)_[wide-start_extended-start_basic-start_narrow-start]_repeat(6,minmax(0,1fr))_[narrow-end_basic-end_extended-end_wide-end]_var(--_pds-grid-col)_[full-end]]
@@ -382,19 +404,19 @@
 
 /* Typography: Heading */
 @utility prose-heading-sm {
-  @apply font-porsche-next not-italic font-semibold text-sm text-primary;
+  @apply font-porsche-next not-italic font-normal text-sm text-primary;
 }
 @utility prose-heading-md {
-  @apply font-porsche-next not-italic font-semibold text-md text-primary;
+  @apply font-porsche-next not-italic font-normal text-md text-primary;
 }
 @utility prose-heading-lg {
-  @apply font-porsche-next not-italic font-semibold text-lg text-primary;
+  @apply font-porsche-next not-italic font-normal text-lg text-primary;
 }
 @utility prose-heading-xl {
-  @apply font-porsche-next not-italic font-semibold text-xl text-primary;
+  @apply font-porsche-next not-italic font-normal text-xl text-primary;
 }
 @utility prose-heading-2xl {
-  @apply font-porsche-next not-italic font-semibold text-2xl text-primary;
+  @apply font-porsche-next not-italic font-normal text-2xl text-primary;
 }
 
 /* Typography: Display */
@@ -406,4 +428,4 @@
 }
 @utility prose-display-lg {
   @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.28rem,5.2vw+1.24rem,7.48rem)];
-}
+}

package/tokens/cjs/index.cjs

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

package/tokens/esm/index.d.ts

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

package/tokens/esm/index.mjs

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

package/tokens/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "cjs/index.cjs",
+  "module": "esm/index.mjs",
+  "types": "esm/index.d.ts",
+  "sideEffects": false
+}

package/cjs/lib/components/ButtonGroupWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"ButtonGroupWrapper",props:{direction:{default:()=>({base:"column",xs:"row"})}},setup(r){const s=t.usePrefix("p-button-group"),p=r,o=e.ref(),n=()=>t.syncProperties(o,p);return e.onMounted(n),e.onUpdated(n),(c,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3},512))}});module.exports=u;

package/cjs/lib/components/ButtonGroupWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./ButtonGroupWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/CheckboxWrapperWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),l=e.defineComponent({__name:"CheckboxWrapperWrapper",props:{hideLabel:{type:[Boolean,Object],default:!1},label:{default:""},loading:{type:Boolean,default:!1},message:{default:""},state:{default:"none"},theme:{}},setup(p){const c=t.usePrefix("p-checkbox-wrapper"),o=p,n=e.ref(),r=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(n,{...o,theme:o.theme||r.value});return e.onMounted(a),e.onUpdated(a),e.watch(r,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/CheckboxWrapperWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./CheckboxWrapperWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/ContentWrapperWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"ContentWrapperWrapper",props:{backgroundColor:{default:"transparent"},theme:{},width:{default:"extended"}},setup(c){const a=t.usePrefix("p-content-wrapper"),n=c,o=e.ref(),s=e.inject(t.themeInjectionKey),p=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(p),e.onUpdated(p),e.watch(s,r=>{t.syncProperties(o,{theme:n.theme||r})}),(r,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;

package/cjs/lib/components/ContentWrapperWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./ContentWrapperWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/FieldsetWrapperWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),l=e.defineComponent({__name:"FieldsetWrapperWrapper",props:{label:{default:""},labelSize:{default:"medium"},message:{default:""},required:{type:Boolean,default:!1},state:{default:"none"},theme:{}},setup(a){const c=t.usePrefix("p-fieldset-wrapper"),n=a,o=e.ref(),s=e.inject(t.themeInjectionKey),p=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(p),e.onUpdated(p),e.watch(s,r=>{t.syncProperties(o,{theme:n.theme||r})}),(r,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/FieldsetWrapperWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./FieldsetWrapperWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/FlexItemWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),a=e.defineComponent({__name:"FlexItemWrapper",props:{alignSelf:{default:"auto"},flex:{default:"initial"},grow:{default:0},offset:{default:"none"},shrink:{default:1},width:{default:"auto"}},setup(r){const s=o.usePrefix("p-flex-item"),f=r,t=e.ref(),n=()=>o.syncProperties(t,f);return e.onMounted(n),e.onUpdated(n),(u,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},512))}});module.exports=a;

package/cjs/lib/components/FlexItemWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./FlexItemWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/FlexWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"FlexWrapper",props:{alignContent:{default:"stretch"},alignItems:{default:"stretch"},direction:{default:"row"},inline:{type:[Boolean,Object],default:!1},justifyContent:{default:"flex-start"},wrap:{default:"nowrap"}},setup(r){const s=o.usePrefix("p-flex"),a=r,t=e.ref(),n=()=>o.syncProperties(t,a);return e.onMounted(n),e.onUpdated(n),(p,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/FlexWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./FlexWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/GridItemWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),f=e.defineComponent({__name:"GridItemWrapper",props:{offset:{default:0},size:{default:1}},setup(r){const s=n.usePrefix("p-grid-item"),p=r,t=e.ref(),o=()=>n.syncProperties(t,p);return e.onMounted(o),e.onUpdated(o),(c,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3},512))}});module.exports=f;

package/cjs/lib/components/GridItemWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./GridItemWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/GridWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),r=require("../../utils.cjs"),u=e.defineComponent({__name:"GridWrapper",props:{direction:{default:"row"},gutter:{default:()=>({base:16,s:24,m:36})},wrap:{default:"wrap"}},setup(n){const s=r.usePrefix("p-grid"),p=n,t=e.ref(),o=()=>r.syncProperties(t,p);return e.onMounted(o),e.onUpdated(o),(c,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3},512))}});module.exports=u;

package/cjs/lib/components/GridWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./GridWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/HeadlineWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),l=e.defineComponent({__name:"HeadlineWrapper",props:{align:{default:"start"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},tag:{},theme:{},variant:{default:"headline-1"}},setup(p){const c=t.usePrefix("p-headline"),n=p,o=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(o,{theme:n.theme||r})}),(r,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/HeadlineWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./HeadlineWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/LinkSocialWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),l=e.defineComponent({__name:"LinkSocialWrapper",props:{compact:{type:Boolean,default:!1},hideLabel:{type:[Boolean,Object],default:!1},href:{},icon:{},iconSource:{},rel:{},target:{default:"_self"},theme:{}},setup(a){const p=t.usePrefix("p-link-social"),o=a,n=e.ref(),s=e.inject(t.themeInjectionKey),c=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(c),e.onUpdated(c),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/LinkSocialWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./LinkSocialWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/LinkTileModelSignatureWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"LinkTileModelSignatureWrapper",props:{aspectRatio:{default:"3/4"},description:{},heading:{},headingTag:{default:"h2"},linkDirection:{default:()=>({base:"column",xs:"row"})},model:{default:"911"},weight:{default:"semi-bold"}},setup(r){const s=o.usePrefix("p-link-tile-model-signature"),i=r,t=e.ref(),n=()=>o.syncProperties(t,i);return e.onMounted(n),e.onUpdated(n),(a,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/LinkTileModelSignatureWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./LinkTileModelSignatureWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/MarqueWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),r=require("../../utils.cjs"),p=e.defineComponent({__name:"MarqueWrapper",props:{aria:{},href:{},size:{default:"responsive"},target:{default:"_self"},trademark:{type:Boolean,default:!0},variant:{default:"default"}},setup(o){const s=r.usePrefix("p-marque"),a=o,t=e.ref(),n=()=>r.syncProperties(t,a);return e.onMounted(n),e.onUpdated(n),(u,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},null,512))}});module.exports=p;

package/cjs/lib/components/MarqueWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./MarqueWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/RadioButtonWrapperWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),l=e.defineComponent({__name:"RadioButtonWrapperWrapper",props:{hideLabel:{type:[Boolean,Object],default:!1},label:{default:""},loading:{type:Boolean,default:!1},message:{default:""},state:{default:"none"},theme:{}},setup(p){const c=t.usePrefix("p-radio-button-wrapper"),o=p,n=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/RadioButtonWrapperWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./RadioButtonWrapperWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/SelectWrapperWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),c=e.defineComponent({__name:"SelectWrapperWrapper",props:{description:{default:""},dropdownDirection:{default:"auto"},filter:{type:Boolean,default:!1},hideLabel:{type:[Boolean,Object],default:!1},label:{default:""},message:{default:""},native:{type:Boolean,default:!1},state:{default:"none"},theme:{}},setup(p){const l=t.usePrefix("p-select-wrapper"),o=p,n=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=c;

package/cjs/lib/components/SelectWrapperWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./SelectWrapperWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/TextFieldWrapperWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),c=e.defineComponent({__name:"TextFieldWrapperWrapper",props:{actionIcon:{},actionLoading:{type:Boolean,default:!1},description:{default:""},hideLabel:{type:[Boolean,Object],default:!1},label:{default:""},message:{default:""},showCharacterCount:{type:Boolean},showCounter:{type:Boolean,default:!0},showPasswordToggle:{type:Boolean,default:!0},state:{default:"none"},submitButton:{type:Boolean,default:!0},theme:{},unit:{default:""},unitPosition:{default:"prefix"}},emits:["action"],setup(l,{emit:u}){const i=t.usePrefix("p-text-field-wrapper"),n=l,o=e.ref(),p=u,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(o,"action",p)}),e.onUpdated(r),e.watch(s,a=>{t.syncProperties(o,{theme:n.theme||a})}),(a,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(i)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=c;

package/cjs/lib/components/TextFieldWrapperWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./TextFieldWrapperWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/TextareaWrapperWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"TextareaWrapperWrapper",props:{description:{default:""},hideLabel:{type:[Boolean,Object],default:!1},label:{default:""},message:{default:""},showCharacterCount:{type:Boolean},showCounter:{type:Boolean,default:!0},state:{default:"none"},theme:{}},setup(p){const c=t.usePrefix("p-textarea-wrapper"),o=p,n=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;

package/cjs/lib/components/TextareaWrapperWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./TextareaWrapperWrapper.vue.cjs");module.exports=e;

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

@@ -1,22 +0,0 @@
-import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
-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<ButtonGroupDirection>;
-};
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<PButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PButtonGroupProps> & Readonly<{}>, {
-    direction: BreakpointCustomizable<ButtonGroupDirection>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/esm/lib/components/ButtonGroupWrapper.vue.mjs

@@ -1,23 +0,0 @@
-import { defineComponent as s, ref as c, onMounted as f, onUpdated as u, createBlock as a, openBlock as m, resolveDynamicComponent as d, unref as i, withCtx as l, renderSlot as _ } from "vue";
-import { usePrefix as C, syncProperties as x } from "../../utils.mjs";
-const w = /* @__PURE__ */ s({
-  __name: "ButtonGroupWrapper",
-  props: {
-    direction: { default: () => ({ base: "column", xs: "row" }) }
-  },
-  setup(n) {
-    const t = C("p-button-group"), r = n, e = c(), o = () => x(e, r);
-    return f(o), u(o), (p, y) => (m(), a(d(i(t)), {
-      ref_key: "pdsComponentRef",
-      ref: e
-    }, {
-      default: l(() => [
-        _(p.$slots, "default")
-      ]),
-      _: 3
-    }, 512));
-  }
-});
-export {
-  w as default
-};

package/esm/lib/components/ButtonGroupWrapper.vue2.mjs

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