@workday/canvas-kit-react 16.0.0-alpha.0462-next.0 → 16.0.0-alpha.0463-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 (22) hide show
  1. package/action-bar/lib/ActionBarList.tsx +2 -3
  2. package/dist/commonjs/action-bar/lib/ActionBarList.d.ts +1 -8
  3. package/dist/commonjs/action-bar/lib/ActionBarList.d.ts.map +1 -1
  4. package/dist/commonjs/action-bar/lib/ActionBarList.js +2 -2
  5. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts +6 -4
  6. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts.map +1 -1
  7. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +17 -17
  8. package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts +12 -0
  9. package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts.map +1 -1
  10. package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +10 -4
  11. package/dist/es6/action-bar/lib/ActionBarList.d.ts +1 -8
  12. package/dist/es6/action-bar/lib/ActionBarList.d.ts.map +1 -1
  13. package/dist/es6/action-bar/lib/ActionBarList.js +3 -3
  14. package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts +6 -4
  15. package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts.map +1 -1
  16. package/dist/es6/segmented-control/lib/SegmentedControlItem.js +19 -19
  17. package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts +12 -0
  18. package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts.map +1 -1
  19. package/dist/es6/segmented-control/lib/SegmentedControlList.js +11 -5
  20. package/package.json +4 -4
  21. package/segmented-control/lib/SegmentedControlItem.tsx +23 -30
  22. package/segmented-control/lib/SegmentedControlList.tsx +17 -4
package/action-bar/lib/ActionBarList.tsx CHANGED
@@ -4,7 +4,7 @@ import {useListRenderItems, useOverflowListMeasure} from '@workday/canvas-kit-re
4
4
  import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
5
5
  import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
6
6
  import {createStencil, px2rem} from '@workday/canvas-kit-styling';
7
- import {base, system} from '@workday/canvas-tokens-web';
7
+ import {system} from '@workday/canvas-tokens-web';
8
8
 
9
9
  import {useActionBarModel} from './useActionBarModel';
10
10
 
@@ -38,12 +38,11 @@ export const actionBarListStencil = createStencil({
38
38
  gap: system.legacy.gap.md,
39
39
  background: system.legacy.color.surface.default,
40
40
  borderBlockStart: `solid ${px2rem(1)} ${system.legacy.color.border.default}`,
41
- padding: `${system.legacy.padding.md} ${base.legacy.size500} `,
41
+ padding: system.legacy.padding.md,
42
42
  position: 'fixed',
43
43
  insetBlockEnd: 0,
44
44
  insetInline: 0,
45
45
  '@media (max-width: 767.5px)': {
46
- padding: system.legacy.size.xxxs,
47
46
  '> *': {
48
47
  flex: 1,
49
48
  },
package/dist/commonjs/action-bar/lib/ActionBarList.d.ts CHANGED
@@ -240,14 +240,7 @@ export declare const ActionBarList: import("@workday/canvas-kit-react/common").E
240
240
  returnFocusRef: React.RefObject<any> | undefined;
241
241
  placement: import("@popperjs/core").Placement;
242
242
  id: string;
243
- visibility: "hidden" | "visible"; /**
244
- * `ActionBar.List` will render overflow button component if it's passed in `overflowButton`.
245
- *
246
- * @example
247
- * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}>
248
- * {(item) => <ActionBar.Item>{item.text}</ActionBar.Item>}
249
- * </ActionBar.List>
250
- */
243
+ visibility: "hidden" | "visible";
251
244
  selectedIds: string[] | "all";
252
245
  unselectedIds: string[];
253
246
  cursorId: string | string[];
package/dist/commonjs/action-bar/lib/ActionBarList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAMnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1D;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,iJAkB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CAjCxB;;;;;;;eAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCH,CAAC"}
1
+ {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAMnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1D;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,iJAiB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWxB,CAAC"}
package/dist/commonjs/action-bar/lib/ActionBarList.js CHANGED
@@ -9,8 +9,8 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
9
9
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
10
10
  const useActionBarModel_1 = require("./useActionBarModel");
11
11
  exports.actionBarListStencil = (0, canvas_kit_styling_1.createStencil)({
12
- base: { name: "26gv02", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-500, 2.5rem) ;position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));> *{flex:1;}}" }
13
- }, "action-bar-list-d6d378");
12
+ base: { name: "3u16mf", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){> *{flex:1;}}" }
13
+ }, "action-bar-list-887890");
14
14
  exports.useActionBarList = collection_1.useOverflowListMeasure;
15
15
  exports.ActionBarList = (0, common_1.createSubcomponent)('div')({
16
16
  displayName: 'ActionBar.List',
package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts CHANGED
@@ -42,19 +42,21 @@ export interface ItemProps extends ButtonContainerProps {
42
42
  export declare const segmentedControlItemStencil: import("@workday/canvas-kit-styling").Stencil<{
43
43
  size: {
44
44
  large: {
45
- height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
46
- gap: "var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem))";
45
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
46
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
47
47
  };
48
48
  medium: {
49
- height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
49
+ height: "var(--cnvs-base-size-350, 1.75rem)";
50
+ fontWeight: "var(--cnvs-sys-font-weight-semibold, 600)";
50
51
  };
51
52
  small: {
52
53
  fontFamily: "--cnvs-sys-font-family-default";
53
54
  fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
54
55
  lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
55
56
  letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
56
- fontWeight: "--cnvs-sys-font-weight-bold";
57
+ fontWeight: "--cnvs-sys-font-weight-medium";
57
58
  height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
59
+ gap: "var(--cnvs-base-size-25, 0.125rem)";
58
60
  };
59
61
  };
60
62
  variant: {
package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAIjG,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAExE,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAMlE,MAAM,WAAW,SAAU,SAAQ,oBAAoB;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuJtC,CAAC;AAyBH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB/B,CAAC"}
1
+ {"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAIjG,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAExE,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAMlE,MAAM,WAAW,SAAU,SAAQ,oBAAoB;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgJtC,CAAC;AAyBH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB/B,CAAC"}
package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js CHANGED
@@ -37,58 +37,58 @@ const useSegmentedControlItem_1 = require("./hooks/useSegmentedControlItem");
37
37
  const useSegmentedControlModel_1 = require("./hooks/useSegmentedControlModel");
38
38
  exports.segmentedControlItemStencil = (0, canvas_kit_styling_1.createStencil)({
39
39
  extends: button_1.buttonStencil,
40
- base: { name: "2mfbpc", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-bold);text-align:start;padding-inline:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{--label-button-a19f67:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}&[aria-pressed='true']{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-a19f67:var(--cnvs-sys-color-border-input-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
40
+ base: { name: "1a5vzh", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);text-align:start;padding-inline:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{--label-button-a19f67:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}&[aria-pressed='true']{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:var(--cnvs-sys-depth-2);&:hover, &.hover{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))),0 0 0 0.25rem var(--cnvs-sys-color-brand-border-primary);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
41
41
  modifiers: {
42
42
  size: {
43
- large: { name: "26cc28", styles: "height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" },
44
- medium: { name: "3mhjwq", styles: "height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" },
45
- small: { name: "2fxe0a", styles: "font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));font-weight:var(--cnvs-sys-font-weight-bold);height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
43
+ large: { name: "3ofsmr", styles: "height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));" },
44
+ medium: { name: "2vjldc", styles: "height:var(--cnvs-base-size-350, 1.75rem);font-weight:var(--cnvs-sys-font-weight-semibold, 600);" },
45
+ small: { name: "3hli5n", styles: "font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));font-weight:var(--cnvs-sys-font-weight-medium);height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-25, 0.125rem);" }
46
46
  },
47
47
  variant: {
48
- iconOnly: { name: "482srq", styles: "" },
49
- textOnly: { name: "1gvs2d", styles: "" },
50
- iconWithText: { name: "2gnle5", styles: "" }
48
+ iconOnly: { name: "3j27lk", styles: "" },
49
+ textOnly: { name: "1k758v", styles: "" },
50
+ iconWithText: { name: "2kn9nw", styles: "" }
51
51
  }
52
52
  },
53
53
  compound: [
54
54
  {
55
55
  modifiers: { size: 'large', variant: 'iconOnly' },
56
- styles: { name: "2dqtcf", styles: "min-width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" }
56
+ styles: { name: "2g2eij", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
57
57
  },
58
58
  {
59
59
  modifiers: { size: 'large', variant: 'iconWithText' },
60
- styles: { name: "bj6ly", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
60
+ styles: { name: "2i43bn", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));" }
61
61
  },
62
62
  {
63
63
  modifiers: { size: 'large', variant: 'textOnly' },
64
- styles: { name: "2wqchc", styles: "padding-inline:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
64
+ styles: { name: "2mrwg2", styles: "padding-inline:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
65
65
  },
66
66
  {
67
67
  modifiers: { size: 'medium', variant: 'iconOnly' },
68
- styles: { name: "1cigiy", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
68
+ styles: { name: "1w5x7w", styles: "min-width:var(--cnvs-base-size-350, 1.75rem);" }
69
69
  },
70
70
  {
71
71
  modifiers: { size: 'medium', variant: 'iconWithText' },
72
- styles: { name: "pfwr1", styles: "padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
72
+ styles: { name: "10t3qa", styles: "padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
73
73
  },
74
74
  {
75
75
  modifiers: { size: 'medium', variant: 'textOnly' },
76
- styles: { name: "3d4865", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
76
+ styles: { name: "sgty4", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
77
77
  },
78
78
  {
79
79
  modifiers: { size: 'small', variant: 'iconOnly' },
80
- styles: { name: "csa7w", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
80
+ styles: { name: "36lfmb", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
81
81
  },
82
82
  {
83
83
  modifiers: { size: 'small', variant: 'iconWithText' },
84
- styles: { name: "32c5wa", styles: "padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
84
+ styles: { name: "3haxrq", styles: "padding-inline:var(--cnvs-base-size-75, 0.375rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
85
85
  },
86
86
  {
87
87
  modifiers: { size: 'small', variant: 'textOnly' },
88
- styles: { name: "3tat0u", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
88
+ styles: { name: "akzny", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
89
89
  }
90
90
  ]
91
- }, "segmented-control-item-7b0971");
91
+ }, "segmented-control-item-652603");
92
92
  const Container = ({ tooltipProps, children }) => {
93
93
  return tooltipProps ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { ...tooltipProps, children: children })) : ((0, jsx_runtime_1.jsx)(React.Fragment, { children: children }));
94
94
  };
package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts CHANGED
@@ -6,6 +6,18 @@ export interface SegmentedControlListProps<T = any> extends Omit<Partial<Extract
6
6
  children: ((item: T) => React.ReactNode) | React.ReactNode;
7
7
  }
8
8
  export declare const segmentedControlListStencil: import("@workday/canvas-kit-styling").Stencil<{
9
+ size: {
10
+ large: {
11
+ padding: "var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))";
12
+ };
13
+ medium: {
14
+ padding: "var(--cnvs-base-size-25, 0.125rem)";
15
+ };
16
+ small: {
17
+ padding: "var(--cnvs-base-size-25, 0.125rem)";
18
+ gap: "var(--cnvs-base-size-25, 0.125rem)";
19
+ };
20
+ };
9
21
  orientation: {
10
22
  vertical: ({ items }: {
11
23
  items: `--${string}`;
package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControlList.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAMtD,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,GAAG,CAChD,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACnE,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;gBAsBtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkB/B,CAAC"}
1
+ {"version":3,"file":"SegmentedControlList.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAMtD,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,GAAG,CAChD,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACnE,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAkCtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB/B,CAAC"}
package/dist/commonjs/segmented-control/lib/SegmentedControlList.js CHANGED
@@ -11,14 +11,19 @@ exports.segmentedControlListStencil = (0, canvas_kit_styling_1.createStencil)({
11
11
  vars: {
12
12
  items: '',
13
13
  },
14
- base: { name: "40q6zj", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));border:0 solid var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-lg, 0.75rem);padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));grid-gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" },
14
+ base: { name: "4d0nnu", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));border:0 solid var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));grid-gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
15
15
  modifiers: {
16
+ size: {
17
+ large: { name: "3qywaa", styles: "padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" },
18
+ medium: { name: "41xl8e", styles: "padding:var(--cnvs-base-size-25, 0.125rem);" },
19
+ small: { name: "36z2j", styles: "padding:var(--cnvs-base-size-25, 0.125rem);gap:var(--cnvs-base-size-25, 0.125rem);" }
20
+ },
16
21
  orientation: {
17
- vertical: { name: "1f86o9", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-55b1aa), 1fr);" },
18
- horizontal: { name: "40u8ek", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-55b1aa), 1fr);" }
22
+ vertical: { name: "3pptd9", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-abbea3), 1fr);" },
23
+ horizontal: { name: "2ocxki", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-abbea3), 1fr);" }
19
24
  }
20
25
  }
21
- }, "segmented-control-list-55b1aa");
26
+ }, "segmented-control-list-abbea3");
22
27
  exports.SegmentedControlList = (0, common_1.createSubcomponent)('div')({
23
28
  displayName: 'SegmentedControl.List',
24
29
  modelHook: useSegmentedControlModel_1.useSegmentedControlModel,
@@ -26,5 +31,6 @@ exports.SegmentedControlList = (0, common_1.createSubcomponent)('div')({
26
31
  return ((0, jsx_runtime_1.jsx)(Element, { role: "group", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.segmentedControlListStencil)({
27
32
  items: `${model.state.items.length}`,
28
33
  orientation: model.state.orientation,
34
+ size: model.state.size,
29
35
  })), children: (0, collection_1.useListRenderItems)(model, children) }));
30
36
  });
package/dist/es6/action-bar/lib/ActionBarList.d.ts CHANGED
@@ -240,14 +240,7 @@ export declare const ActionBarList: import("@workday/canvas-kit-react/common").E
240
240
  returnFocusRef: React.RefObject<any> | undefined;
241
241
  placement: import("@popperjs/core").Placement;
242
242
  id: string;
243
- visibility: "hidden" | "visible"; /**
244
- * `ActionBar.List` will render overflow button component if it's passed in `overflowButton`.
245
- *
246
- * @example
247
- * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}>
248
- * {(item) => <ActionBar.Item>{item.text}</ActionBar.Item>}
249
- * </ActionBar.List>
250
- */
243
+ visibility: "hidden" | "visible";
251
244
  selectedIds: string[] | "all";
252
245
  unselectedIds: string[];
253
246
  cursorId: string | string[];
package/dist/es6/action-bar/lib/ActionBarList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAMnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1D;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,iJAkB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CAjCxB;;;;;;;eAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCH,CAAC"}
1
+ {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAMnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1D;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,iJAiB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWxB,CAAC"}
package/dist/es6/action-bar/lib/ActionBarList.js CHANGED
@@ -3,11 +3,11 @@ import { useListRenderItems, useOverflowListMeasure } from '@workday/canvas-kit-
3
3
  import { createSubcomponent } from '@workday/canvas-kit-react/common';
4
4
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
5
5
  import { createStencil, px2rem } from '@workday/canvas-kit-styling';
6
- import { base, system } from '@workday/canvas-tokens-web';
6
+ import { system } from '@workday/canvas-tokens-web';
7
7
  import { useActionBarModel } from './useActionBarModel';
8
8
  export const actionBarListStencil = createStencil({
9
- base: { name: "26gv02", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-500, 2.5rem) ;position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));> *{flex:1;}}" }
10
- }, "action-bar-list-d6d378");
9
+ base: { name: "3u16mf", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){> *{flex:1;}}" }
10
+ }, "action-bar-list-887890");
11
11
  export const useActionBarList = useOverflowListMeasure;
12
12
  export const ActionBarList = createSubcomponent('div')({
13
13
  displayName: 'ActionBar.List',
package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts CHANGED
@@ -42,19 +42,21 @@ export interface ItemProps extends ButtonContainerProps {
42
42
  export declare const segmentedControlItemStencil: import("@workday/canvas-kit-styling").Stencil<{
43
43
  size: {
44
44
  large: {
45
- height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
46
- gap: "var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem))";
45
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
46
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
47
47
  };
48
48
  medium: {
49
- height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
49
+ height: "var(--cnvs-base-size-350, 1.75rem)";
50
+ fontWeight: "var(--cnvs-sys-font-weight-semibold, 600)";
50
51
  };
51
52
  small: {
52
53
  fontFamily: "--cnvs-sys-font-family-default";
53
54
  fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
54
55
  lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
55
56
  letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
56
- fontWeight: "--cnvs-sys-font-weight-bold";
57
+ fontWeight: "--cnvs-sys-font-weight-medium";
57
58
  height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
59
+ gap: "var(--cnvs-base-size-25, 0.125rem)";
58
60
  };
59
61
  };
60
62
  variant: {
package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAIjG,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAExE,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAMlE,MAAM,WAAW,SAAU,SAAQ,oBAAoB;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuJtC,CAAC;AAyBH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB/B,CAAC"}
1
+ {"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAIjG,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAExE,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAMlE,MAAM,WAAW,SAAU,SAAQ,oBAAoB;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgJtC,CAAC;AAyBH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB/B,CAAC"}
package/dist/es6/segmented-control/lib/SegmentedControlItem.js CHANGED
@@ -5,64 +5,64 @@ import { createSubcomponent } from '@workday/canvas-kit-react/common';
5
5
  import { systemIconStencil } from '@workday/canvas-kit-react/icon';
6
6
  import { Text } from '@workday/canvas-kit-react/text';
7
7
  import { Tooltip } from '@workday/canvas-kit-react/tooltip';
8
- import { colorSpace, createStencil, handleCsProp } from '@workday/canvas-kit-styling';
9
- import { system } from '@workday/canvas-tokens-web';
8
+ import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
9
+ import { base, system } from '@workday/canvas-tokens-web';
10
10
  import { useSegmentedControlItem } from './hooks/useSegmentedControlItem';
11
11
  import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
12
12
  export const segmentedControlItemStencil = createStencil({
13
13
  extends: buttonStencil,
14
- base: { name: "2mfbpc", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-bold);text-align:start;padding-inline:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{--label-button-a19f67:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}&[aria-pressed='true']{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-a19f67:var(--cnvs-sys-color-border-input-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
14
+ base: { name: "1a5vzh", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);text-align:start;padding-inline:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{--label-button-a19f67:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}&[aria-pressed='true']{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:var(--cnvs-sys-depth-2);&:hover, &.hover{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))),0 0 0 0.25rem var(--cnvs-sys-color-brand-border-primary);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
15
15
  modifiers: {
16
16
  size: {
17
- large: { name: "26cc28", styles: "height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" },
18
- medium: { name: "3mhjwq", styles: "height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" },
19
- small: { name: "2fxe0a", styles: "font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));font-weight:var(--cnvs-sys-font-weight-bold);height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
17
+ large: { name: "3ofsmr", styles: "height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));" },
18
+ medium: { name: "2vjldc", styles: "height:var(--cnvs-base-size-350, 1.75rem);font-weight:var(--cnvs-sys-font-weight-semibold, 600);" },
19
+ small: { name: "3hli5n", styles: "font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));font-weight:var(--cnvs-sys-font-weight-medium);height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-25, 0.125rem);" }
20
20
  },
21
21
  variant: {
22
- iconOnly: { name: "482srq", styles: "" },
23
- textOnly: { name: "1gvs2d", styles: "" },
24
- iconWithText: { name: "2gnle5", styles: "" }
22
+ iconOnly: { name: "3j27lk", styles: "" },
23
+ textOnly: { name: "1k758v", styles: "" },
24
+ iconWithText: { name: "2kn9nw", styles: "" }
25
25
  }
26
26
  },
27
27
  compound: [
28
28
  {
29
29
  modifiers: { size: 'large', variant: 'iconOnly' },
30
- styles: { name: "2dqtcf", styles: "min-width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" }
30
+ styles: { name: "2g2eij", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
31
31
  },
32
32
  {
33
33
  modifiers: { size: 'large', variant: 'iconWithText' },
34
- styles: { name: "bj6ly", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
34
+ styles: { name: "2i43bn", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));" }
35
35
  },
36
36
  {
37
37
  modifiers: { size: 'large', variant: 'textOnly' },
38
- styles: { name: "2wqchc", styles: "padding-inline:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
38
+ styles: { name: "2mrwg2", styles: "padding-inline:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
39
39
  },
40
40
  {
41
41
  modifiers: { size: 'medium', variant: 'iconOnly' },
42
- styles: { name: "1cigiy", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
42
+ styles: { name: "1w5x7w", styles: "min-width:var(--cnvs-base-size-350, 1.75rem);" }
43
43
  },
44
44
  {
45
45
  modifiers: { size: 'medium', variant: 'iconWithText' },
46
- styles: { name: "pfwr1", styles: "padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
46
+ styles: { name: "10t3qa", styles: "padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
47
47
  },
48
48
  {
49
49
  modifiers: { size: 'medium', variant: 'textOnly' },
50
- styles: { name: "3d4865", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
50
+ styles: { name: "sgty4", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
51
51
  },
52
52
  {
53
53
  modifiers: { size: 'small', variant: 'iconOnly' },
54
- styles: { name: "csa7w", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
54
+ styles: { name: "36lfmb", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
55
55
  },
56
56
  {
57
57
  modifiers: { size: 'small', variant: 'iconWithText' },
58
- styles: { name: "32c5wa", styles: "padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
58
+ styles: { name: "3haxrq", styles: "padding-inline:var(--cnvs-base-size-75, 0.375rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
59
59
  },
60
60
  {
61
61
  modifiers: { size: 'small', variant: 'textOnly' },
62
- styles: { name: "3tat0u", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
62
+ styles: { name: "akzny", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
63
63
  }
64
64
  ]
65
- }, "segmented-control-item-7b0971");
65
+ }, "segmented-control-item-652603");
66
66
  const Container = ({ tooltipProps, children }) => {
67
67
  return tooltipProps ? (_jsx(Tooltip, { ...tooltipProps, children: children })) : (_jsx(React.Fragment, { children: children }));
68
68
  };
package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts CHANGED
@@ -6,6 +6,18 @@ export interface SegmentedControlListProps<T = any> extends Omit<Partial<Extract
6
6
  children: ((item: T) => React.ReactNode) | React.ReactNode;
7
7
  }
8
8
  export declare const segmentedControlListStencil: import("@workday/canvas-kit-styling").Stencil<{
9
+ size: {
10
+ large: {
11
+ padding: "var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))";
12
+ };
13
+ medium: {
14
+ padding: "var(--cnvs-base-size-25, 0.125rem)";
15
+ };
16
+ small: {
17
+ padding: "var(--cnvs-base-size-25, 0.125rem)";
18
+ gap: "var(--cnvs-base-size-25, 0.125rem)";
19
+ };
20
+ };
9
21
  orientation: {
10
22
  vertical: ({ items }: {
11
23
  items: `--${string}`;
package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControlList.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAMtD,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,GAAG,CAChD,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACnE,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;gBAsBtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkB/B,CAAC"}
1
+ {"version":3,"file":"SegmentedControlList.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAMtD,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,GAAG,CAChD,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACnE,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAkCtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB/B,CAAC"}
package/dist/es6/segmented-control/lib/SegmentedControlList.js CHANGED
@@ -2,20 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useListRenderItems } from '@workday/canvas-kit-react/collection';
3
3
  import { createSubcomponent } from '@workday/canvas-kit-react/common';
4
4
  import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
5
- import { system } from '@workday/canvas-tokens-web';
5
+ import { base, system } from '@workday/canvas-tokens-web';
6
6
  import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
7
7
  export const segmentedControlListStencil = createStencil({
8
8
  vars: {
9
9
  items: '',
10
10
  },
11
- base: { name: "40q6zj", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));border:0 solid var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-lg, 0.75rem);padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));grid-gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" },
11
+ base: { name: "4d0nnu", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));border:0 solid var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));grid-gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
12
12
  modifiers: {
13
+ size: {
14
+ large: { name: "3qywaa", styles: "padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" },
15
+ medium: { name: "41xl8e", styles: "padding:var(--cnvs-base-size-25, 0.125rem);" },
16
+ small: { name: "36z2j", styles: "padding:var(--cnvs-base-size-25, 0.125rem);gap:var(--cnvs-base-size-25, 0.125rem);" }
17
+ },
13
18
  orientation: {
14
- vertical: { name: "1f86o9", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-55b1aa), 1fr);" },
15
- horizontal: { name: "40u8ek", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-55b1aa), 1fr);" }
19
+ vertical: { name: "3pptd9", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-abbea3), 1fr);" },
20
+ horizontal: { name: "2ocxki", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-abbea3), 1fr);" }
16
21
  }
17
22
  }
18
- }, "segmented-control-list-55b1aa");
23
+ }, "segmented-control-list-abbea3");
19
24
  export const SegmentedControlList = createSubcomponent('div')({
20
25
  displayName: 'SegmentedControl.List',
21
26
  modelHook: useSegmentedControlModel,
@@ -23,5 +28,6 @@ export const SegmentedControlList = createSubcomponent('div')({
23
28
  return (_jsx(Element, { role: "group", ...handleCsProp(elemProps, segmentedControlListStencil({
24
29
  items: `${model.state.items.length}`,
25
30
  orientation: model.state.orientation,
31
+ size: model.state.size,
26
32
  })), children: useListRenderItems(model, children) }));
27
33
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "16.0.0-alpha.0462-next.0",
3
+ "version": "16.0.0-alpha.0463-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -53,8 +53,8 @@
53
53
  "@tanstack/react-virtual": "^3.13.9",
54
54
  "@workday/canvas-colors-web": "^2.0.0",
55
55
  "@workday/canvas-expressive-icons-web": "1.0.2",
56
- "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0462-next.0",
57
- "@workday/canvas-kit-styling": "^16.0.0-alpha.0462-next.0",
56
+ "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0463-next.0",
57
+ "@workday/canvas-kit-styling": "^16.0.0-alpha.0463-next.0",
58
58
  "@workday/canvas-system-icons-web": "4.0.4",
59
59
  "@workday/canvas-tokens-web": "4.4.0-beta.6",
60
60
  "@workday/design-assets-types": "^0.3.0",
@@ -69,5 +69,5 @@
69
69
  "@workday/canvas-accent-icons-web": "^3.0.0",
70
70
  "@workday/canvas-applet-icons-web": "^2.0.0"
71
71
  },
72
- "gitHead": "d80e8648cba4c3445351b3277c46f5c418f0de93"
72
+ "gitHead": "f21d7cc4d8f56e8a7ffffbb5881aa903f852c025"
73
73
  }
package/segmented-control/lib/SegmentedControlItem.tsx CHANGED
@@ -5,9 +5,9 @@ import {createSubcomponent} from '@workday/canvas-kit-react/common';
5
5
  import {systemIconStencil} from '@workday/canvas-kit-react/icon';
6
6
  import {Text} from '@workday/canvas-kit-react/text';
7
7
  import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
8
- import {colorSpace, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
8
+ import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
9
9
  import {CanvasSystemIcon} from '@workday/canvas-system-icons-web';
10
- import {system} from '@workday/canvas-tokens-web';
10
+ import {base, system} from '@workday/canvas-tokens-web';
11
11
 
12
12
  import {useSegmentedControlItem} from './hooks/useSegmentedControlItem';
13
13
  import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
@@ -53,37 +53,24 @@ export interface ItemProps extends ButtonContainerProps {
53
53
  export const segmentedControlItemStencil = createStencil({
54
54
  extends: buttonStencil,
55
55
  base: {
56
- fontFamily: system.fontFamily.default,
57
- fontSize: system.legacy.fontSize.subtext.lg,
58
- lineHeight: system.legacy.lineHeight.subtext.lg,
59
- letterSpacing: system.legacy.letterSpacing.subtext.lg,
60
- fontWeight: system.fontWeight.bold,
56
+ ...system.legacy.type.subtext.lg,
57
+ fontWeight: system.fontWeight.medium,
61
58
  textAlign: 'start',
62
59
  paddingInline: 0,
63
60
  gap: system.legacy.gap.xs,
64
61
 
65
- [buttonStencil.vars.borderRadius]: system.legacy.shape.md,
62
+ [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
66
63
  [buttonStencil.vars.label]: system.color.fg.muted.default,
67
64
  [systemIconStencil.vars.color]: system.color.fg.muted.default,
68
65
 
69
66
  '&:hover, &.hover': {
70
- [buttonStencil.vars.background]: colorSpace.darken({
71
- color: system.legacy.color.surface.alt.strong,
72
- fallback: system.color.bg.alt.strong,
73
- mixinColor: system.legacy.color.surface.overlay.mixin,
74
- mixinValue: system.legacy.opacity.surface.hover,
75
- }),
67
+ [buttonStencil.vars.background]: system.color.surface.overlay.hover.default,
76
68
  [buttonStencil.vars.label]: system.color.fg.strong,
77
69
  [systemIconStencil.vars.color]: system.color.fg.strong,
78
70
  },
79
71
 
80
72
  '&:active, &.active': {
81
- [buttonStencil.vars.background]: colorSpace.darken({
82
- color: system.legacy.color.surface.alt.strong,
83
- fallback: system.color.bg.alt.strong,
84
- mixinColor: system.legacy.color.surface.overlay.mixin,
85
- mixinValue: system.legacy.opacity.surface.pressed,
86
- }),
73
+ [buttonStencil.vars.background]: system.color.surface.overlay.pressed.default,
87
74
  [buttonStencil.vars.label]: system.color.fg.strong,
88
75
  [systemIconStencil.vars.color]: system.color.fg.strong,
89
76
  },
@@ -102,15 +89,19 @@ export const segmentedControlItemStencil = createStencil({
102
89
 
103
90
  "&[aria-pressed='true']": {
104
91
  [buttonStencil.vars.background]: system.legacy.color.surface.default,
105
- [buttonStencil.vars.border]: system.color.border.input.default,
106
92
  [systemIconStencil.vars.color]: system.color.fg.strong,
107
93
  [buttonStencil.vars.label]: system.color.fg.strong,
94
+ boxShadow: system.depth[2],
108
95
 
109
96
  '&:hover, &.hover': {
110
97
  [systemIconStencil.vars.color]: system.color.fg.strong,
111
98
  [buttonStencil.vars.label]: system.color.fg.strong,
112
99
  },
113
100
 
101
+ '&:focus-visible, &.focus': {
102
+ boxShadow: `0 0 0 ${px2rem(2)} ${system.legacy.color.border.inverse.default},0 0 0 ${px2rem(4)} ${system.color.brand.border.primary}`,
103
+ },
104
+
114
105
  '&:disabled, &.disabled': {
115
106
  [buttonStencil.vars.opacity]: system.opacity.disabled,
116
107
  },
@@ -124,19 +115,21 @@ export const segmentedControlItemStencil = createStencil({
124
115
  modifiers: {
125
116
  size: {
126
117
  large: {
127
- height: system.legacy.size.md,
128
- gap: system.legacy.gap.sm,
118
+ height: system.legacy.size.sm,
119
+ fontSize: system.legacy.fontSize.subtext.lg,
129
120
  },
130
121
  medium: {
131
- height: system.legacy.size.sm,
122
+ height: base.legacy.size350,
123
+ fontWeight: system.sana.fontWeight.semibold,
132
124
  },
133
125
  small: {
134
126
  fontFamily: system.fontFamily.default,
135
127
  fontSize: system.legacy.fontSize.subtext.md,
136
128
  lineHeight: system.legacy.lineHeight.subtext.md,
137
129
  letterSpacing: system.legacy.letterSpacing.subtext.md,
138
- fontWeight: system.fontWeight.bold,
130
+ fontWeight: system.fontWeight.medium,
139
131
  height: system.legacy.size.xs,
132
+ gap: base.legacy.size25,
140
133
  },
141
134
  },
142
135
  variant: {
@@ -149,13 +142,13 @@ export const segmentedControlItemStencil = createStencil({
149
142
  {
150
143
  modifiers: {size: 'large', variant: 'iconOnly'},
151
144
  styles: {
152
- minWidth: system.legacy.size.md,
145
+ minWidth: system.legacy.size.sm,
153
146
  },
154
147
  },
155
148
  {
156
149
  modifiers: {size: 'large', variant: 'iconWithText'},
157
150
  styles: {
158
- paddingInline: `${system.legacy.padding.lg} ${system.legacy.padding.xl}`,
151
+ paddingInline: `${system.legacy.padding.sm} ${system.legacy.padding.md}`,
159
152
  },
160
153
  },
161
154
  {
@@ -167,13 +160,13 @@ export const segmentedControlItemStencil = createStencil({
167
160
  {
168
161
  modifiers: {size: 'medium', variant: 'iconOnly'},
169
162
  styles: {
170
- minWidth: system.legacy.size.sm,
163
+ minWidth: base.legacy.size350,
171
164
  },
172
165
  },
173
166
  {
174
167
  modifiers: {size: 'medium', variant: 'iconWithText'},
175
168
  styles: {
176
- paddingInline: `${system.legacy.padding.md} ${system.legacy.padding.lg}`,
169
+ paddingInline: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`,
177
170
  },
178
171
  },
179
172
  {
@@ -191,7 +184,7 @@ export const segmentedControlItemStencil = createStencil({
191
184
  {
192
185
  modifiers: {size: 'small', variant: 'iconWithText'},
193
186
  styles: {
194
- paddingInline: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`,
187
+ paddingInline: `${base.legacy.size75} ${system.legacy.padding.xs}`,
195
188
  },
196
189
  },
197
190
  {
package/segmented-control/lib/SegmentedControlList.tsx CHANGED
@@ -4,7 +4,7 @@ import {useListRenderItems} from '@workday/canvas-kit-react/collection';
4
4
  import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
5
5
  import {Grid} from '@workday/canvas-kit-react/layout';
6
6
  import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
7
- import {system} from '@workday/canvas-tokens-web';
7
+ import {base, system} from '@workday/canvas-tokens-web';
8
8
 
9
9
  import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
10
10
 
@@ -20,13 +20,25 @@ export const segmentedControlListStencil = createStencil({
20
20
  },
21
21
  base: {
22
22
  display: 'inline-grid',
23
- backgroundColor: system.legacy.color.surface.alt.strong,
23
+ backgroundColor: system.legacy.color.surface.alt.default,
24
24
  border: `0 solid ${system.color.border.transparent}`,
25
- borderRadius: system.legacy.shape.lg,
25
+ borderRadius: system.legacy.shape.full,
26
26
  padding: system.legacy.padding.xxs,
27
- gridGap: system.legacy.gap.sm,
27
+ gridGap: system.legacy.gap.xs,
28
28
  },
29
29
  modifiers: {
30
+ size: {
31
+ large: {
32
+ padding: system.legacy.padding.xxs,
33
+ },
34
+ medium: {
35
+ padding: base.legacy.size25,
36
+ },
37
+ small: {
38
+ padding: base.legacy.size25,
39
+ gap: base.legacy.size25,
40
+ },
41
+ },
30
42
  orientation: {
31
43
  vertical: ({items}) => ({
32
44
  gridTemplateRows: `repeat(${items}, 1fr)`,
@@ -50,6 +62,7 @@ export const SegmentedControlList = createSubcomponent('div')({
50
62
  segmentedControlListStencil({
51
63
  items: `${model.state.items.length}`,
52
64
  orientation: model.state.orientation,
65
+ size: model.state.size,
53
66
  })
54
67
  )}
55
68
  >