@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/breadcrumbs/lib/BreadcrumbsCurrentItem.tsx CHANGED
@@ -28,10 +28,10 @@ export const breadcrumbsCurrentItemStencil = createStencil({
28
28
  base: ({maxWidth}) => ({
29
29
  fontFamily: system.fontFamily.default,
30
30
  fontSize: system.legacy.fontSize.subtext.lg,
31
- fontWeight: system.fontWeight.medium,
31
+ fontWeight: system.fontWeight.normal,
32
32
  letterSpacing: system.legacy.letterSpacing.subtext.lg,
33
33
  lineHeight: system.legacy.lineHeight.subtext.lg,
34
- color: system.color.fg.default,
34
+ color: system.color.fg.muted.default,
35
35
  display: 'inline-block',
36
36
  whiteSpace: 'nowrap',
37
37
  textOverflow: 'ellipsis',
package/breadcrumbs/lib/BreadcrumbsItem.tsx CHANGED
@@ -40,7 +40,7 @@ export const breadcrumbsItemStencil = createStencil({
40
40
  display: 'inline-flex',
41
41
  whiteSpace: 'nowrap',
42
42
  [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
43
- [systemIconStencil.vars.color]: system.color.fg.default,
43
+ [systemIconStencil.vars.color]: system.color.fg.muted.default,
44
44
  [chevronRightIconPart]: {
45
45
  height: system.legacy.size.sm,
46
46
  width: system.legacy.size.sm,
package/breadcrumbs/lib/BreadcrumbsLink.tsx CHANGED
@@ -28,10 +28,20 @@ export const breadcrumbsLinkStencil = createStencil({
28
28
  fontWeight: system.fontWeight.normal,
29
29
  letterSpacing: system.legacy.letterSpacing.subtext.lg,
30
30
  lineHeight: system.legacy.lineHeight.subtext.lg,
31
+ color: system.color.fg.default,
31
32
  textOverflow: 'ellipsis',
32
33
  overflow: 'hidden',
33
34
  whiteSpace: 'nowrap',
34
35
  maxWidth,
36
+ '&:hover, &.hover': {
37
+ color: system.color.fg.strong,
38
+ backgroundColor: system.legacy.color.surface.overlay.hover.default,
39
+ textDecoration: 'underline',
40
+ },
41
+ '&:active, &.active': {
42
+ color: system.color.fg.strong,
43
+ backgroundColor: system.legacy.color.surface.overlay.pressed.default,
44
+ },
35
45
  }),
36
46
  });
37
47
 
@@ -49,7 +59,8 @@ export const BreadcrumbsLink = createComponent('a')({
49
59
  ref={ref}
50
60
  as={Element}
51
61
  role="link"
52
- variant="standalone"
62
+ variant="secondary"
63
+ linkType="standalone"
53
64
  {...handleCsProp(
54
65
  elemProps,
55
66
  breadcrumbsLinkStencil({
package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx CHANGED
@@ -30,11 +30,14 @@ export const breadcrumbsOverflowButtonStencil = createStencil({
30
30
  overflowButton: 'breadcrumbs-overflow-button',
31
31
  chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
32
32
  },
33
- base: ({chevronRightIconPart}) => ({
33
+ base: ({chevronRightIconPart, overflowButtonPart}) => ({
34
34
  alignItems: 'center',
35
35
  display: 'flex',
36
- [systemIconStencil.vars.color]: system.color.fg.default,
36
+ [systemIconStencil.vars.color]: system.color.fg.muted.default,
37
37
  [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
38
+ [overflowButtonPart]: {
39
+ [systemIconStencil.vars.color]: system.color.fg.strong,
40
+ },
38
41
  [chevronRightIconPart]: {
39
42
  height: system.legacy.size.sm,
40
43
  width: system.legacy.size.sm,
@@ -67,6 +70,7 @@ export const BreadcrumbsOverflowButton = createSubcomponent('button')({
67
70
  <TertiaryButton
68
71
  as={Element}
69
72
  icon={relatedActionsIcon}
73
+ size="extraSmall"
70
74
  {...breadcrumbsOverflowButtonStencil.parts.overflowButton}
71
75
  {...handleCsProp(elemProps)}
72
76
  />
package/button/lib/ExternalHyperlink.tsx CHANGED
@@ -41,12 +41,12 @@ export const externalHyperlinkStencil = createStencil({
41
41
 
42
42
  /**
43
43
  * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
44
- * link on a dark or colorful background such as `system.color.accent.info`.
44
+ * link on a dark background such as `system.color.accent.info`.
45
45
  */
46
46
  export const ExternalHyperlink = createComponent('a')({
47
47
  displayName: 'ExternalHyperlink',
48
48
  Component: (
49
- {children, iconLabel, variant, ...elemProps}: ExternalHyperlinkProps,
49
+ {children, iconLabel, variant, linkType = 'inline', ...elemProps}: ExternalHyperlinkProps,
50
50
  ref,
51
51
  Element
52
52
  ) => (
@@ -54,7 +54,7 @@ export const ExternalHyperlink = createComponent('a')({
54
54
  ref={ref}
55
55
  target="_blank"
56
56
  rel="noreferrer"
57
- {...handleCsProp(elemProps, externalHyperlinkStencil({variant}))}
57
+ {...handleCsProp(elemProps, externalHyperlinkStencil({variant, linkType}))}
58
58
  >
59
59
  <span data-part="external-hyperlink-children">{children}</span>
60
60
  <SystemIcon
package/button/lib/Hyperlink.tsx CHANGED
@@ -6,14 +6,23 @@ import {system} from '@workday/canvas-tokens-web';
6
6
 
7
7
  export interface HyperlinkProps extends CSProps {
8
8
  /**
9
- * sets modifier styles for Hyperlink
10
- * - `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes
11
- * - `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.
12
- * - `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.
9
+ * Sets color styles for Hyperlink
10
+ * - `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes. Use this
11
+ * variant on dark backgrounds.
12
+ * - `secondary`: sets the color to a dark gray (keeps the underline by default). Use this
13
+ * variant on colored backgrounds.
13
14
  */
14
- variant?: 'inverse' | 'standalone' | 'standaloneInverse';
15
+ variant?: 'inverse' | 'secondary';
15
16
  /**
16
- * attribute for the hyperlink URL
17
+ * Sets underline behavior for Hyperlink
18
+ * - `inline` (default): keeps the underline. Use when the hyperlink appears in body text.
19
+ * - `standalone`: removes the underline. Use when a hyperlink is outside paragraph or body text.
20
+ *
21
+ * @default 'inline'
22
+ */
23
+ linkType?: 'inline' | 'standalone';
24
+ /**
25
+ * Attribute for the hyperlink URL
17
26
  */
18
27
  href?: string;
19
28
  children?: React.ReactNode;
@@ -23,24 +32,29 @@ export const hyperlinkStencil = createStencil({
23
32
  base: {
24
33
  fontFamily: system.fontFamily.default,
25
34
  textDecoration: 'underline',
26
- color: system.legacy.color.fg.info.default,
35
+ color: system.color.fg.link.default,
27
36
  cursor: 'pointer',
28
37
  borderRadius: px2rem(2),
29
- padding: `0 ${px2rem(2)} `,
38
+ padding: `0 ${px2rem(2)}`,
30
39
  margin: '0 -2px',
31
40
  transition: 'color 0.15s,background-color 0.15s',
32
41
  wordBreak: 'break-word',
33
42
  '&:hover, &.hover': {
34
- color: system.legacy.color.fg.info.strong,
35
- background: system.legacy.color.surface.alt.default,
43
+ color: system.color.fg.link.hover,
44
+ background: system.legacy.color.surface.overlay.hover.default,
36
45
  },
37
46
  '&:focus, &.focus, &:focus-visible': {
38
47
  boxShadow: `0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.primary}`,
39
48
  outline: 'none',
49
+ // Windows High Contrast Mode ignores `boxShadow`, so provide an explicit
50
+ // outline to keep the focus indicator visible.
51
+ '@media (forced-colors: active)': {
52
+ outline: `solid ${px2rem(2)} ButtonBorder`,
53
+ },
40
54
  },
41
55
  '&:active, &.active': {
42
- color: system.legacy.color.fg.info.strong,
43
- background: system.legacy.color.surface.alt.default,
56
+ color: system.color.fg.link.hover,
57
+ background: system.legacy.color.surface.overlay.pressed.default,
44
58
  },
45
59
  },
46
60
  modifiers: {
@@ -55,29 +69,28 @@ export const hyperlinkStencil = createStencil({
55
69
  boxShadow: `0 0 0 ${px2rem(2)} ${system.color.fg.inverse}`,
56
70
  },
57
71
  '&:active, &.active': {
58
- color: system.legacy.color.fg.info.strong,
72
+ color: system.color.fg.link.hover,
59
73
  background: system.legacy.color.surface.navigation,
60
74
  },
61
75
  },
62
- standalone: {
63
- textDecoration: 'none',
64
- },
65
- standaloneInverse: {
66
- textDecoration: 'none',
67
- color: system.color.fg.inverse,
76
+ secondary: {
77
+ color: system.color.fg.default,
68
78
  '&:hover, &.hover': {
69
- color: system.color.fg.inverse,
70
- background: 'rgba(255, 255, 255, 0.1)',
71
- },
72
- '&:focus, &.focus, &:focus-visible': {
73
- boxShadow: `0 0 0 ${px2rem(2)} ${system.legacy.color.focus.inverse}`,
79
+ color: system.color.fg.strong,
80
+ background: system.legacy.color.surface.overlay.hover.default,
74
81
  },
75
82
  '&:active, &.active': {
76
- color: system.legacy.color.fg.info.strong,
77
- background: system.legacy.color.surface.navigation,
83
+ color: system.color.fg.strong,
84
+ background: system.legacy.color.surface.overlay.pressed.default,
78
85
  },
79
86
  },
80
87
  },
88
+ linkType: {
89
+ inline: {},
90
+ standalone: {
91
+ textDecoration: 'none',
92
+ },
93
+ },
81
94
  },
82
95
  });
83
96
 
@@ -87,8 +100,12 @@ export const hyperlinkStencil = createStencil({
87
100
  */
88
101
  export const Hyperlink = createComponent('a')({
89
102
  displayName: 'Hyperlink',
90
- Component: ({children, variant, ...elemProps}: HyperlinkProps, ref, Element) => (
91
- <Element ref={ref} {...handleCsProp(elemProps, hyperlinkStencil({variant}))}>
103
+ Component: (
104
+ {children, variant, linkType = 'inline', ...elemProps}: HyperlinkProps,
105
+ ref,
106
+ Element
107
+ ) => (
108
+ <Element ref={ref} {...handleCsProp(elemProps, hyperlinkStencil({variant, linkType}))}>
92
109
  {children}
93
110
  </Element>
94
111
  ),
package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.js CHANGED
@@ -13,7 +13,7 @@ exports.breadcrumbsCurrentItemStencil = (0, canvas_kit_styling_1.createStencil)(
13
13
  vars: {
14
14
  maxWidth: '',
15
15
  },
16
- 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);" }
16
+ 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);" }
17
17
  }, "breadcrumbs-current-item-29bc44");
18
18
  exports.useBreadcrumbsItem = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useBreadcrumbsModel_1.useBreadcrumbsModel)((_model, ref) => {
19
19
  const { localRef } = (0, common_1.useLocalRef)((0, common_1.useForkRef)(ref));
package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js CHANGED
@@ -15,7 +15,7 @@ exports.breadcrumbsItemStencil = (0, canvas_kit_styling_1.createStencil)({
15
15
  parts: {
16
16
  chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
17
17
  },
18
- 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);}}" }
18
+ 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);}}" }
19
19
  }, "breadcrumbs-item-118728");
20
20
  exports.useBreadcrumbsItem = (0, common_1.composeHooks)(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
21
21
  exports.BreadcrumbsItem = (0, common_1.createSubcomponent)('li')({
package/dist/commonjs/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/commonjs/breadcrumbs/lib/BreadcrumbsLink.js CHANGED
@@ -11,12 +11,12 @@ exports.breadcrumbsLinkStencil = (0, canvas_kit_styling_1.createStencil)({
11
11
  vars: {
12
12
  maxWidth: '',
13
13
  },
14
- 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);" }
14
+ 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));}" }
15
15
  }, "breadcrumbs-link-6d0a52");
16
16
  exports.BreadcrumbsLink = (0, common_1.createComponent)('a')({
17
17
  displayName: 'Breadcrumbs.Link',
18
18
  Component: ({ maxWidth = 350, href, tooltipProps = {}, children, ...elemProps }, ref, Element) => {
19
- return ((0, jsx_runtime_1.jsx)(tooltip_1.OverflowTooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsx)(button_1.Hyperlink, { href: href, ref: ref, as: Element, role: "link", variant: "standalone", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.breadcrumbsLinkStencil)({
19
+ return ((0, jsx_runtime_1.jsx)(tooltip_1.OverflowTooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsx)(button_1.Hyperlink, { href: href, ref: ref, as: Element, role: "link", variant: "secondary", linkType: "standalone", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.breadcrumbsLinkStencil)({
20
20
  maxWidth: typeof maxWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(maxWidth) : maxWidth,
21
21
  })), children: children }) }));
22
22
  },
package/dist/commonjs/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/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js CHANGED
@@ -16,7 +16,7 @@ exports.breadcrumbsOverflowButtonStencil = (0, canvas_kit_styling_1.createStenci
16
16
  overflowButton: 'breadcrumbs-overflow-button',
17
17
  chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
18
18
  },
19
- 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);}}" }
19
+ 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);}}" }
20
20
  }, "breadcrumbs-overflow-button-16df19");
21
21
  exports.useBreadcrumbsOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useBreadcrumbsModel_1.useBreadcrumbsModel)(() => ({
22
22
  'aria-haspopup': true,
@@ -27,5 +27,5 @@ exports.BreadcrumbsOverflowButton = (0, common_1.createSubcomponent)('button')({
27
27
  modelHook: useBreadcrumbsModel_1.useBreadcrumbsModel,
28
28
  elemPropsHook: exports.useBreadcrumbsOverflowButton,
29
29
  })(({ style, ...elemProps }, Element) => {
30
- return ((0, jsx_runtime_1.jsxs)("li", { ...(0, exports.breadcrumbsOverflowButtonStencil)(), ...style, children: [(0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { as: Element, icon: canvas_system_icons_web_1.relatedActionsIcon, ...exports.breadcrumbsOverflowButtonStencil.parts.overflowButton, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps) }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.chevronRightSmallIcon, ...exports.breadcrumbsOverflowButtonStencil.parts.chevronRightIcon, "aria-hidden": true })] }));
30
+ return ((0, jsx_runtime_1.jsxs)("li", { ...(0, exports.breadcrumbsOverflowButtonStencil)(), ...style, children: [(0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { as: Element, icon: canvas_system_icons_web_1.relatedActionsIcon, size: "extraSmall", ...exports.breadcrumbsOverflowButtonStencil.parts.overflowButton, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps) }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.chevronRightSmallIcon, ...exports.breadcrumbsOverflowButtonStencil.parts.chevronRightIcon, "aria-hidden": true })] }));
31
31
  });
package/dist/commonjs/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/commonjs/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/commonjs/button/lib/ExternalHyperlink.js CHANGED
@@ -17,9 +17,9 @@ exports.externalHyperlinkStencil = (0, canvas_kit_styling_1.createStencil)({
17
17
  }, "external-hyperlink-5efdf6");
18
18
  /**
19
19
  * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
20
- * link on a dark or colorful background such as `system.color.accent.info`.
20
+ * link on a dark background such as `system.color.accent.info`.
21
21
  */
22
22
  exports.ExternalHyperlink = (0, common_1.createComponent)('a')({
23
23
  displayName: 'ExternalHyperlink',
24
- Component: ({ children, iconLabel, variant, ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsxs)(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.externalHyperlinkStencil)({ variant })), children: [(0, jsx_runtime_1.jsx)("span", { "data-part": "external-hyperlink-children", children: children }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.externalLinkIcon, role: "img", "aria-label": iconLabel, ...exports.externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
24
+ Component: ({ children, iconLabel, variant, linkType = 'inline', ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsxs)(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.externalHyperlinkStencil)({ variant, linkType })), children: [(0, jsx_runtime_1.jsx)("span", { "data-part": "external-hyperlink-children", children: children }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.externalLinkIcon, role: "img", "aria-label": iconLabel, ...exports.externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
25
25
  });
package/dist/commonjs/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/commonjs/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/commonjs/button/lib/Hyperlink.js CHANGED
@@ -6,20 +6,23 @@ const common_1 = require("@workday/canvas-kit-react/common");
6
6
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
7
7
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
8
8
  exports.hyperlinkStencil = (0, canvas_kit_styling_1.createStencil)({
9
- 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)));}" },
9
+ 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));}" },
10
10
  modifiers: {
11
11
  variant: {
12
- 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));}" },
13
- standalone: { name: "3htgyu", styles: "text-decoration:none;" },
14
- 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));}" }
12
+ 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));}" },
13
+ 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));}" }
14
+ },
15
+ linkType: {
16
+ inline: { name: "j66do", styles: "" },
17
+ standalone: { name: "1vn5nc", styles: "text-decoration:none;" }
15
18
  }
16
19
  }
17
- }, "hyperlink-b8579c");
20
+ }, "hyperlink-887109");
18
21
  /**
19
22
  * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
20
23
  * on the current page.
21
24
  */
22
25
  exports.Hyperlink = (0, common_1.createComponent)('a')({
23
26
  displayName: 'Hyperlink',
24
- Component: ({ children, variant, ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.hyperlinkStencil)({ variant })), children: children })),
27
+ Component: ({ children, variant, linkType = 'inline', ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.hyperlinkStencil)({ variant, linkType })), children: children })),
25
28
  });
package/dist/commonjs/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/commonjs/pagination/lib/Pagination/Controls.js CHANGED
@@ -28,17 +28,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
28
28
  const React = __importStar(require("react"));
29
29
  const button_1 = require("@workday/canvas-kit-react/button");
30
30
  const common_1 = require("@workday/canvas-kit-react/common");
31
+ const icon_1 = require("@workday/canvas-kit-react/icon");
31
32
  const layout_1 = require("@workday/canvas-kit-react/layout");
32
33
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
33
34
  const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
34
35
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
35
36
  const usePaginationModel_1 = require("./usePaginationModel");
36
37
  exports.paginationControlsStencil = (0, canvas_kit_styling_1.createStencil)({
37
- 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;" }
38
- }, "pagination-controls-4b73ed");
38
+ 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;" }
39
+ }, "pagination-controls-87ac05");
39
40
  const controlButtonStencil = (0, canvas_kit_styling_1.createStencil)({
40
- base: { name: "2vv3ab", styles: "box-sizing:border-box;&:dir(rtl){& .wd-icon{transform:scaleX(-1);}}" }
41
- }, "control-button-7dd089");
41
+ 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);}}" }
42
+ }, "control-button-3df642");
42
43
  exports.PaginationControls = (0, common_1.createComponent)('div')({
43
44
  displayName: 'Pagination.Controls',
44
45
  Component(elemProps, ref, Element) {
package/dist/commonjs/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/commonjs/pagination/lib/Pagination/GoTo/Form.js CHANGED
@@ -33,7 +33,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
33
33
  const usePaginationModel_1 = require("../usePaginationModel");
34
34
  const useGoToForm_1 = require("./useGoToForm");
35
35
  exports.paginationGoToFormStencil = (0, canvas_kit_styling_1.createStencil)({
36
- 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));}" }
36
+ 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));}" }
37
37
  }, "pagination-go-to-form-0e353a");
38
38
  exports.GoToForm = (0, common_1.createComponent)('form')({
39
39
  Component({ children, onSubmit, ...elemProps }, ref, Element) {
package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js CHANGED
@@ -37,6 +37,6 @@ exports.GoToLabel = (0, common_1.createComponent)('label')({
37
37
  displayName: 'Pagination.GoToLabel',
38
38
  Component({ children, ...elemProps }, ref, Element) {
39
39
  const model = React.useContext(usePaginationModel_1.PaginationContext);
40
- return ((0, jsx_runtime_1.jsx)(text_1.Subtext, { ref: ref, as: Element, size: "medium", variant: "hint", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.paginationGoToLabelStencil)()), children: typeof children === 'function' ? children(model) : children }));
40
+ return ((0, jsx_runtime_1.jsx)(text_1.Subtext, { ref: ref, as: Element, size: "large", variant: "hint", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.paginationGoToLabelStencil)()), children: typeof children === 'function' ? children(model) : children }));
41
41
  },
42
42
  });
package/dist/commonjs/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/commonjs/pagination/lib/Pagination/GoTo/TextInput.js CHANGED
@@ -31,7 +31,7 @@ const text_input_1 = require("@workday/canvas-kit-react/text-input");
31
31
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
32
32
  const useGoToForm_1 = require("./useGoToForm");
33
33
  exports.paginationGoToTextInputStencil = (0, canvas_kit_styling_1.createStencil)({
34
- base: { name: "11nuws", styles: "box-sizing:border-box;min-width:3.4375rem;width:3.4375rem;" }
34
+ base: { name: "2gdb7p", styles: "box-sizing:border-box;min-width:3.4375rem;width:3.4375rem;text-align:center;" }
35
35
  }, "pagination-go-to-text-input-c73671");
36
36
  exports.GoToTextInput = (0, common_1.createComponent)('input')({
37
37
  displayName: 'Pagination.GoToTextInput',