@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/es6/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/es6/pill/lib/PillIconButton.js CHANGED
@@ -9,7 +9,7 @@ import { system } from '@workday/canvas-tokens-web';
9
9
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
10
10
  export const pillIconButtonStencil = createStencil({
11
11
  extends: buttonStencil,
12
- 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);}" }
12
+ 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);}" }
13
13
  }, "pill-icon-button-10e7a0");
14
14
  export const PillIconButton = createSubcomponent('button')({
15
15
  modelHook: usePillModel,
package/dist/es6/pill/lib/PillLabel.js CHANGED
@@ -5,7 +5,7 @@ import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
5
5
  import { usePillModel } from './usePillModel';
6
6
  import { createStencil } from '@workday/canvas-kit-styling';
7
7
  export const pillLabelStencil = createStencil({
8
- base: { name: "3wippg", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
8
+ base: { name: "3gtwwd", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
9
9
  }, "pill-label-412177");
10
10
  export const PillLabel = createSubcomponent('span')({
11
11
  modelHook: usePillModel,
package/dist/es6/radio/lib/RadioGroup.js CHANGED
@@ -10,11 +10,11 @@ import { brand, system } from '@workday/canvas-tokens-web';
10
10
  * Styles for RadioGroup
11
11
  */
12
12
  const radioGroupStencil = createStencil({
13
- 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;" },
13
+ 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;" },
14
14
  modifiers: {
15
15
  error: {
16
- error: { name: "fl0tm", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);background-color:var(--cnvs-brand-error-lightest);" },
17
- 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);" }
16
+ error: { name: "1xc4tv", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);background-color:var(--cnvs-brand-error-lightest);" },
17
+ 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);" }
18
18
  }
19
19
  }
20
20
  }, "radio-group-aea204");
package/dist/es6/radio/lib/RadioLabel.js CHANGED
@@ -8,7 +8,7 @@ import { RadioText } from './RadioText';
8
8
  import { createStencil } from '@workday/canvas-kit-styling';
9
9
  import { system } from '@workday/canvas-tokens-web';
10
10
  const radioLabelStencil = createStencil({
11
- 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);" }
11
+ 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);" }
12
12
  }, "radio-label-0cca27");
13
13
  export const RadioLabelContext = React.createContext({});
14
14
  export const RadioLabel = createSubcomponent('label')({
package/dist/es6/radio/lib/RadioText.js CHANGED
@@ -9,19 +9,19 @@ import { system } from '@workday/canvas-tokens-web';
9
9
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
10
10
  const radioTextStencil = createStencil({
11
11
  extends: textStencil,
12
- base: { name: "yblq8", styles: "box-sizing:border-box;cursor:pointer;" },
12
+ base: { name: "3mi5g4", styles: "box-sizing:border-box;cursor:pointer;" },
13
13
  modifiers: {
14
14
  variant: {
15
- inverse: { name: "4290q6", styles: "color:var(--cnvs-sys-color-text-inverse);" }
15
+ inverse: { name: "268k0q", styles: "color:var(--cnvs-sys-color-text-inverse);" }
16
16
  },
17
17
  disabled: {
18
- true: { name: "vyyqf", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
18
+ true: { name: "23rut0", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
19
19
  }
20
20
  },
21
21
  compound: [
22
22
  {
23
23
  modifiers: { variant: 'inverse', disabled: true },
24
- styles: { name: "19mmk6", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
24
+ styles: { name: "19qtz0", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
25
25
  }
26
26
  ],
27
27
  defaultModifiers: {
package/dist/es6/radio/lib/StyledRadioButton.js CHANGED
@@ -8,10 +8,10 @@ import { RadioLabelContext } from './RadioLabel';
8
8
  const radioWidth = 18;
9
9
  const radioHeight = 18;
10
10
  const radioInputStencil = createStencil({
11
- 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);}" },
11
+ 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);}" },
12
12
  modifiers: {
13
13
  variant: {
14
- 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);}" }
14
+ 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);}" }
15
15
  }
16
16
  }
17
17
  }, "radio-input-f05aaa");
@@ -22,13 +22,13 @@ const StyledRadioInput = createComponent('input')({
22
22
  },
23
23
  });
24
24
  const radioInputWrapperStyles = createStencil({
25
- 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);}" },
25
+ 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);}" },
26
26
  modifiers: {
27
27
  variant: {
28
- inverse: { name: "3q2dob", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
28
+ inverse: { name: "39bqpa", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
29
29
  },
30
30
  disabled: {
31
- true: { name: "3kozyu", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
31
+ true: { name: "1qyye0", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
32
32
  }
33
33
  }
34
34
  }, "radio-input-wrapper-styles-fce2c4");
package/dist/es6/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/es6/segmented-control/lib/SegmentedControlItem.js CHANGED
@@ -11,55 +11,55 @@ import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
11
11
  import { useSegmentedControlItem } from './hooks/useSegmentedControlItem';
12
12
  export const segmentedControlItemStencil = createStencil({
13
13
  extends: buttonStencil,
14
- 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);}}" },
14
+ 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);}}" },
15
15
  modifiers: {
16
16
  size: {
17
- large: { name: "1omhrd", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
18
- medium: { name: "3rb0in", styles: "height:var(--cnvs-sys-space-x8);" },
19
- 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);" }
17
+ large: { name: "1sin8t", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
18
+ medium: { name: "1v6j6e", styles: "height:var(--cnvs-sys-space-x8);" },
19
+ 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);" }
20
20
  },
21
21
  variant: {
22
- iconOnly: { name: "waoe1", styles: "" },
23
- textOnly: { name: "4f6heg", styles: "" },
24
- iconWithText: { name: "1x8opx", styles: "" }
22
+ iconOnly: { name: "s83x2", styles: "" },
23
+ textOnly: { name: "1az9gt", styles: "" },
24
+ iconWithText: { name: "psdjn", styles: "" }
25
25
  }
26
26
  },
27
27
  compound: [
28
28
  {
29
29
  modifiers: { size: 'large', variant: 'iconOnly' },
30
- styles: { name: "3fq0s8", styles: "min-width:var(--cnvs-sys-space-x10);" }
30
+ styles: { name: "bwc4z", styles: "min-width:var(--cnvs-sys-space-x10);" }
31
31
  },
32
32
  {
33
33
  modifiers: { size: 'large', variant: 'iconWithText' },
34
- styles: { name: "2vwo6v", styles: "padding-inline:1.25rem var(--cnvs-sys-space-x6);" }
34
+ styles: { name: "11fn7r", styles: "padding-inline:1.25rem var(--cnvs-sys-space-x6);" }
35
35
  },
36
36
  {
37
37
  modifiers: { size: 'large', variant: 'textOnly' },
38
- styles: { name: "3xm561", styles: "padding-inline:var(--cnvs-sys-space-x6);" }
38
+ styles: { name: "3pr8f5", styles: "padding-inline:var(--cnvs-sys-space-x6);" }
39
39
  },
40
40
  {
41
41
  modifiers: { size: 'medium', variant: 'iconOnly' },
42
- styles: { name: "3z8tju", styles: "min-width:var(--cnvs-sys-space-x8);" }
42
+ styles: { name: "1rc7hf", styles: "min-width:var(--cnvs-sys-space-x8);" }
43
43
  },
44
44
  {
45
45
  modifiers: { size: 'medium', variant: 'iconWithText' },
46
- styles: { name: "3arg96", styles: "padding-inline:var(--cnvs-sys-space-x4) 1.25rem;" }
46
+ styles: { name: "26kdn1", styles: "padding-inline:var(--cnvs-sys-space-x4) 1.25rem;" }
47
47
  },
48
48
  {
49
49
  modifiers: { size: 'medium', variant: 'textOnly' },
50
- styles: { name: "3v8pjk", styles: "padding-inline:1.25rem;" }
50
+ styles: { name: "1051y1", styles: "padding-inline:1.25rem;" }
51
51
  },
52
52
  {
53
53
  modifiers: { size: 'small', variant: 'iconOnly' },
54
- styles: { name: "3riowj", styles: "min-width:var(--cnvs-sys-space-x6);" }
54
+ styles: { name: "2rwd91", styles: "min-width:var(--cnvs-sys-space-x6);" }
55
55
  },
56
56
  {
57
57
  modifiers: { size: 'small', variant: 'iconWithText' },
58
- styles: { name: "3fuxwl", styles: "padding-inline:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);" }
58
+ styles: { name: "1vc9r4", styles: "padding-inline:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);" }
59
59
  },
60
60
  {
61
61
  modifiers: { size: 'small', variant: 'textOnly' },
62
- styles: { name: "3eddul", styles: "padding-inline:var(--cnvs-sys-space-x3);" }
62
+ styles: { name: "vuvwr", styles: "padding-inline:var(--cnvs-sys-space-x3);" }
63
63
  }
64
64
  ]
65
65
  }, "segmented-control-item-bc271f");
package/dist/es6/segmented-control/lib/SegmentedControlList.js CHANGED
@@ -8,14 +8,14 @@ export const segmentedControlListStencil = createStencil({
8
8
  vars: {
9
9
  items: '',
10
10
  },
11
- 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);" },
11
+ 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);" },
12
12
  modifiers: {
13
13
  disabled: {
14
- true: { name: "1ql2ly", styles: "opacity:var(--cnvs-sys-opacity-disabled);" }
14
+ true: { name: "12d36n", styles: "opacity:var(--cnvs-sys-opacity-disabled);" }
15
15
  },
16
16
  orientation: {
17
- vertical: { name: "7238e", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-0a747c), 1fr);" },
18
- horizontal: { name: "42c84x", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-0a747c), 1fr);" }
17
+ vertical: { name: "1o9xbs", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-0a747c), 1fr);" },
18
+ horizontal: { name: "3upbf9", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-0a747c), 1fr);" }
19
19
  }
20
20
  }
21
21
  }, "segmented-control-list-0a747c");
package/dist/es6/side-panel/lib/SidePanel.js CHANGED
@@ -10,19 +10,19 @@ export const panelStencil = createStencil({
10
10
  expandedWidth: '',
11
11
  collapsedWidth: '',
12
12
  },
13
- 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;" },
13
+ 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;" },
14
14
  modifiers: {
15
15
  variant: {
16
- alternate: { name: "qooh6", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
17
- standard: { name: "2wlfee", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
16
+ alternate: { name: "2ndb2h", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
17
+ standard: { name: "2vrwnf", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
18
18
  },
19
19
  expanded: {
20
- true: { name: "1dfn0m", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
21
- false: { name: "1qn71x", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
20
+ true: { name: "1sxqo4", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
21
+ false: { name: "21vgde", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
22
22
  },
23
23
  touched: {
24
- true: { name: "1i0b23", styles: "" },
25
- false: { name: "3jzvgj", styles: "animation:none;" }
24
+ true: { name: "332e15", styles: "" },
25
+ false: { name: "2rw2ui", styles: "animation:none;" }
26
26
  }
27
27
  }
28
28
  }, "panel-bd9477");
package/dist/es6/side-panel/lib/SidePanelToggleButton.js CHANGED
@@ -8,35 +8,35 @@ import { SidePanelContext } from './hooks';
8
8
  import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
9
9
  import { system } from '@workday/canvas-tokens-web';
10
10
  export const sidePanelToggleButtonStencil = createStencil({
11
- 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);" },
11
+ 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);" },
12
12
  modifiers: {
13
13
  state: {
14
- collapsing: { name: "2daxe2", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
15
- collapsed: { name: "36hlzn", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
16
- expanded: { name: "29uje2", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
17
- expanding: { name: "1jel1a", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
14
+ collapsing: { name: "25e2ff", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
15
+ collapsed: { name: "1507gi", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
16
+ expanded: { name: "2i0jv2", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
17
+ expanding: { name: "4dqasl", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
18
18
  },
19
19
  origin: {
20
- left: { name: "8y8ow", styles: "" },
21
- right: { name: "1npnvd", styles: "" }
20
+ left: { name: "fwsd", styles: "" },
21
+ right: { name: "1ji9qg", styles: "" }
22
22
  }
23
23
  },
24
24
  compound: [
25
25
  {
26
26
  modifiers: { state: 'collapsed', origin: 'right' },
27
- styles: { name: "4gqut", styles: "transform:scaleX(-1);" }
27
+ styles: { name: "3bs6ow", styles: "transform:scaleX(-1);" }
28
28
  },
29
29
  {
30
30
  modifiers: { state: 'collapsing', origin: 'right' },
31
- styles: { name: "38efg4", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
31
+ styles: { name: "1flk3s", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
32
32
  },
33
33
  {
34
34
  modifiers: { state: 'expanded', origin: 'right' },
35
- styles: { name: "4d39zb", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
35
+ styles: { name: "1ywqbw", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
36
36
  },
37
37
  {
38
38
  modifiers: { state: 'expanding', origin: 'right' },
39
- styles: { name: "2q3cxw", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
39
+ styles: { name: "30tc1a", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
40
40
  }
41
41
  ]
42
42
  }, "side-panel-toggle-button-da8098");