@porsche-design-system/components-vue 3.29.0 → 3.30.0-rc.1

package/esm/lib/types.d.ts

@@ -221,8 +221,16 @@ declare const ICON_NAMES: readonly [
     "add",
     "adjust",
     "aggregation",
+    "ai-3d-object",
+    "ai-code",
+    "ai-edit",
+    "ai-image",
+    "ai-scale",
+    "ai-sound",
     "ai-spark",
     "ai-spark-filled",
+    "ai-text",
+    "ai-video",
     "arrow-compact-down",
     "arrow-compact-left",
     "arrow-compact-right",
@@ -611,6 +619,7 @@ declare const FORM_STATES: readonly [
 export type FormState = (typeof FORM_STATES)[number];
 declare const BUTTON_ARIA_ATTRIBUTES: readonly [
     "aria-label",
+    "aria-description",
     "aria-expanded",
     "aria-pressed",
     "aria-haspopup"
@@ -618,6 +627,7 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
 export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
 declare const LINK_ARIA_ATTRIBUTES: readonly [
     "aria-label",
+    "aria-description",
     "aria-current",
     "aria-haspopup"
 ];
@@ -716,13 +726,17 @@ export type MultiSelectUpdateEvent = {
     name: string;
     value: string[];
 };
+/** @deprecated */
 export type MultiSelectUpdateEventDetail = MultiSelectUpdateEvent;
+export type MultiSelectChangeEventDetail = MultiSelectUpdateEventDetail;
 export type SelectState = FormState;
 export type SelectDropdownDirection = SelectComponentsDropdownDirection;
+/** @deprecated */
 export type SelectUpdateEventDetail = {
     name: string;
     value: string;
 };
+export type SelectChangeEventDetail = SelectUpdateEventDetail;
 declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
     "down",
     "up",
@@ -936,6 +950,7 @@ export type CheckboxUpdateEventDetail = {
     checked: boolean;
 };
 export type CheckboxBlurEventDetail = Event;
+export type CheckboxChangeEventDetail = Event;
 export type CheckboxWrapperState = FormState;
 declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
     "transparent",
@@ -1100,6 +1115,11 @@ declare const FLEX_ITEM_FLEXS: readonly [
     "equal"
 ];
 export type FlexItemFlex = (typeof FLEX_ITEM_FLEXS)[number];
+declare const BACKDROPS: readonly [
+    "blur",
+    "shading"
+];
+export type Backdrop = (typeof BACKDROPS)[number];
 declare const FLYOUT_POSITIONS: readonly [
     "start",
     "end",
@@ -1118,6 +1138,7 @@ declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
 export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
 export type FlyoutMotionVisibleEndEventDetail = TransitionEvent;
 export type FlyoutMotionHiddenEndEventDetail = TransitionEvent;
+export type FlyoutBackdrop = Backdrop;
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",
@@ -1286,6 +1307,9 @@ declare const LINK_TILE_MODEL_SIGNATURE_MODELS: readonly [
     "boxster",
     "cayenne",
     "cayman",
+    "gt3-rs",
+    "gt3",
+    "gts",
     "macan",
     "panamera",
     "taycan",
@@ -1341,6 +1365,21 @@ declare const MODEL_SIGNATURES_MANIFEST: {
         width: number;
         height: number;
     };
+    "gt3-rs": {
+        src: string;
+        width: number;
+        height: number;
+    };
+    gt3: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    gts: {
+        src: string;
+        width: number;
+        height: number;
+    };
     macan: {
         src: string;
         width: number;
@@ -1380,11 +1419,6 @@ declare const MARQUE_SIZES: readonly [
     "medium"
 ];
 export type MarqueSize = (typeof MARQUE_SIZES)[number];
-declare const BACKDROPS: readonly [
-    "blur",
-    "shading"
-];
-export type Backdrop = (typeof BACKDROPS)[number];
 declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label",
     "role"
@@ -1445,7 +1479,9 @@ export type PinCodeUpdateEvent = {
     value: string;
     isComplete: boolean;
 };
+/** @deprecated */
 export type PinCodeUpdateEventDetail = PinCodeUpdateEvent;
+export type PinCodeChangeEventDetail = PinCodeUpdateEventDetail;
 export type PinCodeState = FormState;
 declare const POPOVER_DIRECTIONS: readonly [
     "top",
@@ -1459,6 +1495,9 @@ declare const POPOVER_ARIA_ATTRIBUTES: readonly [
 ];
 export type PopoverAriaAttribute = (typeof POPOVER_ARIA_ATTRIBUTES)[number];
 export type RadioButtonWrapperState = FormState;
+export type RadioGroupState = FormState;
+export type RadioGroupDirection = GroupDirection;
+export type RadioGroupChangeEventDetail = Event;
 declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
     "background-surface",
     "background-default"
@@ -1468,7 +1507,9 @@ export type SegmentedControlBackgroundColor = (typeof SEGMENTED_CONTROL_BACKGROU
 export type SegmentedControlUpdateEvent = {
     value: string | number;
 };
+/** @deprecated */
 export type SegmentedControlUpdateEventDetail = SegmentedControlUpdateEvent;
+export type SegmentedControlChangeEventDetail = SegmentedControlUpdateEventDetail;
 declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
 export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
 export type SegmentedControlItemIcon = LinkButtonIconName;

package/esm/plugin.mjs

@@ -1,9 +1,9 @@
-import { inject as n, ref as c } from "vue";
+import { ref as n, inject as c } from "vue";
 import { componentsReady as i, load as m } from "@porsche-design-system/components-js";
 import { prefixInjectionKey as a } from "./utils.mjs";
 const t = Symbol();
 function u() {
-  const e = n(t);
+  const e = c(t);
   if (!e)
     throw new Error(
       "[Porsche Design System Vue] No plugin was provided. Make sure to create one via `createPorscheDesignSystem()`."
@@ -11,7 +11,7 @@ function u() {
   return e;
 }
 function g(e = { prefix: "" }) {
-  const r = c(!1), s = {
+  const r = n(!1), s = {
     options: e,
     isPorscheDesignSystemLoaded: r,
     componentsReady: i,

package/esm/public-api.mjs

@@ -1,8 +1,8 @@
-import { componentsReady as r } from "@porsche-design-system/components-js";
+import { componentsReady as o } from "@porsche-design-system/components-js";
 import { default as a } from "./lib/components/AccordionWrapper.vue.mjs";
 import { default as l } from "./lib/components/BannerWrapper.vue.mjs";
-import { default as s } from "./lib/components/ButtonWrapper.vue.mjs";
-import { default as d } from "./lib/components/ButtonGroupWrapper.vue.mjs";
+import { default as u } from "./lib/components/ButtonWrapper.vue.mjs";
+import { default as s } from "./lib/components/ButtonGroupWrapper.vue.mjs";
 import { default as x } from "./lib/components/ButtonPureWrapper.vue.mjs";
 import { default as n } from "./lib/components/ButtonTileWrapper.vue.mjs";
 import { default as T } from "./lib/components/CanvasWrapper.vue.mjs";
@@ -14,8 +14,8 @@ import { default as L } from "./lib/components/CrestWrapper.vue.mjs";
 import { default as B } from "./lib/components/DisplayWrapper.vue.mjs";
 import { default as w } from "./lib/components/DividerWrapper.vue.mjs";
 import { default as H } from "./lib/components/DrilldownWrapper.vue.mjs";
-import { default as v } from "./lib/components/DrilldownItemWrapper.vue.mjs";
-import { default as G } from "./lib/components/DrilldownLinkWrapper.vue.mjs";
+import { default as R } from "./lib/components/DrilldownItemWrapper.vue.mjs";
+import { default as v } from "./lib/components/DrilldownLinkWrapper.vue.mjs";
 import { default as z } from "./lib/components/FieldsetWrapper.vue.mjs";
 import { default as j } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
 import { default as A } from "./lib/components/FlagWrapper.vue.mjs";
@@ -25,11 +25,11 @@ import { default as V } from "./lib/components/FlyoutWrapper.vue.mjs";
 import { default as Y } from "./lib/components/GridWrapper.vue.mjs";
 import { default as _ } from "./lib/components/GridItemWrapper.vue.mjs";
 import { default as ee } from "./lib/components/HeadingWrapper.vue.mjs";
-import { default as re } from "./lib/components/HeadlineWrapper.vue.mjs";
+import { default as oe } from "./lib/components/HeadlineWrapper.vue.mjs";
 import { default as ae } from "./lib/components/IconWrapper.vue.mjs";
 import { default as le } from "./lib/components/InlineNotificationWrapper.vue.mjs";
-import { default as se } from "./lib/components/InputDateWrapper.vue.mjs";
-import { default as de } from "./lib/components/InputEmailWrapper.vue.mjs";
+import { default as ue } from "./lib/components/InputDateWrapper.vue.mjs";
+import { default as se } from "./lib/components/InputEmailWrapper.vue.mjs";
 import { default as xe } from "./lib/components/InputNumberWrapper.vue.mjs";
 import { default as ne } from "./lib/components/InputPasswordWrapper.vue.mjs";
 import { default as Te } from "./lib/components/InputSearchWrapper.vue.mjs";
@@ -41,8 +41,8 @@ import { default as Le } from "./lib/components/LinkWrapper.vue.mjs";
 import { default as Be } from "./lib/components/LinkPureWrapper.vue.mjs";
 import { default as we } from "./lib/components/LinkSocialWrapper.vue.mjs";
 import { default as He } from "./lib/components/LinkTileWrapper.vue.mjs";
-import { default as ve } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
-import { default as Ge } from "./lib/components/LinkTileProductWrapper.vue.mjs";
+import { default as Re } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
+import { default as ve } from "./lib/components/LinkTileProductWrapper.vue.mjs";
 import { default as ze } from "./lib/components/MarqueWrapper.vue.mjs";
 import { default as je } from "./lib/components/ModalWrapper.vue.mjs";
 import { default as Ae } from "./lib/components/ModelSignatureWrapper.vue.mjs";
@@ -52,46 +52,48 @@ import { default as Ve } from "./lib/components/OptgroupWrapper.vue.mjs";
 import { default as Ye } from "./lib/components/PaginationWrapper.vue.mjs";
 import { default as _e } from "./lib/components/PinCodeWrapper.vue.mjs";
 import { default as et } from "./lib/components/PopoverWrapper.vue.mjs";
-import { default as rt } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
-import { default as at } from "./lib/components/ScrollerWrapper.vue.mjs";
-import { default as lt } from "./lib/components/SegmentedControlWrapper.vue.mjs";
-import { default as st } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
-import { default as dt } from "./lib/components/SelectWrapper.vue.mjs";
-import { default as xt } from "./lib/components/SelectOptionWrapper.vue.mjs";
-import { default as nt } from "./lib/components/SelectWrapperWrapper.vue.mjs";
-import { default as Tt } from "./lib/components/SheetWrapper.vue.mjs";
-import { default as St } from "./lib/components/SpinnerWrapper.vue.mjs";
-import { default as gt } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
-import { default as Ct } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
-import { default as Dt } from "./lib/components/SwitchWrapper.vue.mjs";
-import { default as Lt } from "./lib/components/TableWrapper.vue.mjs";
-import { default as Bt } from "./lib/components/TableBodyWrapper.vue.mjs";
-import { default as wt } from "./lib/components/TableCellWrapper.vue.mjs";
-import { default as Ht } from "./lib/components/TableHeadWrapper.vue.mjs";
-import { default as vt } from "./lib/components/TableHeadCellWrapper.vue.mjs";
-import { default as Gt } from "./lib/components/TableHeadRowWrapper.vue.mjs";
-import { default as zt } from "./lib/components/TableRowWrapper.vue.mjs";
-import { default as jt } from "./lib/components/TabsWrapper.vue.mjs";
-import { default as At } from "./lib/components/TabsBarWrapper.vue.mjs";
-import { default as Kt } from "./lib/components/TabsItemWrapper.vue.mjs";
-import { default as Jt } from "./lib/components/TagWrapper.vue.mjs";
-import { default as Vt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
-import { default as Yt } from "./lib/components/TextWrapper.vue.mjs";
-import { default as _t } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
-import { default as er } from "./lib/components/TextListWrapper.vue.mjs";
-import { default as rr } from "./lib/components/TextListItemWrapper.vue.mjs";
-import { default as ar } from "./lib/components/TextareaWrapper.vue.mjs";
-import { default as lr } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
-import { default as sr } from "./lib/components/ToastWrapper.vue.mjs";
-import { default as dr } from "./lib/components/WordmarkWrapper.vue.mjs";
-import { themeInjectionKey as xr, useToastManager as Pr } from "./utils.mjs";
-import { default as ir } from "./PorscheDesignSystemProvider.vue.mjs";
-import { createPorscheDesignSystem as cr, usePorscheDesignSystemPlugin as Sr } from "./plugin.mjs";
+import { default as ot } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
+import { default as at } from "./lib/components/RadioGroupWrapper.vue.mjs";
+import { default as lt } from "./lib/components/RadioGroupOptionWrapper.vue.mjs";
+import { default as ut } from "./lib/components/ScrollerWrapper.vue.mjs";
+import { default as st } from "./lib/components/SegmentedControlWrapper.vue.mjs";
+import { default as xt } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
+import { default as nt } from "./lib/components/SelectWrapper.vue.mjs";
+import { default as Tt } from "./lib/components/SelectOptionWrapper.vue.mjs";
+import { default as St } from "./lib/components/SelectWrapperWrapper.vue.mjs";
+import { default as gt } from "./lib/components/SheetWrapper.vue.mjs";
+import { default as Ct } from "./lib/components/SpinnerWrapper.vue.mjs";
+import { default as Dt } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
+import { default as Lt } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
+import { default as Bt } from "./lib/components/SwitchWrapper.vue.mjs";
+import { default as wt } from "./lib/components/TableWrapper.vue.mjs";
+import { default as Ht } from "./lib/components/TableBodyWrapper.vue.mjs";
+import { default as Rt } from "./lib/components/TableCellWrapper.vue.mjs";
+import { default as vt } from "./lib/components/TableHeadWrapper.vue.mjs";
+import { default as zt } from "./lib/components/TableHeadCellWrapper.vue.mjs";
+import { default as jt } from "./lib/components/TableHeadRowWrapper.vue.mjs";
+import { default as At } from "./lib/components/TableRowWrapper.vue.mjs";
+import { default as Kt } from "./lib/components/TabsWrapper.vue.mjs";
+import { default as Jt } from "./lib/components/TabsBarWrapper.vue.mjs";
+import { default as Vt } from "./lib/components/TabsItemWrapper.vue.mjs";
+import { default as Yt } from "./lib/components/TagWrapper.vue.mjs";
+import { default as _t } from "./lib/components/TagDismissibleWrapper.vue.mjs";
+import { default as eo } from "./lib/components/TextWrapper.vue.mjs";
+import { default as oo } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
+import { default as ao } from "./lib/components/TextListWrapper.vue.mjs";
+import { default as lo } from "./lib/components/TextListItemWrapper.vue.mjs";
+import { default as uo } from "./lib/components/TextareaWrapper.vue.mjs";
+import { default as mo } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
+import { default as Po } from "./lib/components/ToastWrapper.vue.mjs";
+import { default as io } from "./lib/components/WordmarkWrapper.vue.mjs";
+import { themeInjectionKey as co, useToastManager as So } from "./utils.mjs";
+import { default as go } from "./PorscheDesignSystemProvider.vue.mjs";
+import { createPorscheDesignSystem as Co, usePorscheDesignSystemPlugin as ko } from "./plugin.mjs";
 export {
   a as PAccordion,
   l as PBanner,
-  s as PButton,
-  d as PButtonGroup,
+  u as PButton,
+  s as PButtonGroup,
   x as PButtonPure,
   n as PButtonTile,
   T as PCanvas,
@@ -103,8 +105,8 @@ export {
   B as PDisplay,
   w as PDivider,
   H as PDrilldown,
-  v as PDrilldownItem,
-  G as PDrilldownLink,
+  R as PDrilldownItem,
+  v as PDrilldownLink,
   z as PFieldset,
   j as PFieldsetWrapper,
   A as PFlag,
@@ -114,11 +116,11 @@ export {
   Y as PGrid,
   _ as PGridItem,
   ee as PHeading,
-  re as PHeadline,
+  oe as PHeadline,
   ae as PIcon,
   le as PInlineNotification,
-  se as PInputDate,
-  de as PInputEmail,
+  ue as PInputDate,
+  se as PInputEmail,
   xe as PInputNumber,
   ne as PInputPassword,
   Te as PInputSearch,
@@ -130,8 +132,8 @@ export {
   Be as PLinkPure,
   we as PLinkSocial,
   He as PLinkTile,
-  ve as PLinkTileModelSignature,
-  Ge as PLinkTileProduct,
+  Re as PLinkTileModelSignature,
+  ve as PLinkTileProduct,
   ze as PMarque,
   je as PModal,
   Ae as PModelSignature,
@@ -141,42 +143,44 @@ export {
   Ye as PPagination,
   _e as PPinCode,
   et as PPopover,
-  rt as PRadioButtonWrapper,
-  at as PScroller,
-  lt as PSegmentedControl,
-  st as PSegmentedControlItem,
-  dt as PSelect,
-  xt as PSelectOption,
-  nt as PSelectWrapper,
-  Tt as PSheet,
-  St as PSpinner,
-  gt as PStepperHorizontal,
-  Ct as PStepperHorizontalItem,
-  Dt as PSwitch,
-  Lt as PTable,
-  Bt as PTableBody,
-  wt as PTableCell,
-  Ht as PTableHead,
-  vt as PTableHeadCell,
-  Gt as PTableHeadRow,
-  zt as PTableRow,
-  jt as PTabs,
-  At as PTabsBar,
-  Kt as PTabsItem,
-  Jt as PTag,
-  Vt as PTagDismissible,
-  Yt as PText,
-  _t as PTextFieldWrapper,
-  er as PTextList,
-  rr as PTextListItem,
-  ar as PTextarea,
-  lr as PTextareaWrapper,
-  sr as PToast,
-  dr as PWordmark,
-  ir as PorscheDesignSystemProvider,
-  r as componentsReady,
-  cr as createPorscheDesignSystem,
-  xr as themeInjectionKey,
-  Sr as usePorscheDesignSystemPlugin,
-  Pr as useToastManager
+  ot as PRadioButtonWrapper,
+  at as PRadioGroup,
+  lt as PRadioGroupOption,
+  ut as PScroller,
+  st as PSegmentedControl,
+  xt as PSegmentedControlItem,
+  nt as PSelect,
+  Tt as PSelectOption,
+  St as PSelectWrapper,
+  gt as PSheet,
+  Ct as PSpinner,
+  Dt as PStepperHorizontal,
+  Lt as PStepperHorizontalItem,
+  Bt as PSwitch,
+  wt as PTable,
+  Ht as PTableBody,
+  Rt as PTableCell,
+  vt as PTableHead,
+  zt as PTableHeadCell,
+  jt as PTableHeadRow,
+  At as PTableRow,
+  Kt as PTabs,
+  Jt as PTabsBar,
+  Vt as PTabsItem,
+  Yt as PTag,
+  _t as PTagDismissible,
+  eo as PText,
+  oo as PTextFieldWrapper,
+  ao as PTextList,
+  lo as PTextListItem,
+  uo as PTextarea,
+  mo as PTextareaWrapper,
+  Po as PToast,
+  io as PWordmark,
+  go as PorscheDesignSystemProvider,
+  o as componentsReady,
+  Co as createPorscheDesignSystem,
+  co as themeInjectionKey,
+  ko as usePorscheDesignSystemPlugin,
+  So as useToastManager
 };

package/esm/utils.d.ts

@@ -4,7 +4,7 @@ export declare const prefixInjectionKey: InjectionKey<string>;
 export declare const themeInjectionKey: InjectionKey<Ref<Theme>>;
 export declare const usePrefix: (tagName: string) => string;
 export declare const syncProperties: <T extends HTMLElement>(elementRef: Ref<T | undefined>, props: Partial<T>) => void;
-export declare const addEventListenerToElementRef: <T extends HTMLElement, E extends string>(elementRef: Ref<T | undefined>, eventName: E, emit: (eventName: E, detail: any) => void) => void;
+export declare const addEventListenerToElementRef: <T extends HTMLElement, E extends string>(elementRef: Ref<T | undefined>, eventName: E, emit: (eventName: E, detail: any) => void, cb?: (event: CustomEvent) => void) => void;
 export declare const useToastManager: () => {
     addMessage: (message: ToastMessage) => void;
 };

package/esm/utils.mjs

@@ -1,18 +1,18 @@
-import { inject as o } from "vue";
-const r = Symbol("pdsPrefix"), a = Symbol("pdsTheme"), i = (t) => {
-  const e = o(r);
+import { inject as r } from "vue";
+const i = Symbol("pdsPrefix"), d = Symbol("pdsTheme"), c = (t) => {
+  const e = r(i);
   if (e === void 0)
     throw new Error("It appears the <PorscheDesignSystemProvider /> is missing. Make sure to wrap your App in it.");
   return e ? e + "-" + t : t;
-}, d = (t, e) => {
+}, m = (t, e) => {
   const s = t.value;
   Object.keys(e).forEach((n) => s[n] = e[n]);
-}, m = (t, e, s) => {
-  t.value.addEventListener(e, (n) => {
-    s(e, n.detail);
+}, u = (t, e, s, n) => {
+  t.value.addEventListener(e, (o) => {
+    s(e, o.detail), n?.(o);
   });
-}, u = () => {
-  const t = i("p-toast");
+}, y = () => {
+  const t = c("p-toast");
   return {
     addMessage: (e) => {
       const s = document.body.querySelector(t);
@@ -21,10 +21,10 @@ const r = Symbol("pdsPrefix"), a = Symbol("pdsTheme"), i = (t) => {
   };
 };
 export {
-  m as addEventListenerToElementRef,
-  r as prefixInjectionKey,
-  d as syncProperties,
-  a as themeInjectionKey,
-  i as usePrefix,
-  u as useToastManager
+  u as addEventListenerToElementRef,
+  i as prefixInjectionKey,
+  m as syncProperties,
+  d as themeInjectionKey,
+  c as usePrefix,
+  y as useToastManager
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.29.0",
+  "version": "3.30.0-rc.1",
   "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.29.0"
+    "@porsche-design-system/components-js": "3.30.0-rc.1"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 33.0.0 <35.0.0",

package/tailwindcss/index.css

@@ -3,7 +3,7 @@
 @theme {
   /* Color */
   --color-primary: #010205;
-  --color-base: #FFF;
+  --color-canvas: #FFF;
   --color-surface: #EEEFF2;
   --color-shading: rgba(1,2,5,.67);
   --color-frosted: hsl(240 4% 85%/35%);
@@ -25,7 +25,7 @@
   --color-skeleton: #f7f7f7;
 
   --color-primary-light: #010205;
-  --color-base-light: #FFF;
+  --color-canvas-light: #FFF;
   --color-surface-light: #EEEFF2;
   --color-shading-light: rgba(1,2,5,.67);
   --color-frosted-light: hsl(240 4% 85%/35%);
@@ -47,7 +47,7 @@
   --color-skeleton-light: #f7f7f7;
 
   --color-primary-dark: #FBFCFF;
-  --color-base-dark: #0E0E12;
+  --color-canvas-dark: #0E0E12;
   --color-surface-dark: #212225;
   --color-shading-dark: rgba(38,38,41,.67);
   --color-frosted-dark: hsl(240 3% 26%/35%);
@@ -167,7 +167,7 @@
 @layer theme {
   .light {
     --color-primary: #010205;
-    --color-base: #FFF;
+    --color-canvas: #FFF;
     --color-surface: #EEEFF2;
     --color-shading: rgba(1,2,5,.67);
     --color-frosted: hsl(240 4% 85%/35%);
@@ -191,7 +191,7 @@
 
   .dark {
     --color-primary: #FBFCFF;
-    --color-base: #0E0E12;
+    --color-canvas: #0E0E12;
     --color-surface: #212225;
     --color-shading: rgba(38,38,41,.67);
     --color-frosted: hsl(240 3% 26%/35%);
@@ -216,7 +216,7 @@
   .auto {
     @media (prefers-color-scheme: dark) {
       --color-primary: #FBFCFF;
-      --color-base: #0E0E12;
+      --color-canvas: #0E0E12;
       --color-surface: #212225;
       --color-shading: rgba(38,38,41,.67);
       --color-frosted: hsl(240 3% 26%/35%);