@porsche-design-system/components-react 3.34.0 → 3.35.0-rc.0

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

@@ -0,0 +1,36 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var aiTag = require('../dsr-components/ai-tag.cjs');
+
+const PAiTag = /*#__PURE__*/ react.forwardRef(({ locale = 'en_US', theme, variant = 'generated', className, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    const WebComponentTag = hooks.usePrefix('p-ai-tag');
+    const propsToSync = [locale, theme || hooks.useTheme(), variant];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['locale', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(aiTag.DSRAiTag, { locale, theme: theme || hooks.useTheme(), variant })),
+            }
+            : {
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PAiTag = PAiTag;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+
+class DSRAiTag extends react.Component {
+    host;
+    render() {
+        const { short, long, generated, modified } = utilsEntry.getAiTagTranslation(this.props.locale);
+        const style = minifyCss.minifyCss(stylesEntry.getAiTagCss(this.props.theme));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("div", { children: this.props.variant !== 'abbreviation' ? (this.props.variant === 'modified' ? (modified) : (generated)) : (jsxRuntime.jsx("abbr", { title: long, children: short })) })] }) }));
+    }
+}
+
+exports.DSRAiTag = DSRAiTag;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/public-api.cjs

@@ -2,6 +2,7 @@
 
 var componentsJs = require('@porsche-design-system/components-js');
 var accordion_wrapper = require('./lib/components/accordion.wrapper.cjs');
+var aiTag_wrapper = require('./lib/components/ai-tag.wrapper.cjs');
 var banner_wrapper = require('./lib/components/banner.wrapper.cjs');
 var button_wrapper = require('./lib/components/button.wrapper.cjs');
 var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.cjs');
@@ -101,6 +102,7 @@ Object.defineProperty(exports, "componentsReady", {
 	get: function () { return componentsJs.componentsReady; }
 });
 exports.PAccordion = accordion_wrapper.PAccordion;
+exports.PAiTag = aiTag_wrapper.PAiTag;
 exports.PBanner = banner_wrapper.PBanner;
 exports.PButton = button_wrapper.PButton;
 exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;

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

@@ -3641,7 +3641,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.34.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.35.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -4037,7 +4037,7 @@ const forcedColorsMediaQuery = (style) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$1p = (size, compact, open, theme, sticky) => {
+const getComponentCss$1q = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4183,6 +4183,66 @@ const getComponentCss$1p = (size, compact, open, theme, sticky) => {
     });
 };
 
+const getInlineSVGBackgroundImage = (path) => {
+    return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
+};
+
+// SVG path data extracted from packages/assets/projects/icons/dist/icons/ai-spark-filled.svg (optimized)
+const AI_TAG_ICON_PATH = '<path d="M10.85 6.39c.54 2.84.8 4.26 1.65 5.1s2.27 1.12 5.11 1.66c.52.18.52.52 0 .7-2.82.53-4.24.8-5.09 1.63-.86.85-1.13 2.27-1.67 5.13-.18.52-.52.52-.7 0-.54-2.84-.8-4.26-1.65-5.1s-2.27-1.12-5.11-1.66c-.52-.18-.52-.52 0-.7 2.84-.54 4.26-.8 5.1-1.65s1.12-2.27 1.66-5.11c.18-.52.52-.52.7 0m6.81-3.2c.25 1.32.38 1.98.77 2.38s1.06.52 2.39.77c.24.08.24.24 0 .32-1.3.25-1.97.38-2.36.75-.41.4-.54 1.06-.8 2.4-.08.25-.24.25-.32 0-.24-1.25-.37-1.91-.72-2.31-.39-.45-1.05-.57-2.44-.84-.24-.08-.24-.24 0-.32 1.33-.25 1.99-.38 2.38-.77s.53-1.06.78-2.39c.08-.24.24-.24.32 0"/>';
+
+const getComponentCss$1p = (theme) => {
+    const { backgroundFrostedColor, contrastHighColor } = getThemedColors(theme);
+    const { backgroundFrostedColor: backgroundFrostedColorDark, contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
+    const iconMask = `${getInlineSVGBackgroundImage(AI_TAG_ICON_PATH)} center/contain no-repeat`;
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'inline-flex',
+                verticalAlign: 'top',
+                whiteSpace: 'nowrap',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            abbr: {
+                all: 'unset',
+            },
+            div: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '2px',
+                padding: '1px 6px 1px 4px',
+                borderRadius: borderRadiusSmall,
+                font: textXXSmallStyle.font,
+                color: contrastHighColor,
+                background: backgroundFrostedColor,
+                ...frostedGlassStyle,
+                ...(isHighContrastMode && {
+                    outline: '1px solid transparent',
+                }),
+                transition: `${getTransition('color')}, ${getTransition('background-color')}, ${getTransition('backdrop-filter')}`,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastHighColorDark,
+                    background: backgroundFrostedColorDark,
+                }),
+                '&::before': {
+                    content: '""',
+                    width: '1rem',
+                    height: '1rem',
+                    backgroundColor: contrastHighColor,
+                    mask: iconMask,
+                    WebkitMask: iconMask,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        backgroundColor: contrastHighColorDark,
+                    }),
+                    ...(isHighContrastMode && { backgroundColor: 'CanvasText' }),
+                },
+            },
+        },
+    });
+};
+
 const TOAST_Z_INDEX = 999999;
 const BANNER_Z_INDEX = 99;
 
@@ -5642,10 +5702,6 @@ const escapeHashCharacter = (colorString) => {
     return colorString.replace('#', '%23');
 };
 
-const getInlineSVGBackgroundImage = (path) => {
-    return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
-};
-
 const getFunctionalComponentRequiredStyles = () => {
     return {
         required: {
@@ -12291,4 +12347,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1p as getAccordionCss, getComponentCss$1o as getBannerCss, getComponentCss$1k as getButtonCss, getComponentCss$1n as getButtonGroupCss, getComponentCss$1m as getButtonPureCss, getComponentCss$1l as getButtonTileCss, getComponentCss$1j as getCanvasCss, getComponentCss$1i as getCarouselCss, getComponentCss$1g as getCheckboxCss, getComponentCss$1h as getCheckboxWrapperCss, getComponentCss$1f as getContentWrapperCss, getComponentCss$1e as getCrestCss, getComponentCss$1d as getDisplayCss, getComponentCss$1c as getDividerCss, getComponentCss$1b as getDrilldownCss, getComponentCss$1a as getDrilldownItemCss, getComponentCss$19 as getDrilldownLinkCss, getComponentCss$17 as getFieldsetCss, getComponentCss$18 as getFieldsetWrapperCss, getComponentCss$16 as getFlagCss, getComponentCss$14 as getFlexCss, getComponentCss$15 as getFlexItemCss, getComponentCss$13 as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$11 as getGridCss, getComponentCss$12 as getGridItemCss, getComponentCss$10 as getHeadingCss, getComponentCss$$ as getHeadlineCss, getComponentCss$_ as getIconCss, getComponentCss$Z as getInlineNotificationCss, getComponentCss$Y as getInputDateCss, getComponentCss$X as getInputEmailCss, getComponentCss$W as getInputMonthCss, getComponentCss$V as getInputNumberCss, getComponentCss$U as getInputPasswordCss, getComponentCss$T as getInputSearchCss, getComponentCss$S as getInputTelCss, getComponentCss$R as getInputTextCss, getComponentCss$Q as getInputTimeCss, getComponentCss$P as getInputUrlCss, getComponentCss$O as getInputWeekCss, getComponentCss$M as getLinkCss, getComponentCss$N as getLinkPureCss, getComponentCss$M as getLinkSocialCss, getComponentCss$J as getLinkTileCss, getComponentCss$L as getLinkTileModelSignatureCss, getComponentCss$K as getLinkTileProductCss, getComponentCss$I as getMarqueCss, getComponentCss$H as getModalCss, getComponentCss$G as getModelSignatureCss, getComponentCss$D as getMultiSelectCss, getComponentCss$F as getMultiSelectOptionCss, getComponentCss$E as getOptgroupCss, getComponentCss$C as getPaginationCss, getComponentCss$B as getPinCodeCss, getComponentCss$A as getPopoverCss, getComponentCss$z as getRadioButtonWrapperCss, getComponentCss$x as getRadioGroupCss, getComponentCss$y as getRadioGroupOptionCss, getScalingVar$4 as getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1q as getAccordionCss, getComponentCss$1p as getAiTagCss, getComponentCss$1o as getBannerCss, getComponentCss$1k as getButtonCss, getComponentCss$1n as getButtonGroupCss, getComponentCss$1m as getButtonPureCss, getComponentCss$1l as getButtonTileCss, getComponentCss$1j as getCanvasCss, getComponentCss$1i as getCarouselCss, getComponentCss$1g as getCheckboxCss, getComponentCss$1h as getCheckboxWrapperCss, getComponentCss$1f as getContentWrapperCss, getComponentCss$1e as getCrestCss, getComponentCss$1d as getDisplayCss, getComponentCss$1c as getDividerCss, getComponentCss$1b as getDrilldownCss, getComponentCss$1a as getDrilldownItemCss, getComponentCss$19 as getDrilldownLinkCss, getComponentCss$17 as getFieldsetCss, getComponentCss$18 as getFieldsetWrapperCss, getComponentCss$16 as getFlagCss, getComponentCss$14 as getFlexCss, getComponentCss$15 as getFlexItemCss, getComponentCss$13 as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$11 as getGridCss, getComponentCss$12 as getGridItemCss, getComponentCss$10 as getHeadingCss, getComponentCss$$ as getHeadlineCss, getComponentCss$_ as getIconCss, getComponentCss$Z as getInlineNotificationCss, getComponentCss$Y as getInputDateCss, getComponentCss$X as getInputEmailCss, getComponentCss$W as getInputMonthCss, getComponentCss$V as getInputNumberCss, getComponentCss$U as getInputPasswordCss, getComponentCss$T as getInputSearchCss, getComponentCss$S as getInputTelCss, getComponentCss$R as getInputTextCss, getComponentCss$Q as getInputTimeCss, getComponentCss$P as getInputUrlCss, getComponentCss$O as getInputWeekCss, getComponentCss$M as getLinkCss, getComponentCss$N as getLinkPureCss, getComponentCss$M as getLinkSocialCss, getComponentCss$J as getLinkTileCss, getComponentCss$L as getLinkTileModelSignatureCss, getComponentCss$K as getLinkTileProductCss, getComponentCss$I as getMarqueCss, getComponentCss$H as getModalCss, getComponentCss$G as getModelSignatureCss, getComponentCss$D as getMultiSelectCss, getComponentCss$F as getMultiSelectOptionCss, getComponentCss$E as getOptgroupCss, getComponentCss$C as getPaginationCss, getComponentCss$B as getPinCodeCss, getComponentCss$A as getPopoverCss, getComponentCss$z as getRadioButtonWrapperCss, getComponentCss$x as getRadioGroupCss, getComponentCss$y as getRadioGroupOptionCss, getScalingVar$4 as getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

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

@@ -3444,7 +3444,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.34.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.35.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -3631,6 +3631,162 @@ const internalValidateProps = {
 const breakpointCustomizableTemplate = `value, ${internalValidateProps
     .formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {}))
     .replace(/"/g, '')}`;
+// ISO locale code to AI text mapping
+const AI_TAG_TRANSLATIONS = {
+    bg_BG: {
+        short: 'ИИ',
+        long: 'изкуствен интелект',
+        generated: 'генериран от изкуствен интелект',
+        modified: 'модифициран от изкуствен интелект',
+    },
+    bs_BA: { short: 'AI', long: 'vještačka inteligencija', generated: 'AI-generisano', modified: 'AI-modifikovano' },
+    cs_CZ: { short: 'AI', long: 'umělá inteligence', generated: 'Vytvořeno AI', modified: 'Upraveno AI' },
+    da_DK: { short: 'KI', long: 'kunstig intelligens', generated: 'AI-genereret', modified: 'AI-modificeret' },
+    de_DE: {
+        short: 'KI',
+        long: 'künstliche Intelligenz',
+        generated: 'KI-generiert',
+        modified: 'KI-modifiziert',
+    },
+    el_GR: {
+        short: 'ΤΝ',
+        long: 'τεχνητή νοημοσύνη',
+        generated: 'Δημιουργημένο από ΤΝ',
+        modified: 'Τροποποιημένο από ΤΝ',
+    },
+    en_CY: { short: 'AI', long: 'artificial intelligence', generated: 'AI-generated', modified: 'AI-modified' },
+    en_GB: { short: 'AI', long: 'artificial intelligence', generated: 'AI-generated', modified: 'AI-modified' },
+    en_US: { short: 'AI', long: 'artificial intelligence', generated: 'AI-generated', modified: 'AI-modified' },
+    es_ES: {
+        short: 'IA',
+        long: 'inteligencia artificial',
+        generated: 'Generado por IA',
+        modified: 'Modificado por IA',
+    },
+    et_EE: { short: 'TI', long: 'tehisintellekt', generated: 'TI abil loodud', modified: 'TI abil muudetud' },
+    fi_FI: {
+        short: 'AI',
+        long: 'tekoäly',
+        generated: 'Tekoälyn tuottama',
+        modified: 'Tekoälyn muokkaama',
+    },
+    fr_FR: {
+        short: 'IA',
+        long: 'intelligence artificielle',
+        generated: 'Généré par une IA',
+        modified: 'Modifié par une IA',
+    },
+    he_IL: {
+        short: 'AI',
+        long: 'בינה מלאכותית',
+        generated: 'נוצר על ידי בינה מלאכותית',
+        modified: 'נערך באמצעות בינה מלאכותית',
+    },
+    hr_HR: {
+        short: 'UI',
+        long: 'umjetna inteligencija',
+        generated: 'Generirano uz pomoć UI',
+        modified: 'Izmijenjeno uz pomoć UI',
+    },
+    hu_HU: {
+        short: 'MI',
+        long: 'mesterséges intelligencia',
+        generated: 'MI-generált',
+        modified: 'MI-módosított',
+    },
+    is_IS: {
+        short: 'AI',
+        long: 'gervigreind',
+        generated: 'Búið til af gervigreind',
+        modified: 'Breytt af gervigreind',
+    },
+    it_IT: {
+        short: 'IA',
+        long: 'intelligenza artificiale',
+        generated: "Generato dall'IA",
+        modified: "Modificato dall'IA",
+    },
+    lt_LT: {
+        short: 'DI',
+        long: 'dirbtinis intelektas',
+        generated: 'DI sugeneruotas',
+        modified: 'DI modifikuotas',
+    },
+    lv_LV: {
+        short: 'MI',
+        long: 'mākslīgais intelekts',
+        generated: 'MI ģenerēts',
+        modified: 'MI pārveidots',
+    },
+    me_ME: { short: 'AI', long: 'veštačka inteligencija', generated: 'AI-generisano', modified: 'AI-modifikovano' },
+    mk_MK: {
+        short: 'ВИ',
+        long: 'вештачка интелигенција',
+        generated: 'Создадено од ВИ',
+        modified: 'Изменето со ВИ',
+    },
+    mt_MT: { short: 'AI', long: 'artificial intelligence', generated: 'AI-generated', modified: 'AI-modified' },
+    nb_NO: {
+        short: 'KI',
+        long: 'kunstig intelligens',
+        generated: 'KI-generert',
+        modified: 'KI-modifisert',
+    },
+    nl_NL: {
+        short: 'AI',
+        long: 'kunstmatige intelligentie',
+        generated: 'Door AI gegenereerd',
+        modified: 'Door AI gewijzigd',
+    },
+    pl_PL: {
+        short: 'SI',
+        long: 'sztuczna inteligencja',
+        generated: 'Wygenerowane przez SI',
+        modified: 'Zmodyfikowane przez SI',
+    },
+    pt_PT: {
+        short: 'IA',
+        long: 'inteligência artificial',
+        generated: 'Gerado por IA',
+        modified: 'Modificado por IA',
+    },
+    ro_RO: {
+        short: 'IA',
+        long: 'inteligență artificială',
+        generated: 'Generat cu ajutorul IA',
+        modified: 'Modificat cu ajutorul IA',
+    },
+    ru_RU: {
+        short: 'ИИ',
+        long: 'искусственный интеллект',
+        generated: 'Сгенерировано ИИ',
+        modified: 'Изменено ИИ',
+    },
+    sk_SK: { short: 'AI', long: 'umelá inteligencia', generated: 'Vytvorené AI', modified: 'Upravené AI' },
+    sl_SI: { short: 'UI', long: 'umetna inteligenca', generated: 'Ustvarjeno z UI', modified: 'Spremenjeno z UI' },
+    sr_RS: { short: 'AI', long: 'veštačka inteligencija', generated: 'AI-generisano', modified: 'AI-modifikovano' },
+    sv_SE: {
+        short: 'AI',
+        long: 'artificiell intelligens',
+        generated: 'AI-genererad',
+        modified: 'AI-modifierad',
+    },
+    tr_TR: {
+        short: 'AI',
+        long: 'yapay zeka',
+        generated: 'Yapay zeka tarafından üretilmiş',
+        modified: 'Yapay zeka tarafından değiştirilmiş',
+    },
+    uk_UA: {
+        short: 'ШІ',
+        long: 'штучний інтелект',
+        generated: 'Згенеровано ШІ',
+        modified: 'Змінено ШІ',
+    },
+};
+const getAiTagTranslation = (locale) => {
+    return AI_TAG_TRANSLATIONS[locale] ?? AI_TAG_TRANSLATIONS['en_US'];
+};
 const getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
     return {
         ...parseAndGetAriaAttributes(aria),
@@ -3995,4 +4151,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, VARIANT_TO_COLOR_MAP, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, buildImgSrc, buildSrcSet, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { AI_TAG_TRANSLATIONS, DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, VARIANT_TO_COLOR_MAP, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, buildImgSrc, buildSrcSet, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getAiTagTranslation, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

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

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+import { DSRAiTag } from '../dsr-components/ai-tag.mjs';
+
+const PAiTag = /*#__PURE__*/ forwardRef(({ locale = 'en_US', theme, variant = 'generated', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    const WebComponentTag = usePrefix('p-ai-tag');
+    const propsToSync = [locale, theme || useTheme(), variant];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['locale', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRAiTag, { locale, theme: theme || useTheme(), variant })),
+            }
+            : {
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PAiTag };

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

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getAccordionCss as getComponentCss$1p } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getAccordionCss as getComponentCss$1q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
@@ -19,7 +19,7 @@ class DSRAccordion extends Component {
         const buttonId = 'accordion-control';
         const contentId = 'accordion-panel';
         const Heading = this.props.tag || this.props.headingTag;
-        const style = minifyCss(getComponentCss$1p(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky));
+        const style = minifyCss(getComponentCss$1q(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }

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

@@ -0,0 +1,16 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { getAiTagCss as getComponentCss$1p } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getAiTagTranslation } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+
+class DSRAiTag extends Component {
+    host;
+    render() {
+        const { short, long, generated, modified } = getAiTagTranslation(this.props.locale);
+        const style = minifyCss(getComponentCss$1p(this.props.theme));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { children: this.props.variant !== 'abbreviation' ? (this.props.variant === 'modified' ? (modified) : (generated)) : (jsx("abbr", { title: long, children: short })) })] }) }));
+    }
+}
+
+export { DSRAiTag };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -1,5 +1,6 @@
 export { componentsReady } from '@porsche-design-system/components-js';
 export { PAccordion } from './lib/components/accordion.wrapper.mjs';
+export { PAiTag } from './lib/components/ai-tag.wrapper.mjs';
 export { PBanner } from './lib/components/banner.wrapper.mjs';
 export { PButton } from './lib/components/button.wrapper.mjs';
 export { PButtonGroup } from './lib/components/button-group.wrapper.mjs';

package/ssr/esm/lib/components/ai-tag.wrapper.d.ts

@@ -0,0 +1,30 @@
+import type { BaseProps } from '../../BaseProps';
+import type { AiTagLocale, Theme, AiTagVariant } from '../types';
+export type PAiTagProps = BaseProps & {
+    /**
+     * Locale for the AI text (ISO format, e.g. "de_DE").
+     */
+    locale?: AiTagLocale;
+    /**
+     * Adapts the tag color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified").
+     */
+    variant?: AiTagVariant;
+};
+export declare const PAiTag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Locale for the AI text (ISO format, e.g. "de_DE").
+     */
+    locale?: AiTagLocale;
+    /**
+     * Adapts the tag color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified").
+     */
+    variant?: AiTagVariant;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './accordion.wrapper';
+export * from './ai-tag.wrapper';
 export * from './banner.wrapper';
 export * from './button.wrapper';
 export * from './button-group.wrapper';

package/ssr/esm/lib/dsr-components/ai-tag.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRAiTag extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}