@workday/canvas-kit-react 16.0.0-alpha.0477-next.0 → 16.0.0-alpha.0479-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 (74) hide show
  1. package/breadcrumbs/lib/BreadcrumbsCurrentItem.tsx +2 -2
  2. package/breadcrumbs/lib/BreadcrumbsItem.tsx +1 -1
  3. package/breadcrumbs/lib/BreadcrumbsLink.tsx +12 -1
  4. package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx +6 -2
  5. package/button/lib/ExternalHyperlink.tsx +3 -3
  6. package/button/lib/Hyperlink.tsx +45 -28
  7. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
  8. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
  9. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.d.ts.map +1 -1
  10. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js +2 -2
  11. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.d.ts.map +1 -1
  12. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js +2 -2
  13. package/dist/commonjs/button/lib/ExternalHyperlink.d.ts +27 -29
  14. package/dist/commonjs/button/lib/ExternalHyperlink.d.ts.map +1 -1
  15. package/dist/commonjs/button/lib/ExternalHyperlink.js +2 -2
  16. package/dist/commonjs/button/lib/Hyperlink.d.ts +28 -20
  17. package/dist/commonjs/button/lib/Hyperlink.d.ts.map +1 -1
  18. package/dist/commonjs/button/lib/Hyperlink.js +9 -6
  19. package/dist/commonjs/menu/lib/MenuPopper.js +1 -1
  20. package/dist/commonjs/pagination/lib/Pagination/Controls.d.ts.map +1 -1
  21. package/dist/commonjs/pagination/lib/Pagination/Controls.js +5 -4
  22. package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.d.ts.map +1 -1
  23. package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.js +1 -1
  24. package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js +1 -1
  25. package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.d.ts.map +1 -1
  26. package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
  27. package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts +11 -0
  28. package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts.map +1 -1
  29. package/dist/commonjs/pagination/lib/Pagination/PageButton.js +3 -3
  30. package/dist/commonjs/select/lib/SelectInput.d.ts.map +1 -1
  31. package/dist/commonjs/select/lib/SelectInput.js +5 -5
  32. package/dist/commonjs/text-input/lib/InputGroup.d.ts.map +1 -1
  33. package/dist/commonjs/text-input/lib/InputGroup.js +14 -10
  34. package/dist/commonjs/text-input/lib/TextInput.d.ts.map +1 -1
  35. package/dist/commonjs/text-input/lib/TextInput.js +2 -2
  36. package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
  37. package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
  38. package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.d.ts.map +1 -1
  39. package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js +2 -2
  40. package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.d.ts.map +1 -1
  41. package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js +2 -2
  42. package/dist/es6/button/lib/ExternalHyperlink.d.ts +27 -29
  43. package/dist/es6/button/lib/ExternalHyperlink.d.ts.map +1 -1
  44. package/dist/es6/button/lib/ExternalHyperlink.js +2 -2
  45. package/dist/es6/button/lib/Hyperlink.d.ts +28 -20
  46. package/dist/es6/button/lib/Hyperlink.d.ts.map +1 -1
  47. package/dist/es6/button/lib/Hyperlink.js +9 -6
  48. package/dist/es6/menu/lib/MenuPopper.js +1 -1
  49. package/dist/es6/pagination/lib/Pagination/Controls.d.ts.map +1 -1
  50. package/dist/es6/pagination/lib/Pagination/Controls.js +6 -5
  51. package/dist/es6/pagination/lib/Pagination/GoTo/Form.d.ts.map +1 -1
  52. package/dist/es6/pagination/lib/Pagination/GoTo/Form.js +1 -1
  53. package/dist/es6/pagination/lib/Pagination/GoTo/Label.js +1 -1
  54. package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.d.ts.map +1 -1
  55. package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
  56. package/dist/es6/pagination/lib/Pagination/PageButton.d.ts +11 -0
  57. package/dist/es6/pagination/lib/Pagination/PageButton.d.ts.map +1 -1
  58. package/dist/es6/pagination/lib/Pagination/PageButton.js +4 -4
  59. package/dist/es6/select/lib/SelectInput.d.ts.map +1 -1
  60. package/dist/es6/select/lib/SelectInput.js +6 -6
  61. package/dist/es6/text-input/lib/InputGroup.d.ts.map +1 -1
  62. package/dist/es6/text-input/lib/InputGroup.js +15 -11
  63. package/dist/es6/text-input/lib/TextInput.d.ts.map +1 -1
  64. package/dist/es6/text-input/lib/TextInput.js +2 -2
  65. package/menu/lib/MenuPopper.tsx +1 -1
  66. package/package.json +5 -5
  67. package/pagination/lib/Pagination/Controls.tsx +6 -1
  68. package/pagination/lib/Pagination/GoTo/Form.tsx +1 -0
  69. package/pagination/lib/Pagination/GoTo/Label.tsx +1 -1
  70. package/pagination/lib/Pagination/GoTo/TextInput.tsx +1 -0
  71. package/pagination/lib/Pagination/PageButton.tsx +20 -5
  72. package/select/lib/SelectInput.tsx +10 -2
  73. package/text-input/lib/InputGroup.tsx +17 -2
  74. package/text-input/lib/TextInput.tsx +0 -1
package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/TextInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAK/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,8BAA8B,iJAKzC,CAAC;AAEH,eAAO,MAAM,aAAa;kBAXV,MAAM;;EAyBpB,CAAC"}
1
+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/TextInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAK/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,8BAA8B,iJAMzC,CAAC;AAEH,eAAO,MAAM,aAAa;kBAZV,MAAM;;EA0BpB,CAAC"}
package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.js CHANGED
@@ -5,7 +5,7 @@ import { TextInput } from '@workday/canvas-kit-react/text-input';
5
5
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
6
6
  import { GoToContext } from './useGoToForm';
7
7
  export const paginationGoToTextInputStencil = createStencil({
8
- base: { name: "11nuws", styles: "box-sizing:border-box;min-width:3.4375rem;width:3.4375rem;" }
8
+ base: { name: "2gdb7p", styles: "box-sizing:border-box;min-width:3.4375rem;width:3.4375rem;text-align:center;" }
9
9
  }, "pagination-go-to-text-input-c73671");
10
10
  export const GoToTextInput = createComponent('input')({
11
11
  displayName: 'Pagination.GoToTextInput',
package/dist/es6/pagination/lib/Pagination/PageButton.d.ts CHANGED
@@ -3,11 +3,22 @@ export declare const paginationPageButtonStencil: import("@workday/canvas-kit-st
3
3
  toggled: {
4
4
  true: {
5
5
  [x: string]: "--cnvs-sys-font-weight-bold" | "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))" | {
6
+ outline: string;
7
+ outlineOffset: string;
8
+ } | {
6
9
  [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
10
+ outline?: undefined;
11
+ outlineOffset?: undefined;
7
12
  } | {
8
13
  [x: string]: "--cnvs-sys-color-fg-disabled";
14
+ outline?: undefined;
15
+ outlineOffset?: undefined;
9
16
  };
10
17
  fontWeight: "--cnvs-sys-font-weight-bold";
18
+ '@media (prefers-contrast: more)': {
19
+ outline: string;
20
+ outlineOffset: string;
21
+ };
11
22
  '&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus': {
12
23
  [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
13
24
  };
package/dist/es6/pagination/lib/Pagination/PageButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0CtC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,wFAuBrB,CAAC"}
1
+ {"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyDtC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,wFAuBrB,CAAC"}
package/dist/es6/pagination/lib/Pagination/PageButton.js CHANGED
@@ -2,18 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
3
  import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
4
4
  import { createComponent } from '@workday/canvas-kit-react/common';
5
- import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
5
+ import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
6
6
  import { system } from '@workday/canvas-tokens-web';
7
7
  import { PaginationContext } from './usePaginationModel';
8
8
  export const paginationPageButtonStencil = createStencil({
9
9
  extends: buttonStencil,
10
- base: { name: "tpg7h", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));padding:0;font-weight:var(--cnvs-sys-font-weight-normal);--label-button-a19f67:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-a19f67:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-fg-disabled);}" },
10
+ base: { name: "2hli9o", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));padding:0;font-weight:var(--cnvs-sys-font-weight-normal);--label-button-a19f67:var(--cnvs-sys-color-fg-default);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-fg-disabled);}" },
11
11
  modifiers: {
12
12
  toggled: {
13
- true: { name: "1y5qrd", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-fg-disabled);}" }
13
+ true: { name: "x6ndq", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);@media (prefers-contrast: more){outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-fg-disabled);}" }
14
14
  }
15
15
  }
16
- }, "pagination-page-button-db11fc");
16
+ }, "pagination-page-button-c731af");
17
17
  export const PageButton = createComponent('button')({
18
18
  displayName: 'Pagination.PageButton',
19
19
  Component({ pageNumber, children, ...elemProps }) {
package/dist/es6/select/lib/SelectInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAC,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAC,gBAAgB,EAAqB,MAAM,kCAAkC,CAAC;AAMtF,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BtB,CAAC"}
1
+ {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAC,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EACL,gBAAgB,EAGjB,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BtB,CAAC"}
package/dist/es6/select/lib/SelectInput.js CHANGED
@@ -3,7 +3,7 @@ import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
3
  import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
4
4
  import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
5
5
  import { createStencil } from '@workday/canvas-kit-styling';
6
- import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
6
+ import { chevronDownSmallIcon, chevronUpSmallIcon, } from '@workday/canvas-system-icons-web';
7
7
  import { system } from '@workday/canvas-tokens-web';
8
8
  import { useSelectInput } from './hooks/useSelectInput';
9
9
  import { useSelectModel } from './hooks/useSelectModel';
@@ -17,17 +17,17 @@ export const selectInputStencil = createStencil({
17
17
  hiddenInput: 'select-hidden-input',
18
18
  visualInput: 'select-visual-input',
19
19
  },
20
- base: { name: "2bnoiw", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-fg-default);}&::selection{background-color:transparent;}}[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}}" },
20
+ base: { name: "r1mii", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-fg-default);}&::selection{background-color:transparent;}}[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}}" },
21
21
  modifiers: {
22
22
  error: {
23
- error: { name: "zr9yt", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));}" },
24
- caution: { name: "12wrkt", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));}" }
23
+ error: { name: "23y4gy", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));}" },
24
+ caution: { name: "o7q5t", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));}" }
25
25
  }
26
26
  }
27
- }, "select-input-8483f2");
27
+ }, "select-input-3e661d");
28
28
  export const SelectInput = createSubcomponent(TextInput)({
29
29
  modelHook: useSelectModel,
30
30
  elemPropsHook: useSelectInput,
31
31
  })(({ inputStartIcon, formInputProps, error, ...elemProps }, Element, model) => {
32
- return (_jsxs(InputGroup, { "data-width": "ck-formfield-width", ...selectInputStencil({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && (_jsx(InputGroup.InnerStart, { ...selectInputStencil.parts.startIconContainer, children: _jsx(SystemIcon, { ...selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), _jsx(InputGroup.Input, { ...selectInputStencil.parts.hiddenInput, ...formInputProps }), _jsx(InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...selectInputStencil.parts.visualInput, ...elemProps }), _jsx(InputGroup.InnerEnd, { ...selectInputStencil.parts.caretContainer, children: _jsx(SystemIcon, { ...selectInputStencil.parts.caret, icon: caretDownSmallIcon }) })] }));
32
+ return (_jsxs(InputGroup, { "data-width": "ck-formfield-width", ...selectInputStencil({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && (_jsx(InputGroup.InnerStart, { ...selectInputStencil.parts.startIconContainer, children: _jsx(SystemIcon, { ...selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), _jsx(InputGroup.Input, { ...selectInputStencil.parts.hiddenInput, ...formInputProps }), _jsx(InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...selectInputStencil.parts.visualInput, ...elemProps }), _jsx(InputGroup.InnerEnd, { ...selectInputStencil.parts.caretContainer, children: _jsx(SystemIcon, { size: "md", ...selectInputStencil.parts.caret, icon: model.state.visibility === 'visible' ? chevronUpSmallIcon : chevronDownSmallIcon }) })] }));
33
33
  });
package/dist/es6/text-input/lib/InputGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAC,gBAAgB,EAAa,MAAM,kCAAkC,CAAC;AAK9E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;IAE/B;;;OAGG;;IAEH;;;OAGG;;;;IAIH;;OAEG;;gBAkBL,CAAC;AA4CH,eAAO,MAAM,kBAAkB;;;;;;;;EAO7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;EAQrC,CAAC;AA6BH,eAAO,MAAM,iBAAiB,iJAiB5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CAsDL,CAAC"}
1
+ {"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAC,gBAAgB,EAAa,MAAM,kCAAkC,CAAC;AAK9E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;IAE/B;;;OAGG;;IAEH;;;OAGG;;;;IAIH;;OAEG;;gBAmBL,CAAC;AA4CH,eAAO,MAAM,kBAAkB;;;;;;;;EAO7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;EAQrC,CAAC;AA0CH,eAAO,MAAM,iBAAiB,iJAiB5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CAsDL,CAAC"}
package/dist/es6/text-input/lib/InputGroup.js CHANGED
@@ -2,10 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import React from 'react';
3
3
  import { TertiaryButton } from '@workday/canvas-kit-react/button';
4
4
  import { createContainer, createElemPropsHook, createModelHook, createSubcomponent, dispatchInputEvent, useForkRef, } from '@workday/canvas-kit-react/common';
5
+ import { systemIconStencil } from '@workday/canvas-kit-react/icon';
5
6
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
6
7
  import { createStencil, handleCsProp, wrapProperty } from '@workday/canvas-kit-styling';
7
8
  import { xSmallIcon } from '@workday/canvas-system-icons-web';
8
- import { system } from '@workday/canvas-tokens-web';
9
+ import { component, system } from '@workday/canvas-tokens-web';
9
10
  import { TextInput } from './TextInput';
10
11
  export const useInputGroupModel = createModelHook({})(() => {
11
12
  const inputRef = React.useRef(null);
@@ -35,13 +36,13 @@ export const inputGroupInnerStencil = createStencil({
35
36
  */
36
37
  pointerEvents: '',
37
38
  },
38
- base: { name: "2tze9n", styles: "--insetInlineStart-input-group-inner-9e2c81:initial;--insetInlineEnd-input-group-inner-9e2c81:initial;--width-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-9e2c81);height:var(--height-input-group-inner-9e2c81);inset-inline-start:var(--insetInlineStart-input-group-inner-9e2c81);inset-inline-end:var(--insetInlineEnd-input-group-inner-9e2c81);" },
39
+ base: { name: "3m5lrc", styles: "--insetInlineStart-input-group-inner-fddb83:initial;--insetInlineEnd-input-group-inner-fddb83:initial;--width-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-fddb83);height:var(--height-input-group-inner-fddb83);inset-inline-start:var(--insetInlineStart-input-group-inner-fddb83);inset-inline-end:var(--insetInlineEnd-input-group-inner-fddb83);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);" },
39
40
  modifiers: {
40
41
  pointerEvents: {
41
- _: { name: "1rcuyd", styles: "pointer-events:var(--pointerEvents-input-group-inner-9e2c81);" }
42
+ _: { name: "26ygsl", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
42
43
  }
43
44
  }
44
- }, "input-group-inner-9e2c81");
45
+ }, "input-group-inner-fddb83");
45
46
  const InputGroupInnerStart = createSubcomponent('div')({
46
47
  modelHook: useInputGroupModel,
47
48
  })(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
@@ -76,16 +77,16 @@ export const inputGroupInputStencil = createStencil({
76
77
  paddingInlineStart: '',
77
78
  paddingInlineEnd: '',
78
79
  },
79
- base: { name: "4edwl9", styles: "box-sizing:border-box;display:flex;width:100%;" },
80
+ base: { name: "3czs8y", styles: "box-sizing:border-box;display:flex;width:100%;" },
80
81
  modifiers: {
81
82
  paddingInlineStart: {
82
- _: { name: "10t2az", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-7be7a4);" }
83
+ _: { name: "2h3jl8", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
83
84
  },
84
85
  paddingInlineEnd: {
85
- _: { name: "2txv9n", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-7be7a4);" }
86
+ _: { name: "4bzoag", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-b51031);" }
86
87
  }
87
88
  }
88
- }, "input-group-input-7be7a4");
89
+ }, "input-group-input-b51031");
89
90
  const InputGroupInput = createSubcomponent(TextInput)({
90
91
  modelHook: useInputGroupModel,
91
92
  elemPropsHook: useInputGroupInput,
@@ -115,6 +116,9 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
115
116
  },
116
117
  };
117
118
  });
119
+ const clearButtonStencil = createStencil({
120
+ base: { name: "4946g7", styles: "box-sizing:border-box;svg{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);}" }
121
+ }, "clear-button-49e5c1");
118
122
  /**
119
123
  * A clear input button. This can be a component later.
120
124
  */
@@ -122,7 +126,7 @@ const ClearButton = createSubcomponent(TertiaryButton)({
122
126
  modelHook: useInputGroupModel,
123
127
  elemPropsHook: useClearButton,
124
128
  })((elemProps, Element) => {
125
- return _jsx(Element, { "data-part": "input-group-clear-button", ...handleCsProp(elemProps) });
129
+ return (_jsx(Element, { "data-part": "input-group-clear-button", ...handleCsProp(elemProps, clearButtonStencil()) }));
126
130
  });
127
131
  // make sure we always use pixels if the input is a number - this is required for `calc`
128
132
  const toPx = (input) => {
@@ -140,8 +144,8 @@ const wrapInCalc = (values) => {
140
144
  return `calc(${values.map(toPx).join(' + ')})`;
141
145
  };
142
146
  export const inputGroupStencil = createStencil({
143
- base: { name: "ax3sr", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
144
- }, "input-group-2e0e78");
147
+ base: { name: "1mby7n", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
148
+ }, "input-group-1aae89");
145
149
  /**
146
150
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
147
151
  * elements. The inner start and end elements are usually icons or icon buttons visually represented
package/dist/es6/text-input/lib/TextInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2G3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAqBpB,CAAC"}
1
+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0G3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAqBpB,CAAC"}
package/dist/es6/text-input/lib/TextInput.js CHANGED
@@ -15,8 +15,8 @@ export const textInputStencil = createStencil({
15
15
  false: { name: "2f0cc6", styles: "width:initial;" }
16
16
  },
17
17
  error: {
18
- error: { name: "30qz77", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
19
- caution: { name: "2y4znt", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
18
+ error: { name: "sif5x", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
19
+ caution: { name: "6plwv", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
20
20
  }
21
21
  },
22
22
  defaultModifiers: {
package/menu/lib/MenuPopper.tsx CHANGED
@@ -13,7 +13,7 @@ export const defaultMenuPopperOptions = {
13
13
  {
14
14
  name: 'offset',
15
15
  options: {
16
- offset: () => [0, 4],
16
+ offset: () => [0, 8],
17
17
  },
18
18
  },
19
19
  ],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "16.0.0-alpha.0477-next.0",
3
+ "version": "16.0.0-alpha.0479-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,10 +53,10 @@
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.0477-next.0",
57
- "@workday/canvas-kit-styling": "^16.0.0-alpha.0477-next.0",
56
+ "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0479-next.0",
57
+ "@workday/canvas-kit-styling": "^16.0.0-alpha.0479-next.0",
58
58
  "@workday/canvas-system-icons-web": "4.0.4",
59
- "@workday/canvas-tokens-web": "4.4.0-beta.6",
59
+ "@workday/canvas-tokens-web": "4.4.0-beta.7",
60
60
  "@workday/design-assets-types": "^0.3.0",
61
61
  "chroma-js": "^2.2.0",
62
62
  "csstype": "^3.0.2",
@@ -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": "bae01a1c78cf7e68292fc4d37368147af79932af"
72
+ "gitHead": "1345e0f544f5bbd437409e92c3002f77e866306c"
73
73
  }
package/pagination/lib/Pagination/Controls.tsx CHANGED
@@ -2,6 +2,7 @@ import * as React from 'react';
2
2
 
3
3
  import {TertiaryButton} from '@workday/canvas-kit-react/button';
4
4
  import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
5
+ import {systemIconStencil} from '@workday/canvas-kit-react/icon';
5
6
  import {mergeStyles} from '@workday/canvas-kit-react/layout';
6
7
  import {createStencil} from '@workday/canvas-kit-styling';
7
8
  import {
@@ -10,7 +11,7 @@ import {
10
11
  chevronLeftSmallIcon,
11
12
  chevronRightSmallIcon,
12
13
  } from '@workday/canvas-system-icons-web';
13
- import {system} from '@workday/canvas-tokens-web';
14
+ import {component, system} from '@workday/canvas-tokens-web';
14
15
 
15
16
  import {PaginationContext} from './usePaginationModel';
16
17
 
@@ -30,6 +31,10 @@ export const paginationControlsStencil = createStencil({
30
31
 
31
32
  const controlButtonStencil = createStencil({
32
33
  base: {
34
+ '& > span': {
35
+ [systemIconStencil.vars.size]: component.legacy.systemIcon.size.xs,
36
+ [systemIconStencil.vars.color]: system.color.fg.strong,
37
+ },
33
38
  '&:dir(rtl)': {
34
39
  '& .wd-icon': {
35
40
  transform: 'scaleX(-1)',
package/pagination/lib/Pagination/GoTo/Form.tsx CHANGED
@@ -17,6 +17,7 @@ export const paginationGoToFormStencil = createStencil({
17
17
  display: 'flex',
18
18
  alignItems: 'center',
19
19
  gap: system.legacy.gap.sm,
20
+ marginInlineStart: system.legacy.gap.xs,
20
21
  ':dir(rtl)': {
21
22
  paddingInline: system.legacy.padding.xs,
22
23
  },
package/pagination/lib/Pagination/GoTo/Label.tsx CHANGED
@@ -28,7 +28,7 @@ export const GoToLabel = createComponent('label')({
28
28
  <Subtext
29
29
  ref={ref}
30
30
  as={Element}
31
- size="medium"
31
+ size="large"
32
32
  variant="hint"
33
33
  {...handleCsProp(elemProps, paginationGoToLabelStencil())}
34
34
  >
package/pagination/lib/Pagination/GoTo/TextInput.tsx CHANGED
@@ -15,6 +15,7 @@ export const paginationGoToTextInputStencil = createStencil({
15
15
  base: {
16
16
  minWidth: px2rem(55),
17
17
  width: px2rem(55),
18
+ textAlign: 'center',
18
19
  },
19
20
  });
20
21
 
package/pagination/lib/Pagination/PageButton.tsx CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
 
3
3
  import {BaseButton, buttonStencil} from '@workday/canvas-kit-react/button';
4
4
  import {createComponent} from '@workday/canvas-kit-react/common';
5
- import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
5
+ import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
6
6
  import {system} from '@workday/canvas-tokens-web';
7
7
 
8
8
  import {PaginationContext} from './usePaginationModel';
@@ -16,13 +16,21 @@ export const paginationPageButtonStencil = createStencil({
16
16
  fontWeight: system.fontWeight.normal,
17
17
  [buttonStencil.vars.label]: system.color.fg.default,
18
18
 
19
- '&:hover, &.hover': {
20
- [buttonStencil.vars.background]: system.legacy.color.surface.alt.default,
19
+ '&:focus-visible, &.focus': {
20
+ [buttonStencil.vars.background]: system.legacy.color.surface.default,
21
21
  [buttonStencil.vars.label]: system.color.fg.strong,
22
+ [buttonStencil.vars.boxShadowInner]: system.legacy.color.focus.inverse,
23
+ [buttonStencil.vars.boxShadowOuter]: system.legacy.color.brand.focus.primary,
22
24
  },
23
25
 
24
- '&:active, &.active, &:focus-visible, &.focus': {
25
- [buttonStencil.vars.label]: system.color.fg.strong,
26
+ '&:hover, &.hover': {
27
+ [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
28
+ [buttonStencil.vars.label]: system.color.fg.stronger,
29
+ },
30
+
31
+ '&:active, &.active': {
32
+ [buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.default,
33
+ [buttonStencil.vars.label]: system.color.fg.stronger,
26
34
  },
27
35
 
28
36
  '&:disabled, &.disabled': {
@@ -37,6 +45,13 @@ export const paginationPageButtonStencil = createStencil({
37
45
 
38
46
  [buttonStencil.vars.label]: system.color.fg.inverse,
39
47
 
48
+ // for Windows high contrast desktop themes
49
+ // (same pattern as the aria-pressed rule in buttonStencil. See BaseButton.tsx)
50
+ '@media (prefers-contrast: more)': {
51
+ outline: `${px2rem(2)} solid transparent`,
52
+ outlineOffset: `-${px2rem(1)}`,
53
+ },
54
+
40
55
  '&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus': {
41
56
  [buttonStencil.vars.background]: system.legacy.color.brand.accent.primary,
42
57
 
package/select/lib/SelectInput.tsx CHANGED
@@ -2,7 +2,11 @@ import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common
2
2
  import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
3
3
  import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
4
4
  import {CSProps, createStencil} from '@workday/canvas-kit-styling';
5
- import {CanvasSystemIcon, caretDownSmallIcon} from '@workday/canvas-system-icons-web';
5
+ import {
6
+ CanvasSystemIcon,
7
+ chevronDownSmallIcon,
8
+ chevronUpSmallIcon,
9
+ } from '@workday/canvas-system-icons-web';
6
10
  import {system} from '@workday/canvas-tokens-web';
7
11
 
8
12
  import {useSelectInput} from './hooks/useSelectInput';
@@ -112,7 +116,11 @@ export const SelectInput = createSubcomponent(TextInput)({
112
116
  {...elemProps}
113
117
  />
114
118
  <InputGroup.InnerEnd {...selectInputStencil.parts.caretContainer}>
115
- <SystemIcon {...selectInputStencil.parts.caret} icon={caretDownSmallIcon} />
119
+ <SystemIcon
120
+ size="md"
121
+ {...selectInputStencil.parts.caret}
122
+ icon={model.state.visibility === 'visible' ? chevronUpSmallIcon : chevronDownSmallIcon}
123
+ />
116
124
  </InputGroup.InnerEnd>
117
125
  </InputGroup>
118
126
  );
package/text-input/lib/InputGroup.tsx CHANGED
@@ -10,10 +10,11 @@ import {
10
10
  dispatchInputEvent,
11
11
  useForkRef,
12
12
  } from '@workday/canvas-kit-react/common';
13
+ import {systemIconStencil} from '@workday/canvas-kit-react/icon';
13
14
  import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
14
15
  import {createStencil, handleCsProp, wrapProperty} from '@workday/canvas-kit-styling';
15
16
  import {CanvasSystemIcon, xSmallIcon} from '@workday/canvas-system-icons-web';
16
- import {system} from '@workday/canvas-tokens-web';
17
+ import {component, system} from '@workday/canvas-tokens-web';
17
18
 
18
19
  import {TextInput} from './TextInput';
19
20
 
@@ -56,6 +57,7 @@ export const inputGroupInnerStencil = createStencil({
56
57
  height,
57
58
  insetInlineStart,
58
59
  insetInlineEnd,
60
+ [systemIconStencil.vars.size]: component.systemIcon.size.xs,
59
61
  }),
60
62
  modifiers: {
61
63
  pointerEvents: {
@@ -175,6 +177,14 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
175
177
  } as const;
176
178
  });
177
179
 
180
+ const clearButtonStencil = createStencil({
181
+ base: {
182
+ svg: {
183
+ [systemIconStencil.vars.size]: component.systemIcon.size.xs,
184
+ },
185
+ },
186
+ });
187
+
178
188
  /**
179
189
  * A clear input button. This can be a component later.
180
190
  */
@@ -182,7 +192,12 @@ const ClearButton = createSubcomponent(TertiaryButton)({
182
192
  modelHook: useInputGroupModel,
183
193
  elemPropsHook: useClearButton,
184
194
  })<ExtractProps<typeof TertiaryButton, never>>((elemProps, Element) => {
185
- return <Element data-part="input-group-clear-button" {...handleCsProp(elemProps)} />;
195
+ return (
196
+ <Element
197
+ data-part="input-group-clear-button"
198
+ {...handleCsProp(elemProps, clearButtonStencil())}
199
+ />
200
+ );
186
201
  });
187
202
 
188
203
  // make sure we always use pixels if the input is a number - this is required for `calc`
package/text-input/lib/TextInput.tsx CHANGED
@@ -78,7 +78,6 @@ export const textInputStencil = createStencil({
78
78
  error: {
79
79
  error: {
80
80
  borderColor: system.legacy.color.brand.border.critical,
81
- // borderWidth: px2rem(2),
82
81
  boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
83
82
  '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
84
83
  {