@workday/canvas-kit-react 16.0.11 → 16.0.13

package/dist/commonjs/checkbox/lib/CheckboxInput.js

@@ -9,22 +9,22 @@ const CheckBackground_1 = require("./CheckBackground");
 const CheckboxRipple_1 = require("./CheckboxRipple");
 const checkboxInputStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: common_1.cornerShapeStencil,
-    base: { name: "1scaga", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));margin:0;margin-block-start:calc(0.25rem * -1);margin-inline-start:calc(0.25rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:where(:checked, :indeterminate) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ [data-part=\"checkbox-background\"]{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));border-width:0.125rem;> div{span{margin-inline-start:calc(0.375rem * -1);}div{margin-inline-start:calc(0.0625rem * -1);}}}}" },
+    base: { name: "t0hhx", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));margin:0;margin-block-start:calc(0.25rem * -1);margin-inline-start:calc(0.25rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:where(:checked, :indeterminate) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ [data-part=\"checkbox-background\"]{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));border-width:0.125rem;> div{span{margin-inline-start:calc(0.375rem * -1);}div{margin-inline-start:calc(0.0625rem * -1);}}}}" },
     modifiers: {
         variant: {
-            inverse: { name: "2hhujx", styles: "& ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}&:where(:checked, :indeterminate):not(:disabled):not(.disabled) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate):where(:disabled, .disabled) ~ [data-part=\"checkbox-background\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0rem  var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.125rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 0.125rem  var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}}" }
+            inverse: { name: "1i9et5", styles: "& ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}&:where(:checked, :indeterminate):not(:disabled):not(.disabled) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate):where(:disabled, .disabled) ~ [data-part=\"checkbox-background\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0rem  var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.125rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 0.125rem  var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}}" }
         },
         disabled: {
-            true: { name: "109wjt", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
+            true: { name: "4ljas", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
         },
         error: {
-            true: { name: "3tm2ke", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-c73dbe);box-shadow:\n            0 0 0 0.0625rem var(--errorRingColorOuter-checkbox-background-c73dbe),\n            0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-c73dbe);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n            0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n            0 0 0 0.1875rem var(--errorRingColorInner-checkbox-background-c73dbe),\n            0 0 0 0.25rem var(--errorRingColorOuter-checkbox-background-c73dbe);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-c73dbe);}" }
+            true: { name: "10slo3", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-c73dbe);box-shadow:\n            0 0 0 0.0625rem var(--errorRingColorOuter-checkbox-background-c73dbe),\n            0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-c73dbe);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n            0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n            0 0 0 0.1875rem var(--errorRingColorInner-checkbox-background-c73dbe),\n            0 0 0 0.25rem var(--errorRingColorOuter-checkbox-background-c73dbe);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-c73dbe);}" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', error: 'true' },
-            styles: { name: "kq18w", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}" }
+            styles: { name: "q1hfc", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}" }
         }
     ]
 }, "checkbox-input-3ab799");

package/dist/commonjs/checkbox/lib/CheckboxRipple.js

@@ -9,7 +9,7 @@ exports.checkboxRippleStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         ripple: 'checkbox-ripple',
     },
-    base: { name: "u0zme", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));box-shadow:none;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
+    base: { name: "3qynym", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));box-shadow:none;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
 }, "checkbox-ripple-6d137e");
 exports.CheckboxRipple = (0, common_1.createComponent)('span')({
     displayName: 'CheckboxRipple',

package/dist/commonjs/collection/lib/ListBox.js

@@ -27,11 +27,11 @@ exports.listBoxContainerStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         listBoxContainer: 'list-box-container',
     },
-    base: { name: "1y2poo", styles: "box-sizing:border-box;& :where([data-part=\"list\"]){display:flex;flex-direction:column;margin-block:0;}" },
+    base: { name: "1322am", styles: "box-sizing:border-box;& :where([data-part=\"list\"]){display:flex;flex-direction:column;margin-block:0;}" },
     modifiers: {
         orientation: {
-            vertical: { name: "u6d9z", styles: "overflow-y:auto;" },
-            horizontal: { name: "3w5mqm", styles: "overflow-y:undefined;& :where([data-part=\"list\"]){flex-direction:row;}" }
+            vertical: { name: "2395ep", styles: "overflow-y:auto;" },
+            horizontal: { name: "3q85ol", styles: "overflow-y:undefined;& :where([data-part=\"list\"]){flex-direction:row;}" }
         }
     }
 }, "list-box-container-99e676");

package/dist/commonjs/color-picker/lib/ColorInput.js

@@ -17,13 +17,13 @@ exports.colorPickerHexInputStencil = (0, canvas_kit_styling_1.createStencil)({
         poundSign: 'color-picker-hex-input-pound-sign',
         swatch: 'color-picker-hex-input-swatch',
     },
-    base: { name: "3xexq8", styles: "box-sizing:border-box;--width-color-picker-hex-input-9e7717:7.25rem;position:relative;width:var(--width-color-picker-hex-input-9e7717);[data-part=\"color-picker-hex-input\"]{min-width:var(--width-color-picker-hex-input-9e7717);width:var(--width-color-picker-hex-input-9e7717);font-family:var(--cnvs-sys-font-family-mono);padding-inline-start:calc(100% - 5.375rem);&:focus::placeholder{color:transparent;}}[data-part=\"color-picker-hex-input-pound-sign\"]{position:absolute;top:0.625rem;left:5.5rem;font-family:var(--cnvs-sys-font-family-mono);}[data-part=\"color-picker-hex-input-swatch\"]{position:absolute;top:0.625rem;left:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));box-shadow:inset 0 0 0 0.0625rem rgba(0,0,0,0.25);pointer-events:none;@media (forced-colors: active){outline:solid 0.0625rem SelectedItemText;}}:dir(ltr){[data-part=\"color-picker-hex-input\"]{padding-inline-start:2.875rem;}[data-part=\"color-picker-hex-input-pound-sign\"]{left:2.25rem;}}" },
+    base: { name: "34yspk", styles: "box-sizing:border-box;--width-color-picker-hex-input-9e7717:7.25rem;position:relative;width:var(--width-color-picker-hex-input-9e7717);[data-part=\"color-picker-hex-input\"]{min-width:var(--width-color-picker-hex-input-9e7717);width:var(--width-color-picker-hex-input-9e7717);font-family:var(--cnvs-sys-font-family-mono);padding-inline-start:calc(100% - 5.375rem);&:focus::placeholder{color:transparent;}}[data-part=\"color-picker-hex-input-pound-sign\"]{position:absolute;top:0.625rem;left:5.5rem;font-family:var(--cnvs-sys-font-family-mono);}[data-part=\"color-picker-hex-input-swatch\"]{position:absolute;top:0.625rem;left:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));box-shadow:inset 0 0 0 0.0625rem rgba(0,0,0,0.25);pointer-events:none;@media (forced-colors: active){outline:solid 0.0625rem SelectedItemText;}}:dir(ltr){[data-part=\"color-picker-hex-input\"]{padding-inline-start:2.875rem;}[data-part=\"color-picker-hex-input-pound-sign\"]{left:2.25rem;}}" },
     modifiers: {
         grow: {
-            true: { name: "3eqpdm", styles: "--width-color-picker-hex-input-9e7717:100%;" }
+            true: { name: "1nnz62", styles: "--width-color-picker-hex-input-9e7717:100%;" }
         },
         disabled: {
-            true: { name: "2wth3t", styles: "[data-part=\"color-picker-hex-input-pound-sign\"]{opacity:var(--cnvs-sys-opacity-disabled);}" }
+            true: { name: "5m4jd", styles: "[data-part=\"color-picker-hex-input-pound-sign\"]{opacity:var(--cnvs-sys-opacity-disabled);}" }
         }
     }
 }, "color-picker-hex-input-9e7717");

package/dist/commonjs/color-picker/lib/ColorPreview.js

@@ -7,7 +7,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const ColorInput_1 = require("./ColorInput");
 exports.colorPreviewStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "44egoz", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));pointer-events:none;" }
+    base: { name: "1rw7nl", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));pointer-events:none;" }
 }, "color-preview-1326de");
 exports.ColorPreview = (0, common_1.createComponent)('input')({
     displayName: 'ColorPreview',

package/dist/commonjs/color-picker/lib/parts/ColorSwatch.js

@@ -13,10 +13,10 @@ exports.colorPickerColorSwatchStencil = (0, canvas_kit_styling_1.createStencil)(
         color: '',
         iconColor: '',
     },
-    base: { name: "3xselq", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--iconColor-color-picker-color-swatch-5765a0);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));background-color:var(--color-color-picker-color-swatch-5765a0);display:flex;align-items:center;justify-content:center;forced-color-adjust:none;& > *{margin:calc(0.125rem * -1);}" },
+    base: { name: "3ey2k3", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--iconColor-color-picker-color-swatch-5765a0);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));background-color:var(--color-color-picker-color-swatch-5765a0);display:flex;align-items:center;justify-content:center;forced-color-adjust:none;& > *{margin:calc(0.125rem * -1);}" },
     modifiers: {
         withShadow: {
-            true: { name: "41i5x7", styles: "box-shadow:inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);@media (forced-colors: active){outline:solid 0.0625rem SelectedItemText;}" }
+            true: { name: "1gsxd1", styles: "box-shadow:inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);@media (forced-colors: active){outline:solid 0.0625rem SelectedItemText;}" }
         }
     }
 }, "color-picker-color-swatch-5765a0");

package/dist/commonjs/combobox/lib/ComboboxMenuList.js

@@ -21,7 +21,7 @@ exports.useComboboxMenuList = (0, common_1.createElemPropsHook)(menu_1.useMenuMo
     };
 });
 const comboboxMenuListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "38xjlj", styles: "box-sizing:border-box;" },
+    base: { name: "4aljqh", styles: "box-sizing:border-box;" },
     extends: menu_1.menuListStencil
 }, "combobox-menu-list-6c92ed");
 exports.ComboboxMenuList = (0, common_1.createSubcomponent)('ul')({

package/dist/commonjs/common/lib/AccessibleHide.js

@@ -22,7 +22,7 @@ exports.accessibleHide = {
     padding: 0,
     border: 0,
 };
-exports.accessibleHideStyles = (0, canvas_kit_styling_1.createStyles)({ name: "25s5o5", 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;" });
+exports.accessibleHideStyles = (0, canvas_kit_styling_1.createStyles)({ name: "4asl92", 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;" });
 /**
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
  */

package/dist/commonjs/common/lib/CanvasProvider.d.ts

@@ -7,6 +7,17 @@ import { CanvasProviderTheme, CanvasThemingScope, EmotionCanvasTheme } from './t
  * a numerical or legacy theme is used.
  */
 export declare const CanvasBrandStyleContext: React.Context<React.CSSProperties>;
+/**
+ * Context for providing the `data-theme` value to popup containers.
+ *
+ * Token stylesheets scope their variables to an attribute selector (e.g. Sana's
+ * `[data-theme="sana-canvas"]` block defines ~300 variables — palette, shape, depth, type).
+ * Portaled popups render under `document.body`, outside the `CanvasProvider` wrapper, so they
+ * never inherit a nested `data-theme` and none of those variables resolve. Forwarding the
+ * attribute itself lets the popup container match the same selector, so the whole theme applies
+ * through normal cascade — rather than trying to mirror every variable as an inline style.
+ */
+export declare const CanvasThemeAttributeContext: React.Context<string | undefined>;
 export interface CanvasProviderProps {
     /**
      * ⚠️ Only use this prop if you intent to to theme a part of your application that is different from global theming.

package/dist/commonjs/common/lib/CanvasProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAOnB,MAAM,WAAW,CAAC;AASnB;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,oCAA+C,CAAC;AAEpF,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,QA+E1B,CAAC;AAEH,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAC5C,OAAO,CAAC,EAAE;IACR,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBF;AAED,eAAO,MAAM,uBAAuB,UAI3B,mBAAmB,GAAG,SAAS,aAC3B,MAAM,cAAc,CAAC,WAAW,CAAC,eAC/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYhC,CAAC;AAEF,eAAO,MAAM,cAAc,8CAKxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,4CA2EzD,CAAC"}
+{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAOnB,MAAM,WAAW,CAAC;AASnB;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,oCAA+C,CAAC;AAEpF;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,mCAAqD,CAAC;AAE9F,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,QA+E1B,CAAC;AAEH,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAC5C,OAAO,CAAC,EAAE;IACR,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBF;AAED,eAAO,MAAM,uBAAuB,UAI3B,mBAAmB,GAAG,SAAS,aAC3B,MAAM,cAAc,CAAC,WAAW,CAAC,eAC/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYhC,CAAC;AAEF,eAAO,MAAM,cAAc,8CAKxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,4CAoFzD,CAAC"}

package/dist/commonjs/common/lib/CanvasProvider.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasProvider = exports.useCanvasThemeToCssVars = exports.canvasThemeToCssVars = exports.defaultBranding = exports.CanvasBrandStyleContext = void 0;
+exports.CanvasProvider = exports.useCanvasThemeToCssVars = exports.canvasThemeToCssVars = exports.defaultBranding = exports.CanvasThemeAttributeContext = exports.CanvasBrandStyleContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@emotion/react");
 const React = __importStar(require("react"));
@@ -39,10 +39,21 @@ const sanaTheme_1 = require("./theming/sanaTheme");
  * a numerical or legacy theme is used.
  */
 exports.CanvasBrandStyleContext = React.createContext({});
+/**
+ * Context for providing the `data-theme` value to popup containers.
+ *
+ * Token stylesheets scope their variables to an attribute selector (e.g. Sana's
+ * `[data-theme="sana-canvas"]` block defines ~300 variables — palette, shape, depth, type).
+ * Portaled popups render under `document.body`, outside the `CanvasProvider` wrapper, so they
+ * never inherit a nested `data-theme` and none of those variables resolve. Forwarding the
+ * attribute itself lets the popup container match the same selector, so the whole theme applies
+ * through normal cascade — rather than trying to mirror every variable as an inline style.
+ */
+exports.CanvasThemeAttributeContext = React.createContext(undefined);
 /**
  * If you wish to reset the theme to the default, apply this class on the CanvasProvider.
  */
-exports.defaultBranding = (0, canvas_kit_styling_1.createStyles)({ name: "41l34g", styles: "--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-amber-400);--cnvs-brand-common-alert-outer:var(--cnvs-base-palette-amber-500);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-red-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blue-500);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-slate-800);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-slate-700);--cnvs-brand-neutral-base:var(--cnvs-base-palette-slate-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-slate-200);--cnvs-brand-neutral-lighter:var(--cnvs-base-palette-slate-50);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-slate-25);--cnvs-brand-success-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-800);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-700);--cnvs-brand-success-base:var(--cnvs-base-palette-green-600);--cnvs-brand-success-light:var(--cnvs-base-palette-green-200);--cnvs-brand-success-lighter:var(--cnvs-base-palette-green-50);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-25);--cnvs-brand-error-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-error-darkest:var(--cnvs-base-palette-red-800);--cnvs-brand-error-dark:var(--cnvs-base-palette-red-700);--cnvs-brand-error-base:var(--cnvs-base-palette-red-600);--cnvs-brand-error-light:var(--cnvs-base-palette-red-200);--cnvs-brand-error-lighter:var(--cnvs-base-palette-red-50);--cnvs-brand-error-lightest:var(--cnvs-base-palette-red-25);--cnvs-brand-alert-accent:var(--cnvs-base-palette-neutral-900);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-amber-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-amber-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-amber-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-amber-200);--cnvs-brand-alert-lighter:var(--cnvs-base-palette-amber-50);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-amber-25);--cnvs-brand-primary-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blue-800);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blue-700);--cnvs-brand-primary-base:var(--cnvs-base-palette-blue-600);--cnvs-brand-primary-light:var(--cnvs-base-palette-blue-200);--cnvs-brand-primary-lighter:var(--cnvs-base-palette-blue-50);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blue-25);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);--cnvs-sys-color-brand-focus-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-border-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-accent-primary:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-action:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-accent-caution:var(--cnvs-brand-alert-base);--cnvs-sys-color-brand-accent-positive:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-primary-default:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-fg-primary-strong:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-fg-critical-default:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-fg-critical-strong:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-fg-caution-default:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-caution-strong:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-positive-default:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-positive-strong:var(--cnvs-brand-success-dark);--cnvs-sys-color-brand-fg-selected:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-focus-critical:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-border-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-focus-caution-inner:var(--cnvs-brand-common-alert-inner);--cnvs-sys-color-brand-focus-caution-outer:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-border-caution:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-surface-primary-default:var(--cnvs-brand-primary-lightest);--cnvs-sys-color-brand-surface-primary-strong:var(--cnvs-brand-primary-lighter);--cnvs-sys-color-brand-surface-critical-default:var(--cnvs-brand-error-lightest);--cnvs-sys-color-brand-surface-critical-strong:var(--cnvs-brand-error-lighter);--cnvs-sys-color-brand-surface-caution-default:var(--cnvs-brand-alert-lightest);--cnvs-sys-color-brand-surface-caution-strong:var(--cnvs-brand-alert-lighter);--cnvs-sys-color-brand-surface-positive-default:var(--cnvs-brand-success-lightest);--cnvs-sys-color-brand-surface-positive-strong:var(--cnvs-brand-success-lighter);--cnvs-sys-color-brand-surface-selected:var(--cnvs-brand-primary-lighter);" });
+exports.defaultBranding = (0, canvas_kit_styling_1.createStyles)({ name: "368jno", styles: "--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-amber-400);--cnvs-brand-common-alert-outer:var(--cnvs-base-palette-amber-500);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-red-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blue-500);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-slate-800);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-slate-700);--cnvs-brand-neutral-base:var(--cnvs-base-palette-slate-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-slate-200);--cnvs-brand-neutral-lighter:var(--cnvs-base-palette-slate-50);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-slate-25);--cnvs-brand-success-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-800);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-700);--cnvs-brand-success-base:var(--cnvs-base-palette-green-600);--cnvs-brand-success-light:var(--cnvs-base-palette-green-200);--cnvs-brand-success-lighter:var(--cnvs-base-palette-green-50);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-25);--cnvs-brand-error-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-error-darkest:var(--cnvs-base-palette-red-800);--cnvs-brand-error-dark:var(--cnvs-base-palette-red-700);--cnvs-brand-error-base:var(--cnvs-base-palette-red-600);--cnvs-brand-error-light:var(--cnvs-base-palette-red-200);--cnvs-brand-error-lighter:var(--cnvs-base-palette-red-50);--cnvs-brand-error-lightest:var(--cnvs-base-palette-red-25);--cnvs-brand-alert-accent:var(--cnvs-base-palette-neutral-900);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-amber-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-amber-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-amber-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-amber-200);--cnvs-brand-alert-lighter:var(--cnvs-base-palette-amber-50);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-amber-25);--cnvs-brand-primary-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blue-800);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blue-700);--cnvs-brand-primary-base:var(--cnvs-base-palette-blue-600);--cnvs-brand-primary-light:var(--cnvs-base-palette-blue-200);--cnvs-brand-primary-lighter:var(--cnvs-base-palette-blue-50);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blue-25);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);--cnvs-sys-color-brand-focus-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-border-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-accent-primary:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-action:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-accent-caution:var(--cnvs-brand-alert-base);--cnvs-sys-color-brand-accent-positive:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-primary-default:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-fg-primary-strong:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-fg-critical-default:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-fg-critical-strong:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-fg-caution-default:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-caution-strong:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-positive-default:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-positive-strong:var(--cnvs-brand-success-dark);--cnvs-sys-color-brand-fg-selected:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-focus-critical:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-border-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-focus-caution-inner:var(--cnvs-brand-common-alert-inner);--cnvs-sys-color-brand-focus-caution-outer:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-border-caution:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-surface-primary-default:var(--cnvs-brand-primary-lightest);--cnvs-sys-color-brand-surface-primary-strong:var(--cnvs-brand-primary-lighter);--cnvs-sys-color-brand-surface-critical-default:var(--cnvs-brand-error-lightest);--cnvs-sys-color-brand-surface-critical-strong:var(--cnvs-brand-error-lighter);--cnvs-sys-color-brand-surface-caution-default:var(--cnvs-brand-alert-lightest);--cnvs-sys-color-brand-surface-caution-strong:var(--cnvs-brand-alert-lighter);--cnvs-sys-color-brand-surface-positive-default:var(--cnvs-brand-success-lightest);--cnvs-sys-color-brand-surface-positive-strong:var(--cnvs-brand-success-lighter);--cnvs-sys-color-brand-surface-selected:var(--cnvs-brand-primary-lighter);" });
 /** Pure function — safe to call outside React hooks (e.g. usePopupStack). */
 function canvasThemeToCssVars(theme, elemProps, options) {
     var _a, _b;
@@ -82,7 +93,7 @@ theme, elemProps, themeScope) => {
 };
 exports.useCanvasThemeToCssVars = useCanvasThemeToCssVars;
 const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
-    var _a;
+    var _a, _b;
     // Add console warning for unnecessary sanaCanvasProviderTheme usage
     React.useEffect(() => {
         if (process.env.NODE_ENV !== 'production') {
@@ -103,6 +114,10 @@ const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
     const cache = (0, canvas_kit_styling_1.getCache)();
     // Read parent context to support nested scoped providers
     const parentBrandStyle = React.useContext(exports.CanvasBrandStyleContext);
+    const parentThemeAttribute = React.useContext(exports.CanvasThemeAttributeContext);
+    // `data-theme` on this provider wins; otherwise inherit from a parent provider so nested
+    // providers keep forwarding the outer theme attribute to popups.
+    const themeAttribute = (_a = props['data-theme']) !== null && _a !== void 0 ? _a : parentThemeAttribute;
     // Popup forwarding only needs CSS custom properties (not consumer layout styles).
     const mergedBrandStyle = React.useMemo(() => {
         const merged = {};
@@ -121,8 +136,8 @@ const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
         : undefined;
     const content = ((0, jsx_runtime_1.jsx)("div", { dir: (0, theming_1.isNumericalTheme)(theme)
             ? theme.direction || theming_1.defaultCanvasTheme.direction
-            : ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || theming_1.defaultCanvasTheme.direction, className: className, ...elemProps, style: style, children: children }));
-    const wrappedContent = ((0, jsx_runtime_1.jsx)(exports.CanvasBrandStyleContext.Provider, { value: mergedBrandStyle, children: content }));
+            : ((_b = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _b === void 0 ? void 0 : _b.direction) || theming_1.defaultCanvasTheme.direction, className: className, ...elemProps, style: style, children: children }));
+    const wrappedContent = ((0, jsx_runtime_1.jsx)(exports.CanvasThemeAttributeContext.Provider, { value: themeAttribute, children: (0, jsx_runtime_1.jsx)(exports.CanvasBrandStyleContext.Provider, { value: mergedBrandStyle, children: content }) }));
     return ((0, jsx_runtime_1.jsx)(react_1.CacheProvider, { value: cache, children: emotionTheme ? ((0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { theme: emotionTheme, children: wrappedContent })) : (wrappedContent) }));
 };
 exports.CanvasProvider = CanvasProvider;

package/dist/commonjs/common/lib/EllipsisText.js

@@ -4,7 +4,7 @@ exports.EllipsisText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const utils_1 = require("./utils");
-const ellipsisStyles = (0, canvas_kit_styling_1.createStyles)({ name: "120jq", styles: "white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" });
+const ellipsisStyles = (0, canvas_kit_styling_1.createStyles)({ name: "3b6c2v", styles: "white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" });
 exports.EllipsisText = (0, utils_1.createComponent)('span')({
     displayName: 'EllipsisText',
     Component({ children, ...elemProps }, ref, Element) {

package/dist/commonjs/common/lib/styles/cornerShape.js

@@ -11,5 +11,5 @@ exports.cornerShapeStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         shape: '',
     },
-    base: { name: "mwwm4", styles: "box-sizing:border-box;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);" }
+    base: { name: "343q3i", styles: "box-sizing:border-box;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);" }
 }, "corner-shape-ccab68");

package/dist/commonjs/common/lib/theming/brandScope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"brandScope.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/brandScope.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,sBAAsB,EACtB,yBAAyB,EACzB,mBAAmB,EACnB,WAAW,EACX,yBAAyB,EAE1B,MAAM,SAAS,CAAC;AAEjB,oFAAoF;AACpF,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,mBAAmB,GACzB,KAAK,IAAI,yBAAyB,CAMpC;AAED,8EAA8E;AAC9E,eAAO,MAAM,0BAA0B;;;;;;;CAO7B,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;CAS1B,CAAC;AASX,KAAK,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAsB9E,+EAA+E;AAC/E,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,UAAU,GAAG,QAAQ,EAC5B,IAAI,EAAE,eAAe,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,SAAS,EAClF,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,OAAO,CAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAAC,QA0BnC;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAiDvF;AAED,8EAA8E;AAC9E,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAmBzF;AAED,6EAA6E;AAC7E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAsBvF;AAED,gFAAgF;AAChF,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAYzF;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAKvF;AAED,wEAAwE;AACxE,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,SAAS,EAC3D,KAAK,EAAE,KAAK,CAAC,aAAa,QAW3B;AAED,6EAA6E;AAC7E,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,CAAC,OAAO,CAAC,GAAG,SAAS,EACrD,KAAK,EAAE,KAAK,CAAC,aAAa,QAK3B;AAaD;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,KAAK,EAAE,KAAK,CAAC,aAAa,QAmD3B;AAED,6EAA6E;AAC7E,wBAAgB,yBAAyB,CACvC,eAAe,EAAE;IAAC,KAAK,CAAC,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAC,CAAA;CAAC,GAAG,SAAS,EACxE,KAAK,EAAE,KAAK,CAAC,aAAa,QAyB3B;AAqBD,+FAA+F;AAC/F,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,EAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,OAAO,CAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,QA+G/B;AAED,mGAAmG;AACnG,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,KAAK,EAAE,OAAO,GAAG,MAAM,QA6CxB;AAED,qFAAqF;AACrF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,QAoB3B"}
+{"version":3,"file":"brandScope.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/brandScope.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,sBAAsB,EACtB,yBAAyB,EACzB,mBAAmB,EACnB,WAAW,EACX,yBAAyB,EAE1B,MAAM,SAAS,CAAC;AAEjB,oFAAoF;AACpF,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,mBAAmB,GACzB,KAAK,IAAI,yBAAyB,CAMpC;AAED,8EAA8E;AAC9E,eAAO,MAAM,0BAA0B;;;;;;;CAO7B,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;CAS1B,CAAC;AASX,KAAK,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AA2B9E,+EAA+E;AAC/E,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,UAAU,GAAG,QAAQ,EAC5B,IAAI,EAAE,eAAe,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,SAAS,EAClF,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,OAAO,CAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAAC,QA0BnC;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAiDvF;AAED,8EAA8E;AAC9E,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAmBzF;AAED,6EAA6E;AAC7E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAsBvF;AAED,gFAAgF;AAChF,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAYzF;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAKvF;AAED,wEAAwE;AACxE,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,SAAS,EAC3D,KAAK,EAAE,KAAK,CAAC,aAAa,QAW3B;AAED,6EAA6E;AAC7E,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,CAAC,OAAO,CAAC,GAAG,SAAS,EACrD,KAAK,EAAE,KAAK,CAAC,aAAa,QAK3B;AAaD;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,KAAK,EAAE,KAAK,CAAC,aAAa,QAmD3B;AAED,6EAA6E;AAC7E,wBAAgB,yBAAyB,CACvC,eAAe,EAAE;IAAC,KAAK,CAAC,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAC,CAAA;CAAC,GAAG,SAAS,EACxE,KAAK,EAAE,KAAK,CAAC,aAAa,QAyB3B;AAqBD,+FAA+F;AAC/F,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,EAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,OAAO,CAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,QA+G/B;AAED,mGAAmG;AACnG,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,KAAK,EAAE,OAAO,GAAG,MAAM,QA6CxB;AAED,qFAAqF;AACrF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,QAoB3B"}

package/dist/commonjs/common/lib/theming/brandScope.js

@@ -54,6 +54,11 @@ const EXTENDED_BRAND_TOKEN_MAP = {
     neutral150: '--cnvs-brand-neutral-150',
     neutral850: '--cnvs-brand-neutral-850',
     neutralA150: '--cnvs-brand-neutral-a150',
+    neutralA850: '--cnvs-brand-neutral-a850',
+    primaryA300: '--cnvs-brand-primary-a300',
+    criticalA300: '--cnvs-brand-critical-a300',
+    cautionA300: '--cnvs-brand-caution-a300',
+    positiveA300: '--cnvs-brand-positive-a300',
 };
 const setStyleVar = (style, token, value) => {
     // @ts-ignore - CSS custom property key

package/dist/commonjs/common/lib/theming/sanaTheme.d.ts

@@ -2,6 +2,29 @@ import type { CanvasNumericalBrandTheme } from './types';
 /**
  * Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
  * Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
+ *
+ * Mirrors only what Sana's stylesheet itself defines: the `neutral` ramp, the `A300` step of
+ * `primary`/`critical`/`caution`/`positive` (the one step Sana redefines for those families — a
+ * stronger alpha wash on the matching hue), and the four `system.color.brand.*` tokens Sana
+ * overrides. Every other key is intentionally omitted — Sana does not define a distinct value
+ * for it, so writing it here would only reference the very variable being written (a `var()`
+ * cycle that resolves to invalid, leaking the classic-theme fallback color instead of Sana's).
+ *
+ * `action.*` and `selected.*` are deliberately **not** set. Sana's stylesheet does not define
+ * `--cnvs-brand-action-*` or `--cnvs-sys-color-brand-fg-selected`/`-surface-selected`; those are
+ * derived downstream from the root theme. Forcing them here would pin values the root is meant
+ * to own.
+ *
+ * Ramp values must reference `base.*` (the underlying palette), never `brand.*` of the same
+ * name — CanvasProvider writes each entry onto the identically-named `--cnvs-brand-*` CSS
+ * variable, so referencing `brand.*` here would create that same self-reference cycle. The
+ * `system.color.brand.*` overrides are the exception: they target *different* CSS variables
+ * (`--cnvs-sys-color-brand-*`) than the `brand.*` values they reference, so no cycle.
+ *
+ * Note this preset only covers brand tokens. The rest of Sana (shape, depth, type, non-brand
+ * system colors) comes from the stylesheet's `[data-theme="sana-canvas"]` block — pass
+ * `data-theme` to `CanvasProvider` alongside this preset and it is forwarded to portaled popups
+ * so the full theme applies there too.
  */
 export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
 /**
@@ -18,6 +41,14 @@ export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
  * - Prefer setting `data-theme="sana-canvas"` on `<html>` with Sana CSS imported. Popups then
  *   inherit brand variables from the document and no `theme` prop is needed.
  *
+ * Pass `data-theme="sana-canvas"` alongside it. That attribute is forwarded to popup stack
+ * containers, so the rest of Sana (shape, depth, type, non-brand system colors) applies to
+ * portaled content through the stylesheet's own `[data-theme="sana-canvas"]` block — this preset
+ * covers brand tokens, the attribute covers everything else.
+ *
+ * `action.*` and selected-state tokens are not set by this preset — Sana does not define them,
+ * and they resolve from the root theme.
+ *
  * @example
  * ```tsx
  * // Preferred — control <html>
@@ -25,8 +56,10 @@ export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
  * // <html data-theme="sana-canvas">
  * <CanvasProvider><App /></CanvasProvider>
  *
- * // No access to <html> — required for popup parity
- * <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
+ * // No access to <html> — pass both for full parity, including portaled popups
+ * <CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
+ *   <App />
+ * </CanvasProvider>
  * ```
  */
 export declare const sanaCanvasProviderTheme: CanvasNumericalBrandTheme;

package/dist/commonjs/common/lib/theming/sanaTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanaTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/sanaTheme.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,SAAS,CAAC;AAevD;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,yBAmEtC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,uBAAuB,2BAA2B,CAAC"}
+{"version":3,"file":"sanaTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/sanaTheme.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,SAAS,CAAC;AAavD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,wBAAwB,EAAE,yBAiEtC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,uBAAuB,2BAA2B,CAAC"}

package/dist/commonjs/common/lib/theming/sanaTheme.js

@@ -18,88 +18,109 @@ exports.sanaCanvasProviderTheme = exports.sanaCanvasNumericalTheme = void 0;
  * | `sanaCanvasNumericalTheme` | Numerical `brand` shape for popup forwarding |
  * | `sanaCanvasProviderTheme` | Same — pass to root `CanvasProvider` when `<html>` is unavailable |
  */
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-/** Reference a canvas-tokens CSS variable (resolves under `[data-theme="sana-canvas"]`). */
-const varRef = (token) => `var(${token})`;
 /**
- * Sana extends the neutral ramp with steps not yet exported from canvas-tokens-web JS.
- * Defined in `@workday/canvas-tokens-web/css/sana/_variables.css`.
+ * `base.sana` is a pre-built map of `var(--token, fallback)` strings exported by
+ * canvas-tokens-web specifically for these Sana-only base-palette steps — use them directly,
+ * not `cssVar()` (which expects a bare variable name, not an already-wrapped `var()` string).
+ * Referencing `base.*` (not `brand.*` of the same name) avoids a `var()` self-reference cycle:
+ * CanvasProvider writes each ramp entry onto the identically-named `--cnvs-brand-*` variable, so
+ * `brand.sana.neutral150` (itself `var(--cnvs-brand-neutral-150, ...)`) would point right back at
+ * the variable being written.
  */
-const sanaBrandNeutral = {
-    '150': '--cnvs-brand-neutral-150',
-    '850': '--cnvs-brand-neutral-850',
-    A150: '--cnvs-brand-neutral-a150',
-};
+const sanaBasePalette = canvas_tokens_web_1.base.sana;
 /**
  * Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
  * Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
+ *
+ * Mirrors only what Sana's stylesheet itself defines: the `neutral` ramp, the `A300` step of
+ * `primary`/`critical`/`caution`/`positive` (the one step Sana redefines for those families — a
+ * stronger alpha wash on the matching hue), and the four `system.color.brand.*` tokens Sana
+ * overrides. Every other key is intentionally omitted — Sana does not define a distinct value
+ * for it, so writing it here would only reference the very variable being written (a `var()`
+ * cycle that resolves to invalid, leaking the classic-theme fallback color instead of Sana's).
+ *
+ * `action.*` and `selected.*` are deliberately **not** set. Sana's stylesheet does not define
+ * `--cnvs-brand-action-*` or `--cnvs-sys-color-brand-fg-selected`/`-surface-selected`; those are
+ * derived downstream from the root theme. Forcing them here would pin values the root is meant
+ * to own.
+ *
+ * Ramp values must reference `base.*` (the underlying palette), never `brand.*` of the same
+ * name — CanvasProvider writes each entry onto the identically-named `--cnvs-brand-*` CSS
+ * variable, so referencing `brand.*` here would create that same self-reference cycle. The
+ * `system.color.brand.*` overrides are the exception: they target *different* CSS variables
+ * (`--cnvs-sys-color-brand-*`) than the `brand.*` values they reference, so no cycle.
+ *
+ * Note this preset only covers brand tokens. The rest of Sana (shape, depth, type, non-brand
+ * system colors) comes from the stylesheet's `[data-theme="sana-canvas"]` block — pass
+ * `data-theme` to `CanvasProvider` alongside this preset and it is forwarded to portaled popups
+ * so the full theme applies there too.
  */
 exports.sanaCanvasNumericalTheme = {
     // Explicit brand vars only — multi-key ramps write 1:1; no system shortcut bundles run.
     themeScope: 'brand',
     brand: {
-        action: {
-            base: varRef(canvas_tokens_web_1.brand.neutral975),
-            dark: varRef(canvas_tokens_web_1.brand.neutral950),
-            darkest: varRef(canvas_tokens_web_1.brand.neutral900),
-            accent: varRef(canvas_tokens_web_1.base.neutral0),
-            lightest: varRef(canvas_tokens_web_1.brand.neutral25),
-            lighter: varRef(canvas_tokens_web_1.brand.neutral50),
-            light: varRef(canvas_tokens_web_1.brand.neutral200),
-        },
-        neutral: {
-            '25': varRef(canvas_tokens_web_1.brand.neutral25),
-            '50': varRef(canvas_tokens_web_1.brand.neutral50),
-            '100': varRef(canvas_tokens_web_1.brand.neutral100),
-            '150': varRef(sanaBrandNeutral['150']),
-            '200': varRef(canvas_tokens_web_1.brand.neutral200),
-            '300': varRef(canvas_tokens_web_1.brand.neutral300),
-            '400': varRef(canvas_tokens_web_1.brand.neutral400),
-            '500': varRef(canvas_tokens_web_1.brand.neutral500),
-            '600': varRef(canvas_tokens_web_1.brand.neutral600),
-            '700': varRef(canvas_tokens_web_1.brand.neutral700),
-            '800': varRef(canvas_tokens_web_1.brand.neutral800),
-            '850': varRef(sanaBrandNeutral['850']),
-            '900': varRef(canvas_tokens_web_1.brand.neutral900),
-            '950': varRef(canvas_tokens_web_1.brand.neutral950),
-            '975': varRef(canvas_tokens_web_1.brand.neutral975),
-            A25: varRef(canvas_tokens_web_1.brand.neutralA25),
-            A50: varRef(canvas_tokens_web_1.brand.neutralA50),
-            A100: varRef(canvas_tokens_web_1.brand.neutralA100),
-            A150: varRef(sanaBrandNeutral.A150),
-            A200: varRef(canvas_tokens_web_1.brand.neutralA200),
-        },
         primary: {
-            '500': varRef(canvas_tokens_web_1.brand.primary500),
-            '600': varRef(canvas_tokens_web_1.brand.primary600),
-            '700': varRef(canvas_tokens_web_1.brand.primary700),
-            A25: varRef(canvas_tokens_web_1.brand.primaryA25),
-            A50: varRef(canvas_tokens_web_1.brand.primaryA50),
-            A100: varRef(canvas_tokens_web_1.brand.primaryA100),
+            A300: sanaBasePalette.blueA300,
         },
         critical: {
-            '500': varRef(canvas_tokens_web_1.brand.critical500),
-            '600': varRef(canvas_tokens_web_1.brand.critical600),
-            '700': varRef(canvas_tokens_web_1.brand.critical700),
-            A25: varRef(canvas_tokens_web_1.brand.criticalA25),
-            A50: varRef(canvas_tokens_web_1.brand.criticalA50),
+            A300: sanaBasePalette.redA300,
         },
         caution: {
-            '400': varRef(canvas_tokens_web_1.brand.caution400),
-            '500': varRef(canvas_tokens_web_1.brand.caution500),
-            A25: varRef(canvas_tokens_web_1.brand.cautionA25),
-            A50: varRef(canvas_tokens_web_1.brand.cautionA50),
+            A300: sanaBasePalette.amberA300,
         },
         positive: {
-            '600': varRef(canvas_tokens_web_1.brand.positive600),
-            '800': varRef(canvas_tokens_web_1.brand.positive800),
-            A25: varRef(canvas_tokens_web_1.brand.positiveA25),
-            A50: varRef(canvas_tokens_web_1.brand.positiveA50),
+            A300: sanaBasePalette.greenA300,
+        },
+        neutral: {
+            '25': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral25),
+            '50': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral50),
+            '100': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral100),
+            '150': sanaBasePalette.neutral150,
+            '200': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral200),
+            '300': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral300),
+            '400': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral400),
+            '500': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral500),
+            '600': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral600),
+            '700': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral700),
+            '800': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral800),
+            '850': sanaBasePalette.neutral850,
+            '900': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral900),
+            '950': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral950),
+            '975': (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutral975),
+            A25: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA25),
+            A50: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA50),
+            A100: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA100),
+            A150: sanaBasePalette.neutralA150,
+            A200: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA200),
+            A300: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA300),
+            A400: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA400),
+            A500: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA500),
+            A600: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA600),
+            A700: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA700),
+            A800: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA800),
+            A850: sanaBasePalette.neutralA850,
+            A900: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA900),
+            A950: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA950),
+            A975: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.neutralA975),
         },
     },
-    selected: {
-        fg: varRef(canvas_tokens_web_1.brand.neutralA900),
-        surface: varRef(canvas_tokens_web_1.brand.neutralA100),
+    system: {
+        color: {
+            brand: {
+                accent: {
+                    primary: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.neutral975),
+                    action: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.neutral975),
+                },
+                fg: {
+                    primary: {
+                        default: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.neutralA900),
+                        strong: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.neutralA950),
+                    },
+                },
+            },
+        },
     },
 };
 /**
@@ -116,6 +137,14 @@ exports.sanaCanvasNumericalTheme = {
  * - Prefer setting `data-theme="sana-canvas"` on `<html>` with Sana CSS imported. Popups then
  *   inherit brand variables from the document and no `theme` prop is needed.
  *
+ * Pass `data-theme="sana-canvas"` alongside it. That attribute is forwarded to popup stack
+ * containers, so the rest of Sana (shape, depth, type, non-brand system colors) applies to
+ * portaled content through the stylesheet's own `[data-theme="sana-canvas"]` block — this preset
+ * covers brand tokens, the attribute covers everything else.
+ *
+ * `action.*` and selected-state tokens are not set by this preset — Sana does not define them,
+ * and they resolve from the root theme.
+ *
  * @example
  * ```tsx
  * // Preferred — control <html>
@@ -123,8 +152,10 @@ exports.sanaCanvasNumericalTheme = {
  * // <html data-theme="sana-canvas">
  * <CanvasProvider><App /></CanvasProvider>
  *
- * // No access to <html> — required for popup parity
- * <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
+ * // No access to <html> — pass both for full parity, including portaled popups
+ * <CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
+ *   <App />
+ * </CanvasProvider>
  * ```
  */
 exports.sanaCanvasProviderTheme = exports.sanaCanvasNumericalTheme;

package/dist/commonjs/common/lib/theming/types.d.ts

@@ -285,12 +285,12 @@ export type EmotionCanvasTheme = {
  *
  * 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>>;
+export type CanvasBrandRamp = Partial<Record<'25' | '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | '975' | 'A25' | 'A50' | 'A100' | 'A200' | 'A300', string>>;
 /**
- * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not
- * exported for primary/critical/caution/positive families.
+ * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150` / `A850`), plus the
+ * extended alpha steps (`A400`–`A975`) that only the neutral family exposes.
  */
-export type CanvasNeutralBrandRamp = CanvasBrandRamp & Partial<Record<'150' | '850' | 'A150', string>>;
+export type CanvasNeutralBrandRamp = CanvasBrandRamp & Partial<Record<'150' | '850' | 'A150' | 'A400' | 'A500' | 'A600' | 'A700' | 'A800' | 'A850' | 'A900' | 'A950' | 'A975', string>>;
 /** Semantic keys for `brand.action.*` CSS variables (PrimaryButton, etc.). */
 export type CanvasActionBrandRamp = Partial<Record<'base' | 'lightest' | 'lighter' | 'light' | 'dark' | 'darkest' | 'darker' | 'accent', string>>;
 /**

package/dist/commonjs/common/lib/theming/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"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"}