@porsche-design-system/components-react 3.17.0-rc.0 → 3.17.0-rc.2

package/CHANGELOG.md

@@ -14,6 +14,29 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.17.0-rc.2] - 2024-08-01
+
+#### Fixed
+
+- `Optgoup`: hydration error in Next.js SSR context
+  ([#3432](https://github.com/porsche-design-system/porsche-design-system/pull/3432))
+- `Select`: ensure slotted image width
+  ([#3432](https://github.com/porsche-design-system/porsche-design-system/pull/3432))
+
+### [3.17.0-rc.1] - 2024-07-31
+
+#### Added
+
+- `Button`, `Link`:
+  - Prop `variant` extended by value `ghost`
+    ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))
+  - Prop `compact` ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))
+
+#### Fixed
+
+- `Tabs Bar`: fixed tabindex issue when `Tabs Bar` is rendered with the `Scroller` component
+  ([#3421](https://github.com/porsche-design-system/porsche-design-system/pull/3421))
+
 ### [3.17.0-rc.0] - 2024-07-29
 
 #### Added
@@ -75,12 +98,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 - `Link Pure`: Broken with `alignLabel="start"`, hidden label & nested anchor
   ([#3379](https://github.com/porsche-design-system/porsche-design-system/pull/3379))
-- `PTextFieldWrapper`, `PTextareaWrapper`: Conditionally rendered component throws
+- `Textfield Wrapper`, `Textarea Wrapper`: Conditionally rendered component throws
   `TypeError: Cannot read properties of undefined (reading 'type')`
   ([#3383](https://github.com/porsche-design-system/porsche-design-system/pull/3383))
-- `LinkTile`: Broken word-break & hyphens Safari
+- `Link Tile`: Broken word-break & hyphens Safari
   ([#3397](https://github.com/porsche-design-system/porsche-design-system/pull/3397))
-- `Select-Wrapper`: `optgroup` styling and behavior
+- `Select Wrapper`: `optgroup` styling and behavior
   ([#3410](https://github.com/porsche-design-system/porsche-design-system/pull/3410))
 
 ### [3.16.0] - 2024-07-02

package/cjs/lib/components/button.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButton = react.forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
+const PButton = react.forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/link-social.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLinkSocial = react.forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, ...rest }, ref) => {
+const PLinkSocial = react.forwardRef(({ compact = false, hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-social');
-    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme()];
+    const propsToSync = [compact, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/link.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
+const PLink = react.forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link');
-    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme(), variant];
+    const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/button.wrapper.d.ts

@@ -5,6 +5,10 @@ export type PButtonProps = BaseProps & {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -51,6 +55,10 @@ export declare const PButton: import("react").ForwardRefExoticComponent<import("
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */

package/esm/lib/components/button.wrapper.mjs

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PButton = forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
+const PButton = forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/link-social.wrapper.d.ts

@@ -1,6 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkSocialIcon, LinkSocialTarget, Theme } from '../types';
 export type PLinkSocialProps = BaseProps & {
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Show or hide label.
      */
@@ -31,6 +35,10 @@ export type PLinkSocialProps = BaseProps & {
     theme?: Theme;
 };
 export declare const PLinkSocial: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Show or hide label.
      */

package/esm/lib/components/link-social.wrapper.mjs

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, ...rest }, ref) => {
+const PLinkSocial = forwardRef(({ compact = false, hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-social');
-    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme || useTheme()];
+    const propsToSync = [compact, hideLabel, href, icon, iconSource, rel, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/link.wrapper.d.ts

@@ -5,6 +5,10 @@ export type PLinkProps = BaseProps & {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -47,6 +51,10 @@ export declare const PLink: import("react").ForwardRefExoticComponent<import("re
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */

package/esm/lib/components/link.wrapper.mjs

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLink = forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
+const PLink = forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link');
-    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme || useTheme(), variant];
+    const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme || useTheme(), variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/types.d.ts

@@ -606,9 +606,10 @@ export type ButtonType = typeof BUTTON_TYPES[number];
 declare const LINK_BUTTON_VARIANTS: readonly [
     "primary",
     "secondary",
+    "ghost",
     "tertiary"
 ];
-export type LinkButtonVariant = typeof LINK_BUTTON_VARIANTS[number];
+export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
 export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.17.0-rc.0",
+  "version": "3.17.0-rc.2",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.17.0-rc.0"
+    "@porsche-design-system/components-js": "3.17.0-rc.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs

@@ -3161,10 +3161,10 @@ const hasWindow = typeof window !== 'undefined';
 const isHighContrastMode = hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
 
 const lighten = (hsl) => {
-    return changeColor(hsl, 10);
+    return changeColor(hsl, 15);
 };
 const darken = (hsl) => {
-    return changeColor(hsl, -10);
+    return changeColor(hsl, -15);
 };
 const changeColor = (hsl, lightness) => {
     return hsl.replace(/\s(\d+)(%?)\//, (_, p1, p2) => {
@@ -4494,7 +4494,7 @@ const getComponentCss$13 = (isDisabledOrLoading, aspectRatio, size, weight, back
 const { primaryColor: darkThemePrimaryColor } = getThemedColors('dark');
 const { primaryColor: lightThemePrimaryColor } = getThemedColors('light');
 const getVariantColors = (variant, theme) => {
-    const { primaryColor, contrastHighColor, contrastMediumColor, hoverColor } = getThemedColors(theme);
+    const { primaryColor, contrastHighColor, contrastMediumColor, hoverColor, backgroundFrostedColor } = getThemedColors(theme);
     const { canvasColor } = getHighContrastColors();
     const colors = {
         primary: {
@@ -4511,15 +4511,24 @@ const getVariantColors = (variant, theme) => {
             backgroundColor: isHighContrastMode ? canvasColor : 'transparent',
             backgroundColorHover: hoverColor,
         },
+        ghost: {
+            textColor: primaryColor,
+            borderColor: backgroundFrostedColor,
+            borderColorHover: theme === 'dark' ? lighten(backgroundFrostedColor) : darken(backgroundFrostedColor),
+            backgroundColor: backgroundFrostedColor,
+            backgroundColorHover: theme === 'dark' ? lighten(backgroundFrostedColor) : darken(backgroundFrostedColor),
+        },
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, theme) => {
+const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, compact, theme) => {
     const isPrimary = variant === 'primary';
     const { textColor, borderColor, borderColorHover, backgroundColor, backgroundColorHover } = getVariantColors(variant, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, borderColorHover: borderColorHoverDark, backgroundColor: backgroundColorDark, backgroundColorHover: backgroundColorHoverDark, } = getVariantColors(variant, 'dark');
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
+    const paddingBlock = compact ? '4px' : '13px';
+    const paddingInline = compact ? '12px' : '26px';
     return {
         '@global': {
             ':host': {
@@ -4537,23 +4546,22 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             alignItems: 'flex-start',
             justifyContent: 'center',
             width: '100%',
-            minWidth: '54px', // ensure space is already reserved until icon component is loaded (ssr)
-            minHeight: '54px', // ensure space is already reserved until icon component is loaded (ssr)
             boxSizing: 'border-box',
             textAlign: 'start',
             WebkitAppearance: 'none', // iOS safari
             appearance: 'none',
             textDecoration: 'none',
-            border: `2px solid ${borderColor}`,
+            border: `${borderWidthBase} solid ${borderColor}`,
             borderRadius: borderRadiusSmall,
             transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
             backgroundColor,
+            ...(variant === 'ghost' && { ...frostedGlassStyle, backgroundClip: 'padding-box' }), // background color overlays border-color otherwise
             color: textColor,
             ...textSmallStyle,
             transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
             ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                padding: hideLabelValue ? '13px' : '13px 26px',
-                gap: hideLabelValue ? 0 : spacingStaticSmall,
+                padding: hideLabelValue ? paddingBlock : `${paddingBlock} ${paddingInline}`,
+                gap: hideLabelValue ? 0 : compact ? '6px' : spacingStaticSmall,
             })),
             ...(!hasSlottedAnchor && getFocusJssStyle(theme)),
             ...(!isDisabledOrLoading &&
@@ -4577,10 +4585,10 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
         label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle),
         ...(hasIcon && {
             icon: {
-                width: fontLineHeight,
-                height: fontLineHeight,
+                width: fontLineHeight, // ensure space is already reserved until icon component is loaded (ssr)
+                height: fontLineHeight, // ensure space is already reserved until icon component is loaded (ssr)
                 ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                    marginInlineStart: hideLabelValue ? 0 : '-8px', // compensate white space of svg icon and optimize visual alignment
+                    marginInlineStart: hideLabelValue ? 0 : compact ? '-6px' : '-8px', // compensate white space of svg icon and optimize visual alignment
                 })),
             },
         }),
@@ -4588,7 +4596,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
 };
 
 const getDisabledColors = (variant, loading, theme) => {
-    const { contrastMediumColor, contrastHighColor, disabledColor, hoverColor } = getThemedColors(theme);
+    const { contrastMediumColor, contrastHighColor, disabledColor, hoverColor, backgroundFrostedColor } = getThemedColors(theme);
     const { canvasColor } = getHighContrastColors();
     const colors = {
         primary: {
@@ -4601,15 +4609,20 @@ const getDisabledColors = (variant, loading, theme) => {
             borderColor: isHighContrastMode ? disabledColor : loading ? contrastMediumColor : disabledColor,
             backgroundColor: isHighContrastMode ? canvasColor : loading ? hoverColor : 'transparent',
         },
+        ghost: {
+            textColor: disabledColor,
+            borderColor: isHighContrastMode ? disabledColor : loading ? backgroundFrostedColor : backgroundFrostedColor,
+            backgroundColor: isHighContrastMode ? canvasColor : loading ? backgroundFrostedColor : backgroundFrostedColor,
+        },
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$12 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$12 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
     const isPrimary = variant === 'primary';
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, theme), {
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, compact, theme), {
         root: {
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
             ...(disabledOrLoading && {
@@ -6613,10 +6626,10 @@ const getComponentCss$J = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$I = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$I = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
     const { linkColor } = getHighContrastColors();
     const isPrimary = variant === 'primary';
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), {
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, compact, theme), {
         label: {
             clip: addImportantToRule('unset'), // to overrule breakpoint customizable hide-label style
         },
@@ -7716,6 +7729,7 @@ const getComponentCss$z = (theme) => {
             '::slotted(img)': {
                 height: fontLineHeight,
                 borderRadius: borderRadiusSmall,
+                width: 'auto',
             },
         }),
         ...getOptionStyles(theme),

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/button.wrapper.cjs

@@ -7,13 +7,13 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var button = require('../dsr-components/button.cjs');
 
-const PButton = react.forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
+const PButton = react.forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PButton = react.forwardRef(({ aria, disabled = false, hideLabel = false, i
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(button.DSRButton, { aria, disabled, hideLabel, icon, iconSource, loading, name, theme: theme || hooks.useTheme(), type, value, variant, children })),
+                children: (jsxRuntime.jsx(button.DSRButton, { aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme: theme || hooks.useTheme(), type, value, variant, children })),
             }
             : {
                 children,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link-social.wrapper.cjs

@@ -7,13 +7,13 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var linkSocial = require('../dsr-components/link-social.cjs');
 
-const PLinkSocial = react.forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, children, ...rest }, ref) => {
+const PLinkSocial = react.forwardRef(({ compact = false, hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-social');
-    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme()];
+    const propsToSync = [compact, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PLinkSocial = react.forwardRef(({ hideLabel = false, href, icon, iconSourc
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(linkSocial.DSRLinkSocial, { hideLabel, href, icon, iconSource, rel, target, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(linkSocial.DSRLinkSocial, { compact, hideLabel, href, icon, iconSource, rel, target, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link.wrapper.cjs

@@ -7,13 +7,13 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var link = require('../dsr-components/link.cjs');
 
-const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, children, ...rest }, ref) => {
+const PLink = react.forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link');
-    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme(), variant];
+    const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(link.DSRLink, { aria, download, hideLabel, href, icon, iconSource, rel, target, theme: theme || hooks.useTheme(), variant, children })),
+                children: (jsxRuntime.jsx(link.DSRLink, { aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme: theme || hooks.useTheme(), variant, children })),
             }
             : {
                 children,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.cjs

@@ -87,7 +87,7 @@ class DSRButton extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.compact, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" })), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: this.props.disabled ? (this.props.variant === 'primary' ? 'contrast-high' : 'state-disabled') : 'primary', theme: this.props.theme, "aria-hidden": "true" })), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-social.cjs

@@ -88,7 +88,7 @@ class DSRLinkSocial extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkCss(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkCss(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link.cjs

@@ -87,7 +87,7 @@ class DSRLink extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, !this.props.href, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/optgroup.cjs

@@ -15,8 +15,11 @@ class DSROptgroup extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const { theme = 'light', hidden } = this.props;
-        minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getOptgroupCss(this.props.disabled, theme)));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getOptgroupCss(this.props.disabled, theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { role: "group", className: Object.entries({
+                                    optgroup: true,
+                                    'optgroup--disabled': this.props.disabled,
+                                }).map(([key, value]) => value && key).filter(Boolean).join(' '), "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": "label", children: [jsxRuntime.jsx("span", { className: "label", role: "presentation", id: "label", children: this.props.label }), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -3159,10 +3159,10 @@ const hasWindow = typeof window !== 'undefined';
 const isHighContrastMode = hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
 
 const lighten = (hsl) => {
-    return changeColor(hsl, 10);
+    return changeColor(hsl, 15);
 };
 const darken = (hsl) => {
-    return changeColor(hsl, -10);
+    return changeColor(hsl, -15);
 };
 const changeColor = (hsl, lightness) => {
     return hsl.replace(/\s(\d+)(%?)\//, (_, p1, p2) => {
@@ -4492,7 +4492,7 @@ const getComponentCss$13 = (isDisabledOrLoading, aspectRatio, size, weight, back
 const { primaryColor: darkThemePrimaryColor } = getThemedColors('dark');
 const { primaryColor: lightThemePrimaryColor } = getThemedColors('light');
 const getVariantColors = (variant, theme) => {
-    const { primaryColor, contrastHighColor, contrastMediumColor, hoverColor } = getThemedColors(theme);
+    const { primaryColor, contrastHighColor, contrastMediumColor, hoverColor, backgroundFrostedColor } = getThemedColors(theme);
     const { canvasColor } = getHighContrastColors();
     const colors = {
         primary: {
@@ -4509,15 +4509,24 @@ const getVariantColors = (variant, theme) => {
             backgroundColor: isHighContrastMode ? canvasColor : 'transparent',
             backgroundColorHover: hoverColor,
         },
+        ghost: {
+            textColor: primaryColor,
+            borderColor: backgroundFrostedColor,
+            borderColorHover: theme === 'dark' ? lighten(backgroundFrostedColor) : darken(backgroundFrostedColor),
+            backgroundColor: backgroundFrostedColor,
+            backgroundColorHover: theme === 'dark' ? lighten(backgroundFrostedColor) : darken(backgroundFrostedColor),
+        },
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, theme) => {
+const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, compact, theme) => {
     const isPrimary = variant === 'primary';
     const { textColor, borderColor, borderColorHover, backgroundColor, backgroundColorHover } = getVariantColors(variant, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, borderColorHover: borderColorHoverDark, backgroundColor: backgroundColorDark, backgroundColorHover: backgroundColorHoverDark, } = getVariantColors(variant, 'dark');
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
+    const paddingBlock = compact ? '4px' : '13px';
+    const paddingInline = compact ? '12px' : '26px';
     return {
         '@global': {
             ':host': {
@@ -4535,23 +4544,22 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             alignItems: 'flex-start',
             justifyContent: 'center',
             width: '100%',
-            minWidth: '54px', // ensure space is already reserved until icon component is loaded (ssr)
-            minHeight: '54px', // ensure space is already reserved until icon component is loaded (ssr)
             boxSizing: 'border-box',
             textAlign: 'start',
             WebkitAppearance: 'none', // iOS safari
             appearance: 'none',
             textDecoration: 'none',
-            border: `2px solid ${borderColor}`,
+            border: `${borderWidthBase} solid ${borderColor}`,
             borderRadius: borderRadiusSmall,
             transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
             backgroundColor,
+            ...(variant === 'ghost' && { ...frostedGlassStyle, backgroundClip: 'padding-box' }), // background color overlays border-color otherwise
             color: textColor,
             ...textSmallStyle,
             transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
             ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                padding: hideLabelValue ? '13px' : '13px 26px',
-                gap: hideLabelValue ? 0 : spacingStaticSmall,
+                padding: hideLabelValue ? paddingBlock : `${paddingBlock} ${paddingInline}`,
+                gap: hideLabelValue ? 0 : compact ? '6px' : spacingStaticSmall,
             })),
             ...(!hasSlottedAnchor && getFocusJssStyle(theme)),
             ...(!isDisabledOrLoading &&
@@ -4575,10 +4583,10 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
         label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle),
         ...(hasIcon && {
             icon: {
-                width: fontLineHeight,
-                height: fontLineHeight,
+                width: fontLineHeight, // ensure space is already reserved until icon component is loaded (ssr)
+                height: fontLineHeight, // ensure space is already reserved until icon component is loaded (ssr)
                 ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                    marginInlineStart: hideLabelValue ? 0 : '-8px', // compensate white space of svg icon and optimize visual alignment
+                    marginInlineStart: hideLabelValue ? 0 : compact ? '-6px' : '-8px', // compensate white space of svg icon and optimize visual alignment
                 })),
             },
         }),
@@ -4586,7 +4594,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
 };
 
 const getDisabledColors = (variant, loading, theme) => {
-    const { contrastMediumColor, contrastHighColor, disabledColor, hoverColor } = getThemedColors(theme);
+    const { contrastMediumColor, contrastHighColor, disabledColor, hoverColor, backgroundFrostedColor } = getThemedColors(theme);
     const { canvasColor } = getHighContrastColors();
     const colors = {
         primary: {
@@ -4599,15 +4607,20 @@ const getDisabledColors = (variant, loading, theme) => {
             borderColor: isHighContrastMode ? disabledColor : loading ? contrastMediumColor : disabledColor,
             backgroundColor: isHighContrastMode ? canvasColor : loading ? hoverColor : 'transparent',
         },
+        ghost: {
+            textColor: disabledColor,
+            borderColor: isHighContrastMode ? disabledColor : loading ? backgroundFrostedColor : backgroundFrostedColor,
+            backgroundColor: isHighContrastMode ? canvasColor : loading ? backgroundFrostedColor : backgroundFrostedColor,
+        },
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$12 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$12 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
     const isPrimary = variant === 'primary';
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, theme), {
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, compact, theme), {
         root: {
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
             ...(disabledOrLoading && {
@@ -6611,10 +6624,10 @@ const getComponentCss$J = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$I = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$I = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
     const { linkColor } = getHighContrastColors();
     const isPrimary = variant === 'primary';
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), {
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, compact, theme), {
         label: {
             clip: addImportantToRule('unset'), // to overrule breakpoint customizable hide-label style
         },
@@ -7714,6 +7727,7 @@ const getComponentCss$z = (theme) => {
             '::slotted(img)': {
                 height: fontLineHeight,
                 borderRadius: borderRadiusSmall,
+                width: 'auto',
             },
         }),
         ...getOptionStyles(theme),

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button.wrapper.mjs

@@ -5,13 +5,13 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRButton } from '../dsr-components/button.mjs';
 
-const PButton = forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
+const PButton = forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,7 +22,7 @@ const PButton = forwardRef(({ aria, disabled = false, hideLabel = false, icon =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRButton, { aria, disabled, hideLabel, icon, iconSource, loading, name, theme: theme || useTheme(), type, value, variant, children })),
+                children: (jsx(DSRButton, { aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme: theme || useTheme(), type, value, variant, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-social.wrapper.mjs

@@ -5,13 +5,13 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkSocial } from '../dsr-components/link-social.mjs';
 
-const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, children, ...rest }, ref) => {
+const PLinkSocial = forwardRef(({ compact = false, hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-social');
-    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme || useTheme()];
+    const propsToSync = [compact, hideLabel, href, icon, iconSource, rel, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,7 +22,7 @@ const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLinkSocial, { hideLabel, href, icon, iconSource, rel, target, theme: theme || useTheme(), children })),
+                children: (jsx(DSRLinkSocial, { compact, hideLabel, href, icon, iconSource, rel, target, theme: theme || useTheme(), children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link.wrapper.mjs

@@ -5,13 +5,13 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRLink } from '../dsr-components/link.mjs';
 
-const PLink = forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, children, ...rest }, ref) => {
+const PLink = forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link');
-    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme || useTheme(), variant];
+    const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme || useTheme(), variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,7 +22,7 @@ const PLink = forwardRef(({ aria, download, hideLabel = false, href, icon = 'non
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLink, { aria, download, hideLabel, href, icon, iconSource, rel, target, theme: theme || useTheme(), variant, children })),
+                children: (jsx(DSRLink, { aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme: theme || useTheme(), variant, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.mjs

@@ -85,7 +85,7 @@ class DSRButton extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.compact, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingId : undefined, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: this.props.disabled ? (this.props.variant === 'primary' ? 'contrast-high' : 'state-disabled') : 'primary', theme: this.props.theme, "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-social.mjs

@@ -86,7 +86,7 @@ class DSRLinkSocial extends Component {
     render() {
         splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link.mjs

@@ -85,7 +85,7 @@ class DSRLink extends Component {
     render() {
         splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, !this.props.href, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/optgroup.mjs

@@ -1,4 +1,4 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
@@ -13,8 +13,11 @@ class DSROptgroup extends Component {
     render() {
         splitChildren(this.props.children);
         const { theme = 'light', hidden } = this.props;
-        minifyCss(stripFocusAndHoverStyles(getComponentCss$y(this.props.disabled, theme)));
-        return (jsx(Fragment, {}));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$y(this.props.disabled, theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { role: "group", className: Object.entries({
+                                    optgroup: true,
+                                    'optgroup--disabled': this.props.disabled,
+                                }).map(([key, value]) => value && key).filter(Boolean).join(' '), "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": "label", children: [jsx("span", { className: "label", role: "presentation", id: "label", children: this.props.label }), jsx("slot", {})] }) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/lib/components/button.wrapper.d.ts

@@ -5,6 +5,10 @@ export type PButtonProps = BaseProps & {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -51,6 +55,10 @@ export declare const PButton: import("react").ForwardRefExoticComponent<import("
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */

package/ssr/esm/lib/components/link-social.wrapper.d.ts

@@ -1,6 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkSocialIcon, LinkSocialTarget, Theme } from '../types';
 export type PLinkSocialProps = BaseProps & {
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Show or hide label.
      */
@@ -31,6 +35,10 @@ export type PLinkSocialProps = BaseProps & {
     theme?: Theme;
 };
 export declare const PLinkSocial: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Show or hide label.
      */

package/ssr/esm/lib/components/link.wrapper.d.ts

@@ -5,6 +5,10 @@ export type PLinkProps = BaseProps & {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -47,6 +51,10 @@ export declare const PLink: import("react").ForwardRefExoticComponent<import("re
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */

package/ssr/esm/lib/dsr-components/optgroup.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { OptgroupInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+import { type OptgroupInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 /**
  * @slot {"name": "", "description": "Default slot for the optgroup content." }
  */

package/ssr/esm/lib/types.d.ts

@@ -606,9 +606,10 @@ export type ButtonType = typeof BUTTON_TYPES[number];
 declare const LINK_BUTTON_VARIANTS: readonly [
     "primary",
     "secondary",
+    "ghost",
     "tertiary"
 ];
-export type LinkButtonVariant = typeof LINK_BUTTON_VARIANTS[number];
+export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
 export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;