@workday/canvas-kit-preview-react 14.1.18 → 15.0.0-alpha.0008-next.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 (69) hide show
  1. package/dist/commonjs/avatar/lib/Avatar.js +13 -13
  2. package/dist/commonjs/avatar/lib/AvatarImage.js +1 -1
  3. package/dist/commonjs/avatar/lib/AvatarName.js +1 -1
  4. package/dist/commonjs/avatar/lib/BaseAvatar.js +12 -12
  5. package/dist/commonjs/color-picker/lib/ColorPicker.js +1 -1
  6. package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
  7. package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +1 -1
  8. package/dist/commonjs/divider/lib/Divider.js +1 -1
  9. package/dist/commonjs/information-highlight/lib/InformationHighlight.js +7 -7
  10. package/dist/commonjs/information-highlight/lib/parts/Body.js +1 -1
  11. package/dist/commonjs/information-highlight/lib/parts/Heading.js +1 -1
  12. package/dist/commonjs/information-highlight/lib/parts/Link.js +1 -1
  13. package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
  14. package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
  15. package/dist/commonjs/pill/lib/Pill.d.ts +29 -29
  16. package/dist/commonjs/pill/lib/Pill.js +3 -3
  17. package/dist/commonjs/pill/lib/PillAvatar.js +1 -1
  18. package/dist/commonjs/pill/lib/PillCount.js +1 -1
  19. package/dist/commonjs/pill/lib/PillIcon.js +1 -1
  20. package/dist/commonjs/pill/lib/PillIconButton.d.ts +58 -58
  21. package/dist/commonjs/pill/lib/PillIconButton.js +1 -1
  22. package/dist/commonjs/pill/lib/PillLabel.js +1 -1
  23. package/dist/commonjs/radio/lib/RadioGroup.js +3 -3
  24. package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
  25. package/dist/commonjs/radio/lib/RadioText.js +4 -4
  26. package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
  27. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts +29 -29
  28. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +16 -16
  29. package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +4 -4
  30. package/dist/commonjs/side-panel/lib/SidePanel.js +7 -7
  31. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
  32. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +15 -15
  33. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  34. package/dist/commonjs/version/lib/version.js +1 -1
  35. package/dist/es6/avatar/lib/Avatar.js +13 -13
  36. package/dist/es6/avatar/lib/AvatarImage.js +1 -1
  37. package/dist/es6/avatar/lib/AvatarName.js +1 -1
  38. package/dist/es6/avatar/lib/BaseAvatar.js +12 -12
  39. package/dist/es6/color-picker/lib/ColorPicker.js +1 -1
  40. package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
  41. package/dist/es6/color-picker/lib/parts/SwatchBook.js +1 -1
  42. package/dist/es6/divider/lib/Divider.js +1 -1
  43. package/dist/es6/information-highlight/lib/InformationHighlight.js +7 -7
  44. package/dist/es6/information-highlight/lib/parts/Body.js +1 -1
  45. package/dist/es6/information-highlight/lib/parts/Heading.js +1 -1
  46. package/dist/es6/information-highlight/lib/parts/Link.js +1 -1
  47. package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
  48. package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
  49. package/dist/es6/pill/lib/Pill.d.ts +29 -29
  50. package/dist/es6/pill/lib/Pill.js +3 -3
  51. package/dist/es6/pill/lib/PillAvatar.js +1 -1
  52. package/dist/es6/pill/lib/PillCount.js +1 -1
  53. package/dist/es6/pill/lib/PillIcon.js +1 -1
  54. package/dist/es6/pill/lib/PillIconButton.d.ts +58 -58
  55. package/dist/es6/pill/lib/PillIconButton.js +1 -1
  56. package/dist/es6/pill/lib/PillLabel.js +1 -1
  57. package/dist/es6/radio/lib/RadioGroup.js +3 -3
  58. package/dist/es6/radio/lib/RadioLabel.js +1 -1
  59. package/dist/es6/radio/lib/RadioText.js +4 -4
  60. package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
  61. package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts +29 -29
  62. package/dist/es6/segmented-control/lib/SegmentedControlItem.js +16 -16
  63. package/dist/es6/segmented-control/lib/SegmentedControlList.js +4 -4
  64. package/dist/es6/side-panel/lib/SidePanel.js +7 -7
  65. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
  66. package/dist/es6/status-indicator/lib/StatusIndicator.js +15 -15
  67. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  68. package/dist/es6/version/lib/version.js +1 -1
  69. package/package.json +5 -5
package/dist/commonjs/pill/lib/PillIconButton.d.ts CHANGED
@@ -9,45 +9,45 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
9
9
  size: {
10
10
  large: {
11
11
  fontWeight: "--cnvs-sys-font-weight-bold";
12
- height: string;
13
- paddingInline: "--cnvs-sys-space-x8";
14
- minWidth: string;
12
+ height: "var(--cnvs-sys-size-xl, 3rem)";
13
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
14
+ minWidth: "--cnvs-base-size-1400";
15
15
  fontFamily: "--cnvs-sys-font-family-default";
16
- lineHeight: "--cnvs-sys-line-height-body-small";
17
- fontSize: "--cnvs-sys-font-size-body-small";
18
- letterSpacing: "--cnvs-base-letter-spacing-200";
16
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
17
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
18
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
19
19
  };
20
20
  medium: {
21
21
  fontWeight: "--cnvs-sys-font-weight-bold";
22
- minWidth: string;
23
- paddingInline: "--cnvs-sys-space-x6";
24
- height: "--cnvs-sys-space-x10";
25
- fontFamily: "--cnvs-sys-font-family-default";
26
- lineHeight: "--cnvs-sys-line-height-subtext-large";
27
- fontSize: "--cnvs-sys-font-size-subtext-large";
28
- letterSpacing: "--cnvs-base-letter-spacing-150";
22
+ minWidth: "--cnvs-base-size-1200";
23
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
24
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
25
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
26
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
27
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
28
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
29
29
  };
30
30
  small: {
31
31
  fontWeight: "--cnvs-sys-font-weight-bold";
32
- height: "--cnvs-sys-space-x8";
33
- minWidth: "--cnvs-sys-space-x20";
34
- paddingInline: "--cnvs-sys-space-x4";
35
- gap: "--cnvs-sys-space-x1";
36
- fontFamily: "--cnvs-sys-font-family-default";
37
- lineHeight: "--cnvs-sys-line-height-subtext-large";
38
- fontSize: "--cnvs-sys-font-size-subtext-large";
39
- letterSpacing: "--cnvs-base-letter-spacing-150";
32
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
33
+ minWidth: "--cnvs-base-size-1000";
34
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
35
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
36
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
37
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
38
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
39
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
40
40
  };
41
41
  extraSmall: {
42
42
  fontWeight: "--cnvs-sys-font-weight-bold";
43
- height: "--cnvs-sys-space-x6";
43
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
44
44
  minWidth: string;
45
- paddingInline: "--cnvs-sys-space-x3";
46
- gap: "--cnvs-sys-space-x1";
47
- fontFamily: "--cnvs-sys-font-family-default";
48
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
49
- fontSize: "--cnvs-sys-font-size-subtext-medium";
50
- letterSpacing: "--cnvs-base-letter-spacing-100";
45
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
46
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
47
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
48
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
49
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
50
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
51
51
  };
52
52
  };
53
53
  grow: {
@@ -58,7 +58,7 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
58
58
  };
59
59
  iconPosition: {
60
60
  only: {
61
- padding: "--cnvs-sys-space-zero";
61
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
62
62
  };
63
63
  start: {};
64
64
  end: {};
@@ -75,45 +75,45 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
75
75
  size: {
76
76
  large: {
77
77
  fontWeight: "--cnvs-sys-font-weight-bold";
78
- height: string;
79
- paddingInline: "--cnvs-sys-space-x8";
80
- minWidth: string;
78
+ height: "var(--cnvs-sys-size-xl, 3rem)";
79
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
80
+ minWidth: "--cnvs-base-size-1400";
81
81
  fontFamily: "--cnvs-sys-font-family-default";
82
- lineHeight: "--cnvs-sys-line-height-body-small";
83
- fontSize: "--cnvs-sys-font-size-body-small";
84
- letterSpacing: "--cnvs-base-letter-spacing-200";
82
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
83
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
84
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
85
85
  };
86
86
  medium: {
87
87
  fontWeight: "--cnvs-sys-font-weight-bold";
88
- minWidth: string;
89
- paddingInline: "--cnvs-sys-space-x6";
90
- height: "--cnvs-sys-space-x10";
91
- fontFamily: "--cnvs-sys-font-family-default";
92
- lineHeight: "--cnvs-sys-line-height-subtext-large";
93
- fontSize: "--cnvs-sys-font-size-subtext-large";
94
- letterSpacing: "--cnvs-base-letter-spacing-150";
88
+ minWidth: "--cnvs-base-size-1200";
89
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
90
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
91
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
92
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
93
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
94
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
95
95
  };
96
96
  small: {
97
97
  fontWeight: "--cnvs-sys-font-weight-bold";
98
- height: "--cnvs-sys-space-x8";
99
- minWidth: "--cnvs-sys-space-x20";
100
- paddingInline: "--cnvs-sys-space-x4";
101
- gap: "--cnvs-sys-space-x1";
102
- fontFamily: "--cnvs-sys-font-family-default";
103
- lineHeight: "--cnvs-sys-line-height-subtext-large";
104
- fontSize: "--cnvs-sys-font-size-subtext-large";
105
- letterSpacing: "--cnvs-base-letter-spacing-150";
98
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
99
+ minWidth: "--cnvs-base-size-1000";
100
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
101
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
102
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
103
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
104
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
105
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
106
106
  };
107
107
  extraSmall: {
108
108
  fontWeight: "--cnvs-sys-font-weight-bold";
109
- height: "--cnvs-sys-space-x6";
109
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
110
110
  minWidth: string;
111
- paddingInline: "--cnvs-sys-space-x3";
112
- gap: "--cnvs-sys-space-x1";
113
- fontFamily: "--cnvs-sys-font-family-default";
114
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
115
- fontSize: "--cnvs-sys-font-size-subtext-medium";
116
- letterSpacing: "--cnvs-base-letter-spacing-100";
111
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
112
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
113
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
114
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
115
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
116
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
117
117
  };
118
118
  };
119
119
  grow: {
@@ -124,7 +124,7 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
124
124
  };
125
125
  iconPosition: {
126
126
  only: {
127
- padding: "--cnvs-sys-space-zero";
127
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
128
128
  };
129
129
  start: {};
130
130
  end: {};
package/dist/commonjs/pill/lib/PillIconButton.js CHANGED
@@ -12,7 +12,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
12
12
  const layout_1 = require("@workday/canvas-kit-react/layout");
13
13
  exports.pillIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
14
14
  extends: button_1.buttonStencil,
15
- base: { name: "e5cam", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
15
+ base: { name: "2frebw", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
16
16
  }, "pill-icon-button-10e7a0");
17
17
  exports.PillIconButton = (0, common_1.createSubcomponent)('button')({
18
18
  modelHook: usePillModel_1.usePillModel,
package/dist/commonjs/pill/lib/PillLabel.js CHANGED
@@ -8,7 +8,7 @@ const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
8
8
  const usePillModel_1 = require("./usePillModel");
9
9
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
10
10
  exports.pillLabelStencil = (0, canvas_kit_styling_1.createStencil)({
11
- base: { name: "3wippg", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
11
+ base: { name: "3gtwwd", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
12
12
  }, "pill-label-412177");
13
13
  exports.PillLabel = (0, common_1.createSubcomponent)('span')({
14
14
  modelHook: usePillModel_1.usePillModel,
package/dist/commonjs/radio/lib/RadioGroup.js CHANGED
@@ -13,11 +13,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
13
13
  * Styles for RadioGroup
14
14
  */
15
15
  const radioGroupStencil = (0, canvas_kit_styling_1.createStencil)({
16
- base: { name: "ivx8h", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1-half);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
16
+ base: { name: "qpl2m", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1-half);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
17
17
  modifiers: {
18
18
  error: {
19
- error: { name: "fl0tm", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);background-color:var(--cnvs-brand-error-lightest);" },
20
- caution: { name: "2o6hz2", styles: "background-color:var(--cnvs-brand-alert-lightest);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-inner), inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-outer);" }
19
+ error: { name: "1xc4tv", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);background-color:var(--cnvs-brand-error-lightest);" },
20
+ caution: { name: "44cvt6", styles: "background-color:var(--cnvs-brand-alert-lightest);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-inner), inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-outer);" }
21
21
  }
22
22
  }
23
23
  }, "radio-group-aea204");
package/dist/commonjs/radio/lib/RadioLabel.js CHANGED
@@ -14,7 +14,7 @@ const RadioText_1 = require("./RadioText");
14
14
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
15
15
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
16
16
  const radioLabelStencil = (0, canvas_kit_styling_1.createStencil)({
17
- base: { name: "2wxbdv", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
17
+ base: { name: "3ekm4d", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
18
18
  }, "radio-label-0cca27");
19
19
  exports.RadioLabelContext = react_1.default.createContext({});
20
20
  exports.RadioLabel = (0, common_1.createSubcomponent)('label')({
package/dist/commonjs/radio/lib/RadioText.js CHANGED
@@ -15,19 +15,19 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
15
15
  const layout_1 = require("@workday/canvas-kit-react/layout");
16
16
  const radioTextStencil = (0, canvas_kit_styling_1.createStencil)({
17
17
  extends: text_1.textStencil,
18
- base: { name: "yblq8", styles: "box-sizing:border-box;cursor:pointer;" },
18
+ base: { name: "3mi5g4", styles: "box-sizing:border-box;cursor:pointer;" },
19
19
  modifiers: {
20
20
  variant: {
21
- inverse: { name: "4290q6", styles: "color:var(--cnvs-sys-color-text-inverse);" }
21
+ inverse: { name: "268k0q", styles: "color:var(--cnvs-sys-color-text-inverse);" }
22
22
  },
23
23
  disabled: {
24
- true: { name: "vyyqf", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
24
+ true: { name: "23rut0", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
25
25
  }
26
26
  },
27
27
  compound: [
28
28
  {
29
29
  modifiers: { variant: 'inverse', disabled: true },
30
- styles: { name: "19mmk6", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
30
+ styles: { name: "19qtz0", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
31
31
  }
32
32
  ],
33
33
  defaultModifiers: {
package/dist/commonjs/radio/lib/StyledRadioButton.js CHANGED
@@ -14,10 +14,10 @@ const RadioLabel_1 = require("./RadioLabel");
14
14
  const radioWidth = 18;
15
15
  const radioHeight = 18;
16
16
  const radioInputStencil = (0, canvas_kit_styling_1.createStencil)({
17
- base: { name: "12aq1q", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
17
+ base: { name: "5mc4t", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
18
18
  modifiers: {
19
19
  variant: {
20
- inverse: { name: "2ob924", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
20
+ inverse: { name: "1jceaa", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
21
21
  }
22
22
  }
23
23
  }, "radio-input-f05aaa");
@@ -28,13 +28,13 @@ const StyledRadioInput = (0, common_1.createComponent)('input')({
28
28
  },
29
29
  });
30
30
  const radioInputWrapperStyles = (0, canvas_kit_styling_1.createStencil)({
31
- base: { name: "oa0qt", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
31
+ base: { name: "be6is", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
32
32
  modifiers: {
33
33
  variant: {
34
- inverse: { name: "3q2dob", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
34
+ inverse: { name: "39bqpa", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
35
35
  },
36
36
  disabled: {
37
- true: { name: "3kozyu", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
37
+ true: { name: "1qyye0", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
38
38
  }
39
39
  }
40
40
  }, "radio-input-wrapper-styles-fce2c4");
package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts CHANGED
@@ -66,45 +66,45 @@ export declare const segmentedControlItemStencil: import("@workday/canvas-kit-st
66
66
  size: {
67
67
  large: {
68
68
  fontWeight: "--cnvs-sys-font-weight-bold";
69
- height: string;
70
- paddingInline: "--cnvs-sys-space-x8";
71
- minWidth: string;
69
+ height: "var(--cnvs-sys-size-xl, 3rem)";
70
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
71
+ minWidth: "--cnvs-base-size-1400";
72
72
  fontFamily: "--cnvs-sys-font-family-default";
73
- lineHeight: "--cnvs-sys-line-height-body-small";
74
- fontSize: "--cnvs-sys-font-size-body-small";
75
- letterSpacing: "--cnvs-base-letter-spacing-200";
73
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
74
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
75
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
76
76
  };
77
77
  medium: {
78
78
  fontWeight: "--cnvs-sys-font-weight-bold";
79
- minWidth: string;
80
- paddingInline: "--cnvs-sys-space-x6";
81
- height: "--cnvs-sys-space-x10";
82
- fontFamily: "--cnvs-sys-font-family-default";
83
- lineHeight: "--cnvs-sys-line-height-subtext-large";
84
- fontSize: "--cnvs-sys-font-size-subtext-large";
85
- letterSpacing: "--cnvs-base-letter-spacing-150";
79
+ minWidth: "--cnvs-base-size-1200";
80
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
81
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
82
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
83
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
84
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
85
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
86
86
  };
87
87
  small: {
88
88
  fontWeight: "--cnvs-sys-font-weight-bold";
89
- height: "--cnvs-sys-space-x8";
90
- minWidth: "--cnvs-sys-space-x20";
91
- paddingInline: "--cnvs-sys-space-x4";
92
- gap: "--cnvs-sys-space-x1";
93
- fontFamily: "--cnvs-sys-font-family-default";
94
- lineHeight: "--cnvs-sys-line-height-subtext-large";
95
- fontSize: "--cnvs-sys-font-size-subtext-large";
96
- letterSpacing: "--cnvs-base-letter-spacing-150";
89
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
90
+ minWidth: "--cnvs-base-size-1000";
91
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
92
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
93
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
94
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
95
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
96
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
97
97
  };
98
98
  extraSmall: {
99
99
  fontWeight: "--cnvs-sys-font-weight-bold";
100
- height: "--cnvs-sys-space-x6";
100
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
101
101
  minWidth: string;
102
- paddingInline: "--cnvs-sys-space-x3";
103
- gap: "--cnvs-sys-space-x1";
104
- fontFamily: "--cnvs-sys-font-family-default";
105
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
106
- fontSize: "--cnvs-sys-font-size-subtext-medium";
107
- letterSpacing: "--cnvs-base-letter-spacing-100";
102
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
103
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
104
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
105
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
106
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
107
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
108
108
  };
109
109
  };
110
110
  grow: {
@@ -115,7 +115,7 @@ export declare const segmentedControlItemStencil: import("@workday/canvas-kit-st
115
115
  };
116
116
  iconPosition: {
117
117
  only: {
118
- padding: "--cnvs-sys-space-zero";
118
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
119
119
  };
120
120
  start: {};
121
121
  end: {};
package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js CHANGED
@@ -37,55 +37,55 @@ const useSegmentedControlModel_1 = require("./hooks/useSegmentedControlModel");
37
37
  const useSegmentedControlItem_1 = require("./hooks/useSegmentedControlItem");
38
38
  exports.segmentedControlItemStencil = (0, canvas_kit_styling_1.createStencil)({
39
39
  extends: button_1.buttonStencil,
40
- base: { name: "35hfga", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-x1);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
40
+ base: { name: "20d23", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-f6d2bd:var(--cnvs-sys-shape-x1);--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
41
41
  modifiers: {
42
42
  size: {
43
- large: { name: "1omhrd", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
44
- medium: { name: "3rb0in", styles: "height:var(--cnvs-sys-space-x8);" },
45
- small: { name: "2wi2w6", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);" }
43
+ large: { name: "1sin8t", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
44
+ medium: { name: "1v6j6e", styles: "height:var(--cnvs-sys-space-x8);" },
45
+ small: { name: "27htgd", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);" }
46
46
  },
47
47
  variant: {
48
- iconOnly: { name: "waoe1", styles: "" },
49
- textOnly: { name: "4f6heg", styles: "" },
50
- iconWithText: { name: "1x8opx", styles: "" }
48
+ iconOnly: { name: "s83x2", styles: "" },
49
+ textOnly: { name: "1az9gt", styles: "" },
50
+ iconWithText: { name: "psdjn", styles: "" }
51
51
  }
52
52
  },
53
53
  compound: [
54
54
  {
55
55
  modifiers: { size: 'large', variant: 'iconOnly' },
56
- styles: { name: "3fq0s8", styles: "min-width:var(--cnvs-sys-space-x10);" }
56
+ styles: { name: "bwc4z", styles: "min-width:var(--cnvs-sys-space-x10);" }
57
57
  },
58
58
  {
59
59
  modifiers: { size: 'large', variant: 'iconWithText' },
60
- styles: { name: "2vwo6v", styles: "padding-inline:1.25rem var(--cnvs-sys-space-x6);" }
60
+ styles: { name: "11fn7r", styles: "padding-inline:1.25rem var(--cnvs-sys-space-x6);" }
61
61
  },
62
62
  {
63
63
  modifiers: { size: 'large', variant: 'textOnly' },
64
- styles: { name: "3xm561", styles: "padding-inline:var(--cnvs-sys-space-x6);" }
64
+ styles: { name: "3pr8f5", styles: "padding-inline:var(--cnvs-sys-space-x6);" }
65
65
  },
66
66
  {
67
67
  modifiers: { size: 'medium', variant: 'iconOnly' },
68
- styles: { name: "3z8tju", styles: "min-width:var(--cnvs-sys-space-x8);" }
68
+ styles: { name: "1rc7hf", styles: "min-width:var(--cnvs-sys-space-x8);" }
69
69
  },
70
70
  {
71
71
  modifiers: { size: 'medium', variant: 'iconWithText' },
72
- styles: { name: "3arg96", styles: "padding-inline:var(--cnvs-sys-space-x4) 1.25rem;" }
72
+ styles: { name: "26kdn1", styles: "padding-inline:var(--cnvs-sys-space-x4) 1.25rem;" }
73
73
  },
74
74
  {
75
75
  modifiers: { size: 'medium', variant: 'textOnly' },
76
- styles: { name: "3v8pjk", styles: "padding-inline:1.25rem;" }
76
+ styles: { name: "1051y1", styles: "padding-inline:1.25rem;" }
77
77
  },
78
78
  {
79
79
  modifiers: { size: 'small', variant: 'iconOnly' },
80
- styles: { name: "3riowj", styles: "min-width:var(--cnvs-sys-space-x6);" }
80
+ styles: { name: "2rwd91", styles: "min-width:var(--cnvs-sys-space-x6);" }
81
81
  },
82
82
  {
83
83
  modifiers: { size: 'small', variant: 'iconWithText' },
84
- styles: { name: "3fuxwl", styles: "padding-inline:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);" }
84
+ styles: { name: "1vc9r4", styles: "padding-inline:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);" }
85
85
  },
86
86
  {
87
87
  modifiers: { size: 'small', variant: 'textOnly' },
88
- styles: { name: "3eddul", styles: "padding-inline:var(--cnvs-sys-space-x3);" }
88
+ styles: { name: "vuvwr", styles: "padding-inline:var(--cnvs-sys-space-x3);" }
89
89
  }
90
90
  ]
91
91
  }, "segmented-control-item-bc271f");
package/dist/commonjs/segmented-control/lib/SegmentedControlList.js CHANGED
@@ -11,14 +11,14 @@ exports.segmentedControlListStencil = (0, canvas_kit_styling_1.createStencil)({
11
11
  vars: {
12
12
  items: '',
13
13
  },
14
- base: { name: "211m0d", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-bg-alt-soft);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);border-radius:var(--cnvs-sys-shape-x2);padding:0.1875rem;grid-gap:var(--cnvs-sys-space-x2);" },
14
+ base: { name: "4cpmnj", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-bg-alt-soft);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);border-radius:var(--cnvs-sys-shape-x2);padding:0.1875rem;grid-gap:var(--cnvs-sys-space-x2);" },
15
15
  modifiers: {
16
16
  disabled: {
17
- true: { name: "1ql2ly", styles: "opacity:var(--cnvs-sys-opacity-disabled);" }
17
+ true: { name: "12d36n", styles: "opacity:var(--cnvs-sys-opacity-disabled);" }
18
18
  },
19
19
  orientation: {
20
- vertical: { name: "7238e", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-0a747c), 1fr);" },
21
- horizontal: { name: "42c84x", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-0a747c), 1fr);" }
20
+ vertical: { name: "1o9xbs", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-0a747c), 1fr);" },
21
+ horizontal: { name: "3upbf9", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-0a747c), 1fr);" }
22
22
  }
23
23
  }
24
24
  }, "segmented-control-list-0a747c");
package/dist/commonjs/side-panel/lib/SidePanel.js CHANGED
@@ -36,19 +36,19 @@ exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
36
36
  expandedWidth: '',
37
37
  collapsedWidth: '',
38
38
  },
39
- base: { name: "h6obi", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
39
+ base: { name: "2k2vxf", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
40
40
  modifiers: {
41
41
  variant: {
42
- alternate: { name: "qooh6", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
43
- standard: { name: "2wlfee", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
42
+ alternate: { name: "2ndb2h", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
43
+ standard: { name: "2vrwnf", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
44
44
  },
45
45
  expanded: {
46
- true: { name: "1dfn0m", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
47
- false: { name: "1qn71x", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
46
+ true: { name: "1sxqo4", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
47
+ false: { name: "21vgde", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
48
48
  },
49
49
  touched: {
50
- true: { name: "1i0b23", styles: "" },
51
- false: { name: "3jzvgj", styles: "animation:none;" }
50
+ true: { name: "332e15", styles: "" },
51
+ false: { name: "2rw2ui", styles: "animation:none;" }
52
52
  }
53
53
  }
54
54
  }, "panel-bd9477");
package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js CHANGED
@@ -34,35 +34,35 @@ const hooks_1 = require("./hooks");
34
34
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
35
35
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
36
36
  exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
37
- base: { name: "3eg45g", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
37
+ base: { name: "1wiiqf", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
38
38
  modifiers: {
39
39
  state: {
40
- collapsing: { name: "2daxe2", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
41
- collapsed: { name: "36hlzn", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
42
- expanded: { name: "29uje2", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
43
- expanding: { name: "1jel1a", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
40
+ collapsing: { name: "25e2ff", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
41
+ collapsed: { name: "1507gi", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
42
+ expanded: { name: "2i0jv2", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
43
+ expanding: { name: "4dqasl", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
44
44
  },
45
45
  origin: {
46
- left: { name: "8y8ow", styles: "" },
47
- right: { name: "1npnvd", styles: "" }
46
+ left: { name: "fwsd", styles: "" },
47
+ right: { name: "1ji9qg", styles: "" }
48
48
  }
49
49
  },
50
50
  compound: [
51
51
  {
52
52
  modifiers: { state: 'collapsed', origin: 'right' },
53
- styles: { name: "4gqut", styles: "transform:scaleX(-1);" }
53
+ styles: { name: "3bs6ow", styles: "transform:scaleX(-1);" }
54
54
  },
55
55
  {
56
56
  modifiers: { state: 'collapsing', origin: 'right' },
57
- styles: { name: "38efg4", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
57
+ styles: { name: "1flk3s", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
58
58
  },
59
59
  {
60
60
  modifiers: { state: 'expanded', origin: 'right' },
61
- styles: { name: "4d39zb", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
61
+ styles: { name: "1ywqbw", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
62
62
  },
63
63
  {
64
64
  modifiers: { state: 'expanding', origin: 'right' },
65
- styles: { name: "2q3cxw", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
65
+ styles: { name: "30tc1a", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
66
66
  }
67
67
  ]
68
68
  }, "side-panel-toggle-button-da8098");