@porsche-design-system/components-angular 4.0.0-beta.3 → 4.0.0-beta.4

package/tailwindcss/index.css

@@ -11,109 +11,106 @@
   --color-white: #fff;
 
   --color-focus: light-dark(#1a44ea, #1a44ea);
-  --color-canvas: light-dark(#fff, hsl(225, 66.7%, 1.2%));
-  --color-surface: light-dark(hsl(240, 10%, 95%), hsl(240, 2%, 10%));
-  --color-frosted: light-dark(
-    hsla(240, 5%, 70%, 0.148),
-    hsla(240, 2%, 43%, 0.228)
-  );
+  --color-canvas: light-dark(#fff, hsl(225 66.7% 1.2%));
+  --color-surface: light-dark(hsl(240 10% 95%), hsl(240 2% 10%));
+  --color-frosted: light-dark(hsl(240 5% 70% / 0.148), hsl(240 2% 43% / 0.228));
   --color-frosted-soft: light-dark(
-    hsla(234, 9.8%, 60%, 0.06),
-    hsla(240, 3.7%, 26.5%, 0.154)
+    hsl(234 9.8% 60% / 0.06),
+    hsl(240 3.7% 26.5% / 0.154)
   );
   --color-frosted-strong: light-dark(
-    hsla(236, 6.5%, 42%, 0.236),
-    hsla(240, 1.5%, 61.8%, 0.302)
+    hsl(236 6.5% 42% / 0.236),
+    hsl(240 1.5% 61.8% / 0.302)
   );
   --color-backdrop: light-dark(
-    hsla(240, 5.3%, 14.9%, 0.5),
-    hsla(240, 5.3%, 14.9%, 0.5)
+    hsl(240 5.3% 14.9% / 0.5),
+    hsl(240 5.3% 14.9% / 0.5)
   );
   --color-contrast-lower: light-dark(
-    hsla(234, 6%, 32.9%, 0.324),
-    hsla(240, 1.5%, 61.8%, 0.302)
+    hsl(234 6% 32.9% / 0.324),
+    hsl(240 1.5% 61.8% / 0.302)
   );
   --color-contrast-low: light-dark(
-    hsla(240, 5.3%, 14.9%, 0.5),
-    hsla(240, 12.5%, 96.9%, 0.45)
+    hsl(240 5.3% 14.9% / 0.5),
+    hsl(240 12.5% 96.9% / 0.45)
   );
   --color-contrast-medium: light-dark(
-    hsla(240, 6.1%, 7%, 0.6),
-    hsla(240, 12.5%, 96.9%, 0.56)
+    hsl(240 6.1% 7% / 0.6),
+    hsl(240 12.5% 96.9% / 0.56)
   );
   --color-contrast-high: light-dark(
-    hsla(240, 7.1%, 11%, 0.7),
-    hsla(240, 12.5%, 96.9%, 0.67)
+    hsl(240 7.1% 11% / 0.7),
+    hsl(240 12.5% 96.9% / 0.67)
   );
   --color-contrast-higher: light-dark(
-    hsla(240, 8.7%, 9%, 0.8),
-    hsla(240, 12.5%, 96.9%, 0.78)
+    hsl(240 8.7% 9% / 0.8),
+    hsl(240 12.5% 96.9% / 0.78)
   );
-  --color-primary: light-dark(hsl(225, 66.7%, 1.2%), hsl(225, 100%, 99%));
-  --color-success: light-dark(hsl(115, 77.5%, 27.8%), hsl(157, 84.9%, 41.6%));
+  --color-primary: light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%));
+  --color-success: light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%));
   --color-success-low: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.18),
-    hsla(157, 84.9%, 41.6%, 0.18)
+    hsl(115 77.5% 27.8% / 0.18),
+    hsl(157 84.9% 41.6% / 0.18)
   );
   --color-success-medium: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.6),
-    hsla(157, 84.9%, 41.6%, 0.6)
+    hsl(115 77.5% 27.8% / 0.6),
+    hsl(157 84.9% 41.6% / 0.6)
   );
   --color-success-frosted: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.18),
-    hsla(157, 84.9%, 41.6%, 0.26)
+    hsl(115 77.5% 27.8% / 0.18),
+    hsl(157 84.9% 41.6% / 0.26)
   );
   --color-success-frosted-soft: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.1),
-    hsla(157, 84.9%, 41.6%, 0.1)
+    hsl(115 77.5% 27.8% / 0.1),
+    hsl(157 84.9% 41.6% / 0.1)
   );
-  --color-warning: light-dark(hsl(28, 97.7%, 34.1%), hsl(28, 90.2%, 56.1%));
+  --color-warning: light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%));
   --color-warning-low: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.18),
-    hsla(28, 90.2%, 56.1%, 0.18)
+    hsl(28 97.7% 34.1% / 0.18),
+    hsl(28 90.2% 56.1% / 0.18)
   );
   --color-warning-medium: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.6),
-    hsla(28, 90.2%, 56.1%, 0.6)
+    hsl(28 97.7% 34.1% / 0.6),
+    hsl(28 90.2% 56.1% / 0.6)
   );
   --color-warning-frosted: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.18),
-    hsla(28, 90.2%, 56.1%, 0.26)
+    hsl(28 97.7% 34.1% / 0.18),
+    hsl(28 90.2% 56.1% / 0.26)
   );
-  --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
-  --color-error: light-dark(hsl(357, 78%, 41%), hsl(0, 96.9%, 62%));
+  --color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+  --color-error: light-dark(hsl(357 78% 41%), hsl(0 96.9% 62%));
   --color-error-low: light-dark(
-    hsla(357, 78%, 41%, 0.18),
-    hsla(0, 96.9%, 62%, 0.18)
+    hsl(357 78% 41% / 0.18),
+    hsl(0 96.9% 62% / 0.18)
   );
   --color-error-medium: light-dark(
-    hsla(357, 78%, 41%, 0.6),
-    hsla(0, 96.9%, 62%, 0.6)
+    hsl(357 78% 41% / 0.6),
+    hsl(0 96.9% 62% / 0.6)
   );
   --color-error-frosted: light-dark(
-    hsla(357, 78%, 41%, 0.18),
-    hsla(0, 96.9%, 62%, 0.26)
+    hsl(357 78% 41% / 0.18),
+    hsl(0 96.9% 62% / 0.26)
   );
   --color-error-frosted-soft: light-dark(
-    hsla(357, 78%, 41%, 0.1),
-    hsla(0, 96.9%, 62%, 0.1)
+    hsl(357 78% 41% / 0.1),
+    hsl(0 96.9% 62% / 0.1)
   );
-  --color-info: light-dark(hsl(228, 83.2%, 51%), hsl(210, 100%, 54.5%));
+  --color-info: light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%));
   --color-info-low: light-dark(
-    hsla(228, 83.2%, 51%, 0.18),
-    hsla(210, 100%, 54.5%, 0.18)
+    hsl(228 83.2% 51% / 0.18),
+    hsl(210 100% 54.5% / 0.18)
   );
   --color-info-medium: light-dark(
-    hsla(228, 83.2%, 51%, 0.6),
-    hsla(210, 100%, 54.5%, 0.6)
+    hsl(228 83.2% 51% / 0.6),
+    hsl(210 100% 54.5% / 0.6)
   );
   --color-info-frosted: light-dark(
-    hsla(228, 83.2%, 51%, 0.18),
-    hsla(210, 100%, 54.5%, 0.26)
+    hsl(228 83.2% 51% / 0.18),
+    hsl(210 100% 54.5% / 0.26)
   );
   --color-info-frosted-soft: light-dark(
-    hsla(228, 83.2%, 51%, 0.1),
-    hsla(210, 100%, 54.5%, 0.1)
+    hsl(228 83.2% 51% / 0.1),
+    hsl(210 100% 54.5% / 0.1)
   );
 
   /* Typography */
@@ -129,7 +126,7 @@
 
   --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: 0.875rem;
   --text-xs--line-height: calc(6px + 2.125ex);
   --text-base: 1rem;
   --text-base--line-height: calc(6px + 2.125ex);
@@ -249,111 +246,111 @@
     .scheme-light-dark {
       --color-focus: #1a44ea;
       --color-canvas: #fff;
-      --color-surface: hsl(240, 10%, 95%);
-      --color-frosted: hsla(240, 5%, 70%, 0.148);
-      --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
-      --color-frosted-strong: hsla(236, 6.5%, 42%, 0.236);
-      --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-surface: hsl(240 10% 95%);
+      --color-frosted: hsl(240 5% 70% / 0.148);
+      --color-frosted-soft: hsl(234 9.8% 60% / 0.06);
+      --color-frosted-strong: hsl(236 6.5% 42% / 0.236);
+      --color-backdrop: hsl(240 5.3% 14.9% / 0.5);
+      --color-contrast-lower: hsl(234 6% 32.9% / 0.324);
+      --color-contrast-low: hsl(240 5.3% 14.9% / 0.5);
+      --color-contrast-medium: hsl(240 6.1% 7% / 0.6);
+      --color-contrast-high: hsl(240 7.1% 11% / 0.7);
+      --color-contrast-higher: hsl(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: hsl(115 77.5% 27.8% / 0.18);
+      --color-success-medium: hsl(115 77.5% 27.8% / 0.6);
+      --color-success-frosted: hsl(115 77.5% 27.8% / 0.18);
+      --color-success-frosted-soft: hsl(115 77.5% 27.8% / 0.1);
+      --color-warning: hsl(28 97.7% 34.1%);
+      --color-warning-low: hsl(28 97.7% 34.1% / 0.18);
+      --color-warning-medium: hsl(28 97.7% 34.1% / 0.6);
+      --color-warning-frosted: hsl(28 97.7% 34.1% / 0.18);
+      --color-warning-frosted-soft: hsl(28 97.7% 34.1% / 0.1);
+      --color-error: hsl(357 78% 41%);
+      --color-error-low: hsl(357 78% 41% / 0.18);
+      --color-error-medium: hsl(357 78% 41% / 0.6);
+      --color-error-frosted: hsl(357 78% 41% / 0.18);
+      --color-error-frosted-soft: hsl(357 78% 41% / 0.1);
+      --color-info: hsl(228 83.2% 51%);
+      --color-info-low: hsl(228 83.2% 51% / 0.18);
+      --color-info-medium: hsl(228 83.2% 51% / 0.6);
+      --color-info-frosted: hsl(228 83.2% 51% / 0.18);
+      --color-info-frosted-soft: hsl(228 83.2% 51% / 0.1);
     }
 
     .scheme-dark,
     .scheme-only-dark {
       --color-focus: #1a44ea;
-      --color-canvas: hsl(225, 66.7%, 1.2%);
-      --color-surface: hsl(240, 2%, 10%);
-      --color-frosted: hsla(240, 2%, 43%, 0.228);
-      --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
-      --color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
-      --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(225, 100%, 99%);
-      --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.26);
-      --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.26);
-      --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.26);
-      --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.26);
-      --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+      --color-canvas: hsl(225 66.7% 1.2%);
+      --color-surface: hsl(240 2% 10%);
+      --color-frosted: hsl(240 2% 43% / 0.228);
+      --color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
+      --color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
+      --color-backdrop: hsl(240 5.3% 14.9% / 0.5);
+      --color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
+      --color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
+      --color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
+      --color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
+      --color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
+      --color-primary: hsl(225 100% 99%);
+      --color-success: hsl(157 84.9% 41.6%);
+      --color-success-low: hsl(157 84.9% 41.6% / 0.18);
+      --color-success-medium: hsl(157 84.9% 41.6% / 0.6);
+      --color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
+      --color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
+      --color-warning: hsl(28 90.2% 56.1%);
+      --color-warning-low: hsl(28 90.2% 56.1% / 0.18);
+      --color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
+      --color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
+      --color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+      --color-error: hsl(0 96.9% 62%);
+      --color-error-low: hsl(0 96.9% 62% / 0.18);
+      --color-error-medium: hsl(0 96.9% 62% / 0.6);
+      --color-error-frosted: hsl(0 96.9% 62% / 0.26);
+      --color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
+      --color-info: hsl(210 100% 54.5%);
+      --color-info-low: hsl(210 100% 54.5% / 0.18);
+      --color-info-medium: hsl(210 100% 54.5% / 0.6);
+      --color-info-frosted: hsl(210 100% 54.5% / 0.26);
+      --color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
     }
 
     @media (prefers-color-scheme: dark) {
       .scheme-light-dark {
         --color-focus: #1a44ea;
-        --color-canvas: hsl(225, 66.7%, 1.2%);
-        --color-surface: hsl(240, 2%, 10%);
-        --color-frosted: hsla(240, 2%, 43%, 0.228);
-        --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
-        --color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
-        --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(225, 100%, 99%);
-        --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.26);
-        --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.26);
-        --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.26);
-        --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.26);
-        --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+        --color-canvas: hsl(225 66.7% 1.2%);
+        --color-surface: hsl(240 2% 10%);
+        --color-frosted: hsl(240 2% 43% / 0.228);
+        --color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
+        --color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
+        --color-backdrop: hsl(240 5.3% 14.9% / 0.5);
+        --color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
+        --color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
+        --color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
+        --color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
+        --color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
+        --color-primary: hsl(225 100% 99%);
+        --color-success: hsl(157 84.9% 41.6%);
+        --color-success-low: hsl(157 84.9% 41.6% / 0.18);
+        --color-success-medium: hsl(157 84.9% 41.6% / 0.6);
+        --color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
+        --color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
+        --color-warning: hsl(28 90.2% 56.1%);
+        --color-warning-low: hsl(28 90.2% 56.1% / 0.18);
+        --color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
+        --color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
+        --color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+        --color-error: hsl(0 96.9% 62%);
+        --color-error-low: hsl(0 96.9% 62% / 0.18);
+        --color-error-medium: hsl(0 96.9% 62% / 0.6);
+        --color-error-frosted: hsl(0 96.9% 62% / 0.26);
+        --color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
+        --color-info: hsl(210 100% 54.5%);
+        --color-info-low: hsl(210 100% 54.5% / 0.18);
+        --color-info-medium: hsl(210 100% 54.5% / 0.6);
+        --color-info-frosted: hsl(210 100% 54.5% / 0.26);
+        --color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
       }
     }
   }

package/types/porsche-design-system-components-angular.d.ts

@@ -289,6 +289,8 @@ declare const ICON_NAMES: readonly [
     "arrow-double-right",
     "arrow-double-up",
     "arrow-down",
+    "arrow-down-left",
+    "arrow-down-right",
     "arrow-first",
     "arrow-head-down",
     "arrow-head-left",
@@ -298,6 +300,8 @@ declare const ICON_NAMES: readonly [
     "arrow-left",
     "arrow-right",
     "arrow-up",
+    "arrow-up-left",
+    "arrow-up-right",
     "arrows",
     "attachment",
     "augmented-reality",
@@ -467,6 +471,7 @@ declare const ICON_NAMES: readonly [
     "pin-filled",
     "pivot",
     "play",
+    "play-filled",
     "plug",
     "plus",
     "preheating",
@@ -1058,6 +1063,13 @@ declare const HEADING_SIZES: readonly [
     "xx-large"
 ];
 type HeadingSize = (typeof HEADING_SIZES)[number];
+declare const HEADING_HYPHENS: readonly [
+    "none",
+    "manual",
+    "auto",
+    "inherit"
+];
+type HeadingHyphens = (typeof HEADING_HYPHENS)[number];
 declare const ICON_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
@@ -1558,6 +1570,13 @@ declare const TEXT_SIZES: readonly [
     "x-large"
 ];
 type TextSize = (typeof TEXT_SIZES)[number];
+declare const TEXT_HYPHENS: readonly [
+    "none",
+    "manual",
+    "auto",
+    "inherit"
+];
+type TextHyphens = (typeof TEXT_HYPHENS)[number];
 declare const TEXT_LIST_TYPES: readonly [
     "unordered",
     "numbered",
@@ -2439,11 +2458,12 @@ declare class PHeading extends BaseComponent {
     align?: HeadingAlign;
     color?: HeadingColor;
     ellipsis?: boolean;
+    hyphens?: HeadingHyphens;
     size?: BreakpointCustomizable<HeadingSize>;
     tag?: HeadingTag;
     weight?: HeadingWeight;
     static ɵfac: i0.ɵɵFactoryDeclaration<PHeading, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PHeading, "p-heading,[p-heading]", never, { "align": { "alias": "align"; "required": false; }; "color": { "alias": "color"; "required": false; }; "ellipsis": { "alias": "ellipsis"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tag": { "alias": "tag"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PHeading, "p-heading,[p-heading]", never, { "align": { "alias": "align"; "required": false; }; "color": { "alias": "color"; "required": false; }; "ellipsis": { "alias": "ellipsis"; "required": false; }; "hyphens": { "alias": "hyphens"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tag": { "alias": "tag"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 
 declare class PIcon extends BaseComponent {
@@ -2776,11 +2796,12 @@ declare class PText extends BaseComponent {
     align?: TextAlign;
     color?: TextColor;
     ellipsis?: boolean;
+    hyphens?: TextHyphens;
     size?: BreakpointCustomizable<TextSize>;
     tag?: TextTag;
     weight?: TextWeight;
     static ɵfac: i0.ɵɵFactoryDeclaration<PText, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PText, "p-text,[p-text]", never, { "align": { "alias": "align"; "required": false; }; "color": { "alias": "color"; "required": false; }; "ellipsis": { "alias": "ellipsis"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tag": { "alias": "tag"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PText, "p-text,[p-text]", never, { "align": { "alias": "align"; "required": false; }; "color": { "alias": "color"; "required": false; }; "ellipsis": { "alias": "ellipsis"; "required": false; }; "hyphens": { "alias": "hyphens"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tag": { "alias": "tag"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 
 declare class PTextList extends BaseComponent {
@@ -2832,4 +2853,4 @@ declare class ToastManager {
 }
 
 export { DECLARATIONS, PAccordion, PBanner, PButton, PButtonPure, PButtonTile, PCanvas, PCarousel, PCheckbox, PCrest, PDisplay, PDivider, PDrilldown, PDrilldownItem, PDrilldownLink, PFieldset, PFlag, PFlyout, PHeading, PIcon, PInlineNotification, PInputDate, PInputEmail, PInputMonth, PInputNumber, PInputPassword, PInputSearch, PInputTel, PInputText, PInputTime, PInputUrl, PInputWeek, PLink, PLinkPure, PLinkTile, PLinkTileProduct, PModal, PModelSignature, PMultiSelect, PMultiSelectOption, POptgroup, PPagination, PPinCode, PPopover, PRadioGroup, PRadioGroupOption, PScroller, PSegmentedControl, PSegmentedControlItem, PSelect, PSelectOption, PSheet, PSpinner, PStepperHorizontal, PStepperHorizontalItem, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextList, PTextListItem, PTextarea, PToast, PWordmark, PorscheDesignSystemModule, ToastManager };
-export type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, AccordionSize, AccordionUpdateEventDetail, AlignLabel, AriaAttributes, AriaRole, Backdrop, BannerHeadingTag, BannerState, Booleanish, Breakpoint, BreakpointCustomizable, BreakpointValues, ButtonAriaAttribute, ButtonIcon, ButtonPureAlignLabel, ButtonPureAriaAttribute, ButtonPureColor, ButtonPureIcon, ButtonPureSize, ButtonPureType, ButtonTileAlign, ButtonTileAriaAttribute, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight, ButtonType, ButtonVariant, CanvasBackground, CanvasSidebarStartUpdateEventDetail, CarouselAlignControls, CarouselAlignHeader, CarouselAriaAttribute, CarouselHeadingSize, CarouselInternationalization, CarouselSlidesPerPage, CarouselUpdateEventDetail, CarouselWidth, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxState, CrestAriaAttribute, CrestTarget, Direction, DisplayAlign, DisplayColor, DisplaySize, DisplayTag, DividerColor, DividerDirection, DrilldownAriaAttribute, DrilldownLinkAriaAttribute, DrilldownLinkTarget, DrilldownUpdateEventDetail, FieldsetLabelSize, FieldsetState, FlagAriaAttribute, FlagName, FlagSize, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, FormState, GroupDirection, HeadingAlign, HeadingColor, HeadingSize, HeadingTag, HeadingWeight, IconAriaAttribute, IconColor, IconName, IconSize, InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState, InputDateBlurEventDetail, InputDateChangeEventDetail, InputDateInputEventDetail, InputDateState, InputEmailBlurEventDetail, InputEmailChangeEventDetail, InputEmailInputEventDetail, InputEmailState, InputMonthBlurEventDetail, InputMonthChangeEventDetail, InputMonthInputEventDetail, InputMonthState, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, InputPasswordBlurEventDetail, InputPasswordChangeEventDetail, InputPasswordInputEventDetail, InputPasswordState, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState, InputTelBlurEventDetail, InputTelChangeEventDetail, InputTelInputEventDetail, InputTelState, InputTextBlurEventDetail, InputTextChangeEventDetail, InputTextInputEventDetail, InputTextState, InputTimeBlurEventDetail, InputTimeChangeEventDetail, InputTimeInputEventDetail, InputTimeState, InputUrlBlurEventDetail, InputUrlChangeEventDetail, InputUrlInputEventDetail, InputUrlState, InputWeekBlurEventDetail, InputWeekChangeEventDetail, InputWeekInputEventDetail, InputWeekState, LinkAriaAttribute, LinkButtonIconName, LinkButtonVariant, LinkIcon, LinkPureAlignLabel, LinkPureAriaAttribute, LinkPureColor, LinkPureIcon, LinkPureSize, LinkPureTarget, LinkTarget, LinkTileAlign, LinkTileAriaAttribute, LinkTileAspectRatio, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget, LinkTileSize, LinkTileTarget, LinkTileWeight, LinkVariant, ModalAriaAttribute, ModalBackdrop, ModalBackground, ModalMotionHiddenEndEventDetail, ModalMotionVisibleEndEventDetail, ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize, MultiSelectChangeEventDetail, MultiSelectDropdownDirection, MultiSelectState, MultiSelectToggleEventDetail, PaginationInternationalization, PaginationUpdateEventDetail, PinCodeChangeEventDetail, PinCodeLength, PinCodeState, PinCodeType, PopoverAriaAttribute, PopoverDirection, PorscheDesignSystem, PorscheDesignSystemModuleConfig, RadioGroupChangeEventDetail, RadioGroupDirection, RadioGroupState, ScrollerAlignScrollIndicator, ScrollerAriaAttribute, ScrollerScrollToPosition, SegmentedControlChangeEventDetail, SegmentedControlColumns, SegmentedControlItemAriaAttribute, SegmentedControlItemIcon, SegmentedControlState, SelectChangeEventDetail, SelectComponentsDropdownDirection, SelectDropdownDirection, SelectState, SelectToggleEventDetail, SelectedAriaAttributes, SelectedAriaRole, SheetAriaAttribute, SheetBackground, SheetMotionHiddenEndEventDetail, SheetMotionVisibleEndEventDetail, SpinnerAriaAttribute, SpinnerColor, SpinnerSize, StepperHorizontalItemState, StepperHorizontalSize, StepperHorizontalUpdateEventDetail, SwitchAlignLabel, SwitchUpdateEventDetail, TableHeadCellSort, TableLayout, TableUpdateEventDetail, TabsBackground, TabsBarBackground, TabsBarSize, TabsBarUpdateEventDetail, TabsBarWeight, TabsSize, TabsUpdateEventDetail, TabsWeight, TagDismissibleAriaAttribute, TagIcon, TagVariant, TextAlign, TextColor, TextListType, TextSize, TextTag, TextWeight, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, TextareaWrap, TileAlign, TileAspectRatio, TileSize, TileWeight, ToastMessage, ToastState, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget };
+export type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, AccordionSize, AccordionUpdateEventDetail, AlignLabel, AriaAttributes, AriaRole, Backdrop, BannerHeadingTag, BannerState, Booleanish, Breakpoint, BreakpointCustomizable, BreakpointValues, ButtonAriaAttribute, ButtonIcon, ButtonPureAlignLabel, ButtonPureAriaAttribute, ButtonPureColor, ButtonPureIcon, ButtonPureSize, ButtonPureType, ButtonTileAlign, ButtonTileAriaAttribute, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight, ButtonType, ButtonVariant, CanvasBackground, CanvasSidebarStartUpdateEventDetail, CarouselAlignControls, CarouselAlignHeader, CarouselAriaAttribute, CarouselHeadingSize, CarouselInternationalization, CarouselSlidesPerPage, CarouselUpdateEventDetail, CarouselWidth, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxState, CrestAriaAttribute, CrestTarget, Direction, DisplayAlign, DisplayColor, DisplaySize, DisplayTag, DividerColor, DividerDirection, DrilldownAriaAttribute, DrilldownLinkAriaAttribute, DrilldownLinkTarget, DrilldownUpdateEventDetail, FieldsetLabelSize, FieldsetState, FlagAriaAttribute, FlagName, FlagSize, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, FormState, GroupDirection, HeadingAlign, HeadingColor, HeadingHyphens, HeadingSize, HeadingTag, HeadingWeight, IconAriaAttribute, IconColor, IconName, IconSize, InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState, InputDateBlurEventDetail, InputDateChangeEventDetail, InputDateInputEventDetail, InputDateState, InputEmailBlurEventDetail, InputEmailChangeEventDetail, InputEmailInputEventDetail, InputEmailState, InputMonthBlurEventDetail, InputMonthChangeEventDetail, InputMonthInputEventDetail, InputMonthState, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, InputPasswordBlurEventDetail, InputPasswordChangeEventDetail, InputPasswordInputEventDetail, InputPasswordState, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState, InputTelBlurEventDetail, InputTelChangeEventDetail, InputTelInputEventDetail, InputTelState, InputTextBlurEventDetail, InputTextChangeEventDetail, InputTextInputEventDetail, InputTextState, InputTimeBlurEventDetail, InputTimeChangeEventDetail, InputTimeInputEventDetail, InputTimeState, InputUrlBlurEventDetail, InputUrlChangeEventDetail, InputUrlInputEventDetail, InputUrlState, InputWeekBlurEventDetail, InputWeekChangeEventDetail, InputWeekInputEventDetail, InputWeekState, LinkAriaAttribute, LinkButtonIconName, LinkButtonVariant, LinkIcon, LinkPureAlignLabel, LinkPureAriaAttribute, LinkPureColor, LinkPureIcon, LinkPureSize, LinkPureTarget, LinkTarget, LinkTileAlign, LinkTileAriaAttribute, LinkTileAspectRatio, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget, LinkTileSize, LinkTileTarget, LinkTileWeight, LinkVariant, ModalAriaAttribute, ModalBackdrop, ModalBackground, ModalMotionHiddenEndEventDetail, ModalMotionVisibleEndEventDetail, ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize, MultiSelectChangeEventDetail, MultiSelectDropdownDirection, MultiSelectState, MultiSelectToggleEventDetail, PaginationInternationalization, PaginationUpdateEventDetail, PinCodeChangeEventDetail, PinCodeLength, PinCodeState, PinCodeType, PopoverAriaAttribute, PopoverDirection, PorscheDesignSystem, PorscheDesignSystemModuleConfig, RadioGroupChangeEventDetail, RadioGroupDirection, RadioGroupState, ScrollerAlignScrollIndicator, ScrollerAriaAttribute, ScrollerScrollToPosition, SegmentedControlChangeEventDetail, SegmentedControlColumns, SegmentedControlItemAriaAttribute, SegmentedControlItemIcon, SegmentedControlState, SelectChangeEventDetail, SelectComponentsDropdownDirection, SelectDropdownDirection, SelectState, SelectToggleEventDetail, SelectedAriaAttributes, SelectedAriaRole, SheetAriaAttribute, SheetBackground, SheetMotionHiddenEndEventDetail, SheetMotionVisibleEndEventDetail, SpinnerAriaAttribute, SpinnerColor, SpinnerSize, StepperHorizontalItemState, StepperHorizontalSize, StepperHorizontalUpdateEventDetail, SwitchAlignLabel, SwitchUpdateEventDetail, TableHeadCellSort, TableLayout, TableUpdateEventDetail, TabsBackground, TabsBarBackground, TabsBarSize, TabsBarUpdateEventDetail, TabsBarWeight, TabsSize, TabsUpdateEventDetail, TabsWeight, TagDismissibleAriaAttribute, TagIcon, TagVariant, TextAlign, TextColor, TextHyphens, TextListType, TextSize, TextTag, TextWeight, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, TextareaWrap, TileAlign, TileAspectRatio, TileSize, TileWeight, ToastMessage, ToastState, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget };