npm - @workday/canvas-kit-react - Versions diffs - 16.0.0-alpha.0499-next.0 → 16.0.0 - Mend

@workday/canvas-kit-react 16.0.0-alpha.0499-next.0 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (325) hide show

package/dist/es6/common/lib/theming/types.d.ts CHANGED Viewed

@@ -273,5 +273,167 @@ declare module '@emotion/react' {
 export type EmotionCanvasTheme = {
     canvas: CanvasTheme;
 };
+/**
+ * Numerical brand ramp keys. Each key maps 1:1 to a `--cnvs-brand-{family}-{key}` CSS variable.
+ *
+ * Common keys:
+ * - `'600'` — main accent / button fill / default brand fg
+ * - `'700'` — strong fg / selected text (when not using `selected.fg`)
+ * - `'500'` — focus rings and border primary (independent of `'600'`)
+ * - `'A50'` — selected surface tint (when not using `selected.surface`)
+ * - `'25'` / `'A25'` — subtle brand surfaces
+ *
+ * Neutral-only Sana steps (`'150'`, `'850'`, `'A150'`) live on {@link CanvasNeutralBrandRamp}.
+ */
+export type CanvasBrandRamp = Partial<Record<'25' | '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | '975' | 'A25' | 'A50' | 'A100' | 'A200', string>>;
+/**
+ * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not
+ * exported for primary/critical/caution/positive families.
+ */
+export type CanvasNeutralBrandRamp = CanvasBrandRamp & Partial<Record<'150' | '850' | 'A150', string>>;
+/** Semantic keys for `brand.action.*` CSS variables (PrimaryButton, etc.). */
+export type CanvasActionBrandRamp = Partial<Record<'base' | 'lightest' | 'lighter' | 'light' | 'dark' | 'darkest' | 'darker' | 'accent', string>>;
+/**
+ * Controls how partial theme input is expanded.
+ *
+ * - `'brand'` (default): predictable, design-aligned behavior. Setting only
+ *   `brand.primary['600']` themes PrimaryButton and selected list/menu
+ *   states. Other keys write only their CSS variable — no auto-generated ramps.
+ * - `'full'`: legacy behavior for the deprecated `canvas.palette` shape — auto-fills
+ *   lightest→darkest via `shiftColor` and forwards to many `system.color.brand.*`
+ *   tokens. On the numerical `brand` shape, `'full'` disables the primary shortcut
+ *   and writes each ramp key literally.
+ */
+export type CanvasThemingScope = 'brand' | 'full';
+/**
+ * Preferred theme input for `CanvasProvider`. Each value maps directly to brand CSS
+ * variables unless noted as a shortcut below.
+ *
+ * @example Minimal — brand buttons + selected states only
+ * ```tsx
+ * <CanvasProvider theme={{brand: {primary: {'600': base.magenta600}}}} />
+ * ```
+ *
+ * @example Explicit — focus independent of primary
+ * ```tsx
+ * <CanvasProvider theme={{
+ *   brand: {primary: {'600': base.red600, '500': base.blue500}},
+ *   selected: {fg: base.red700, surface: base.redA50},
+ * }} />
+ * ```
+ *
+ * @see sanaCanvasProviderTheme when `<html>` is unavailable and popups need Sana brand forwarding
+ */
+export interface CanvasNumericalBrandTheme {
+    brand?: {
+        /**
+         * Primary brand ramp (`--cnvs-brand-primary-*`).
+         *
+         * **Shortcut (brand scope only):** when `'600'` is the only key under `primary`,
+         * also sets:
+         * - `PrimaryButton` — `brand.action.base`, `accent.primary`, `accent.action`
+         * - Selected `Menu.Item` — `system.color.brand.fg.selected`, `surface.selected`
+         *
+         * Does **not** set focus rings — use `'500'` or `canvas.palette.common.focusOutline`.
+         *
+         * | Key | CSS variable | Typical consumers |
+         * |-----|--------------|-------------------|
+         * | `'600'` | `--cnvs-brand-primary-600` | PrimaryButton, brand links, accent.primary |
+         * | `'700'` | `--cnvs-brand-primary-700` | Strong primary fg, selected text |
+         * | `'500'` | `--cnvs-brand-primary-500` | Focus rings, border primary |
+         * | `'A50'` | `--cnvs-brand-primary-A50` | Selected/hover surfaces |
+         */
+        primary?: CanvasBrandRamp;
+        /**
+         * Button-specific ramp (`--cnvs-brand-action-*`). PrimaryButton reads
+         * these **before** `brand.primary`.
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `base` | PrimaryButton background |
+         * | `dark` / `darkest` | PrimaryButton hover / pressed |
+         * | `accent` | PrimaryButton label color |
+         */
+        action?: CanvasActionBrandRamp;
+        /**
+         * Critical/error ramp (`--cnvs-brand-critical-*`).
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `'600'` | TextInput error, DeleteButton, critical fg |
+         * | `'500'` | Critical focus ring, error border |
+         * | `'A25'` / `'A50'` | Error surface tints |
+         */
+        critical?: CanvasBrandRamp;
+        /**
+         * Caution/warning ramp (`--cnvs-brand-caution-*`).
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `'400'` | Caution accent, TextInput caution |
+         * | `'500'` | Caution focus outer, caution border |
+         * | `'A25'` / `'A50'` | Caution surface tints |
+         */
+        caution?: CanvasBrandRamp;
+        /**
+         * Positive/success ramp (`--cnvs-brand-positive-*`).
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `'600'` | Checkbox/Radio checked, success fg |
+         * | `'A25'` / `'A50'` | Success surface tints |
+         */
+        positive?: CanvasBrandRamp;
+        /**
+         * Neutral brand ramp (`--cnvs-brand-neutral-*`). Sana Canvas uses `base.neutral*`
+         * instead of legacy `base.slate*` — see {@link sanaCanvasNumericalTheme}.
+         *
+         * Affects brand-neutral text, borders, and surfaces where components reference
+         * `brand.neutral.*` or `system.color.brand` tokens tied to neutral.
+         */
+        neutral?: CanvasNeutralBrandRamp;
+    };
+    /**
+     * Selected-state shortcuts. Prefer these over indirect `brand.primary['700']` /
+     * `brand.primary.A50` when customizing list/menu selection.
+     *
+     * | Key | CSS variable | Typical consumers |
+     * |-----|--------------|-------------------|
+     * | `fg` | `--cnvs-sys-color-brand-fg-selected` | Menu.Item, SegmentedControl selected text |
+     * | `surface` | `--cnvs-sys-color-brand-surface-selected` | Menu.Item, list selected background |
+     */
+    selected?: {
+        /** Selected text/icon color */
+        fg?: string;
+        /** Selected row/chip background */
+        surface?: string;
+    };
+    /**
+     * Escape hatch for `system.color.brand.*` tokens not covered by `brand` ramps.
+     * Keys mirror the token path, e.g. `{color: {brand: {focus: {primary: '#00f'}}}}`.
+     */
+    system?: {
+        color?: {
+            brand?: Record<string, unknown>;
+        };
+    };
+    /** Text direction for the provider subtree. */
+    direction?: ContentDirection;
+    /**
+     * @default 'brand'
+     * @see CanvasThemingScope
+     */
+    themeScope?: CanvasThemingScope;
+}
+/**
+ * Theme input accepted by {@link CanvasProvider}.
+ * - Numerical `brand` shape (preferred)
+ * - Deprecated `canvas.palette` shape (legacy)
+ */
+export type CanvasProviderTheme = (PartialEmotionCanvasTheme & {
+    themeScope?: CanvasThemingScope;
+}) | CanvasNumericalBrandTheme;
+export declare function isNumericalTheme(theme: CanvasProviderTheme | undefined): theme is CanvasNumericalBrandTheme;
+export declare function resolveThemingScope(theme: CanvasProviderTheme | undefined): CanvasThemingScope;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/es6/common/lib/theming/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEnE;;GAEG;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,MAAM,EAAE,wBAAwB,CAAC;QACjC,OAAO,EAAE,kBAAkB,CAAC;QAC5B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,OAAO,EAAE,kBAAkB,CAAC;QAC5B,OAAO,EAAE,kBAAkB,CAAC;KAC7B,CAAC;IACF;;;;;;;;OAQG;IACH,WAAW,EAAE;QACX;;;;;;;;;;;;;;;;;;;;;WAqBG;QACH,MAAM,EAAE,iBAAiB,CAAC;QAC1B;;;;;;;;;;;;;;;;;;;;;;WAsBG;QACH,EAAE,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA6CG;QACH,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;KAC1C,CAAC;IACF,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAE7E,MAAM,MAAM,yBAAyB,GAAG;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAC,CAAC;AAEtE,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,MAAM,EAAE,WAAW,CAAC;KACrB;CACF;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAAC,MAAM,EAAE,WAAW,CAAA;CAAC,CAAC"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"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"}

package/dist/es6/common/lib/theming/types.js CHANGED Viewed

@@ -7,3 +7,81 @@ export var ContentDirection;
     ContentDirection["LTR"] = "ltr";
     ContentDirection["RTL"] = "rtl";
 })(ContentDirection || (ContentDirection = {}));
+export function isNumericalTheme(theme) {
+    if (!theme) {
+        return false;
+    }
+    if ('canvas' in theme) {
+        return false;
+    }
+    // `direction` / `themeScope` alone are valid numerical themes (e.g. RTL-only).
+    return ('brand' in theme ||
+        'system' in theme ||
+        'selected' in theme ||
+        'direction' in theme ||
+        'themeScope' in theme);
+}
+const EXTENDED_RAMP_KEYS = new Set([
+    '25',
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+    '950',
+    '975',
+    'A25',
+    'A50',
+    'A100',
+    'A200',
+    'lightest',
+    'lighter',
+    'light',
+    'main',
+    'dark',
+    'darkest',
+    'contrast',
+]);
+export function resolveThemingScope(theme) {
+    var _a, _b;
+    if (!theme) {
+        return 'brand';
+    }
+    if (theme.themeScope) {
+        return theme.themeScope;
+    }
+    if (isNumericalTheme(theme)) {
+        return (_a = theme.themeScope) !== null && _a !== void 0 ? _a : 'brand';
+    }
+    const palette = (_b = theme.canvas) === null || _b === void 0 ? void 0 : _b.palette;
+    if (!palette) {
+        return 'brand';
+    }
+    if (palette.common && Object.keys(palette.common).length > 0) {
+        const commonOnlyFocus = Object.keys(palette.common).length === 1 && palette.common.focusOutline != null;
+        if (!commonOnlyFocus) {
+            return 'full';
+        }
+    }
+    for (const color of ['primary', 'error', 'alert', 'success', 'neutral']) {
+        const colorPalette = palette[color];
+        if (!colorPalette) {
+            continue;
+        }
+        for (const key of Object.keys(colorPalette)) {
+            // `main` alone uses brand-scope bundles for every semantic palette color.
+            if (key === 'main') {
+                continue;
+            }
+            if (EXTENDED_RAMP_KEYS.has(key)) {
+                return 'full';
+            }
+        }
+    }
+    return 'brand';
+}

package/dist/es6/expandable/lib/Expandable.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { ExpandableTarget } from './ExpandableTarget';
 import { ExpandableTitle } from './ExpandableTitle';
 import { useExpandableModel } from './hooks/useExpandableModel';
 export const expandableContainerStencil = createStencil({
-    base: { name: "2hlhul", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
+    base: { name: "3yia40", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "expandable-container-f664d5");
 /**
  * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a

package/dist/es6/expandable/lib/ExpandableAvatar.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
 export const expandableAvatarStencil = createStencil({
     extends: avatarStencil,
-    base: { name: "1s2lbn", styles: "box-sizing:border-box;flex-shrink:0;" }
+    base: { name: "2yzn5j", styles: "box-sizing:border-box;flex-shrink:0;" }
 }, "expandable-avatar-65308e");
 // When the component is created, it needs to be a button element to match AvatarProps.
 // Once Avatar becomes a `createComponent` we can default the element type to a `div`

package/dist/es6/expandable/lib/ExpandableContent.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { system } from '@workday/canvas-tokens-web';
 import { useExpandableContent } from './hooks/useExpandableContent';
 import { useExpandableModel } from './hooks/useExpandableModel';
 export const expandableContentStencil = createStencil({
-    base: { name: "ziml1", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
+    base: { name: "14v9g1", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "expandable-content-25e157");
 export const ExpandableContent = createSubcomponent('div')({
     modelHook: useExpandableModel,

package/dist/es6/expandable/lib/ExpandableIcon.js CHANGED Viewed

@@ -9,34 +9,34 @@ import { useExpandableIcon } from './hooks/useExpandableIcon';
 import { useExpandableModel } from './hooks/useExpandableModel';
 export const expandableIconStencil = createStencil({
     extends: systemIconStencil,
-    base: { name: "3wzc6o", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
+    base: { name: "23htqs", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
     modifiers: {
         isExpanded: {
-            true: { name: "1yxxbw", styles: "" },
-            false: { name: "3mmgjd", styles: "" }
+            true: { name: "2324ww", styles: "" },
+            false: { name: "38lxsb", styles: "" }
         },
         position: {
-            start: { name: "38glk6", styles: "" },
-            end: { name: "2550f5", styles: "" },
-            only: { name: "1kt48r", styles: "" }
+            start: { name: "35ppft", styles: "" },
+            end: { name: "45s3pz", styles: "" },
+            only: { name: "3f81ys", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { position: 'end', isExpanded: false },
-            styles: { name: "2728bp", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+            styles: { name: "24pnc9", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
         },
         {
             modifiers: { position: 'end', isExpanded: true },
-            styles: { name: "17vqrt", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+            styles: { name: "4dbcj4", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
         },
         {
             modifiers: { position: 'start', isExpanded: false },
-            styles: { name: "1u7vqi", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
+            styles: { name: "3evgi4", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
         },
         {
             modifiers: { position: 'start', isExpanded: true },
-            styles: { name: "10h5l5", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
+            styles: { name: "549og", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
         }
     ]
 }, "expandable-icon-af0853");

package/dist/es6/expandable/lib/ExpandableTarget.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { useExpandableModel } from './hooks/useExpandableModel';
 import { useExpandableTarget } from './hooks/useExpandableTarget';
 export const expandableTargetStencil = createStencil({
     extends: cornerShapeStencil,
-    base: { name: "g4p5q", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
+    base: { name: "30nzun", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
 }, "expandable-target-6f2998");
 export const ExpandableTarget = createSubcomponent('button')({
     modelHook: useExpandableModel,

package/dist/es6/expandable/lib/ExpandableTitle.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const expandableTitleStencil = createStencil({
-    base: { name: "125f4n", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));font-weight:var(--cnvs-sys-font-weight-bold);color:var(--cnvs-sys-color-fg-strong);padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));text-align:left;" }
+    base: { name: "2el8zc", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));font-weight:var(--cnvs-sys-font-weight-bold);color:var(--cnvs-sys-color-fg-strong);padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));text-align:left;" }
 }, "expandable-title-afdcf8");
 export const ExpandableTitle = createComponent('div')({
     displayName: 'Expandable.Title',

package/dist/es6/form-field/lib/FormFieldField.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 export const formFieldFieldStencil = createStencil({
-    base: { name: "1ee6lj", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
+    base: { name: "38mzgs", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "form-field-field-a35e82");
 export const FormFieldField = createSubcomponent('div')({
     displayName: 'FormField.Field',

package/dist/es6/form-field/lib/FormFieldGroupLabel.js CHANGED Viewed

@@ -7,15 +7,15 @@ import { system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 export const formFieldGroupLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "3fwbgv", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "5ra1j", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "43fnsd", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
+            true: { name: "3jf22", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
         },
         orientation: {
-            vertical: { name: "1bjsjc", styles: "width:100%;" },
-            horizontalStart: { name: "2cfrts", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
-            horizontalEnd: { name: "3ljyyr", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
+            vertical: { name: "n18tj", styles: "width:100%;" },
+            horizontalStart: { name: "34cxut", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
+            horizontalEnd: { name: "3t0dd", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
         }
     },
     defaultModifiers: {

package/dist/es6/form-field/lib/FormFieldGroupList.js CHANGED Viewed

@@ -5,11 +5,11 @@ import { base, system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 const formFieldGroupListStencil = createStencil({
     extends: cornerShapeStencil,
-    base: { name: "2cximx", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
+    base: { name: "17t6m4", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         error: {
-            error: { name: "1vczz2", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" },
-            caution: { name: "c3dzf", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" }
+            error: { name: "157r8l", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" },
+            caution: { name: "328ecw", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" }
         }
     }
 }, "form-field-group-list-284850");

package/dist/es6/form-field/lib/FormFieldHint.js CHANGED Viewed

@@ -7,11 +7,11 @@ import { system } from '@workday/canvas-tokens-web';
 import { useFormFieldHint, useFormFieldModel } from './hooks';
 export const formFieldHintStencil = createStencil({
     extends: textStencil,
-    base: { name: "3tzhfi", styles: "box-sizing:border-box;margin:0;" },
+    base: { name: "23p41k", styles: "box-sizing:border-box;margin:0;" },
     modifiers: {
         error: {
-            error: { name: "xrqpm", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
-            caution: { name: "1vb78p", styles: "color:var(--cnvs-sys-color-fg-default);" }
+            error: { name: "p0xde", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
+            caution: { name: "3176zr", styles: "color:var(--cnvs-sys-color-fg-default);" }
         }
     },
     defaultModifiers: {

package/dist/es6/form-field/lib/FormFieldLabel.js CHANGED Viewed

@@ -7,18 +7,18 @@ import { system } from '@workday/canvas-tokens-web';
 import { useFormFieldLabel, useFormFieldModel } from './hooks';
 export const formFieldLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "2mv0hb", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "3b3bt6", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "1mxbck", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
+            true: { name: "1ptdsa", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
         },
         orientation: {
-            horizontalStart: { name: "rgvio", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
-            horizontalEnd: { name: "3jdfmq", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" },
-            vertical: { name: "1r9qp7", styles: "width:100%;" }
+            horizontalStart: { name: "3iuynw", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
+            horizontalEnd: { name: "q6spo", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" },
+            vertical: { name: "10n3qr", styles: "width:100%;" }
         },
         isHidden: {
-            true: { name: "214gyp", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
+            true: { name: "39bjqr", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
         }
     },
     defaultModifiers: {

package/dist/es6/form-field/lib/formFieldStencil.js CHANGED Viewed

@@ -1,22 +1,22 @@
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const formFieldStencil = createStencil({
-    base: { name: "4a1siw", styles: "box-sizing:border-box;display:flex;border:none;padding:0;margin:0 0 var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));" },
+    base: { name: "3oiclz", styles: "box-sizing:border-box;display:flex;border:none;padding:0;margin:0 0 var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));" },
     modifiers: {
         grow: {
-            true: { name: "cjr7o", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+            true: { name: "21vc1o", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
         },
         orientation: {
-            horizontalStart: { name: "40fb4d", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
-            horizontalEnd: { name: "13xk3", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
-            vertical: { name: "6b3ah", styles: "flex-direction:column;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:flex-start;" }
+            horizontalStart: { name: "3aiud9", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
+            horizontalEnd: { name: "2pea3k", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
+            vertical: { name: "6d9iq", styles: "flex-direction:column;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:flex-start;" }
         },
         required: {
-            true: { name: "lo8zk", styles: "" }
+            true: { name: "2ayn7", styles: "" }
         },
         error: {
-            error: { name: "1j8oji", styles: "" },
-            caution: { name: "46dyt2", styles: "" }
+            error: { name: "26rze9", styles: "" },
+            caution: { name: "40trbh", styles: "" }
         }
     },
     defaultModifiers: {

package/dist/es6/icon/lib/AccentIcon.js CHANGED Viewed

@@ -24,10 +24,10 @@ export const accentIconStencil = createStencil({
     vars: {
         color: '',
     },
-    base: { name: "9j31j", styles: "box-sizing:border-box;--size-svg-bca693:3.5rem;& .color-500{fill:var(--color-accent-icon-1046a0, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
+    base: { name: "1180r3", styles: "box-sizing:border-box;--size-svg-bca693:3.5rem;& .color-500{fill:var(--color-accent-icon-1046a0, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
     modifiers: {
         transparent: {
-            true: { name: "3houoe", styles: "& .french-vanilla-100{fill:transparent;}" }
+            true: { name: "38ddnk", styles: "& .french-vanilla-100{fill:transparent;}" }
         }
     }
 }, "accent-icon-1046a0");

package/dist/es6/icon/lib/AppletIcon.js CHANGED Viewed

@@ -54,7 +54,7 @@ export const appletIconStencil = createStencil({
         color400: '',
         color500: '',
     },
-    base: { name: "28w2rq", styles: "box-sizing:border-box;--size-svg-bca693:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-02002c, var(--cnvs-base-palette-blue-200, oklch(0.8627 0.0701 250.6 / 1)));}& .color-300{fill:var(--color300-applet-icon-02002c, var(--cnvs-base-palette-blue-400, oklch(0.708 0.1549 255.41 / 1)));}& .color-400{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-400-alpha-20{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-500{fill:var(--color500-applet-icon-02002c, var(--cnvs-base-palette-blue-700, oklch(0.4658 0.1562 255.5 / 1)));}" }
+    base: { name: "8ce85", styles: "box-sizing:border-box;--size-svg-bca693:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-02002c, var(--cnvs-base-palette-blue-200, oklch(0.8627 0.0701 250.6 / 1)));}& .color-300{fill:var(--color300-applet-icon-02002c, var(--cnvs-base-palette-blue-400, oklch(0.708 0.1549 255.41 / 1)));}& .color-400{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-400-alpha-20{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-500{fill:var(--color500-applet-icon-02002c, var(--cnvs-base-palette-blue-700, oklch(0.4658 0.1562 255.5 / 1)));}" }
 }, "applet-icon-02002c");
 /**
  *  @deprecated ⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.

package/dist/es6/icon/lib/ExpressiveIcon.js CHANGED Viewed

@@ -16,7 +16,7 @@ export const expressiveIconStencil = createStencil({
          */
         accentColor: '',
     },
-    base: { name: "291p57", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));height:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));}.wd-expressive .wd-expressive-fill{fill:var(--color-expressive-icon-3a9572, var(--cnvs-component-expressive-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));}.wd-expressive .wd-expressive-accent{fill:var(--accentColor-expressive-icon-3a9572, var(--cnvs-component-expressive-icon-color-accent, oklch(0.0847 0 0 / 0.17)));}@media (prefers-contrast: more){.wd-expressive .wd-expressive-fill{color:currentColor;fill:currentColor;}.wd-expressive .wd-expressive-accent{color:transparent;fill:transparent;}}" }
+    base: { name: "5xsdf", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));height:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));}.wd-expressive .wd-expressive-fill{fill:var(--color-expressive-icon-3a9572, var(--cnvs-component-expressive-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));}.wd-expressive .wd-expressive-accent{fill:var(--accentColor-expressive-icon-3a9572, var(--cnvs-component-expressive-icon-color-accent, oklch(0.0847 0 0 / 0.17)));}@media (prefers-contrast: more){.wd-expressive .wd-expressive-fill{color:currentColor;fill:currentColor;}.wd-expressive .wd-expressive-accent{color:transparent;fill:transparent;}}" }
 }, "expressive-icon-3a9572");
 export const ExpressiveIcon = createComponent('span')({
     displayName: 'ExpressiveIcon',

package/dist/es6/icon/lib/Graphic.js CHANGED Viewed

@@ -38,10 +38,10 @@ export const graphicStyles = ({ width, height, grow }) => {
  */
 export const graphicStencil = createStencil({
     extends: svgStencil,
-    base: { name: "zftcd", styles: "box-sizing:border-box;" },
+    base: { name: "1oohwj", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "163y6w", styles: "width:100%;& svg{width:100%;}" }
+            true: { name: "3r7r0a", styles: "width:100%;& svg{width:100%;}" }
         }
     }
 }, "graphic-62e4cd");
@@ -50,10 +50,10 @@ export const graphicImageStencil = createStencil({
         width: '',
         height: '',
     },
-    base: { name: "4d41y9", styles: "box-sizing:border-box;width:var(--width-graphic-image-d8fecc);height:var(--height-graphic-image-d8fecc);display:inline-block;& [data-part=\"graphic-img\"]{width:var(--width-graphic-image-d8fecc);height:var(--height-graphic-image-d8fecc);max-width:100%;max-height:100%;}" },
+    base: { name: "2rjea4", styles: "box-sizing:border-box;width:var(--width-graphic-image-d8fecc);height:var(--height-graphic-image-d8fecc);display:inline-block;& [data-part=\"graphic-img\"]{width:var(--width-graphic-image-d8fecc);height:var(--height-graphic-image-d8fecc);max-width:100%;max-height:100%;}" },
     modifiers: {
         grow: {
-            true: { name: "34ery6", styles: "width:100%;& [data-part=\"graphic-img\"]{width:100%;}" }
+            true: { name: "33oloq", styles: "width:100%;& [data-part=\"graphic-img\"]{width:100%;}" }
         }
     }
 }, "graphic-image-d8fecc");

package/dist/es6/icon/lib/Svg.js CHANGED Viewed

@@ -14,13 +14,13 @@ export const svgStencil = createStencil({
         /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "39fz6h", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-bca693, var(--size-svg-bca693));height:var(--height-svg-bca693, var(--size-svg-bca693));}" },
+    base: { name: "2bua3u", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-bca693, var(--size-svg-bca693));height:var(--height-svg-bca693, var(--size-svg-bca693));}" },
     modifiers: {
         shouldMirror: {
-            true: { name: "3pmg59", styles: "transform:scaleX(-1);" }
+            true: { name: "38ol7h", styles: "transform:scaleX(-1);" }
         },
         shouldMirrorInRTL: {
-            true: { name: "2jawkz", styles: "&:dir(rtl){transform:scaleX(-1);}" }
+            true: { name: "2jlqun", styles: "&:dir(rtl){transform:scaleX(-1);}" }
         }
     }
 }, "svg-bca693");

package/dist/es6/icon/lib/SystemIcon.js CHANGED Viewed

@@ -22,7 +22,7 @@ export const systemIconStencil = createStencil({
          */
         backgroundColor: '',
     },
-    base: { name: "2nhqn1", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));height:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));}.wd-icon .wd-icon-fill{fill:var(--color-system-icon-c9acc3, var(--cnvs-component-system-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));}.wd-icon .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-c9acc3, var(--color-system-icon-c9acc3, var(--cnvs-component-system-icon-color-accent, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1)))));}.wd-icon .wd-icon-background{fill:var(--backgroundColor-system-icon-c9acc3, transparent);}@media (prefers-contrast: more){.wd-icon .wd-icon-fill, .wd-icon .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
+    base: { name: "2eh3qd", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));height:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));}.wd-icon .wd-icon-fill{fill:var(--color-system-icon-c9acc3, var(--cnvs-component-system-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));}.wd-icon .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-c9acc3, var(--color-system-icon-c9acc3, var(--cnvs-component-system-icon-color-accent, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1)))));}.wd-icon .wd-icon-background{fill:var(--backgroundColor-system-icon-c9acc3, transparent);}@media (prefers-contrast: more){.wd-icon .wd-icon-fill, .wd-icon .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
     // Keeps parent stencil `ME` inferred as `{}` so extending stencils keep correct boolean modifier typings.
     modifiers: {}
 }, "system-icon-c9acc3");

package/dist/es6/icon/lib/SystemIconCircle.js CHANGED Viewed

@@ -31,10 +31,10 @@ export const systemIconCircleStencil = createStencil({
         color: '',
         size: '',
     },
-    base: { name: "18uak3", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-11ad12, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));overflow:hidden;width:var(--size-system-icon-circle-11ad12, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)));height:var(--size-system-icon-circle-11ad12, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)));--size-svg-bca693:calc(var(--size-system-icon-circle-11ad12, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))) * 0.625);--color-system-icon-c9acc3:var(--color-system-icon-circle-11ad12);& img{width:100%;height:100%;}" },
+    base: { name: "prult", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-11ad12, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));overflow:hidden;width:var(--size-system-icon-circle-11ad12, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)));height:var(--size-system-icon-circle-11ad12, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)));--size-svg-bca693:calc(var(--size-system-icon-circle-11ad12, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))) * 0.625);--color-system-icon-c9acc3:var(--color-system-icon-circle-11ad12);& img{width:100%;height:100%;}" },
     modifiers: {
         inverse: {
-            true: { name: "32zdi1", styles: "background:var(--background-system-icon-circle-11ad12, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1))));--color-system-icon-c9acc3:var(--color-system-icon-circle-11ad12, var(--cnvs-sys-color-fg-inverse));" }
+            true: { name: "1pe53t", styles: "background:var(--background-system-icon-circle-11ad12, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1))));--color-system-icon-c9acc3:var(--color-system-icon-circle-11ad12, var(--cnvs-sys-color-fg-inverse));" }
         }
     }
 }, "system-icon-circle-11ad12");