@workday/canvas-kit-labs-css 17.0.0-alpha.0595-next.0 → 17.0.0-alpha.0605-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 (2) hide show
  1. package/package.json +2 -2
  2. package/selection-group.css +125 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-labs-css",
3
- "version": "17.0.0-alpha.0595-next.0",
3
+ "version": "17.0.0-alpha.0605-next.0",
4
4
  "type": "module",
5
5
  "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
6
6
  "author": "Workday, Inc. (https://www.workday.com)",
@@ -26,5 +26,5 @@
26
26
  "components",
27
27
  "workday"
28
28
  ],
29
- "gitHead": "0fce0faf5b9716e106c75fbe78b12badd90e4605"
29
+ "gitHead": "58ce933e857e255360611f2330a230b167cead8d"
30
30
  }
package/selection-group.css ADDED
@@ -0,0 +1,125 @@
1
+ .cnvs-labs-selection-group-icon {
2
+ box-sizing: border-box;
3
+ flex-shrink: 0;
4
+ }
5
+
6
+
7
+ .cnvs-labs-selection-group-item {
8
+ box-sizing: border-box;
9
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
10
+ font-family: var(--cnvs-sys-font-family-default, "Roboto");
11
+ font-weight: var(--cnvs-sys-font-weight-normal, 400);
12
+ line-height: var(--cnvs-sys-line-height-subtext-lg, 1.25rem);
13
+ font-size: var(--cnvs-sys-font-size-subtext-lg, 0.875rem);
14
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);
15
+ display: inline-flex;
16
+ align-items: center;
17
+ gap: var(--cnvs-base-size-75, 0.375rem);
18
+ border: 0.0625rem solid var(--cnvs-sys-color-border-default);
19
+ padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
20
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
21
+ color: var(--cnvs-sys-color-fg-strong);
22
+ cursor: pointer;
23
+ text-align: start;
24
+ transition: background-color 80ms ease,color 80ms ease,border-color 80ms ease;
25
+ --cnvs-system-icon-color: currentColor;
26
+ --cnvs-system-icon-accent-color: currentColor;
27
+ }
28
+
29
+ .cnvs-labs-selection-group-item [data-part="selection-group-item-label"] {
30
+ white-space: nowrap;
31
+ }
32
+
33
+ .cnvs-labs-selection-group-item:not([aria-checked="true"]):is(:hover, .hover) {
34
+ background-color: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
35
+ }
36
+
37
+ .cnvs-labs-selection-group-item:not([aria-checked="true"]):is(:active, .active) {
38
+ background-color: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
39
+ }
40
+
41
+ .cnvs-labs-selection-group-item:is(:focus-visible, .focus) {
42
+ box-shadow: 0 0 0 1px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 3px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
43
+ }
44
+
45
+ .cnvs-labs-selection-group-item:is(:disabled, .disabled) {
46
+ cursor: default;
47
+ opacity: var(--cnvs-sys-opacity-disabled);
48
+ }
49
+
50
+ .cnvs-labs-selection-group-item:is(:disabled, .disabled):is(:hover, .hover) {
51
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
52
+ }
53
+
54
+ .cnvs-labs-selection-group-item[aria-checked="true"] {
55
+ background-color: var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));
56
+ border: 0.0625rem solid transparent;
57
+ color: var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
58
+ }
59
+
60
+ .cnvs-labs-selection-group-item[aria-checked="true"]:is(:hover, .hover) {
61
+ background-color: var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));
62
+ }
63
+
64
+ .cnvs-labs-selection-group-item[aria-checked="true"]:is(:active, .active) {
65
+ background-color: var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));
66
+ }
67
+
68
+ .cnvs-labs-selection-group-item[aria-checked="true"]:is(:disabled, .disabled) {
69
+ background-color: var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));
70
+ color: var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
71
+ }
72
+
73
+
74
+ .cnvs-labs-selection-group-item.width-content {
75
+ width: fit-content;
76
+ }
77
+
78
+
79
+ .cnvs-labs-selection-group-item.width-equal {
80
+ width: 100%;
81
+ }
82
+
83
+
84
+ .cnvs-labs-selection-group-item.width-column {
85
+ width: 100%;
86
+ }
87
+
88
+
89
+ .cnvs-labs-selection-group-list {
90
+ box-sizing: border-box;
91
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
92
+ display: flex;
93
+ flex-wrap: wrap;
94
+ gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
95
+ width: fit-content;
96
+ border: 0.125rem solid transparent;
97
+ padding: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
98
+ transition: 100ms border-color;
99
+ }
100
+
101
+
102
+
103
+ .cnvs-labs-selection-group-list.width-equal {
104
+ display: grid;
105
+ grid-auto-flow: column;
106
+ grid-auto-columns: 1fr;
107
+ }
108
+
109
+
110
+ .cnvs-labs-selection-group-list.width-column {
111
+ flex-direction: column;
112
+ flex-wrap: nowrap;
113
+ width: 100%;
114
+ }
115
+
116
+
117
+ .cnvs-labs-selection-group-list.error-error {
118
+ border-color: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
119
+ }
120
+
121
+
122
+ .cnvs-labs-selection-group-list.error-caution {
123
+ border-color: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
124
+ }
125
+