@workday/canvas-kit-react 16.0.0-alpha.0478-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 (56) 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/pagination/lib/Pagination/Controls.d.ts.map +1 -1
  20. package/dist/commonjs/pagination/lib/Pagination/Controls.js +5 -4
  21. package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.d.ts.map +1 -1
  22. package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.js +1 -1
  23. package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js +1 -1
  24. package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.d.ts.map +1 -1
  25. package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
  26. package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts +11 -0
  27. package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts.map +1 -1
  28. package/dist/commonjs/pagination/lib/Pagination/PageButton.js +3 -3
  29. package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
  30. package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
  31. package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.d.ts.map +1 -1
  32. package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js +2 -2
  33. package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.d.ts.map +1 -1
  34. package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js +2 -2
  35. package/dist/es6/button/lib/ExternalHyperlink.d.ts +27 -29
  36. package/dist/es6/button/lib/ExternalHyperlink.d.ts.map +1 -1
  37. package/dist/es6/button/lib/ExternalHyperlink.js +2 -2
  38. package/dist/es6/button/lib/Hyperlink.d.ts +28 -20
  39. package/dist/es6/button/lib/Hyperlink.d.ts.map +1 -1
  40. package/dist/es6/button/lib/Hyperlink.js +9 -6
  41. package/dist/es6/pagination/lib/Pagination/Controls.d.ts.map +1 -1
  42. package/dist/es6/pagination/lib/Pagination/Controls.js +6 -5
  43. package/dist/es6/pagination/lib/Pagination/GoTo/Form.d.ts.map +1 -1
  44. package/dist/es6/pagination/lib/Pagination/GoTo/Form.js +1 -1
  45. package/dist/es6/pagination/lib/Pagination/GoTo/Label.js +1 -1
  46. package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.d.ts.map +1 -1
  47. package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
  48. package/dist/es6/pagination/lib/Pagination/PageButton.d.ts +11 -0
  49. package/dist/es6/pagination/lib/Pagination/PageButton.d.ts.map +1 -1
  50. package/dist/es6/pagination/lib/Pagination/PageButton.js +4 -4
  51. package/package.json +5 -5
  52. package/pagination/lib/Pagination/Controls.tsx +6 -1
  53. package/pagination/lib/Pagination/GoTo/Form.tsx +1 -0
  54. package/pagination/lib/Pagination/GoTo/Label.tsx +1 -1
  55. package/pagination/lib/Pagination/GoTo/TextInput.tsx +1 -0
  56. package/pagination/lib/Pagination/PageButton.tsx +20 -5
package/dist/commonjs/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/commonjs/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/commonjs/pagination/lib/Pagination/PageButton.js CHANGED
@@ -33,13 +33,13 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
33
33
  const usePaginationModel_1 = require("./usePaginationModel");
34
34
  exports.paginationPageButtonStencil = (0, canvas_kit_styling_1.createStencil)({
35
35
  extends: button_1.buttonStencil,
36
- 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);}" },
36
+ 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);}" },
37
37
  modifiers: {
38
38
  toggled: {
39
- 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);}" }
39
+ 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);}" }
40
40
  }
41
41
  }
42
- }, "pagination-page-button-db11fc");
42
+ }, "pagination-page-button-c731af");
43
43
  exports.PageButton = (0, common_1.createComponent)('button')({
44
44
  displayName: 'Pagination.PageButton',
45
45
  Component({ pageNumber, children, ...elemProps }) {
package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js CHANGED
@@ -10,7 +10,7 @@ export const breadcrumbsCurrentItemStencil = createStencil({
10
10
  vars: {
11
11
  maxWidth: '',
12
12
  },
13
- base: { name: "158no1", 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));font-weight:var(--cnvs-sys-font-weight-medium);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-29bc44);" }
13
+ base: { name: "1o9jh", 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));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-muted-default);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-29bc44);" }
14
14
  }, "breadcrumbs-current-item-29bc44");
15
15
  export const useBreadcrumbsItem = composeHooks(createElemPropsHook(useBreadcrumbsModel)((_model, ref) => {
16
16
  const { localRef } = useLocalRef(useForkRef(ref));
package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js CHANGED
@@ -12,7 +12,7 @@ export const breadcrumbsItemStencil = createStencil({
12
12
  parts: {
13
13
  chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
14
14
  },
15
- base: { name: "1g7rxr", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
15
+ base: { name: "150tjl", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
16
16
  }, "breadcrumbs-item-118728");
17
17
  export const useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
18
18
  export const BreadcrumbsItem = createSubcomponent('li')({
package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BreadcrumbsLink.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAE3E,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAIxF,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,oBAAoB,GAAG,EAAE,CAAC;CAC1C;AAED,eAAO,MAAM,sBAAsB;;;;gBAejC,CAAC;AAEH,eAAO,MAAM,eAAe,wFA2B1B,CAAC"}
1
+ {"version":3,"file":"BreadcrumbsLink.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAE3E,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAIxF,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,oBAAoB,GAAG,EAAE,CAAC;CAC1C;AAED,eAAO,MAAM,sBAAsB;;;;gBAyBjC,CAAC;AAEH,eAAO,MAAM,eAAe,wFA4B1B,CAAC"}
package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js CHANGED
@@ -8,12 +8,12 @@ export const breadcrumbsLinkStencil = createStencil({
8
8
  vars: {
9
9
  maxWidth: '',
10
10
  },
11
- base: { name: "lqny2", 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));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--maxWidth-breadcrumbs-link-6d0a52);" }
11
+ base: { name: "348ih1", 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));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--maxWidth-breadcrumbs-link-6d0a52);&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));text-decoration:underline;}&:active, &.active{color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" }
12
12
  }, "breadcrumbs-link-6d0a52");
13
13
  export const BreadcrumbsLink = createComponent('a')({
14
14
  displayName: 'Breadcrumbs.Link',
15
15
  Component: ({ maxWidth = 350, href, tooltipProps = {}, children, ...elemProps }, ref, Element) => {
16
- return (_jsx(OverflowTooltip, { ...tooltipProps, children: _jsx(Hyperlink, { href: href, ref: ref, as: Element, role: "link", variant: "standalone", ...handleCsProp(elemProps, breadcrumbsLinkStencil({
16
+ return (_jsx(OverflowTooltip, { ...tooltipProps, children: _jsx(Hyperlink, { href: href, ref: ref, as: Element, role: "link", variant: "secondary", linkType: "standalone", ...handleCsProp(elemProps, breadcrumbsLinkStencil({
17
17
  maxWidth: typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth,
18
18
  })), children: children }) }));
19
19
  },
package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BreadcrumbsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AASrF,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAQ3D,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gCAAgC;;;;;;oBAqB3C,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8aAOxC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBpC,CAAC"}
1
+ {"version":3,"file":"BreadcrumbsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AASrF,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAQ3D,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gCAAgC;;;;;;oBAwB3C,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8aAOxC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBpC,CAAC"}
package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js CHANGED
@@ -13,7 +13,7 @@ export const breadcrumbsOverflowButtonStencil = createStencil({
13
13
  overflowButton: 'breadcrumbs-overflow-button',
14
14
  chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
15
15
  },
16
- base: { name: "2f718p", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
16
+ base: { name: "235btz", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));[data-part=\"breadcrumbs-overflow-button\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
17
17
  }, "breadcrumbs-overflow-button-16df19");
18
18
  export const useBreadcrumbsOverflowButton = composeHooks(createElemPropsHook(useBreadcrumbsModel)(() => ({
19
19
  'aria-haspopup': true,
@@ -24,5 +24,5 @@ export const BreadcrumbsOverflowButton = createSubcomponent('button')({
24
24
  modelHook: useBreadcrumbsModel,
25
25
  elemPropsHook: useBreadcrumbsOverflowButton,
26
26
  })(({ style, ...elemProps }, Element) => {
27
- return (_jsxs("li", { ...breadcrumbsOverflowButtonStencil(), ...style, children: [_jsx(TertiaryButton, { as: Element, icon: relatedActionsIcon, ...breadcrumbsOverflowButtonStencil.parts.overflowButton, ...handleCsProp(elemProps) }), _jsx(SystemIcon, { icon: chevronRightSmallIcon, ...breadcrumbsOverflowButtonStencil.parts.chevronRightIcon, "aria-hidden": true })] }));
27
+ return (_jsxs("li", { ...breadcrumbsOverflowButtonStencil(), ...style, children: [_jsx(TertiaryButton, { as: Element, icon: relatedActionsIcon, size: "extraSmall", ...breadcrumbsOverflowButtonStencil.parts.overflowButton, ...handleCsProp(elemProps) }), _jsx(SystemIcon, { icon: chevronRightSmallIcon, ...breadcrumbsOverflowButtonStencil.parts.chevronRightIcon, "aria-hidden": true })] }));
28
28
  });
package/dist/es6/button/lib/ExternalHyperlink.d.ts CHANGED
@@ -20,29 +20,28 @@ export declare const externalHyperlinkStencil: import("@workday/canvas-kit-styli
20
20
  boxShadow: string;
21
21
  };
22
22
  '&:active, &.active': {
23
- color: "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))";
23
+ color: "--cnvs-sys-color-fg-link-hover";
24
24
  background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
25
25
  };
26
26
  };
27
- standalone: {
28
- textDecoration: string;
29
- };
30
- standaloneInverse: {
31
- textDecoration: string;
32
- color: "--cnvs-sys-color-fg-inverse";
27
+ secondary: {
28
+ color: "--cnvs-sys-color-fg-default";
33
29
  '&:hover, &.hover': {
34
- color: "--cnvs-sys-color-fg-inverse";
35
- background: string;
36
- };
37
- '&:focus, &.focus, &:focus-visible': {
38
- boxShadow: string;
30
+ color: "--cnvs-sys-color-fg-strong";
31
+ background: "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))";
39
32
  };
40
33
  '&:active, &.active': {
41
- color: "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))";
42
- background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
34
+ color: "--cnvs-sys-color-fg-strong";
35
+ background: "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))";
43
36
  };
44
37
  };
45
38
  };
39
+ linkType: {
40
+ inline: {};
41
+ standalone: {
42
+ textDecoration: string;
43
+ };
44
+ };
46
45
  }, {}, {}, never, never>>, {
47
46
  readonly externalHyperlinkIcon: "external-hyperlink-icon";
48
47
  }, {}, import("@workday/canvas-kit-styling").Stencil<{
@@ -57,33 +56,32 @@ export declare const externalHyperlinkStencil: import("@workday/canvas-kit-styli
57
56
  boxShadow: string;
58
57
  };
59
58
  '&:active, &.active': {
60
- color: "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))";
59
+ color: "--cnvs-sys-color-fg-link-hover";
61
60
  background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
62
61
  };
63
62
  };
64
- standalone: {
65
- textDecoration: string;
66
- };
67
- standaloneInverse: {
68
- textDecoration: string;
69
- color: "--cnvs-sys-color-fg-inverse";
63
+ secondary: {
64
+ color: "--cnvs-sys-color-fg-default";
70
65
  '&:hover, &.hover': {
71
- color: "--cnvs-sys-color-fg-inverse";
72
- background: string;
73
- };
74
- '&:focus, &.focus, &:focus-visible': {
75
- boxShadow: string;
66
+ color: "--cnvs-sys-color-fg-strong";
67
+ background: "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))";
76
68
  };
77
69
  '&:active, &.active': {
78
- color: "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))";
79
- background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
70
+ color: "--cnvs-sys-color-fg-strong";
71
+ background: "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))";
80
72
  };
81
73
  };
82
74
  };
75
+ linkType: {
76
+ inline: {};
77
+ standalone: {
78
+ textDecoration: string;
79
+ };
80
+ };
83
81
  }, {}, {}, never, never>, never>;
84
82
  /**
85
83
  * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
86
- * link on a dark or colorful background such as `system.color.accent.info`.
84
+ * link on a dark background such as `system.color.accent.info`.
87
85
  */
88
86
  export declare const ExternalHyperlink: import("@workday/canvas-kit-react/common").ElementComponent<"a", ExternalHyperlinkProps>;
89
87
  //# sourceMappingURL=ExternalHyperlink.d.ts.map
package/dist/es6/button/lib/ExternalHyperlink.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAuBnC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,0FAsB5B,CAAC"}
1
+ {"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAuBnC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,0FAsB5B,CAAC"}
package/dist/es6/button/lib/ExternalHyperlink.js CHANGED
@@ -14,9 +14,9 @@ export const externalHyperlinkStencil = createStencil({
14
14
  }, "external-hyperlink-5efdf6");
15
15
  /**
16
16
  * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
17
- * link on a dark or colorful background such as `system.color.accent.info`.
17
+ * link on a dark background such as `system.color.accent.info`.
18
18
  */
19
19
  export const ExternalHyperlink = createComponent('a')({
20
20
  displayName: 'ExternalHyperlink',
21
- Component: ({ children, iconLabel, variant, ...elemProps }, ref, Element) => (_jsxs(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...handleCsProp(elemProps, externalHyperlinkStencil({ variant })), children: [_jsx("span", { "data-part": "external-hyperlink-children", children: children }), _jsx(SystemIcon, { icon: externalLinkIcon, role: "img", "aria-label": iconLabel, ...externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
21
+ Component: ({ children, iconLabel, variant, linkType = 'inline', ...elemProps }, ref, Element) => (_jsxs(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...handleCsProp(elemProps, externalHyperlinkStencil({ variant, linkType })), children: [_jsx("span", { "data-part": "external-hyperlink-children", children: children }), _jsx(SystemIcon, { icon: externalLinkIcon, role: "img", "aria-label": iconLabel, ...externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
22
22
  });
package/dist/es6/button/lib/Hyperlink.d.ts CHANGED
@@ -2,14 +2,23 @@ import * as React from 'react';
2
2
  import { CSProps } from '@workday/canvas-kit-styling';
3
3
  export interface HyperlinkProps extends CSProps {
4
4
  /**
5
- * sets modifier styles for Hyperlink
6
- * - `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes
7
- * - `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.
8
- * - `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.
5
+ * Sets color styles for Hyperlink
6
+ * - `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes. Use this
7
+ * variant on dark backgrounds.
8
+ * - `secondary`: sets the color to a dark gray (keeps the underline by default). Use this
9
+ * variant on colored backgrounds.
9
10
  */
10
- variant?: 'inverse' | 'standalone' | 'standaloneInverse';
11
+ variant?: 'inverse' | 'secondary';
11
12
  /**
12
- * attribute for the hyperlink URL
13
+ * Sets underline behavior for Hyperlink
14
+ * - `inline` (default): keeps the underline. Use when the hyperlink appears in body text.
15
+ * - `standalone`: removes the underline. Use when a hyperlink is outside paragraph or body text.
16
+ *
17
+ * @default 'inline'
18
+ */
19
+ linkType?: 'inline' | 'standalone';
20
+ /**
21
+ * Attribute for the hyperlink URL
13
22
  */
14
23
  href?: string;
15
24
  children?: React.ReactNode;
@@ -26,29 +35,28 @@ export declare const hyperlinkStencil: import("@workday/canvas-kit-styling").Ste
26
35
  boxShadow: string;
27
36
  };
28
37
  '&:active, &.active': {
29
- color: "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))";
38
+ color: "--cnvs-sys-color-fg-link-hover";
30
39
  background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
31
40
  };
32
41
  };
33
- standalone: {
34
- textDecoration: string;
35
- };
36
- standaloneInverse: {
37
- textDecoration: string;
38
- color: "--cnvs-sys-color-fg-inverse";
42
+ secondary: {
43
+ color: "--cnvs-sys-color-fg-default";
39
44
  '&:hover, &.hover': {
40
- color: "--cnvs-sys-color-fg-inverse";
41
- background: string;
42
- };
43
- '&:focus, &.focus, &:focus-visible': {
44
- boxShadow: string;
45
+ color: "--cnvs-sys-color-fg-strong";
46
+ background: "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))";
45
47
  };
46
48
  '&:active, &.active': {
47
- color: "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))";
48
- background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
49
+ color: "--cnvs-sys-color-fg-strong";
50
+ background: "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))";
49
51
  };
50
52
  };
51
53
  };
54
+ linkType: {
55
+ inline: {};
56
+ standalone: {
57
+ textDecoration: string;
58
+ };
59
+ };
52
60
  }, {}, {}, never, never>;
53
61
  /**
54
62
  * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
package/dist/es6/button/lib/Hyperlink.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Hyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/Hyperlink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAGzF,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,mBAAmB,CAAC;IACzD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA4D3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,SAAS,kFAOpB,CAAC"}
1
+ {"version":3,"file":"Hyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/Hyperlink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAGzF,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgE3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,SAAS,kFAWpB,CAAC"}
package/dist/es6/button/lib/Hyperlink.js CHANGED
@@ -3,20 +3,23 @@ import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  export const hyperlinkStencil = createStencil({
6
- base: { name: "358u5c", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);text-decoration:underline;color:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));cursor:pointer;border-radius:0.125rem;padding:0 0.125rem ;margin:0 -2px;transition:color 0.15s,background-color 0.15s;word-break:break-word;&:hover, &.hover{color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:none;}&:active, &.active{color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));}" },
6
+ base: { name: "2y3hxx", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);text-decoration:underline;color:var(--cnvs-sys-color-fg-link-default);cursor:pointer;border-radius:0.125rem;padding:0 0.125rem;margin:0 -2px;transition:color 0.15s,background-color 0.15s;word-break:break-word;&:hover, &.hover{color:var(--cnvs-sys-color-fg-link-hover);background:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:none;@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}}&:active, &.active{color:var(--cnvs-sys-color-fg-link-hover);background:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" },
7
7
  modifiers: {
8
8
  variant: {
9
- inverse: { name: "bflao", styles: "color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-fg-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-fg-inverse);}&:active, &.active{color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));}" },
10
- standalone: { name: "3htgyu", styles: "text-decoration:none;" },
11
- standaloneInverse: { name: "2lal69", styles: "text-decoration:none;color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-fg-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:active, &.active{color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));}" }
9
+ inverse: { name: "26brux", styles: "color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-fg-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-fg-inverse);}&:active, &.active{color:var(--cnvs-sys-color-fg-link-hover);background:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));}" },
10
+ secondary: { name: "2y3z1z", styles: "color:var(--cnvs-sys-color-fg-default);&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);background:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:active, &.active{color:var(--cnvs-sys-color-fg-strong);background:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" }
11
+ },
12
+ linkType: {
13
+ inline: { name: "j66do", styles: "" },
14
+ standalone: { name: "1vn5nc", styles: "text-decoration:none;" }
12
15
  }
13
16
  }
14
- }, "hyperlink-b8579c");
17
+ }, "hyperlink-887109");
15
18
  /**
16
19
  * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
17
20
  * on the current page.
18
21
  */
19
22
  export const Hyperlink = createComponent('a')({
20
23
  displayName: 'Hyperlink',
21
- Component: ({ children, variant, ...elemProps }, ref, Element) => (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, hyperlinkStencil({ variant })), children: children })),
24
+ Component: ({ children, variant, linkType = 'inline', ...elemProps }, ref, Element) => (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, hyperlinkStencil({ variant, linkType })), children: children })),
22
25
  });
package/dist/es6/pagination/lib/Pagination/Controls.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAa/E,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IACpF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,uBAAuB;CAAG;AAE3C,eAAO,MAAM,yBAAyB,iJAMpC,CAAC;AAYH,eAAO,MAAM,kBAAkB,6FAK7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,2FAyB5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,2FAyB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAyB3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAyB3B,CAAC"}
1
+ {"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAc/E,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IACpF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,uBAAuB;CAAG;AAE3C,eAAO,MAAM,yBAAyB,iJAMpC,CAAC;AAgBH,eAAO,MAAM,kBAAkB,6FAK7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,2FAyB5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,2FAyB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAyB3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAyB3B,CAAC"}
package/dist/es6/pagination/lib/Pagination/Controls.js CHANGED
@@ -2,17 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
3
  import { TertiaryButton } from '@workday/canvas-kit-react/button';
4
4
  import { 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 { chevron2xLeftSmallIcon, chevron2xRightSmallIcon, chevronLeftSmallIcon, chevronRightSmallIcon, } 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 { PaginationContext } from './usePaginationModel';
10
11
  export const paginationControlsStencil = createStencil({
11
- base: { name: "49k36x", styles: "box-sizing:border-box;display:flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:center;" }
12
- }, "pagination-controls-4b73ed");
12
+ base: { name: "38bw3z", styles: "box-sizing:border-box;display:flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:center;" }
13
+ }, "pagination-controls-87ac05");
13
14
  const controlButtonStencil = createStencil({
14
- base: { name: "2vv3ab", styles: "box-sizing:border-box;&:dir(rtl){& .wd-icon{transform:scaleX(-1);}}" }
15
- }, "control-button-7dd089");
15
+ base: { name: "1x4ggd", styles: "box-sizing:border-box;& > span{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:dir(rtl){& .wd-icon{transform:scaleX(-1);}}" }
16
+ }, "control-button-3df642");
16
17
  export const PaginationControls = createComponent('div')({
17
18
  displayName: 'Pagination.Controls',
18
19
  Component(elemProps, ref, Element) {
package/dist/es6/pagination/lib/Pagination/GoTo/Form.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAOxE,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,yBAAyB,iJASpC,CAAC;AAEH,eAAO,MAAM,QAAQ,oFAiBnB,CAAC"}
1
+ {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAOxE,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,yBAAyB,iJAUpC,CAAC;AAEH,eAAO,MAAM,QAAQ,oFAiBnB,CAAC"}
package/dist/es6/pagination/lib/Pagination/GoTo/Form.js CHANGED
@@ -7,7 +7,7 @@ import { system } from '@workday/canvas-tokens-web';
7
7
  import { PaginationContext } from '../usePaginationModel';
8
8
  import { GoToContext, useGoToForm } from './useGoToForm';
9
9
  export const paginationGoToFormStencil = createStencil({
10
- base: { name: "3tlieg", styles: "box-sizing:border-box;display:flex;align-items:center;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));:dir(rtl){padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));}" }
10
+ base: { name: "251r03", styles: "box-sizing:border-box;display:flex;align-items:center;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));:dir(rtl){padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));}" }
11
11
  }, "pagination-go-to-form-0e353a");
12
12
  export const GoToForm = createComponent('form')({
13
13
  Component({ children, onSubmit, ...elemProps }, ref, Element) {
package/dist/es6/pagination/lib/Pagination/GoTo/Label.js CHANGED
@@ -11,6 +11,6 @@ export const GoToLabel = createComponent('label')({
11
11
  displayName: 'Pagination.GoToLabel',
12
12
  Component({ children, ...elemProps }, ref, Element) {
13
13
  const model = React.useContext(PaginationContext);
14
- return (_jsx(Subtext, { ref: ref, as: Element, size: "medium", variant: "hint", ...handleCsProp(elemProps, paginationGoToLabelStencil()), children: typeof children === 'function' ? children(model) : children }));
14
+ return (_jsx(Subtext, { ref: ref, as: Element, size: "large", variant: "hint", ...handleCsProp(elemProps, paginationGoToLabelStencil()), children: typeof children === 'function' ? children(model) : children }));
15
15
  },
16
16
  });
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "16.0.0-alpha.0478-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.0478-next.0",
57
- "@workday/canvas-kit-styling": "^16.0.0-alpha.0478-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": "d84620c64bada313ccd29fa9672193473f9b5633"
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