@workday/canvas-kit-preview-react 17.0.0-alpha.0631-next.0 → 17.0.0-alpha.0639-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.
- package/dist/commonjs/color-picker/lib/ColorPicker.js +1 -1
- package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +1 -1
- package/dist/commonjs/divider/lib/Divider.js +3 -3
- package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/commonjs/radio/lib/RadioGroup.js +3 -3
- package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
- package/dist/commonjs/radio/lib/RadioText.js +3 -3
- package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
- package/dist/commonjs/side-panel/lib/SidePanel.js +7 -7
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/dist/commonjs/status-indicator/lib/StatusIndicator.js +14 -14
- package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/commonjs/switch/lib/SwitchBackground.js +1 -1
- package/dist/commonjs/switch/lib/SwitchCircle.js +2 -2
- package/dist/commonjs/switch/lib/SwitchContainer.js +1 -1
- package/dist/commonjs/switch/lib/SwitchIcon.js +2 -2
- package/dist/commonjs/switch/lib/SwitchInput.js +3 -3
- package/dist/commonjs/tabs/lib/TabsItem.d.ts +3 -1
- package/dist/commonjs/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.js +60 -5
- package/dist/commonjs/tabs/lib/TabsList.d.ts +330 -2
- package/dist/commonjs/tabs/lib/TabsList.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsList.js +65 -12
- package/dist/commonjs/tabs/lib/TabsOverflowButton.d.ts +24 -215
- package/dist/commonjs/tabs/lib/TabsOverflowButton.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsOverflowButton.js +71 -6
- package/dist/commonjs/tabs/lib/TabsPanels.js +2 -2
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts +17 -12
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/useTabsModel.js +144 -5
- package/dist/commonjs/version/lib/version.js +1 -1
- package/dist/es6/color-picker/lib/ColorPicker.js +1 -1
- package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/es6/color-picker/lib/parts/SwatchBook.js +1 -1
- package/dist/es6/divider/lib/Divider.js +3 -3
- package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/es6/radio/lib/RadioGroup.js +3 -3
- package/dist/es6/radio/lib/RadioLabel.js +1 -1
- package/dist/es6/radio/lib/RadioText.js +3 -3
- package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
- package/dist/es6/side-panel/lib/SidePanel.js +7 -7
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/dist/es6/status-indicator/lib/StatusIndicator.js +14 -14
- package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/es6/switch/lib/SwitchBackground.js +1 -1
- package/dist/es6/switch/lib/SwitchCircle.js +2 -2
- package/dist/es6/switch/lib/SwitchContainer.js +1 -1
- package/dist/es6/switch/lib/SwitchIcon.js +2 -2
- package/dist/es6/switch/lib/SwitchInput.js +3 -3
- package/dist/es6/tabs/lib/TabsItem.d.ts +3 -1
- package/dist/es6/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsItem.js +38 -6
- package/dist/es6/tabs/lib/TabsList.d.ts +330 -2
- package/dist/es6/tabs/lib/TabsList.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsList.js +67 -15
- package/dist/es6/tabs/lib/TabsOverflowButton.d.ts +24 -215
- package/dist/es6/tabs/lib/TabsOverflowButton.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsOverflowButton.js +72 -8
- package/dist/es6/tabs/lib/TabsPanels.js +2 -2
- package/dist/es6/tabs/lib/useTabsModel.d.ts +17 -12
- package/dist/es6/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/es6/tabs/lib/useTabsModel.js +144 -5
- package/dist/es6/version/lib/version.js +1 -1
- package/package.json +4 -4
- package/tabs/lib/TabsItem.tsx +39 -0
- package/tabs/lib/TabsList.tsx +83 -5
- package/tabs/lib/TabsOverflowButton.tsx +77 -5
- package/tabs/lib/TabsPanels.tsx +2 -2
- package/tabs/lib/useTabsModel.tsx +161 -3
|
@@ -3,11 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.useTabsModel = void 0;
|
|
6
|
+
exports.useTabsModel = exports.TABS_OVERFLOW_BUTTON_ID = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const collection_1 = require("@workday/canvas-kit-react/collection");
|
|
9
9
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
10
|
const menu_1 = require("@workday/canvas-kit-react/menu");
|
|
11
|
+
/**
|
|
12
|
+
* This constant is used as the stable identifier for the overflow button in the tabs collection.
|
|
13
|
+
* It uses a `__` prefix to avoid conflicts with user-provided item IDs.
|
|
14
|
+
*/
|
|
15
|
+
exports.TABS_OVERFLOW_BUTTON_ID = '__tabs-overflow__';
|
|
11
16
|
/**
|
|
12
17
|
* The TabsModel extends the [Collection
|
|
13
18
|
* System](/get-started/for-developers/guides/collection-api/). Tabs have tab items and
|
|
@@ -55,11 +60,73 @@ exports.useTabsModel = (0, common_1.createModelHook)({
|
|
|
55
60
|
requiredConfig: collection_1.useOverflowListModel.requiredConfig,
|
|
56
61
|
contextOverride: collection_1.useOverflowListModel.Context,
|
|
57
62
|
})(config => {
|
|
58
|
-
var _a;
|
|
63
|
+
var _a, _b;
|
|
59
64
|
const initialSelectedRef = react_1.default.useRef(config.initialTab);
|
|
60
|
-
const
|
|
65
|
+
const userGetId = config.getId || collection_1.defaultGetId;
|
|
61
66
|
const modality = (0, common_1.useModalityType)();
|
|
67
|
+
// Stable object so getId can recognize the synthetic overflow item. Callers
|
|
68
|
+
// often pass a getId that only understands their own item shape (for example
|
|
69
|
+
// `item => item.contextId`). Without this, the overflow item gets an empty id
|
|
70
|
+
// and Tabs.List renders it as a normal tab.
|
|
71
|
+
const overflowItemRef = react_1.default.useRef({
|
|
72
|
+
id: exports.TABS_OVERFLOW_BUTTON_ID,
|
|
73
|
+
text: 'More',
|
|
74
|
+
});
|
|
75
|
+
const getId = (item) => {
|
|
76
|
+
if (item === overflowItemRef.current) {
|
|
77
|
+
return exports.TABS_OVERFLOW_BUTTON_ID;
|
|
78
|
+
}
|
|
79
|
+
const id = userGetId(item);
|
|
80
|
+
if (id === exports.TABS_OVERFLOW_BUTTON_ID) {
|
|
81
|
+
throw new Error(`Tabs item id "${exports.TABS_OVERFLOW_BUTTON_ID}" is reserved for the overflow tab. Choose a different id.`);
|
|
82
|
+
}
|
|
83
|
+
return id;
|
|
84
|
+
};
|
|
85
|
+
// When using dynamic items, append a synthetic overflow button item to the
|
|
86
|
+
// items array. This ensures the overflow button is included in the navigation
|
|
87
|
+
// sequence for roving tabindex. The overflow button component will handle
|
|
88
|
+
// conditional rendering (not showing when there are no hidden items).
|
|
89
|
+
// The overflow button is NOT included in itemSizeCache (measured separately
|
|
90
|
+
// via setOverflowTargetSize), so it won't be incorrectly hidden.
|
|
91
|
+
const itemsWithOverflowButton = react_1.default.useMemo(() => {
|
|
92
|
+
var _a;
|
|
93
|
+
if ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) {
|
|
94
|
+
return [...config.items, overflowItemRef.current];
|
|
95
|
+
}
|
|
96
|
+
return config.items;
|
|
97
|
+
}, [config.items]);
|
|
98
|
+
// Track whether the overflow button should be non-interactive based on previous
|
|
99
|
+
// render's hiddenIds. We use a ref because hiddenIds isn't available until after
|
|
100
|
+
// the model is created, but we need to pass nonInteractiveIds to the model config.
|
|
101
|
+
// On first render, assume non-interactive (no overflow calculated yet).
|
|
102
|
+
// On subsequent renders, use the previous hiddenIds.length to determine.
|
|
103
|
+
const prevHiddenIdsLengthRef = react_1.default.useRef(0);
|
|
104
|
+
const [, setNonInteractiveTick] = react_1.default.useState(0);
|
|
105
|
+
const overflowButtonNonInteractive = !!((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) && prevHiddenIdsLengthRef.current === 0;
|
|
106
|
+
// Compute nonInteractiveIds to pass to the model, including overflow button when appropriate
|
|
107
|
+
const nonInteractiveIdsForModel = react_1.default.useMemo(() => {
|
|
108
|
+
const baseIds = config.nonInteractiveIds || [];
|
|
109
|
+
if (overflowButtonNonInteractive) {
|
|
110
|
+
return [...baseIds, exports.TABS_OVERFLOW_BUTTON_ID];
|
|
111
|
+
}
|
|
112
|
+
return baseIds;
|
|
113
|
+
}, [config.nonInteractiveIds, overflowButtonNonInteractive]);
|
|
114
|
+
// Stores the ID of a tab that should receive focus after the menu closes.
|
|
115
|
+
// This is used when selecting a tab from the overflow menu - we want focus
|
|
116
|
+
// to go to the newly selected tab, not back to the overflow button.
|
|
117
|
+
const pendingFocusTabIdRef = react_1.default.useRef(null);
|
|
118
|
+
const pendingFocusRafOuterRef = react_1.default.useRef(0);
|
|
119
|
+
const pendingFocusRafInnerRef = react_1.default.useRef(0);
|
|
120
|
+
react_1.default.useLayoutEffect(() => {
|
|
121
|
+
return () => {
|
|
122
|
+
cancelAnimationFrame(pendingFocusRafOuterRef.current);
|
|
123
|
+
cancelAnimationFrame(pendingFocusRafInnerRef.current);
|
|
124
|
+
};
|
|
125
|
+
}, []);
|
|
62
126
|
const model = (0, collection_1.useOverflowListModel)(collection_1.useOverflowListModel.mergeConfig(config, {
|
|
127
|
+
items: itemsWithOverflowButton,
|
|
128
|
+
getId,
|
|
129
|
+
nonInteractiveIds: nonInteractiveIdsForModel,
|
|
63
130
|
shouldCalculateOverflow: modality !== 'touch',
|
|
64
131
|
orientation: config.orientation || 'horizontal',
|
|
65
132
|
onRegisterItem(data) {
|
|
@@ -70,11 +137,64 @@ exports.useTabsModel = (0, common_1.createModelHook)({
|
|
|
70
137
|
},
|
|
71
138
|
initialSelectedIds: config.initialTab
|
|
72
139
|
? [config.initialTab]
|
|
73
|
-
: ((
|
|
140
|
+
: ((_b = config.items) === null || _b === void 0 ? void 0 : _b.length)
|
|
74
141
|
? [getId(config.items[0])]
|
|
75
142
|
: [],
|
|
76
143
|
shouldVirtualize: false,
|
|
77
144
|
}));
|
|
145
|
+
// Update the ref after each render so the next render knows the current hiddenIds.length.
|
|
146
|
+
// If hiddenIds.length changed (e.g. overflow just calculated), force a re-render so
|
|
147
|
+
// we pass the correct nonInteractiveIds and the overflow button is not stuck disabled.
|
|
148
|
+
react_1.default.useLayoutEffect(() => {
|
|
149
|
+
const nextLen = model.state.hiddenIds.length;
|
|
150
|
+
if (prevHiddenIdsLengthRef.current !== nextLen) {
|
|
151
|
+
prevHiddenIdsLengthRef.current = nextLen;
|
|
152
|
+
setNonInteractiveTick(t => t + 1);
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
prevHiddenIdsLengthRef.current = nextLen;
|
|
156
|
+
}
|
|
157
|
+
}, [model.state.hiddenIds.length]);
|
|
158
|
+
// When the cursor is on an item that isn't in the DOM, move it to a visible one so the
|
|
159
|
+
// roving tabindex lands on a focusable element. This covers: (1) cursor on a hidden tab when
|
|
160
|
+
// only "More" is visible, and (2) cursor on the overflow button when we widen and it unmounts.
|
|
161
|
+
react_1.default.useLayoutEffect(() => {
|
|
162
|
+
var _a;
|
|
163
|
+
const { cursorId, hiddenIds, items } = model.state;
|
|
164
|
+
if (!cursorId) {
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
const currentCursorId = typeof cursorId === 'string' ? cursorId : ((_a = cursorId.slice(-1)[0]) !== null && _a !== void 0 ? _a : '');
|
|
168
|
+
const cursorOnHidden = currentCursorId ? hiddenIds.includes(currentCursorId) : false;
|
|
169
|
+
const cursorOnOverflowWhenNoOverflow = currentCursorId === exports.TABS_OVERFLOW_BUTTON_ID && hiddenIds.length === 0;
|
|
170
|
+
if (cursorOnHidden) {
|
|
171
|
+
// Move to first visible item (including overflow button when it's the only one visible)
|
|
172
|
+
const firstVisible = items.find(item => !hiddenIds.includes(item.id));
|
|
173
|
+
if (firstVisible) {
|
|
174
|
+
model.events.goTo({ id: firstVisible.id });
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
else if (cursorOnOverflowWhenNoOverflow) {
|
|
178
|
+
// Overflow button unmounted; move to selected tab or first tab (not the overflow button)
|
|
179
|
+
const selectedIds = model.state.selectedIds;
|
|
180
|
+
const selectedId = selectedIds !== 'all' && Array.isArray(selectedIds) && selectedIds.length
|
|
181
|
+
? selectedIds[0]
|
|
182
|
+
: undefined;
|
|
183
|
+
const firstVisibleTab = items.find(item => item.id !== exports.TABS_OVERFLOW_BUTTON_ID && !hiddenIds.includes(item.id));
|
|
184
|
+
const targetId = selectedId && !hiddenIds.includes(selectedId) ? selectedId : firstVisibleTab === null || firstVisibleTab === void 0 ? void 0 : firstVisibleTab.id;
|
|
185
|
+
if (targetId) {
|
|
186
|
+
model.events.goTo({ id: targetId });
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
// Use field-level deps instead of `model.state` so this does not re-run on every model update.
|
|
190
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
191
|
+
}, [
|
|
192
|
+
model.state.cursorId,
|
|
193
|
+
model.state.hiddenIds,
|
|
194
|
+
model.state.items,
|
|
195
|
+
model.state.selectedIds,
|
|
196
|
+
model.events,
|
|
197
|
+
]);
|
|
78
198
|
const panels = (0, collection_1.useListModel)();
|
|
79
199
|
const state = {
|
|
80
200
|
...model.state,
|
|
@@ -111,8 +231,27 @@ exports.useTabsModel = (0, common_1.createModelHook)({
|
|
|
111
231
|
items: overflowItems,
|
|
112
232
|
nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
|
|
113
233
|
onSelect(data) {
|
|
114
|
-
menu
|
|
234
|
+
// Store the tab ID to focus after the menu closes and React re-renders
|
|
235
|
+
pendingFocusTabIdRef.current = data.id;
|
|
236
|
+
// Update state: select the tab, move cursor, then close menu
|
|
115
237
|
events.select(data);
|
|
238
|
+
model.events.goTo({ id: data.id });
|
|
239
|
+
menu.events.hide();
|
|
240
|
+
// Focus the selected tab AFTER React has re-rendered.
|
|
241
|
+
// Double rAF is required because useReturnFocus restores focus to the overflow
|
|
242
|
+
// button on a single rAF after hide; the second frame runs after that restore.
|
|
243
|
+
pendingFocusRafOuterRef.current = requestAnimationFrame(() => {
|
|
244
|
+
pendingFocusRafInnerRef.current = requestAnimationFrame(() => {
|
|
245
|
+
const tabId = pendingFocusTabIdRef.current;
|
|
246
|
+
if (tabId) {
|
|
247
|
+
const tabElement = document.querySelector(`[data-focus-id="${(0, common_1.slugify)(`${model.state.id}-${tabId}`)}"]`);
|
|
248
|
+
if (tabElement) {
|
|
249
|
+
tabElement.focus();
|
|
250
|
+
}
|
|
251
|
+
pendingFocusTabIdRef.current = null;
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
});
|
|
116
255
|
},
|
|
117
256
|
onShow() {
|
|
118
257
|
// Always select the first item when the menu is opened
|
|
@@ -16,7 +16,7 @@ export const colorPickerStencil = createStencil({
|
|
|
16
16
|
hexInput: 'color-picker-hex-input',
|
|
17
17
|
inputWrapper: 'color-picker-input-wrapper',
|
|
18
18
|
},
|
|
19
|
-
base: { name: "
|
|
19
|
+
base: { name: "3dv8y5", styles: "box-sizing:border-box;width:13.5rem;[data-part=\"color-picker-form\"]{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-block-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));}[data-part=\"color-picker-input-wrapper\"]{display:flex;flex-direction:column;margin:0;}[data-part=\"color-picker-button\"]{align-self:flex-end;}[data-part=\"color-picker-hex-input\"]{width:10.5rem;}" }
|
|
20
20
|
}, "color-picker-a530b2");
|
|
21
21
|
const isCustomColor = (colors, hexCode) => {
|
|
22
22
|
if (!hexCode) {
|
|
@@ -8,7 +8,7 @@ export const resetButtonStencil = createStencil({
|
|
|
8
8
|
parts: {
|
|
9
9
|
label: 'reset-button-label',
|
|
10
10
|
},
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "3mnrk6", styles: "box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:calc(100% + var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));margin:calc(var(--cnvs-base-size-100, 0.5rem) * -1) calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) * -1) var(--cnvs-base-size-100, 0.5rem);padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));white-space:nowrap;border:none;outline:none;background:none;cursor:pointer;transition:color 120ms ease, background-color 120ms ease;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}&:active, &.active{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}[data-part=\"reset-button-label\"]{margin-inline-start:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}" }
|
|
12
12
|
}, "reset-button-531e85");
|
|
13
13
|
export const ResetButton = ({ onClick, resetColor, label }) => {
|
|
14
14
|
const handleResetColor = () => onClick(resetColor);
|
|
@@ -10,7 +10,7 @@ const colorPickerSwatchBookStencil = createStencil({
|
|
|
10
10
|
parts: {
|
|
11
11
|
tile: 'color-picker-swatch-book-tile',
|
|
12
12
|
},
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "c0snn", styles: "--shadow-color-picker-swatch-book-915ea6:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))) 0 0 0 0.125rem, var(--cnvs-sys-color-border-input-default) 0 0 0 0.1875rem;box-sizing:border-box;display:flex;flex-wrap:wrap;margin:0 calc(var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) * -1) calc(var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) * -1) 0;[data-part=\"color-picker-swatch-book-tile\"]{display:flex;width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));cursor:pointer;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));transition:box-shadow 120ms ease;margin:0px var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) 0px;&:hover{box-shadow:var(--shadow-color-picker-swatch-book-915ea6);}&:focus-visible{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&[aria-selected=\"true\"]{box-shadow:var(--shadow-color-picker-swatch-book-915ea6);&:focus-visible{animation:none;box-shadow:none;}&:hover{box-shadow:var(--shadow-color-picker-swatch-book-915ea6);}}}" }
|
|
14
14
|
}, "color-picker-swatch-book-915ea6");
|
|
15
15
|
export const SwatchBook = ({ colors, value, onSelect }) => {
|
|
16
16
|
return (_jsx("div", { ...colorPickerSwatchBookStencil(), children: colors.map((color, index) => {
|
|
@@ -6,7 +6,7 @@ export const dividerStencil = createStencil({
|
|
|
6
6
|
vars: {
|
|
7
7
|
space: '',
|
|
8
8
|
},
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "206hev", styles: "box-sizing:border-box;border:none;" },
|
|
10
10
|
modifiers: {
|
|
11
11
|
/**
|
|
12
12
|
* Sets the orientation of the `Divider`.
|
|
@@ -18,8 +18,8 @@ export const dividerStencil = createStencil({
|
|
|
18
18
|
* @default 'horizontal'
|
|
19
19
|
*/
|
|
20
20
|
orientation: {
|
|
21
|
-
horizontal: { name: "
|
|
22
|
-
vertical: { name: "
|
|
21
|
+
horizontal: { name: "3am6l1", styles: "display:block;height:0.0625rem;border-block-start:1px solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));margin:calc(var(--space-divider-a2c50d, var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))) / 2) 0;" },
|
|
22
|
+
vertical: { name: "329qj7", styles: "display:inline-block;align-self:stretch;width:0.0625rem;height:auto;border-inline-start:1px solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));margin:0 calc(var(--space-divider-a2c50d, var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))) / 2);" }
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
}, "divider-a2c50d");
|
|
@@ -11,7 +11,7 @@ const ANIMATION_DURATION_MS = 1230;
|
|
|
11
11
|
/**
|
|
12
12
|
* The animation for the sparkle.
|
|
13
13
|
*/
|
|
14
|
-
const LOADING_ANIMATION = keyframes({ name: "
|
|
14
|
+
const LOADING_ANIMATION = keyframes({ name: "1a9tze", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
|
|
15
15
|
/**
|
|
16
16
|
* An individual loading sparkle. ✨
|
|
17
17
|
*/
|
|
@@ -19,7 +19,7 @@ const Sparkle = () => {
|
|
|
19
19
|
return _jsx(SystemIcon, { "data-part": "sparkle", icon: sparkleIcon, size: px2rem(12) });
|
|
20
20
|
};
|
|
21
21
|
export const loadingSparklesStencil = createStencil({
|
|
22
|
-
base: { name: "
|
|
22
|
+
base: { name: "2c2wk1", styles: "box-sizing:border-box;display:inline-flex;gap:0.0625rem;& [data-part=\"sparkle\"]{animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-1a9tze;animation-timing-function:ease-in-out;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-ai);&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}}" }
|
|
23
23
|
}, "loading-sparkles-9c48ef");
|
|
24
24
|
/**
|
|
25
25
|
* A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
|
|
@@ -11,11 +11,11 @@ import { MultiSelectedList } from './MultiSelectedList';
|
|
|
11
11
|
import { useMultiSelectModel } from './useMultiSelectModel';
|
|
12
12
|
export const multiSelectInputStencil = createStencil({
|
|
13
13
|
extends: cornerShapeStencil,
|
|
14
|
-
base: { name: "
|
|
14
|
+
base: { name: "3plk8f", styles: "box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-7c8776:100%;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}& [data-part=\"user-input\"]{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);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:2.375rem;}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled) :where([data-part=\"user-input\"]){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled) :where([data-part=\"form-input\"]){opacity:0;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));height:1px;margin:0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));flex-wrap:wrap;}" },
|
|
15
15
|
modifiers: {
|
|
16
16
|
error: {
|
|
17
|
-
error: { name: "
|
|
18
|
-
caution: { name: "
|
|
17
|
+
error: { name: "34qw2o", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))), 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}" },
|
|
18
|
+
caution: { name: "3pr3lz", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:hover, &.hover{border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;" }
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
}, "multi-select-input-5cacc4");
|
|
@@ -11,11 +11,11 @@ import { useRadioModel } from './hooks/useRadioModel';
|
|
|
11
11
|
*/
|
|
12
12
|
const radioGroupStencil = createStencil({
|
|
13
13
|
extends: cornerShapeStencil,
|
|
14
|
-
base: { name: "
|
|
14
|
+
base: { name: "ete78", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));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));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
|
|
15
15
|
modifiers: {
|
|
16
16
|
error: {
|
|
17
|
-
error: { name: "
|
|
18
|
-
caution: { name: "
|
|
17
|
+
error: { name: "3jykn4", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
|
|
18
|
+
caution: { name: "2mh79p", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
}, "radio-group-6fa928");
|
|
@@ -8,7 +8,7 @@ import { RadioInput } from './RadioInput';
|
|
|
8
8
|
import { RadioText } from './RadioText';
|
|
9
9
|
import { useRadioModel } from './hooks/useRadioModel';
|
|
10
10
|
const radioLabelStencil = createStencil({
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "auif4", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));position:relative;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
|
|
12
12
|
}, "radio-label-0ab968");
|
|
13
13
|
export const RadioLabelContext = React.createContext({});
|
|
14
14
|
export const RadioLabel = createSubcomponent('label')({
|
|
@@ -9,13 +9,13 @@ import { RadioLabelContext } from './RadioLabel';
|
|
|
9
9
|
import { useRadioModel } from './hooks/useRadioModel';
|
|
10
10
|
const radioTextStencil = createStencil({
|
|
11
11
|
extends: textStencil,
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "2kf02k", styles: "box-sizing:border-box;cursor:pointer;" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
variant: {
|
|
15
|
-
inverse: { name: "
|
|
15
|
+
inverse: { name: "3vewbv", styles: "color:var(--cnvs-sys-color-fg-inverse);" }
|
|
16
16
|
},
|
|
17
17
|
disabled: {
|
|
18
|
-
true: { name: "
|
|
18
|
+
true: { name: "4fiism", styles: "cursor:default;opacity:var(--cnvs-sys-opacity-disabled);" }
|
|
19
19
|
}
|
|
20
20
|
},
|
|
21
21
|
defaultModifiers: {
|
|
@@ -9,10 +9,10 @@ export const radioInputStencil = createStencil({
|
|
|
9
9
|
parts: {
|
|
10
10
|
check: 'cnvs-radio-check',
|
|
11
11
|
},
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "26yjs8", styles: "box-sizing:border-box;cursor:pointer;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));position:absolute;margin:0;opacity:var(--cnvs-sys-opacity-zero);&:focus-visible, &.focus, &:active{outline:0.0625rem solid transparent;}&:disabled, &.disabled{cursor:auto;&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-default);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{outline:transparent;border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;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))) ,0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
variant: {
|
|
15
|
-
inverse: { name: "
|
|
15
|
+
inverse: { name: "27r2l2", styles: "+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}}&:hover + [data-part=\"cnvs-radio-check\"], &.hover + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"], &.focus:hover + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:focus-visible:checked + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover:checked + [data-part=\"cnvs-radio-check\"], &.focus:checked + [data-part=\"cnvs-radio-check\"], &.focus:hover:checked + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}" }
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
}, "radio-input-374248");
|
|
@@ -23,13 +23,13 @@ const StyledRadioInput = createComponent('input')({
|
|
|
23
23
|
},
|
|
24
24
|
});
|
|
25
25
|
export const radioInputWrapperStencil = createStencil({
|
|
26
|
-
base: { name: "
|
|
26
|
+
base: { name: "4f1cuz", styles: "box-sizing:border-box;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));flex:0 0 auto;align-items:center;justify-content:center;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));transition:box-shadow 150ms ease-out;width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 0.25rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}" },
|
|
27
27
|
modifiers: {
|
|
28
28
|
variant: {
|
|
29
|
-
inverse: { name: "
|
|
29
|
+
inverse: { name: "5wvgw", styles: "&:hover:before, &.hover:before{box-shadow:0 0 0 0.25rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}" }
|
|
30
30
|
},
|
|
31
31
|
disabled: {
|
|
32
|
-
true: { name: "
|
|
32
|
+
true: { name: "176xsb", styles: "opacity:var(--cnvs-sys-opacity-disabled);&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
}, "radio-input-wrapper-16420d");
|
|
@@ -13,19 +13,19 @@ export const panelStencil = createStencil({
|
|
|
13
13
|
expandedWidth: '',
|
|
14
14
|
collapsedWidth: '',
|
|
15
15
|
},
|
|
16
|
-
base: { name: "
|
|
16
|
+
base: { name: "1bgjbm", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
|
|
17
17
|
modifiers: {
|
|
18
18
|
variant: {
|
|
19
|
-
alternate: { name: "
|
|
20
|
-
standard: { name: "
|
|
19
|
+
alternate: { name: "2xi42p", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
|
|
20
|
+
standard: { name: "33ncz3", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
|
|
21
21
|
},
|
|
22
22
|
expanded: {
|
|
23
|
-
true: { name: "
|
|
24
|
-
false: { name: "
|
|
23
|
+
true: { name: "yh8ls", styles: "width:var(--expandedWidth-panel-cea5fb);max-width:var(--expandedWidth-panel-cea5fb);" },
|
|
24
|
+
false: { name: "1yd8ds", styles: "width:var(--collapsedWidth-panel-cea5fb);max-width:var(--collapsedWidth-panel-cea5fb);" }
|
|
25
25
|
},
|
|
26
26
|
touched: {
|
|
27
|
-
true: { name: "
|
|
28
|
-
false: { name: "
|
|
27
|
+
true: { name: "1oo00u", styles: "" },
|
|
28
|
+
false: { name: "ao5tu", styles: "animation:none;" }
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
}, "panel-cea5fb");
|
|
@@ -8,35 +8,35 @@ import { extendIcon } from '@workday/canvas-system-icons-web';
|
|
|
8
8
|
import { system } from '@workday/canvas-tokens-web';
|
|
9
9
|
import { SidePanelContext } from './hooks';
|
|
10
10
|
export const sidePanelToggleButtonStencil = createStencil({
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "71cg1", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));inset-inline-end:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
state: {
|
|
14
|
-
collapsing: { name: "
|
|
15
|
-
collapsed: { name: "
|
|
16
|
-
expanded: { name: "
|
|
17
|
-
expanding: { name: "
|
|
14
|
+
collapsing: { name: "4a3pb3", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
15
|
+
collapsed: { name: "3gxgc0", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
16
|
+
expanded: { name: "1z15ms", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
|
|
17
|
+
expanding: { name: "42rk5", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
18
18
|
},
|
|
19
19
|
origin: {
|
|
20
|
-
left: { name: "
|
|
21
|
-
right: { name: "
|
|
20
|
+
left: { name: "plu0e", styles: "" },
|
|
21
|
+
right: { name: "zjo94", styles: "" }
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
compound: [
|
|
25
25
|
{
|
|
26
26
|
modifiers: { state: 'collapsed', origin: 'right' },
|
|
27
|
-
styles: { name: "
|
|
27
|
+
styles: { name: "2k40o8", styles: "transform:scaleX(-1);" }
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
modifiers: { state: 'collapsing', origin: 'right' },
|
|
31
|
-
styles: { name: "
|
|
31
|
+
styles: { name: "37ooer", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
modifiers: { state: 'expanded', origin: 'right' },
|
|
35
|
-
styles: { name: "
|
|
35
|
+
styles: { name: "471k83", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
38
|
modifiers: { state: 'expanding', origin: 'right' },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "41qrgb", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "side-panel-toggle-button-eaff77");
|
|
@@ -16,7 +16,7 @@ const deprecatedVariantsMap = {
|
|
|
16
16
|
};
|
|
17
17
|
const statusIndicatorStencil = createStencil({
|
|
18
18
|
extends: cornerShapeStencil,
|
|
19
|
-
base: { name: "
|
|
19
|
+
base: { name: "g7vvu", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:12.5rem;align-items:center;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));outline:0.0625rem solid transparent;--color-system-icon-c9acc3:currentColor;" },
|
|
20
20
|
modifiers: {
|
|
21
21
|
/**
|
|
22
22
|
* Defines the color of the `StatusIndicator`.
|
|
@@ -31,12 +31,12 @@ const statusIndicatorStencil = createStencil({
|
|
|
31
31
|
* @default 'neutral'
|
|
32
32
|
*/
|
|
33
33
|
variant: {
|
|
34
|
-
info: { name: "
|
|
35
|
-
positive: { name: "
|
|
36
|
-
caution: { name: "
|
|
37
|
-
critical: { name: "
|
|
38
|
-
neutral: { name: "
|
|
39
|
-
transparent: { name: "
|
|
34
|
+
info: { name: "35rwea", styles: "color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));" },
|
|
35
|
+
positive: { name: "1chrtx", styles: "color:var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1));background-color:var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15));" },
|
|
36
|
+
caution: { name: "1xo05c", styles: "color:var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1));background-color:var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)));" },
|
|
37
|
+
critical: { name: "2mx17l", styles: "color:var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)));background-color:var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1));" },
|
|
38
|
+
neutral: { name: "3owldl", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));" },
|
|
39
|
+
transparent: { name: "3g1ep6", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));" }
|
|
40
40
|
},
|
|
41
41
|
/**
|
|
42
42
|
* Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
|
|
@@ -49,8 +49,8 @@ const statusIndicatorStencil = createStencil({
|
|
|
49
49
|
*
|
|
50
50
|
*/
|
|
51
51
|
emphasis: {
|
|
52
|
-
low: { name: "
|
|
53
|
-
high: { name: "
|
|
52
|
+
low: { name: "frx6s", styles: "" },
|
|
53
|
+
high: { name: "4ghq0", styles: "" }
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
56
|
compound: [
|
|
@@ -59,35 +59,35 @@ const statusIndicatorStencil = createStencil({
|
|
|
59
59
|
variant: 'info',
|
|
60
60
|
emphasis: 'high',
|
|
61
61
|
},
|
|
62
|
-
styles: { name: "
|
|
62
|
+
styles: { name: "56jiq", styles: "background-color:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
modifiers: {
|
|
66
66
|
variant: 'positive',
|
|
67
67
|
emphasis: 'high',
|
|
68
68
|
},
|
|
69
|
-
styles: { name: "
|
|
69
|
+
styles: { name: "1a6ex5", styles: "background-color:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
modifiers: {
|
|
73
73
|
variant: 'caution',
|
|
74
74
|
emphasis: 'high',
|
|
75
75
|
},
|
|
76
|
-
styles: { name: "
|
|
76
|
+
styles: { name: "p671e", styles: "background-color:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);" }
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
modifiers: {
|
|
80
80
|
variant: 'critical',
|
|
81
81
|
emphasis: 'high',
|
|
82
82
|
},
|
|
83
|
-
styles: { name: "
|
|
83
|
+
styles: { name: "3j2xqr", styles: "background-color:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
86
|
modifiers: {
|
|
87
87
|
variant: 'neutral',
|
|
88
88
|
emphasis: 'high',
|
|
89
89
|
},
|
|
90
|
-
styles: { name: "
|
|
90
|
+
styles: { name: "yepoq", styles: "background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
|
|
91
91
|
}
|
|
92
92
|
],
|
|
93
93
|
defaultModifiers: {
|
|
@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
|
|
|
6
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
7
|
export const statusIndicatorLabelStencil = createStencil({
|
|
8
8
|
extends: textStencil,
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "4262hk", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
|
|
10
10
|
defaultModifiers: { typeLevel: 'subtext.medium' }
|
|
11
11
|
}, "status-indicator-label-528f53");
|
|
12
12
|
export const StatusIndicatorLabel = createComponent('span')({
|
|
@@ -3,7 +3,7 @@ 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 switchBackgroundStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "263obu", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;border:0.0625rem solid transparent;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:0 0.0625rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));" }
|
|
7
7
|
}, "switch-background-fbb710");
|
|
8
8
|
export const SwitchBackground = createComponent('div')({
|
|
9
9
|
displayName: 'SwitchBackground',
|