@capra/core 1.14.0 → 1.14.2
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/index.cjs +46 -45
- package/dist/index.d.cts +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.mjs +46 -45
- package/dist/style.css +73 -71
- package/docs/core-alert--design.md +3 -3
- package/docs/core-autocompletefield--design.md +5 -5
- package/docs/core-badge--design.md +2 -2
- package/docs/core-breadcrumbs--design.md +1 -1
- package/docs/core-button--design.md +7 -7
- package/docs/core-buttonlink--design.md +1 -1
- package/docs/core-card--design.md +4 -4
- package/docs/core-checkbox--design.md +2 -2
- package/docs/core-collapse--design.md +2 -2
- package/docs/core-divider--design.md +1 -1
- package/docs/core-link--design.md +2 -2
- package/docs/core-selectfield--design.md +1 -1
- package/docs/core-textinput--usage.md +1 -1
- package/docs/core-togglebuttongroup--design.md +2 -2
- package/docs/foundation-page-templates--docs.md +15 -0
- package/docs/history-changelogs-capra-core--docs.md +14 -0
- package/docs/index.md +1 -0
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -581,8 +581,8 @@ const Card = Object.assign(CardRoot, {
|
|
|
581
581
|
//#endregion
|
|
582
582
|
//#region src/components/Badge/Badge.module.css
|
|
583
583
|
var Badge_module_default = {
|
|
584
|
-
"badge": "capra-Badge-module-
|
|
585
|
-
"base": "capra-Badge-module-
|
|
584
|
+
"badge": "capra-Badge-module-rSl34a-badge",
|
|
585
|
+
"base": "capra-Badge-module-rSl34a-base"
|
|
586
586
|
};
|
|
587
587
|
//#endregion
|
|
588
588
|
//#region src/components/Badge/Badge.tsx
|
|
@@ -2347,33 +2347,34 @@ const DatePickerField = DatePickerFieldWithRef;
|
|
|
2347
2347
|
//#endregion
|
|
2348
2348
|
//#region src/components/SelectField/SelectField.module.css
|
|
2349
2349
|
var SelectField_module_default = {
|
|
2350
|
-
"chevron": "capra-SelectField-module-
|
|
2351
|
-
"dropdownPanel": "capra-SelectField-module-
|
|
2352
|
-
"emptyState": "capra-SelectField-module-
|
|
2353
|
-
"errorIndicator": "capra-SelectField-module-
|
|
2354
|
-
"header": "capra-SelectField-module-
|
|
2355
|
-
"item": "capra-SelectField-module-
|
|
2356
|
-
"
|
|
2357
|
-
"
|
|
2358
|
-
"
|
|
2359
|
-
"
|
|
2360
|
-
"
|
|
2361
|
-
"
|
|
2362
|
-
"
|
|
2363
|
-
"
|
|
2364
|
-
"
|
|
2365
|
-
"
|
|
2366
|
-
"
|
|
2367
|
-
"
|
|
2368
|
-
"
|
|
2369
|
-
"
|
|
2370
|
-
"
|
|
2371
|
-
"
|
|
2372
|
-
"
|
|
2373
|
-
"
|
|
2374
|
-
"
|
|
2375
|
-
"
|
|
2376
|
-
"
|
|
2350
|
+
"chevron": "capra-SelectField-module-0VcKhq-chevron",
|
|
2351
|
+
"dropdownPanel": "capra-SelectField-module-0VcKhq-dropdownPanel",
|
|
2352
|
+
"emptyState": "capra-SelectField-module-0VcKhq-emptyState",
|
|
2353
|
+
"errorIndicator": "capra-SelectField-module-0VcKhq-errorIndicator",
|
|
2354
|
+
"header": "capra-SelectField-module-0VcKhq-header",
|
|
2355
|
+
"item": "capra-SelectField-module-0VcKhq-item",
|
|
2356
|
+
"itemBody": "capra-SelectField-module-0VcKhq-itemBody",
|
|
2357
|
+
"itemCheck": "capra-SelectField-module-0VcKhq-itemCheck",
|
|
2358
|
+
"itemContent": "capra-SelectField-module-0VcKhq-itemContent",
|
|
2359
|
+
"leadingSlot": "capra-SelectField-module-0VcKhq-leadingSlot",
|
|
2360
|
+
"listbox": "capra-SelectField-module-0VcKhq-listbox",
|
|
2361
|
+
"multipleOpenButton": "capra-SelectField-module-0VcKhq-multipleOpenButton",
|
|
2362
|
+
"multipleTrigger": "capra-SelectField-module-0VcKhq-multipleTrigger",
|
|
2363
|
+
"search": "capra-SelectField-module-0VcKhq-search",
|
|
2364
|
+
"section": "capra-SelectField-module-0VcKhq-section",
|
|
2365
|
+
"singleTrigger": "capra-SelectField-module-0VcKhq-singleTrigger",
|
|
2366
|
+
"tag": "capra-SelectField-module-0VcKhq-tag",
|
|
2367
|
+
"tagGroup": "capra-SelectField-module-0VcKhq-tagGroup",
|
|
2368
|
+
"tagIcon": "capra-SelectField-module-0VcKhq-tagIcon",
|
|
2369
|
+
"tagLabel": "capra-SelectField-module-0VcKhq-tagLabel",
|
|
2370
|
+
"tagList": "capra-SelectField-module-0VcKhq-tagList",
|
|
2371
|
+
"tagRemove": "capra-SelectField-module-0VcKhq-tagRemove",
|
|
2372
|
+
"trailingSlot": "capra-SelectField-module-0VcKhq-trailingSlot",
|
|
2373
|
+
"triggerShell": "capra-SelectField-module-0VcKhq-triggerShell",
|
|
2374
|
+
"value": "capra-SelectField-module-0VcKhq-value",
|
|
2375
|
+
"valueIcon": "capra-SelectField-module-0VcKhq-valueIcon",
|
|
2376
|
+
"valueText": "capra-SelectField-module-0VcKhq-valueText",
|
|
2377
|
+
"warningIndicator": "capra-SelectField-module-0VcKhq-warningIndicator"
|
|
2377
2378
|
};
|
|
2378
2379
|
//#endregion
|
|
2379
2380
|
//#region src/components/SelectField/SelectField.tsx
|
|
@@ -2529,11 +2530,11 @@ function SelectFieldItem(props) {
|
|
|
2529
2530
|
isDisabled,
|
|
2530
2531
|
className: SelectField_module_default.item,
|
|
2531
2532
|
"data-indent": indent || void 0
|
|
2532
|
-
}, ({ isSelected
|
|
2533
|
+
}, ({ isSelected }) => /* @__PURE__ */ react.createElement("div", { className: SelectField_module_default.itemContent }, /* @__PURE__ */ react.createElement("span", {
|
|
2533
2534
|
className: SelectField_module_default.itemCheck,
|
|
2534
2535
|
"data-selected": isSelected || void 0,
|
|
2535
2536
|
"aria-hidden": true
|
|
2536
|
-
}, isSelected ? /* @__PURE__ */ react.createElement(_capra_icons.CheckOutlined, { size: "sm" }) : null) :
|
|
2537
|
+
}, isSelected ? /* @__PURE__ */ react.createElement(_capra_icons.CheckOutlined, { size: "sm" }) : null), /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.itemBody }, typeof children === "string" ? /* @__PURE__ */ react.createElement(Text, { slot: "label" }, children) : children)));
|
|
2537
2538
|
}
|
|
2538
2539
|
function SelectFieldHeader(props) {
|
|
2539
2540
|
const { id, label = "Header", FORCE__className: classNameOverride, children } = props;
|
|
@@ -3402,20 +3403,20 @@ function createConfirmationModalOpener(appearance) {
|
|
|
3402
3403
|
//#endregion
|
|
3403
3404
|
//#region src/components/Drawer/Drawer.module.css
|
|
3404
3405
|
var Drawer_module_default = {
|
|
3405
|
-
"body": "capra-Drawer-module-
|
|
3406
|
-
"description": "capra-Drawer-module-
|
|
3407
|
-
"drawerInFromLeft": "capra-Drawer-module-
|
|
3408
|
-
"drawerInFromRight": "capra-Drawer-module-
|
|
3409
|
-
"drawerOutToLeft": "capra-Drawer-module-
|
|
3410
|
-
"drawerOutToRight": "capra-Drawer-module-
|
|
3411
|
-
"expandedTitleLayout": "capra-Drawer-module-
|
|
3412
|
-
"footer": "capra-Drawer-module-
|
|
3413
|
-
"header": "capra-Drawer-module-
|
|
3414
|
-
"headerMain": "capra-Drawer-module-
|
|
3415
|
-
"headerTrailing": "capra-Drawer-module-
|
|
3416
|
-
"overlay": "capra-Drawer-module-
|
|
3417
|
-
"root": "capra-Drawer-module-
|
|
3418
|
-
"sheet": "capra-Drawer-module-
|
|
3406
|
+
"body": "capra-Drawer-module-iRsXUG-body",
|
|
3407
|
+
"description": "capra-Drawer-module-iRsXUG-description",
|
|
3408
|
+
"drawerInFromLeft": "capra-Drawer-module-iRsXUG-drawerInFromLeft",
|
|
3409
|
+
"drawerInFromRight": "capra-Drawer-module-iRsXUG-drawerInFromRight",
|
|
3410
|
+
"drawerOutToLeft": "capra-Drawer-module-iRsXUG-drawerOutToLeft",
|
|
3411
|
+
"drawerOutToRight": "capra-Drawer-module-iRsXUG-drawerOutToRight",
|
|
3412
|
+
"expandedTitleLayout": "capra-Drawer-module-iRsXUG-expandedTitleLayout",
|
|
3413
|
+
"footer": "capra-Drawer-module-iRsXUG-footer",
|
|
3414
|
+
"header": "capra-Drawer-module-iRsXUG-header",
|
|
3415
|
+
"headerMain": "capra-Drawer-module-iRsXUG-headerMain",
|
|
3416
|
+
"headerTrailing": "capra-Drawer-module-iRsXUG-headerTrailing",
|
|
3417
|
+
"overlay": "capra-Drawer-module-iRsXUG-overlay",
|
|
3418
|
+
"root": "capra-Drawer-module-iRsXUG-root",
|
|
3419
|
+
"sheet": "capra-Drawer-module-iRsXUG-sheet"
|
|
3419
3420
|
};
|
|
3420
3421
|
//#endregion
|
|
3421
3422
|
//#region src/components/Drawer/useDrawerExitAnimation.ts
|
package/dist/index.d.cts
CHANGED
|
@@ -523,7 +523,7 @@ declare const RadioTile: (props: {
|
|
|
523
523
|
} & Omit<RadioProps, "aria-label" | "aria-labelledby"> & StylingOverrideProps & React$2.RefAttributes<HTMLInputElement>) => React$2.ReactElement;
|
|
524
524
|
//#endregion
|
|
525
525
|
//#region src/components/Switch/Switch.d.ts
|
|
526
|
-
type SwitchNativeProps = Omit<React$2.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'aria-labelledby' | 'className' | 'role' | 'size' | 'type'>;
|
|
526
|
+
type SwitchNativeProps = Omit<React$2.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'aria-labelledby' | 'children' | 'className' | 'role' | 'size' | 'type'>;
|
|
527
527
|
type SwitchProps = AccessibleLabelProps & SwitchNativeProps & {
|
|
528
528
|
size?: 'sm' | 'md';
|
|
529
529
|
} & StylingOverrideProps;
|
package/dist/index.d.mts
CHANGED
|
@@ -523,7 +523,7 @@ declare const RadioTile: (props: {
|
|
|
523
523
|
} & Omit<RadioProps, "aria-label" | "aria-labelledby"> & StylingOverrideProps & React$2.RefAttributes<HTMLInputElement>) => React$2.ReactElement;
|
|
524
524
|
//#endregion
|
|
525
525
|
//#region src/components/Switch/Switch.d.ts
|
|
526
|
-
type SwitchNativeProps = Omit<React$2.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'aria-labelledby' | 'className' | 'role' | 'size' | 'type'>;
|
|
526
|
+
type SwitchNativeProps = Omit<React$2.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'aria-labelledby' | 'children' | 'className' | 'role' | 'size' | 'type'>;
|
|
527
527
|
type SwitchProps = AccessibleLabelProps & SwitchNativeProps & {
|
|
528
528
|
size?: 'sm' | 'md';
|
|
529
529
|
} & StylingOverrideProps;
|
package/dist/index.mjs
CHANGED
|
@@ -558,8 +558,8 @@ const Card = Object.assign(CardRoot, {
|
|
|
558
558
|
//#endregion
|
|
559
559
|
//#region src/components/Badge/Badge.module.css
|
|
560
560
|
var Badge_module_default = {
|
|
561
|
-
"badge": "capra-Badge-module-
|
|
562
|
-
"base": "capra-Badge-module-
|
|
561
|
+
"badge": "capra-Badge-module-rSl34a-badge",
|
|
562
|
+
"base": "capra-Badge-module-rSl34a-base"
|
|
563
563
|
};
|
|
564
564
|
//#endregion
|
|
565
565
|
//#region src/components/Badge/Badge.tsx
|
|
@@ -2324,33 +2324,34 @@ const DatePickerField = DatePickerFieldWithRef;
|
|
|
2324
2324
|
//#endregion
|
|
2325
2325
|
//#region src/components/SelectField/SelectField.module.css
|
|
2326
2326
|
var SelectField_module_default = {
|
|
2327
|
-
"chevron": "capra-SelectField-module-
|
|
2328
|
-
"dropdownPanel": "capra-SelectField-module-
|
|
2329
|
-
"emptyState": "capra-SelectField-module-
|
|
2330
|
-
"errorIndicator": "capra-SelectField-module-
|
|
2331
|
-
"header": "capra-SelectField-module-
|
|
2332
|
-
"item": "capra-SelectField-module-
|
|
2333
|
-
"
|
|
2334
|
-
"
|
|
2335
|
-
"
|
|
2336
|
-
"
|
|
2337
|
-
"
|
|
2338
|
-
"
|
|
2339
|
-
"
|
|
2340
|
-
"
|
|
2341
|
-
"
|
|
2342
|
-
"
|
|
2343
|
-
"
|
|
2344
|
-
"
|
|
2345
|
-
"
|
|
2346
|
-
"
|
|
2347
|
-
"
|
|
2348
|
-
"
|
|
2349
|
-
"
|
|
2350
|
-
"
|
|
2351
|
-
"
|
|
2352
|
-
"
|
|
2353
|
-
"
|
|
2327
|
+
"chevron": "capra-SelectField-module-0VcKhq-chevron",
|
|
2328
|
+
"dropdownPanel": "capra-SelectField-module-0VcKhq-dropdownPanel",
|
|
2329
|
+
"emptyState": "capra-SelectField-module-0VcKhq-emptyState",
|
|
2330
|
+
"errorIndicator": "capra-SelectField-module-0VcKhq-errorIndicator",
|
|
2331
|
+
"header": "capra-SelectField-module-0VcKhq-header",
|
|
2332
|
+
"item": "capra-SelectField-module-0VcKhq-item",
|
|
2333
|
+
"itemBody": "capra-SelectField-module-0VcKhq-itemBody",
|
|
2334
|
+
"itemCheck": "capra-SelectField-module-0VcKhq-itemCheck",
|
|
2335
|
+
"itemContent": "capra-SelectField-module-0VcKhq-itemContent",
|
|
2336
|
+
"leadingSlot": "capra-SelectField-module-0VcKhq-leadingSlot",
|
|
2337
|
+
"listbox": "capra-SelectField-module-0VcKhq-listbox",
|
|
2338
|
+
"multipleOpenButton": "capra-SelectField-module-0VcKhq-multipleOpenButton",
|
|
2339
|
+
"multipleTrigger": "capra-SelectField-module-0VcKhq-multipleTrigger",
|
|
2340
|
+
"search": "capra-SelectField-module-0VcKhq-search",
|
|
2341
|
+
"section": "capra-SelectField-module-0VcKhq-section",
|
|
2342
|
+
"singleTrigger": "capra-SelectField-module-0VcKhq-singleTrigger",
|
|
2343
|
+
"tag": "capra-SelectField-module-0VcKhq-tag",
|
|
2344
|
+
"tagGroup": "capra-SelectField-module-0VcKhq-tagGroup",
|
|
2345
|
+
"tagIcon": "capra-SelectField-module-0VcKhq-tagIcon",
|
|
2346
|
+
"tagLabel": "capra-SelectField-module-0VcKhq-tagLabel",
|
|
2347
|
+
"tagList": "capra-SelectField-module-0VcKhq-tagList",
|
|
2348
|
+
"tagRemove": "capra-SelectField-module-0VcKhq-tagRemove",
|
|
2349
|
+
"trailingSlot": "capra-SelectField-module-0VcKhq-trailingSlot",
|
|
2350
|
+
"triggerShell": "capra-SelectField-module-0VcKhq-triggerShell",
|
|
2351
|
+
"value": "capra-SelectField-module-0VcKhq-value",
|
|
2352
|
+
"valueIcon": "capra-SelectField-module-0VcKhq-valueIcon",
|
|
2353
|
+
"valueText": "capra-SelectField-module-0VcKhq-valueText",
|
|
2354
|
+
"warningIndicator": "capra-SelectField-module-0VcKhq-warningIndicator"
|
|
2354
2355
|
};
|
|
2355
2356
|
//#endregion
|
|
2356
2357
|
//#region src/components/SelectField/SelectField.tsx
|
|
@@ -2506,11 +2507,11 @@ function SelectFieldItem(props) {
|
|
|
2506
2507
|
isDisabled,
|
|
2507
2508
|
className: SelectField_module_default.item,
|
|
2508
2509
|
"data-indent": indent || void 0
|
|
2509
|
-
}, ({ isSelected
|
|
2510
|
+
}, ({ isSelected }) => /* @__PURE__ */ React$1.createElement("div", { className: SelectField_module_default.itemContent }, /* @__PURE__ */ React$1.createElement("span", {
|
|
2510
2511
|
className: SelectField_module_default.itemCheck,
|
|
2511
2512
|
"data-selected": isSelected || void 0,
|
|
2512
2513
|
"aria-hidden": true
|
|
2513
|
-
}, isSelected ? /* @__PURE__ */ React$1.createElement(CheckOutlined, { size: "sm" }) : null) :
|
|
2514
|
+
}, isSelected ? /* @__PURE__ */ React$1.createElement(CheckOutlined, { size: "sm" }) : null), /* @__PURE__ */ React$1.createElement("span", { className: SelectField_module_default.itemBody }, typeof children === "string" ? /* @__PURE__ */ React$1.createElement(Text, { slot: "label" }, children) : children)));
|
|
2514
2515
|
}
|
|
2515
2516
|
function SelectFieldHeader(props) {
|
|
2516
2517
|
const { id, label = "Header", FORCE__className: classNameOverride, children } = props;
|
|
@@ -3379,20 +3380,20 @@ function createConfirmationModalOpener(appearance) {
|
|
|
3379
3380
|
//#endregion
|
|
3380
3381
|
//#region src/components/Drawer/Drawer.module.css
|
|
3381
3382
|
var Drawer_module_default = {
|
|
3382
|
-
"body": "capra-Drawer-module-
|
|
3383
|
-
"description": "capra-Drawer-module-
|
|
3384
|
-
"drawerInFromLeft": "capra-Drawer-module-
|
|
3385
|
-
"drawerInFromRight": "capra-Drawer-module-
|
|
3386
|
-
"drawerOutToLeft": "capra-Drawer-module-
|
|
3387
|
-
"drawerOutToRight": "capra-Drawer-module-
|
|
3388
|
-
"expandedTitleLayout": "capra-Drawer-module-
|
|
3389
|
-
"footer": "capra-Drawer-module-
|
|
3390
|
-
"header": "capra-Drawer-module-
|
|
3391
|
-
"headerMain": "capra-Drawer-module-
|
|
3392
|
-
"headerTrailing": "capra-Drawer-module-
|
|
3393
|
-
"overlay": "capra-Drawer-module-
|
|
3394
|
-
"root": "capra-Drawer-module-
|
|
3395
|
-
"sheet": "capra-Drawer-module-
|
|
3383
|
+
"body": "capra-Drawer-module-iRsXUG-body",
|
|
3384
|
+
"description": "capra-Drawer-module-iRsXUG-description",
|
|
3385
|
+
"drawerInFromLeft": "capra-Drawer-module-iRsXUG-drawerInFromLeft",
|
|
3386
|
+
"drawerInFromRight": "capra-Drawer-module-iRsXUG-drawerInFromRight",
|
|
3387
|
+
"drawerOutToLeft": "capra-Drawer-module-iRsXUG-drawerOutToLeft",
|
|
3388
|
+
"drawerOutToRight": "capra-Drawer-module-iRsXUG-drawerOutToRight",
|
|
3389
|
+
"expandedTitleLayout": "capra-Drawer-module-iRsXUG-expandedTitleLayout",
|
|
3390
|
+
"footer": "capra-Drawer-module-iRsXUG-footer",
|
|
3391
|
+
"header": "capra-Drawer-module-iRsXUG-header",
|
|
3392
|
+
"headerMain": "capra-Drawer-module-iRsXUG-headerMain",
|
|
3393
|
+
"headerTrailing": "capra-Drawer-module-iRsXUG-headerTrailing",
|
|
3394
|
+
"overlay": "capra-Drawer-module-iRsXUG-overlay",
|
|
3395
|
+
"root": "capra-Drawer-module-iRsXUG-root",
|
|
3396
|
+
"sheet": "capra-Drawer-module-iRsXUG-sheet"
|
|
3396
3397
|
};
|
|
3397
3398
|
//#endregion
|
|
3398
3399
|
//#region src/components/Drawer/useDrawerExitAnimation.ts
|
package/dist/style.css
CHANGED
|
@@ -628,9 +628,7 @@
|
|
|
628
628
|
align-items: center;
|
|
629
629
|
display: flex;
|
|
630
630
|
}
|
|
631
|
-
.capra-Badge-module-
|
|
632
|
-
border: var(--cds2-border-badge);
|
|
633
|
-
border-color: var(--cds2-color-background-application);
|
|
631
|
+
.capra-Badge-module-rSl34a-badge {
|
|
634
632
|
border-radius: var(--cds2-radius-full);
|
|
635
633
|
font: var(--cds2-typography-body-xs-semibold);
|
|
636
634
|
justify-content: center;
|
|
@@ -683,14 +681,14 @@
|
|
|
683
681
|
}
|
|
684
682
|
}
|
|
685
683
|
|
|
686
|
-
.capra-Badge-module-
|
|
684
|
+
.capra-Badge-module-rSl34a-base {
|
|
687
685
|
--_badge-offset-x: 0px;
|
|
688
686
|
--_badge-offset-y: 0px;
|
|
689
687
|
width: fit-content;
|
|
690
688
|
display: inline-block;
|
|
691
689
|
position: relative;
|
|
692
690
|
|
|
693
|
-
& .capra-Badge-module-
|
|
691
|
+
& .capra-Badge-module-rSl34a-badge {
|
|
694
692
|
top: var(--_badge-offset-y);
|
|
695
693
|
right: var(--_badge-offset-x);
|
|
696
694
|
position: absolute;
|
|
@@ -2021,7 +2019,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2021
2019
|
color: var(--cds2-color-foreground-danger-default);
|
|
2022
2020
|
margin-block-start: var(--cds2-spacing-xs);
|
|
2023
2021
|
}
|
|
2024
|
-
.capra-SelectField-module-
|
|
2022
|
+
.capra-SelectField-module-0VcKhq-triggerShell {
|
|
2025
2023
|
border: var(--cds2-border-default);
|
|
2026
2024
|
border-radius: var(--cds2-radius-md);
|
|
2027
2025
|
background-color: var(--cds2-temporary-input-background-primary);
|
|
@@ -2056,23 +2054,23 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2056
2054
|
color: var(--cds2-temporary-input-foreground-disabled);
|
|
2057
2055
|
cursor: not-allowed;
|
|
2058
2056
|
|
|
2059
|
-
& .capra-SelectField-module-
|
|
2057
|
+
& .capra-SelectField-module-0VcKhq-leadingSlot, & .capra-SelectField-module-0VcKhq-trailingSlot, & .capra-SelectField-module-0VcKhq-valueText, & .capra-SelectField-module-0VcKhq-tag {
|
|
2060
2058
|
color: var(--cds2-temporary-input-foreground-disabled);
|
|
2061
2059
|
}
|
|
2062
2060
|
}
|
|
2063
2061
|
}
|
|
2064
2062
|
|
|
2065
|
-
.capra-SelectField-module-
|
|
2063
|
+
.capra-SelectField-module-0VcKhq-singleTrigger {
|
|
2066
2064
|
&:focus-visible {
|
|
2067
2065
|
outline: var(--cds2-border-focus);
|
|
2068
2066
|
outline-offset: var(--cds2-spacing-xs);
|
|
2069
2067
|
}
|
|
2070
2068
|
}
|
|
2071
2069
|
|
|
2072
|
-
.capra-SelectField-module-
|
|
2070
|
+
.capra-SelectField-module-0VcKhq-multipleTrigger {
|
|
2073
2071
|
overflow: hidden;
|
|
2074
2072
|
|
|
2075
|
-
&:has(.capra-SelectField-module-
|
|
2073
|
+
&:has(.capra-SelectField-module-0VcKhq-multipleOpenButton:focus-visible) {
|
|
2076
2074
|
outline: var(--cds2-border-focus);
|
|
2077
2075
|
outline-offset: var(--cds2-spacing-xs);
|
|
2078
2076
|
}
|
|
@@ -2082,7 +2080,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2082
2080
|
}
|
|
2083
2081
|
}
|
|
2084
2082
|
|
|
2085
|
-
.capra-SelectField-module-
|
|
2083
|
+
.capra-SelectField-module-0VcKhq-multipleOpenButton {
|
|
2086
2084
|
color: inherit;
|
|
2087
2085
|
cursor: pointer;
|
|
2088
2086
|
background: none;
|
|
@@ -2102,7 +2100,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2102
2100
|
}
|
|
2103
2101
|
}
|
|
2104
2102
|
|
|
2105
|
-
.capra-SelectField-module-
|
|
2103
|
+
.capra-SelectField-module-0VcKhq-leadingSlot, .capra-SelectField-module-0VcKhq-trailingSlot {
|
|
2106
2104
|
align-items: center;
|
|
2107
2105
|
gap: var(--cds2-spacing-md);
|
|
2108
2106
|
color: var(--cds2-color-foreground-subtle);
|
|
@@ -2110,7 +2108,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2110
2108
|
display: inline-flex;
|
|
2111
2109
|
}
|
|
2112
2110
|
|
|
2113
|
-
.capra-SelectField-module-
|
|
2111
|
+
.capra-SelectField-module-0VcKhq-value {
|
|
2114
2112
|
align-items: center;
|
|
2115
2113
|
gap: var(--cds2-spacing-sm);
|
|
2116
2114
|
flex: auto;
|
|
@@ -2118,14 +2116,14 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2118
2116
|
display: flex;
|
|
2119
2117
|
}
|
|
2120
2118
|
|
|
2121
|
-
.capra-SelectField-module-
|
|
2119
|
+
.capra-SelectField-module-0VcKhq-valueIcon {
|
|
2122
2120
|
color: var(--cds2-color-foreground-subtle);
|
|
2123
2121
|
flex-shrink: 0;
|
|
2124
2122
|
align-items: center;
|
|
2125
2123
|
display: inline-flex;
|
|
2126
2124
|
}
|
|
2127
2125
|
|
|
2128
|
-
.capra-SelectField-module-
|
|
2126
|
+
.capra-SelectField-module-0VcKhq-valueText {
|
|
2129
2127
|
text-overflow: ellipsis;
|
|
2130
2128
|
white-space: nowrap;
|
|
2131
2129
|
min-width: 0;
|
|
@@ -2136,13 +2134,13 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2136
2134
|
}
|
|
2137
2135
|
}
|
|
2138
2136
|
|
|
2139
|
-
.capra-SelectField-module-
|
|
2137
|
+
.capra-SelectField-module-0VcKhq-tagGroup {
|
|
2140
2138
|
flex: auto;
|
|
2141
2139
|
min-width: 0;
|
|
2142
2140
|
display: flex;
|
|
2143
2141
|
}
|
|
2144
2142
|
|
|
2145
|
-
.capra-SelectField-module-
|
|
2143
|
+
.capra-SelectField-module-0VcKhq-tagList {
|
|
2146
2144
|
gap: var(--cds2-spacing-xs);
|
|
2147
2145
|
min-width: 0;
|
|
2148
2146
|
padding-block: var(--cds2-spacing-xs);
|
|
@@ -2160,7 +2158,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2160
2158
|
}
|
|
2161
2159
|
}
|
|
2162
2160
|
|
|
2163
|
-
.capra-SelectField-module-
|
|
2161
|
+
.capra-SelectField-module-0VcKhq-tag {
|
|
2164
2162
|
justify-content: space-between;
|
|
2165
2163
|
align-items: center;
|
|
2166
2164
|
gap: var(--cds2-spacing-sm);
|
|
@@ -2196,21 +2194,21 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2196
2194
|
}
|
|
2197
2195
|
}
|
|
2198
2196
|
|
|
2199
|
-
.capra-SelectField-module-
|
|
2197
|
+
.capra-SelectField-module-0VcKhq-tagIcon {
|
|
2200
2198
|
color: var(--cds2-color-foreground-subtle);
|
|
2201
2199
|
flex-shrink: 0;
|
|
2202
2200
|
align-items: center;
|
|
2203
2201
|
display: inline-flex;
|
|
2204
2202
|
}
|
|
2205
2203
|
|
|
2206
|
-
.capra-SelectField-module-
|
|
2204
|
+
.capra-SelectField-module-0VcKhq-tagLabel {
|
|
2207
2205
|
text-overflow: ellipsis;
|
|
2208
2206
|
white-space: nowrap;
|
|
2209
2207
|
min-width: 0;
|
|
2210
2208
|
overflow: hidden;
|
|
2211
2209
|
}
|
|
2212
2210
|
|
|
2213
|
-
.capra-SelectField-module-
|
|
2211
|
+
.capra-SelectField-module-0VcKhq-tagRemove {
|
|
2214
2212
|
width: var(--cds2-dimension-component-xs);
|
|
2215
2213
|
height: var(--cds2-dimension-component-xs);
|
|
2216
2214
|
border-radius: var(--cds2-radius-md);
|
|
@@ -2235,21 +2233,21 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2235
2233
|
}
|
|
2236
2234
|
}
|
|
2237
2235
|
|
|
2238
|
-
.capra-SelectField-module-
|
|
2236
|
+
.capra-SelectField-module-0VcKhq-chevron, .capra-SelectField-module-0VcKhq-warningIndicator, .capra-SelectField-module-0VcKhq-errorIndicator {
|
|
2239
2237
|
justify-content: center;
|
|
2240
2238
|
align-items: center;
|
|
2241
2239
|
display: inline-flex;
|
|
2242
2240
|
}
|
|
2243
2241
|
|
|
2244
|
-
.capra-SelectField-module-
|
|
2242
|
+
.capra-SelectField-module-0VcKhq-warningIndicator {
|
|
2245
2243
|
color: var(--cds2-color-foreground-warning-default);
|
|
2246
2244
|
}
|
|
2247
2245
|
|
|
2248
|
-
.capra-SelectField-module-
|
|
2246
|
+
.capra-SelectField-module-0VcKhq-errorIndicator {
|
|
2249
2247
|
color: var(--cds2-color-foreground-danger-default);
|
|
2250
2248
|
}
|
|
2251
2249
|
|
|
2252
|
-
.capra-SelectField-module-
|
|
2250
|
+
.capra-SelectField-module-0VcKhq-dropdownPanel {
|
|
2253
2251
|
gap: var(--cds2-spacing-sm);
|
|
2254
2252
|
padding: var(--cds2-spacing-sm);
|
|
2255
2253
|
border: var(--cds2-border-default);
|
|
@@ -2261,11 +2259,11 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2261
2259
|
display: flex;
|
|
2262
2260
|
}
|
|
2263
2261
|
|
|
2264
|
-
.capra-SelectField-module-
|
|
2262
|
+
.capra-SelectField-module-0VcKhq-search {
|
|
2265
2263
|
width: 100%;
|
|
2266
2264
|
}
|
|
2267
2265
|
|
|
2268
|
-
.capra-SelectField-module-
|
|
2266
|
+
.capra-SelectField-module-0VcKhq-listbox {
|
|
2269
2267
|
gap: var(--cds2-spacing-xs);
|
|
2270
2268
|
flex-direction: column;
|
|
2271
2269
|
max-height: 320px;
|
|
@@ -2273,17 +2271,17 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2273
2271
|
overflow-y: auto;
|
|
2274
2272
|
}
|
|
2275
2273
|
|
|
2276
|
-
.capra-SelectField-module-
|
|
2274
|
+
.capra-SelectField-module-0VcKhq-emptyState {
|
|
2277
2275
|
padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
|
|
2278
2276
|
color: var(--cds2-color-foreground-subtle);
|
|
2279
2277
|
font: var(--cds2-typography-body-md-normal);
|
|
2280
2278
|
}
|
|
2281
2279
|
|
|
2282
|
-
.capra-SelectField-module-
|
|
2280
|
+
.capra-SelectField-module-0VcKhq-section {
|
|
2283
2281
|
display: contents;
|
|
2284
2282
|
}
|
|
2285
2283
|
|
|
2286
|
-
.capra-SelectField-module-
|
|
2284
|
+
.capra-SelectField-module-0VcKhq-header {
|
|
2287
2285
|
box-sizing: border-box;
|
|
2288
2286
|
color: var(--cds2-color-foreground-default);
|
|
2289
2287
|
font: var(--cds2-typography-body-md-semibold);
|
|
@@ -2293,11 +2291,11 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2293
2291
|
display: flex;
|
|
2294
2292
|
}
|
|
2295
2293
|
|
|
2296
|
-
.capra-SelectField-module-
|
|
2294
|
+
.capra-SelectField-module-0VcKhq-dropdownPanel:focus-visible, .capra-SelectField-module-0VcKhq-listbox:focus-visible {
|
|
2297
2295
|
outline: none;
|
|
2298
2296
|
}
|
|
2299
2297
|
|
|
2300
|
-
.capra-SelectField-module-
|
|
2298
|
+
.capra-SelectField-module-0VcKhq-item {
|
|
2301
2299
|
border-radius: var(--cds2-radius-md);
|
|
2302
2300
|
outline: none;
|
|
2303
2301
|
|
|
@@ -2305,41 +2303,45 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2305
2303
|
outline: none;
|
|
2306
2304
|
}
|
|
2307
2305
|
|
|
2308
|
-
&[data-
|
|
2309
|
-
|
|
2306
|
+
&[data-selected="true"] {
|
|
2307
|
+
color: var(--cds2-color-foreground-default);
|
|
2308
|
+
background: none;
|
|
2310
2309
|
}
|
|
2311
2310
|
|
|
2312
|
-
&[data-focused="true"] {
|
|
2311
|
+
&[data-hovered="true"], &[data-focused="true"] {
|
|
2313
2312
|
background-color: var(--cds2-color-background-accent-hover);
|
|
2314
2313
|
}
|
|
2315
2314
|
|
|
2316
|
-
&[data-selected="true"] {
|
|
2317
|
-
background-color: var(--cds2-color-background-accent-selected);
|
|
2318
|
-
color: var(--cds2-color-foreground-default);
|
|
2319
|
-
}
|
|
2320
|
-
|
|
2321
2315
|
&[data-disabled="true"] {
|
|
2322
2316
|
background: var(--cds2-color-background-disabled);
|
|
2323
2317
|
color: var(--cds2-color-foreground-on-disabled);
|
|
2324
2318
|
}
|
|
2325
2319
|
}
|
|
2326
2320
|
|
|
2327
|
-
.capra-SelectField-module-
|
|
2321
|
+
.capra-SelectField-module-0VcKhq-itemContent {
|
|
2328
2322
|
align-items: center;
|
|
2329
2323
|
gap: var(--cds2-spacing-sm);
|
|
2330
|
-
padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
|
|
2324
|
+
padding: var(--cds2-spacing-sm) var(--cds2-spacing-md) var(--cds2-spacing-sm) var(--cds2-spacing-sm);
|
|
2331
2325
|
display: flex;
|
|
2332
2326
|
}
|
|
2333
2327
|
|
|
2334
|
-
.capra-SelectField-module-
|
|
2335
|
-
|
|
2336
|
-
|
|
2328
|
+
.capra-SelectField-module-0VcKhq-itemBody {
|
|
2329
|
+
align-items: center;
|
|
2330
|
+
gap: var(--cds2-spacing-md);
|
|
2331
|
+
min-width: 0;
|
|
2332
|
+
display: inline-flex;
|
|
2333
|
+
}
|
|
2334
|
+
|
|
2335
|
+
.capra-SelectField-module-0VcKhq-itemCheck {
|
|
2336
|
+
width: var(--cds2-dimension-icon-sm);
|
|
2337
|
+
min-width: var(--cds2-dimension-icon-sm);
|
|
2338
|
+
height: var(--cds2-dimension-icon-sm);
|
|
2337
2339
|
color: var(--cds2-color-foreground-default);
|
|
2338
2340
|
justify-content: center;
|
|
2339
2341
|
align-items: center;
|
|
2340
2342
|
display: inline-flex;
|
|
2341
2343
|
|
|
2342
|
-
.capra-SelectField-module-
|
|
2344
|
+
.capra-SelectField-module-0VcKhq-item[data-disabled="true"] & {
|
|
2343
2345
|
color: var(--cds2-color-foreground-on-disabled);
|
|
2344
2346
|
}
|
|
2345
2347
|
}
|
|
@@ -2773,14 +2775,14 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2773
2775
|
transform: translate(-50%) scale(1);
|
|
2774
2776
|
}
|
|
2775
2777
|
}
|
|
2776
|
-
.capra-Drawer-module-
|
|
2778
|
+
.capra-Drawer-module-iRsXUG-root {
|
|
2777
2779
|
z-index: 1000;
|
|
2778
2780
|
pointer-events: none;
|
|
2779
2781
|
position: fixed;
|
|
2780
2782
|
inset: 0;
|
|
2781
2783
|
}
|
|
2782
2784
|
|
|
2783
|
-
.capra-Drawer-module-
|
|
2785
|
+
.capra-Drawer-module-iRsXUG-overlay {
|
|
2784
2786
|
z-index: 0;
|
|
2785
2787
|
pointer-events: auto;
|
|
2786
2788
|
background-color: var(--cds2-color-background-scrim);
|
|
@@ -2788,7 +2790,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2788
2790
|
inset: 0;
|
|
2789
2791
|
}
|
|
2790
2792
|
|
|
2791
|
-
.capra-Drawer-module-
|
|
2793
|
+
.capra-Drawer-module-iRsXUG-sheet {
|
|
2792
2794
|
z-index: 1;
|
|
2793
2795
|
width: clamp(400px, var(--drawer-width, 480px), 80vw);
|
|
2794
2796
|
pointer-events: auto;
|
|
@@ -2801,48 +2803,48 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2801
2803
|
overflow: hidden;
|
|
2802
2804
|
}
|
|
2803
2805
|
|
|
2804
|
-
.capra-Drawer-module-
|
|
2806
|
+
.capra-Drawer-module-iRsXUG-sheet[data-placement="right"] {
|
|
2805
2807
|
box-shadow: var(--cds2-shadow-high-left);
|
|
2806
2808
|
top: 0;
|
|
2807
2809
|
bottom: 0;
|
|
2808
2810
|
right: 0;
|
|
2809
2811
|
}
|
|
2810
2812
|
|
|
2811
|
-
.capra-Drawer-module-
|
|
2813
|
+
.capra-Drawer-module-iRsXUG-sheet[data-placement="left"] {
|
|
2812
2814
|
box-shadow: var(--cds2-shadow-high-right);
|
|
2813
2815
|
top: 0;
|
|
2814
2816
|
bottom: 0;
|
|
2815
2817
|
left: 0;
|
|
2816
2818
|
}
|
|
2817
2819
|
|
|
2818
|
-
.capra-Drawer-module-
|
|
2819
|
-
animation: capra-Drawer-module-
|
|
2820
|
+
.capra-Drawer-module-iRsXUG-root[data-open="true"] .capra-Drawer-module-iRsXUG-sheet[data-placement="right"] {
|
|
2821
|
+
animation: capra-Drawer-module-iRsXUG-drawerInFromRight var(--cds2-motion-duration-medium-2) var(--cds2-motion-easing-standard);
|
|
2820
2822
|
}
|
|
2821
2823
|
|
|
2822
|
-
.capra-Drawer-module-
|
|
2823
|
-
animation: capra-Drawer-module-
|
|
2824
|
+
.capra-Drawer-module-iRsXUG-root[data-open="true"] .capra-Drawer-module-iRsXUG-sheet[data-placement="left"] {
|
|
2825
|
+
animation: capra-Drawer-module-iRsXUG-drawerInFromLeft var(--cds2-motion-duration-medium-2) var(--cds2-motion-easing-standard);
|
|
2824
2826
|
}
|
|
2825
2827
|
|
|
2826
|
-
.capra-Drawer-module-
|
|
2827
|
-
animation: capra-Drawer-module-
|
|
2828
|
+
.capra-Drawer-module-iRsXUG-root[data-open="false"] .capra-Drawer-module-iRsXUG-sheet[data-placement="right"] {
|
|
2829
|
+
animation: capra-Drawer-module-iRsXUG-drawerOutToRight var(--cds2-motion-duration-medium-2) var(--cds2-motion-easing-standard) forwards;
|
|
2828
2830
|
}
|
|
2829
2831
|
|
|
2830
|
-
.capra-Drawer-module-
|
|
2831
|
-
animation: capra-Drawer-module-
|
|
2832
|
+
.capra-Drawer-module-iRsXUG-root[data-open="false"] .capra-Drawer-module-iRsXUG-sheet[data-placement="left"] {
|
|
2833
|
+
animation: capra-Drawer-module-iRsXUG-drawerOutToLeft var(--cds2-motion-duration-medium-2) var(--cds2-motion-easing-standard) forwards;
|
|
2832
2834
|
}
|
|
2833
2835
|
|
|
2834
|
-
.capra-Drawer-module-
|
|
2836
|
+
.capra-Drawer-module-iRsXUG-header {
|
|
2835
2837
|
justify-content: space-between;
|
|
2836
2838
|
align-items: flex-start;
|
|
2837
2839
|
gap: var(--cds2-spacing-md);
|
|
2838
|
-
padding: var(--cds2-spacing-lg);
|
|
2840
|
+
padding: var(--cds2-spacing-md) var(--cds2-spacing-lg);
|
|
2839
2841
|
border-bottom: 1px solid var(--cds2-color-border-neutral-subtle);
|
|
2840
2842
|
background-color: var(--cds2-color-background-neutral-subtle);
|
|
2841
2843
|
flex-shrink: 0;
|
|
2842
2844
|
display: flex;
|
|
2843
2845
|
}
|
|
2844
2846
|
|
|
2845
|
-
.capra-Drawer-module-
|
|
2847
|
+
.capra-Drawer-module-iRsXUG-headerMain {
|
|
2846
2848
|
gap: var(--cds2-spacing-xs);
|
|
2847
2849
|
flex-direction: column;
|
|
2848
2850
|
flex: 1;
|
|
@@ -2850,7 +2852,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2850
2852
|
display: flex;
|
|
2851
2853
|
}
|
|
2852
2854
|
|
|
2853
|
-
.capra-Drawer-module-
|
|
2855
|
+
.capra-Drawer-module-iRsXUG-expandedTitleLayout {
|
|
2854
2856
|
align-items: center;
|
|
2855
2857
|
gap: var(--cds2-spacing-md);
|
|
2856
2858
|
flex-direction: row;
|
|
@@ -2858,20 +2860,20 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2858
2860
|
display: flex;
|
|
2859
2861
|
}
|
|
2860
2862
|
|
|
2861
|
-
.capra-Drawer-module-
|
|
2863
|
+
.capra-Drawer-module-iRsXUG-description {
|
|
2862
2864
|
font: var(--cds2-typography-body-md-normal);
|
|
2863
2865
|
color: var(--cds2-color-foreground-neutral-default);
|
|
2864
2866
|
margin: 0;
|
|
2865
2867
|
}
|
|
2866
2868
|
|
|
2867
|
-
.capra-Drawer-module-
|
|
2869
|
+
.capra-Drawer-module-iRsXUG-headerTrailing {
|
|
2868
2870
|
align-items: center;
|
|
2869
2871
|
gap: var(--cds2-spacing-md);
|
|
2870
2872
|
flex-shrink: 0;
|
|
2871
2873
|
display: flex;
|
|
2872
2874
|
}
|
|
2873
2875
|
|
|
2874
|
-
.capra-Drawer-module-
|
|
2876
|
+
.capra-Drawer-module-iRsXUG-body {
|
|
2875
2877
|
min-width: 0;
|
|
2876
2878
|
min-height: 0;
|
|
2877
2879
|
padding: var(--cds2-spacing-lg);
|
|
@@ -2881,7 +2883,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2881
2883
|
overflow: hidden auto;
|
|
2882
2884
|
}
|
|
2883
2885
|
|
|
2884
|
-
.capra-Drawer-module-
|
|
2886
|
+
.capra-Drawer-module-iRsXUG-footer {
|
|
2885
2887
|
justify-content: flex-end;
|
|
2886
2888
|
align-items: center;
|
|
2887
2889
|
gap: var(--cds2-spacing-md);
|
|
@@ -2893,7 +2895,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2893
2895
|
display: flex;
|
|
2894
2896
|
}
|
|
2895
2897
|
|
|
2896
|
-
@keyframes capra-Drawer-module-
|
|
2898
|
+
@keyframes capra-Drawer-module-iRsXUG-drawerInFromRight {
|
|
2897
2899
|
from {
|
|
2898
2900
|
transform: translateX(100%);
|
|
2899
2901
|
}
|
|
@@ -2903,7 +2905,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2903
2905
|
}
|
|
2904
2906
|
}
|
|
2905
2907
|
|
|
2906
|
-
@keyframes capra-Drawer-module-
|
|
2908
|
+
@keyframes capra-Drawer-module-iRsXUG-drawerInFromLeft {
|
|
2907
2909
|
from {
|
|
2908
2910
|
transform: translateX(-100%);
|
|
2909
2911
|
}
|
|
@@ -2913,7 +2915,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2913
2915
|
}
|
|
2914
2916
|
}
|
|
2915
2917
|
|
|
2916
|
-
@keyframes capra-Drawer-module-
|
|
2918
|
+
@keyframes capra-Drawer-module-iRsXUG-drawerOutToRight {
|
|
2917
2919
|
from {
|
|
2918
2920
|
transform: translateX(0);
|
|
2919
2921
|
}
|
|
@@ -2923,7 +2925,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
2923
2925
|
}
|
|
2924
2926
|
}
|
|
2925
2927
|
|
|
2926
|
-
@keyframes capra-Drawer-module-
|
|
2928
|
+
@keyframes capra-Drawer-module-iRsXUG-drawerOutToLeft {
|
|
2927
2929
|
from {
|
|
2928
2930
|
transform: translateX(0);
|
|
2929
2931
|
}
|
|
@@ -105,6 +105,6 @@ Don't:
|
|
|
105
105
|
|
|
106
106
|
## Related components
|
|
107
107
|
|
|
108
|
-
* [Toast](
|
|
109
|
-
* [Pill](
|
|
110
|
-
* [Modal](
|
|
108
|
+
* [Toast](/llms/core-toast--design.txt) — For non-blocking, auto-dismissing notifications.
|
|
109
|
+
* [Pill](/llms/core-pill--design.txt) — For inline semantic status indicators without body copy.
|
|
110
|
+
* [Modal](/llms/core-modal--design.txt) — When the error or warning requires an immediate blocking decision.
|
|
@@ -39,7 +39,7 @@ space is limited.
|
|
|
39
39
|
|
|
40
40
|
## Layout and spacing
|
|
41
41
|
|
|
42
|
-
* Input renders identically to [TextField](
|
|
42
|
+
* Input renders identically to [TextField](/llms/core-textfield--design.txt).
|
|
43
43
|
* Suggestions are presented using a ListBox.
|
|
44
44
|
|
|
45
45
|
## Behavior
|
|
@@ -70,8 +70,8 @@ Do:
|
|
|
70
70
|
|
|
71
71
|
Don't:
|
|
72
72
|
|
|
73
|
-
* Don't use AutocompleteField for small mutually exclusive sets (about seven or fewer visible options) — use [RadioGroup](
|
|
74
|
-
* Don't use AutocompleteField for plain freeform text with no list validation — use [TextField](
|
|
73
|
+
* Don't use AutocompleteField for small mutually exclusive sets (about seven or fewer visible options) — use [RadioGroup](/llms/core-radiogroup--design.txt) or Select.
|
|
74
|
+
* Don't use AutocompleteField for plain freeform text with no list validation — use [TextField](/llms/core-textfield--design.txt).
|
|
75
75
|
* Don't require picking from the list while still allowing arbitrary text without explaining that behavior.
|
|
76
76
|
|
|
77
77
|
## Accessibility
|
|
@@ -87,5 +87,5 @@ Don't:
|
|
|
87
87
|
|
|
88
88
|
## Related components
|
|
89
89
|
|
|
90
|
-
* [TextField](
|
|
91
|
-
* [RadioGroup](
|
|
90
|
+
* [TextField](/llms/core-textfield--design.txt) — For freeform text without suggestions.
|
|
91
|
+
* [RadioGroup](/llms/core-radiogroup--design.txt) — For small mutually exclusive option sets.
|
|
@@ -79,5 +79,5 @@ Don't:
|
|
|
79
79
|
|
|
80
80
|
## Related components
|
|
81
81
|
|
|
82
|
-
* [Pill](
|
|
83
|
-
* [Tag](
|
|
82
|
+
* [Pill](/llms/core-pill--design.txt) — For semantic status labels.
|
|
83
|
+
* [Tag](/llms/core-tag--design.txt) — For removable text chips.
|
|
@@ -76,9 +76,9 @@ Do:
|
|
|
76
76
|
|
|
77
77
|
Don't:
|
|
78
78
|
|
|
79
|
-
* Don't use a Button for navigation to another page — use [Link](
|
|
80
|
-
* Don't use a Button for text-only inline navigation — use [Link](
|
|
81
|
-
* Don't use a Button for icon-only actions — use [IconButton](
|
|
79
|
+
* Don't use a Button for navigation to another page — use [Link](/llms/core-link--design.txt) or [Anchor](/llms/core-anchor--design.txt).
|
|
80
|
+
* Don't use a Button for text-only inline navigation — use [Link](/llms/core-link--design.txt).
|
|
81
|
+
* Don't use a Button for icon-only actions — use [IconButton](/llms/core-iconbutton--design.txt).
|
|
82
82
|
* Don't use two primary buttons side by side.
|
|
83
83
|
* Don't truncate button labels.
|
|
84
84
|
* Don't disable a button without explaining why (use `aria-disabled` with a tooltip).
|
|
@@ -86,12 +86,12 @@ Don't:
|
|
|
86
86
|
## Accessibility
|
|
87
87
|
|
|
88
88
|
* Always provide a visible text label; if the design requires a short label, add `aria-label` for context.
|
|
89
|
-
* For icon-only use cases, use [IconButton](
|
|
89
|
+
* For icon-only use cases, use [IconButton](/llms/core-iconbutton--design.txt) instead (which enforces an accessible label).
|
|
90
90
|
* Tab / Shift+Tab to focus. Enter or Space to activate.
|
|
91
91
|
* The pending state must be communicated to assistive technology (e.g., `aria-label="Saving..."` when `pending` is true).
|
|
92
92
|
|
|
93
93
|
## Related components
|
|
94
94
|
|
|
95
|
-
* [IconButton](
|
|
96
|
-
* [Link](
|
|
97
|
-
* [Modal](
|
|
95
|
+
* [IconButton](/llms/core-iconbutton--design.txt) — For icon-only actions.
|
|
96
|
+
* [Link](/llms/core-link--design.txt) — For inline text navigation.
|
|
97
|
+
* [Modal](/llms/core-modal--design.txt) — Buttons typically appear in modal footers for confirm/cancel patterns.
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Primary interactive element displaying text and supporting leading and trailing icons.
|
|
4
4
|
|
|
5
|
-
`ButtonLink` follows the design guidelines for [`Button`](
|
|
5
|
+
`ButtonLink` follows the design guidelines for [`Button`](/llms/core-button--design.txt) and uses [`Link`](/llms/core-link--design.txt) interally. Use it when you need a link styled as a button.
|
|
6
6
|
|
|
7
7
|
See those pages for more details on the properties and usage of `ButtonLink`.
|
|
@@ -69,7 +69,7 @@ Treat the card as a container: put links and buttons inside slots rather than ma
|
|
|
69
69
|
## Behavior
|
|
70
70
|
|
|
71
71
|
* Cards are static containers by default.
|
|
72
|
-
* If the entire card is interactive (e.g., a selectable card), use `role="button"` with keyboard support. Prefer [RadioTile](
|
|
72
|
+
* If the entire card is interactive (e.g., a selectable card), use `role="button"` with keyboard support. Prefer [RadioTile](/llms/core-radiotile--design.txt) for selection scenarios.
|
|
73
73
|
|
|
74
74
|
## Content
|
|
75
75
|
|
|
@@ -86,7 +86,7 @@ Do:
|
|
|
86
86
|
|
|
87
87
|
Don't:
|
|
88
88
|
|
|
89
|
-
* Don't make the entire card surface the only navigation affordance — put a [Link](
|
|
89
|
+
* Don't make the entire card surface the only navigation affordance — put a [Link](/llms/core-link--design.txt) or [Button](/llms/core-button--design.txt) inside the content.
|
|
90
90
|
* Don't use Card for tabular data — use a table.
|
|
91
91
|
|
|
92
92
|
## Accessibility
|
|
@@ -96,5 +96,5 @@ Don't:
|
|
|
96
96
|
|
|
97
97
|
## Related components
|
|
98
98
|
|
|
99
|
-
* [RadioTile](
|
|
100
|
-
* [Modal](
|
|
99
|
+
* [RadioTile](/llms/core-radiotile--design.txt) — For selectable card options.
|
|
100
|
+
* [Modal](/llms/core-modal--design.txt) — For focused overlay containers.
|
|
@@ -62,5 +62,5 @@ Don't:
|
|
|
62
62
|
|
|
63
63
|
## Related components
|
|
64
64
|
|
|
65
|
-
* [Switch](
|
|
66
|
-
* [RadioGroup](
|
|
65
|
+
* [Switch](/llms/core-switch--design.txt) — For immediate binary settings.
|
|
66
|
+
* [RadioGroup](/llms/core-radiogroup--design.txt) — For mutually exclusive selections.
|
|
@@ -24,5 +24,5 @@ Use Collapse to structure readable content, separate regions, or group related i
|
|
|
24
24
|
|
|
25
25
|
## Related components
|
|
26
26
|
|
|
27
|
-
* [Card](
|
|
28
|
-
* [Divider](
|
|
27
|
+
* [Card](/llms/core-card--design.txt)
|
|
28
|
+
* [Divider](/llms/core-divider--design.txt)
|
|
@@ -54,5 +54,5 @@ Links inherit the standard focus indicator standard to all focusable elements.
|
|
|
54
54
|
|
|
55
55
|
## Related components
|
|
56
56
|
|
|
57
|
-
* [Button](
|
|
58
|
-
* [Anchor](
|
|
57
|
+
* [Button](/llms/core-button--design.txt)
|
|
58
|
+
* [Anchor](/llms/core-anchor--design.txt)
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
1. **Label**: describes the field and carries the required marker when needed.
|
|
6
6
|
2. **Trigger**: matches Capra text-input sizing and state treatments.
|
|
7
7
|
3. **Popover**: contains the option list and optional search field.
|
|
8
|
-
4. **ListBox items**:
|
|
8
|
+
4. **ListBox items**: selected rows are marked with a checkmark in both single- and multiple-select modes.
|
|
9
9
|
5. **Sections**: optional grouped options with a non-selectable header label.
|
|
10
10
|
|
|
11
11
|
## Properties
|
|
@@ -4,7 +4,7 @@ TextInput component for single-line text entry. Backwards compatible with Ant De
|
|
|
4
4
|
|
|
5
5
|
:::warning[Internal only]
|
|
6
6
|
|
|
7
|
-
`TextInput` is not exported from the public `@capra/core` API. For single-line text entry in product code, use [`TextField`](
|
|
7
|
+
`TextInput` is not exported from the public `@capra/core` API. For single-line text entry in product code, use [`TextField`](/llms/core-textfield--design.txt).
|
|
8
8
|
|
|
9
9
|
:::
|
|
10
10
|
|
|
@@ -16,7 +16,7 @@ The default size for toggle button groups is medium, which should be used in mos
|
|
|
16
16
|
|
|
17
17
|
### Label
|
|
18
18
|
|
|
19
|
-
Labels should be short and succinct. For longer labels, consider a [Radio](
|
|
19
|
+
Labels should be short and succinct. For longer labels, consider a [Radio](/llms/core-radio--design.txt) or [SelectField](/llms/core-selectfield--design.txt).
|
|
20
20
|
|
|
21
21
|
### Icon
|
|
22
22
|
|
|
@@ -53,7 +53,7 @@ Do consider a toggle button group if you have 2 to 4 succinct choices.
|
|
|
53
53
|
|
|
54
54
|
**Don't**
|
|
55
55
|
|
|
56
|
-
Don't use more than 4 buttons in a single group. Consider a [SelectField](
|
|
56
|
+
Don't use more than 4 buttons in a single group. Consider a [SelectField](/llms/core-selectfield--design.txt) if more than 4 choices are needed.
|
|
57
57
|
|
|
58
58
|
### Wording
|
|
59
59
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# Foundation/Page Templates
|
|
2
|
+
|
|
3
|
+
## Page Layout
|
|
4
|
+
|
|
5
|
+
When building a new page, always start with the page layout. Follow the guidelines in the documents below to ensure the page is styled and structured correctly.
|
|
6
|
+
|
|
7
|
+
* [Navigation](/docs/foundation-page-templates-navigation--docs)
|
|
8
|
+
|
|
9
|
+
## Templates
|
|
10
|
+
|
|
11
|
+
Page templates provide a starting point for scaffolding new pages using the Capra design system.
|
|
12
|
+
|
|
13
|
+
* [Overview](/docs/foundation-page-templates-overview--docs) - Orient the user, surface the insights that matters, start work (preferably via AI), then let them drill.
|
|
14
|
+
* [Tables](/docs/foundation-page-templates-tables--docs) - Provide an easily parsed list of objects.
|
|
15
|
+
* [Setup Config](/docs/foundation-page-templates-setup-config--docs) - Guide the user through the setup process or post-setup configuration.
|
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# History/Changelogs/@capra-core
|
|
2
2
|
|
|
3
|
+
### 1.14.2
|
|
4
|
+
|
|
5
|
+
#### Patch Changes
|
|
6
|
+
|
|
7
|
+
* [45841b2](https://bitbucket.org/cribl/capra-ui/commits/45841b2): Remove border from Badge component
|
|
8
|
+
|
|
9
|
+
### 1.14.1
|
|
10
|
+
|
|
11
|
+
#### Patch Changes
|
|
12
|
+
|
|
13
|
+
* [ff42d74](https://bitbucket.org/cribl/capra-ui/commits/ff42d74): `SelectField` options now use a checkmark for selection, with tighter spacing.
|
|
14
|
+
* [a1dea94](https://bitbucket.org/cribl/capra-ui/commits/a1dea94): Align types with runtime behavior by removing the children prop from Switch prop types
|
|
15
|
+
* [6a176c9](https://bitbucket.org/cribl/capra-ui/commits/6a176c9): Shrink y-axis padding in `Drawer` header
|
|
16
|
+
|
|
3
17
|
### 1.14.0
|
|
4
18
|
|
|
5
19
|
#### Minor Changes
|
package/docs/index.md
CHANGED
|
@@ -12,6 +12,7 @@ Embedded documentation is available on the filesystem for each of these packages
|
|
|
12
12
|
## Documentation
|
|
13
13
|
|
|
14
14
|
- [Conventions](./conventions--docs.md)
|
|
15
|
+
- [Page Templates](./foundation-page-templates--docs.md)
|
|
15
16
|
- [Using Capra](./using-capra--docs.md)
|
|
16
17
|
- [Core/Alert - Design](./core-alert--design.md)
|
|
17
18
|
- [Core/Alert - Usage](./core-alert--usage.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capra/core",
|
|
3
|
-
"version": "1.14.
|
|
3
|
+
"version": "1.14.2",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Core React components for the Capra design system",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"storybook": "^10.4.6",
|
|
45
45
|
"tsdown": "^0.22.7",
|
|
46
46
|
"@private/building": "^0.1.1",
|
|
47
|
-
"@private/linting": "^0.0.1",
|
|
48
47
|
"@capra/theme": "^1.6.0",
|
|
48
|
+
"@private/linting": "^0.0.1",
|
|
49
49
|
"@private/stories": "^0.0.0",
|
|
50
50
|
"@private/testing": "^0.0.7"
|
|
51
51
|
},
|