@capra/core 1.11.0 → 1.12.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/index.cjs +59 -95
- package/dist/index.d.cts +26 -17
- package/dist/index.d.mts +26 -17
- package/dist/index.mjs +59 -95
- package/dist/style.css +202 -248
- package/docs/core-menu--usage.md +1 -1
- package/docs/core-tabnav--design.md +2 -0
- package/docs/core-tabnav--usage.md +21 -3
- package/docs/history-changelogs-capra-core--docs.md +22 -0
- package/package.json +4 -4
package/dist/style.css
CHANGED
|
@@ -1564,7 +1564,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
1564
1564
|
transition: none;
|
|
1565
1565
|
}
|
|
1566
1566
|
}
|
|
1567
|
-
.capra-InputRow-module-
|
|
1567
|
+
.capra-InputRow-module-hUHSXW-row {
|
|
1568
1568
|
flex-direction: row;
|
|
1569
1569
|
align-items: stretch;
|
|
1570
1570
|
width: 100%;
|
|
@@ -1584,7 +1584,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
1584
1584
|
flex: none;
|
|
1585
1585
|
}
|
|
1586
1586
|
|
|
1587
|
-
& > [data-capra-input-row-addon]:not(:first-child), & > [data-capra-text-input]:not(:first-child), & > [data-capra-field-root]:not(:first-child) :where([data-capra-text-input])
|
|
1587
|
+
& > [data-capra-input-row-addon]:not(:first-child), & > [data-capra-text-input]:not(:first-child), & > [data-capra-field-root]:not(:first-child) :where([data-capra-text-input]) {
|
|
1588
1588
|
margin-inline-start: -1px;
|
|
1589
1589
|
}
|
|
1590
1590
|
|
|
@@ -1592,10 +1592,6 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
1592
1592
|
z-index: 1;
|
|
1593
1593
|
}
|
|
1594
1594
|
|
|
1595
|
-
& > .ant-select-focused {
|
|
1596
|
-
z-index: 1;
|
|
1597
|
-
}
|
|
1598
|
-
|
|
1599
1595
|
& > :not(:only-child):not(:last-child) {
|
|
1600
1596
|
border-top-right-radius: 0;
|
|
1601
1597
|
border-bottom-right-radius: 0;
|
|
@@ -1605,29 +1601,9 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
1605
1601
|
border-top-left-radius: 0;
|
|
1606
1602
|
border-bottom-left-radius: 0;
|
|
1607
1603
|
}
|
|
1608
|
-
|
|
1609
|
-
& > .ant-select:not(:only-child):not(:last-child) .ant-select-selection, & > .ant-select:not(:only-child):not(:last-child) .ant-select-selector {
|
|
1610
|
-
border-top-right-radius: 0;
|
|
1611
|
-
border-bottom-right-radius: 0;
|
|
1612
|
-
}
|
|
1613
|
-
|
|
1614
|
-
& > .ant-select:not(:only-child):not(:first-child) .ant-select-selection, & > .ant-select:not(:only-child):not(:first-child) .ant-select-selector {
|
|
1615
|
-
border-top-left-radius: 0;
|
|
1616
|
-
border-bottom-left-radius: 0;
|
|
1617
|
-
}
|
|
1618
|
-
|
|
1619
|
-
& > .ant-select:first-child:not(:only-child) .ant-select-selection, & > .ant-select:first-child:not(:only-child) .ant-select-selector {
|
|
1620
|
-
border-top-left-radius: var(--cds2-radius-md);
|
|
1621
|
-
border-bottom-left-radius: var(--cds2-radius-md);
|
|
1622
|
-
}
|
|
1623
|
-
|
|
1624
|
-
& > .ant-select:last-child:not(:only-child) .ant-select-selection, & > .ant-select:last-child:not(:only-child) .ant-select-selector {
|
|
1625
|
-
border-top-right-radius: var(--cds2-radius-md);
|
|
1626
|
-
border-bottom-right-radius: var(--cds2-radius-md);
|
|
1627
|
-
}
|
|
1628
1604
|
}
|
|
1629
1605
|
|
|
1630
|
-
.capra-InputRow-module-
|
|
1606
|
+
.capra-InputRow-module-hUHSXW-addon {
|
|
1631
1607
|
box-sizing: border-box;
|
|
1632
1608
|
align-items: center;
|
|
1633
1609
|
gap: var(--cds2-spacing-md);
|
|
@@ -1650,17 +1626,17 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
1650
1626
|
}
|
|
1651
1627
|
}
|
|
1652
1628
|
|
|
1653
|
-
.capra-InputRow-module-
|
|
1629
|
+
.capra-InputRow-module-hUHSXW-row > [data-capra-input-row-addon]:first-child:not(:only-child) {
|
|
1654
1630
|
border-top-left-radius: var(--cds2-radius-md);
|
|
1655
1631
|
border-bottom-left-radius: var(--cds2-radius-md);
|
|
1656
1632
|
}
|
|
1657
1633
|
|
|
1658
|
-
.capra-InputRow-module-
|
|
1634
|
+
.capra-InputRow-module-hUHSXW-row > [data-capra-input-row-addon]:last-child:not(:only-child) {
|
|
1659
1635
|
border-top-right-radius: var(--cds2-radius-md);
|
|
1660
1636
|
border-bottom-right-radius: var(--cds2-radius-md);
|
|
1661
1637
|
}
|
|
1662
1638
|
|
|
1663
|
-
.capra-InputRow-module-
|
|
1639
|
+
.capra-InputRow-module-hUHSXW-row > [data-capra-input-row-addon]:only-child {
|
|
1664
1640
|
border-radius: var(--cds2-radius-md);
|
|
1665
1641
|
}
|
|
1666
1642
|
.capra-NumberField-module-crO5za-withStepper {
|
|
@@ -3468,7 +3444,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
3468
3444
|
.capra-Toast-module-p7lQQG-toast[data-type="error"] {
|
|
3469
3445
|
--_cds-toast-icon-color: var(--cds2-color-foreground-danger-default);
|
|
3470
3446
|
}
|
|
3471
|
-
.capra-Menu-module-
|
|
3447
|
+
.capra-Menu-module-HIhAFW-menu, .capra-Menu-module-HIhAFW-list {
|
|
3472
3448
|
gap: var(--cds2-spacing-xs);
|
|
3473
3449
|
box-sizing: border-box;
|
|
3474
3450
|
min-width: 152px;
|
|
@@ -3478,29 +3454,29 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
3478
3454
|
flex-direction: column;
|
|
3479
3455
|
display: flex;
|
|
3480
3456
|
overflow: auto;
|
|
3481
|
-
}
|
|
3482
3457
|
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
}
|
|
3458
|
+
& > :not(:last-child):not(.capra-Menu-module-HIhAFW-divider):not(:has( + .capra-Menu-module-HIhAFW-divider)) {
|
|
3459
|
+
margin-block-end: var(--cds2-spacing-xs);
|
|
3460
|
+
}
|
|
3486
3461
|
|
|
3487
|
-
|
|
3488
|
-
|
|
3462
|
+
&:focus-visible {
|
|
3463
|
+
outline: none;
|
|
3464
|
+
}
|
|
3489
3465
|
}
|
|
3490
3466
|
|
|
3491
|
-
.capra-Menu-module-
|
|
3492
|
-
|
|
3493
|
-
}
|
|
3467
|
+
.capra-Menu-module-HIhAFW-menu {
|
|
3468
|
+
padding: 5px;
|
|
3494
3469
|
|
|
3495
|
-
|
|
3496
|
-
|
|
3470
|
+
&[data-panel-padding="none"] {
|
|
3471
|
+
padding: var(--cds2-spacing-sm);
|
|
3472
|
+
}
|
|
3497
3473
|
}
|
|
3498
3474
|
|
|
3499
|
-
.capra-Menu-module-
|
|
3500
|
-
|
|
3475
|
+
.capra-Menu-module-HIhAFW-menuTriggerSlot {
|
|
3476
|
+
display: inline-block;
|
|
3501
3477
|
}
|
|
3502
3478
|
|
|
3503
|
-
.capra-Menu-module-
|
|
3479
|
+
.capra-Menu-module-HIhAFW-menuItem {
|
|
3504
3480
|
appearance: none;
|
|
3505
3481
|
border-radius: var(--cds-radius-sm);
|
|
3506
3482
|
color: var(--cds2-color-foreground-default);
|
|
@@ -3515,257 +3491,239 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
3515
3491
|
min-width: 152px;
|
|
3516
3492
|
max-width: 256px;
|
|
3517
3493
|
text-decoration: none;
|
|
3518
|
-
}
|
|
3519
|
-
|
|
3520
|
-
.capra-Menu-module-3G4VeG-menuItemLeadingGutter {
|
|
3521
|
-
margin-inline-end: var(--cds2-spacing-md);
|
|
3522
|
-
}
|
|
3523
|
-
|
|
3524
|
-
.capra-Menu-module-3G4VeG-menuItemTrailingGutter {
|
|
3525
|
-
margin-inline-start: var(--cds2-spacing-md);
|
|
3526
|
-
}
|
|
3527
3494
|
|
|
3528
|
-
|
|
3529
|
-
|
|
3530
|
-
}
|
|
3495
|
+
&:hover:not(:disabled, [aria-disabled="true"]) {
|
|
3496
|
+
background-color: var(--cds2-color-background-neutral-hover);
|
|
3497
|
+
}
|
|
3531
3498
|
|
|
3532
|
-
|
|
3533
|
-
|
|
3534
|
-
}
|
|
3499
|
+
&:focus {
|
|
3500
|
+
outline: none;
|
|
3501
|
+
}
|
|
3535
3502
|
|
|
3536
|
-
|
|
3537
|
-
|
|
3538
|
-
|
|
3539
|
-
}
|
|
3503
|
+
&[data-focus-visible="true"] {
|
|
3504
|
+
outline: var(--cds2-border-focus);
|
|
3505
|
+
outline-offset: var(--cds2-spacing-xs);
|
|
3506
|
+
}
|
|
3540
3507
|
|
|
3541
|
-
|
|
3542
|
-
|
|
3543
|
-
|
|
3544
|
-
}
|
|
3508
|
+
&:is(:disabled, [aria-disabled="true"]) {
|
|
3509
|
+
color: var(--cds2-color-foreground-disabled);
|
|
3510
|
+
cursor: not-allowed;
|
|
3545
3511
|
|
|
3546
|
-
.capra-Menu-module-
|
|
3547
|
-
|
|
3548
|
-
}
|
|
3512
|
+
& .capra-Menu-module-HIhAFW-menuItemListItemShell, & .capra-Menu-module-HIhAFW-menuItemLabel, & .capra-Menu-module-HIhAFW-menuItemDescription, & .capra-Menu-module-HIhAFW-menuItemShortcut {
|
|
3513
|
+
color: var(--cds2-color-foreground-disabled);
|
|
3514
|
+
}
|
|
3549
3515
|
|
|
3550
|
-
|
|
3551
|
-
|
|
3552
|
-
|
|
3553
|
-
|
|
3554
|
-
}
|
|
3516
|
+
& .capra-Menu-module-HIhAFW-menuItemShortcut {
|
|
3517
|
+
background-color: var(--cds-color-background-secondary);
|
|
3518
|
+
border: var(--cds2-border-default);
|
|
3519
|
+
}
|
|
3520
|
+
}
|
|
3555
3521
|
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
|
|
3522
|
+
&[data-active="true"] {
|
|
3523
|
+
background-color: var(--cds2-color-background-accent-selected);
|
|
3524
|
+
color: var(--cds2-color-foreground-default);
|
|
3559
3525
|
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
}
|
|
3526
|
+
& .capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3527
|
+
color: inherit;
|
|
3528
|
+
}
|
|
3529
|
+
}
|
|
3564
3530
|
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3531
|
+
&[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) {
|
|
3532
|
+
background-color: var(--cds2-color-background-neutral-hover);
|
|
3533
|
+
color: var(--cds2-color-foreground-default);
|
|
3568
3534
|
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
}
|
|
3535
|
+
& .capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3536
|
+
color: inherit;
|
|
3537
|
+
}
|
|
3538
|
+
}
|
|
3574
3539
|
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
font: var(--cds2-typography-body-md-normal);
|
|
3578
|
-
}
|
|
3540
|
+
&[data-variant="danger"] {
|
|
3541
|
+
color: var(--cds2-color-foreground-danger-default);
|
|
3579
3542
|
|
|
3580
|
-
.capra-Menu-module-
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
}
|
|
3543
|
+
& .capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3544
|
+
color: inherit;
|
|
3545
|
+
}
|
|
3584
3546
|
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3547
|
+
&:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-HIhAFW-menuItemShortcut {
|
|
3548
|
+
border: var(--cds2-border-default);
|
|
3549
|
+
color: var(--cds2-color-foreground-danger-default);
|
|
3550
|
+
}
|
|
3588
3551
|
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
}
|
|
3552
|
+
&:hover:not(:disabled, [aria-disabled="true"]) {
|
|
3553
|
+
background-color: var(--cds2-color-background-danger-subtle);
|
|
3554
|
+
color: var(--cds2-color-foreground-danger-default);
|
|
3555
|
+
}
|
|
3593
3556
|
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3557
|
+
&[data-active="true"] {
|
|
3558
|
+
background-color: var(--cds2-color-background-danger-hover);
|
|
3559
|
+
color: var(--cds2-color-foreground-danger-default);
|
|
3597
3560
|
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
}
|
|
3561
|
+
&:hover:not(:disabled, [aria-disabled="true"]) {
|
|
3562
|
+
background-color: var(--cds2-color-background-danger-subtle);
|
|
3563
|
+
}
|
|
3564
|
+
}
|
|
3565
|
+
}
|
|
3601
3566
|
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
}
|
|
3567
|
+
&[data-indent="true"] {
|
|
3568
|
+
padding-inline-start: var(--cds2-spacing-xl);
|
|
3569
|
+
}
|
|
3606
3570
|
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3571
|
+
&[data-has-description="true"] {
|
|
3572
|
+
& .capra-Menu-module-HIhAFW-menuItemTrailingGutter {
|
|
3573
|
+
align-self: center;
|
|
3574
|
+
height: auto !important;
|
|
3575
|
+
}
|
|
3611
3576
|
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
}
|
|
3577
|
+
& .capra-Menu-module-HIhAFW-menuItemListItemShell {
|
|
3578
|
+
align-items: start;
|
|
3579
|
+
}
|
|
3580
|
+
}
|
|
3615
3581
|
|
|
3616
|
-
.capra-Menu-module-
|
|
3617
|
-
|
|
3618
|
-
|
|
3582
|
+
& .capra-Menu-module-HIhAFW-menuItemListItemShell {
|
|
3583
|
+
width: 100%;
|
|
3584
|
+
color: inherit;
|
|
3585
|
+
align-items: center;
|
|
3586
|
+
}
|
|
3619
3587
|
}
|
|
3620
3588
|
|
|
3621
|
-
.capra-Menu-module-
|
|
3622
|
-
|
|
3623
|
-
}
|
|
3589
|
+
.capra-Menu-module-HIhAFW-menuItemLeadingGutter {
|
|
3590
|
+
margin-inline-end: var(--cds2-spacing-md);
|
|
3624
3591
|
|
|
3625
|
-
.capra-Menu-module-
|
|
3626
|
-
|
|
3627
|
-
|
|
3592
|
+
& .capra-Menu-module-HIhAFW-slot {
|
|
3593
|
+
line-height: 0;
|
|
3594
|
+
}
|
|
3628
3595
|
}
|
|
3629
3596
|
|
|
3630
|
-
.capra-Menu-module-
|
|
3631
|
-
|
|
3597
|
+
.capra-Menu-module-HIhAFW-menuItemTrailingGutter {
|
|
3598
|
+
margin-inline-start: var(--cds2-spacing-md);
|
|
3632
3599
|
}
|
|
3633
3600
|
|
|
3634
|
-
.capra-Menu-module-
|
|
3635
|
-
|
|
3636
|
-
|
|
3601
|
+
.capra-Menu-module-HIhAFW-menuItemTrailingGroup {
|
|
3602
|
+
align-items: center;
|
|
3603
|
+
gap: var(--cds2-spacing-md);
|
|
3604
|
+
display: inline-flex;
|
|
3637
3605
|
}
|
|
3638
3606
|
|
|
3639
|
-
.capra-Menu-module-
|
|
3640
|
-
color:
|
|
3607
|
+
.capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3608
|
+
color: inherit;
|
|
3641
3609
|
font: var(--cds2-typography-body-md-normal);
|
|
3642
3610
|
}
|
|
3643
3611
|
|
|
3644
|
-
.capra-Menu-module-
|
|
3645
|
-
|
|
3646
|
-
|
|
3647
|
-
color: var(--cds2-color-foreground-danger-default);
|
|
3648
|
-
}
|
|
3649
|
-
|
|
3650
|
-
.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"].capra-Menu-module-3G4VeG-menuItem[data-active="true"] .capra-Menu-module-3G4VeG-menuItemLabel {
|
|
3651
|
-
color: var(--cds2-color-foreground-danger-default);
|
|
3652
|
-
font: var(--cds2-typography-body-md-semibold);
|
|
3653
|
-
}
|
|
3654
|
-
|
|
3655
|
-
.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"].capra-Menu-module-3G4VeG-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) {
|
|
3656
|
-
background-color: var(--cds2-color-background-danger-subtle);
|
|
3657
|
-
color: var(--cds2-color-foreground-danger-default);
|
|
3658
|
-
}
|
|
3659
|
-
|
|
3660
|
-
.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"].capra-Menu-module-3G4VeG-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
|
|
3661
|
-
color: var(--cds2-color-foreground-danger-default);
|
|
3662
|
-
font: var(--cds2-typography-body-md-semibold);
|
|
3663
|
-
}
|
|
3664
|
-
|
|
3665
|
-
.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem:hover:not(:disabled, [aria-disabled="true"]) {
|
|
3666
|
-
background-color: var(--cds2-color-background-neutral-hover);
|
|
3612
|
+
.capra-Menu-module-HIhAFW-menuItemDescription {
|
|
3613
|
+
color: var(--cds2-color-foreground-default);
|
|
3614
|
+
font: var(--cds2-typography-body-sm-normal);
|
|
3667
3615
|
}
|
|
3668
3616
|
|
|
3669
|
-
.capra-Menu-module-
|
|
3617
|
+
.capra-Menu-module-HIhAFW-menuItemShortcut {
|
|
3618
|
+
background-color: var(--cds2-color-neutral-surface);
|
|
3619
|
+
border: var(--cds2-border-default);
|
|
3620
|
+
border-color: var(--cds2-color-border-neutral-subtle);
|
|
3621
|
+
border-radius: var(--cds2-radius-md);
|
|
3670
3622
|
color: var(--cds2-color-foreground-subtle);
|
|
3623
|
+
font: var(--cds2-typography-body-sm-normal);
|
|
3624
|
+
padding: 0 var(--cds2-spacing-sm);
|
|
3625
|
+
white-space: nowrap;
|
|
3626
|
+
justify-content: center;
|
|
3627
|
+
align-items: center;
|
|
3628
|
+
display: inline-flex;
|
|
3671
3629
|
}
|
|
3672
3630
|
|
|
3673
|
-
.capra-Menu-module-
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
|
|
3677
|
-
}
|
|
3678
|
-
|
|
3679
|
-
.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"][data-item-active-accent-bar="false"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"], .capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"][data-item-active-accent-bar="false"] .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"].capra-Menu-module-3G4VeG-menuItem[data-active="true"] {
|
|
3680
|
-
border-inline-end: none;
|
|
3681
|
-
}
|
|
3682
|
-
|
|
3683
|
-
.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"] .capra-Menu-module-3G4VeG-menuItemLabel, .capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel, .capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"].capra-Menu-module-3G4VeG-menuItem[data-active="true"] .capra-Menu-module-3G4VeG-menuItemLabel, .capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"].capra-Menu-module-3G4VeG-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
|
|
3684
|
-
font: var(--cds2-typography-body-md-normal);
|
|
3685
|
-
}
|
|
3686
|
-
|
|
3687
|
-
.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"] .capra-Menu-module-3G4VeG-menuItemLabel {
|
|
3688
|
-
color: var(--cds2-color-foreground-accent-default);
|
|
3689
|
-
font: var(--cds2-typography-body-md-semibold);
|
|
3690
|
-
}
|
|
3691
|
-
|
|
3692
|
-
.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) {
|
|
3693
|
-
background-color: var(--cds2-color-background-accent-selected);
|
|
3694
|
-
color: var(--cds2-color-foreground-accent-default);
|
|
3695
|
-
}
|
|
3631
|
+
.capra-Menu-module-HIhAFW-menu[data-item-hover-appearance="accent"] {
|
|
3632
|
+
& .capra-Menu-module-HIhAFW-menuItem {
|
|
3633
|
+
&:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-HIhAFW-menuItemShortcut {
|
|
3634
|
+
color: var(--cds2-color-foreground-subtle);
|
|
3635
|
+
}
|
|
3696
3636
|
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
color: var(--cds2-color-foreground-accent-default);
|
|
3701
|
-
}
|
|
3637
|
+
&:is(:disabled, [aria-disabled="true"]) {
|
|
3638
|
+
color: var(--cds2-color-foreground-disabled);
|
|
3639
|
+
background-color: #0000;
|
|
3702
3640
|
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
}
|
|
3641
|
+
&[data-active="true"] {
|
|
3642
|
+
background-color: #0000;
|
|
3643
|
+
border-inline-end: none;
|
|
3644
|
+
}
|
|
3707
3645
|
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
}
|
|
3646
|
+
&[data-active="true"] .capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3647
|
+
font: var(--cds2-typography-body-md-normal);
|
|
3648
|
+
}
|
|
3649
|
+
}
|
|
3712
3650
|
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3651
|
+
&[data-active="true"] {
|
|
3652
|
+
background-color: var(--cds2-color-background-accent-selected);
|
|
3653
|
+
border-inline-end: 2px solid var(--cds2-color-border-accent-default);
|
|
3654
|
+
color: var(--cds2-color-foreground-accent-default);
|
|
3716
3655
|
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3656
|
+
& .capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3657
|
+
color: var(--cds2-color-foreground-accent-default);
|
|
3658
|
+
font: var(--cds2-typography-body-md-semibold);
|
|
3659
|
+
}
|
|
3720
3660
|
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3661
|
+
&:hover:not(:disabled, [aria-disabled="true"]) {
|
|
3662
|
+
background-color: var(--cds2-color-background-accent-selected);
|
|
3663
|
+
color: var(--cds2-color-foreground-accent-default);
|
|
3664
|
+
}
|
|
3665
|
+
}
|
|
3724
3666
|
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3667
|
+
&[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) {
|
|
3668
|
+
background-color: var(--cds2-color-border-focus);
|
|
3669
|
+
border-inline-end: 2px solid var(--cds2-color-border-accent-default);
|
|
3670
|
+
color: var(--cds2-color-foreground-accent-default);
|
|
3728
3671
|
|
|
3729
|
-
.capra-Menu-module-
|
|
3730
|
-
|
|
3731
|
-
|
|
3672
|
+
& .capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3673
|
+
color: var(--cds2-color-foreground-accent-default);
|
|
3674
|
+
font: var(--cds2-typography-body-md-semibold);
|
|
3675
|
+
}
|
|
3732
3676
|
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
}
|
|
3677
|
+
&:hover {
|
|
3678
|
+
background-color: var(--cds2-color-background-accent-selected);
|
|
3679
|
+
}
|
|
3680
|
+
}
|
|
3737
3681
|
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3682
|
+
&[data-variant="danger"] {
|
|
3683
|
+
&:hover:not(:disabled, [aria-disabled="true"]) {
|
|
3684
|
+
background-color: var(--cds2-color-background-danger-subtle);
|
|
3685
|
+
color: var(--cds2-color-foreground-danger-default);
|
|
3686
|
+
|
|
3687
|
+
& .capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3688
|
+
font: var(--cds2-typography-body-md-normal);
|
|
3689
|
+
}
|
|
3690
|
+
}
|
|
3691
|
+
|
|
3692
|
+
&[data-active="true"] {
|
|
3693
|
+
background-color: var(--cds2-color-border-danger-focus);
|
|
3694
|
+
border-inline-end: 2px solid var(--cds2-color-border-accent-default);
|
|
3695
|
+
color: var(--cds2-color-foreground-danger-default);
|
|
3696
|
+
|
|
3697
|
+
& .capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3698
|
+
color: var(--cds2-color-foreground-danger-default);
|
|
3699
|
+
font: var(--cds2-typography-body-md-semibold);
|
|
3700
|
+
}
|
|
3701
|
+
|
|
3702
|
+
&:hover:not(:disabled, [aria-disabled="true"]) {
|
|
3703
|
+
background-color: var(--cds2-color-background-danger-subtle);
|
|
3704
|
+
}
|
|
3705
|
+
}
|
|
3706
|
+
}
|
|
3707
|
+
}
|
|
3742
3708
|
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
}
|
|
3709
|
+
&[data-item-active-accent-bar="false"] {
|
|
3710
|
+
& .capra-Menu-module-HIhAFW-menuItem[data-active="true"], & .capra-Menu-module-HIhAFW-menuItem[data-has-submenu][data-open] {
|
|
3711
|
+
border-inline-end: none;
|
|
3712
|
+
}
|
|
3713
|
+
}
|
|
3747
3714
|
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3751
|
-
|
|
3715
|
+
&[data-item-active-label-semibold="false"] {
|
|
3716
|
+
& .capra-Menu-module-HIhAFW-menuItem[data-active="true"] .capra-Menu-module-HIhAFW-menuItemLabel, & .capra-Menu-module-HIhAFW-menuItem[data-has-submenu][data-open] .capra-Menu-module-HIhAFW-menuItemLabel {
|
|
3717
|
+
font: var(--cds2-typography-body-md-normal);
|
|
3718
|
+
}
|
|
3719
|
+
}
|
|
3752
3720
|
}
|
|
3753
3721
|
|
|
3754
|
-
.capra-Menu-module-
|
|
3755
|
-
|
|
3756
|
-
border: var(--cds2-border-default);
|
|
3757
|
-
border-color: var(--cds2-color-border-neutral-subtle);
|
|
3758
|
-
border-radius: var(--cds2-radius-md);
|
|
3759
|
-
color: var(--cds2-color-foreground-subtle);
|
|
3760
|
-
font: var(--cds2-typography-body-sm-normal);
|
|
3761
|
-
padding: 0 var(--cds2-spacing-sm);
|
|
3762
|
-
white-space: nowrap;
|
|
3763
|
-
justify-content: center;
|
|
3764
|
-
align-items: center;
|
|
3765
|
-
display: inline-flex;
|
|
3722
|
+
.capra-Menu-module-HIhAFW-section {
|
|
3723
|
+
display: contents;
|
|
3766
3724
|
}
|
|
3767
3725
|
|
|
3768
|
-
.capra-Menu-module-
|
|
3726
|
+
.capra-Menu-module-HIhAFW-header {
|
|
3769
3727
|
box-sizing: border-box;
|
|
3770
3728
|
color: var(--cds2-color-foreground-default);
|
|
3771
3729
|
font: var(--cds2-typography-body-md-semibold);
|
|
@@ -3776,7 +3734,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
3776
3734
|
display: flex;
|
|
3777
3735
|
}
|
|
3778
3736
|
|
|
3779
|
-
.capra-Menu-module-
|
|
3737
|
+
.capra-Menu-module-HIhAFW-divider {
|
|
3780
3738
|
border: none;
|
|
3781
3739
|
border-block-start: var(--cds2-border-default);
|
|
3782
3740
|
border-color: var(--cds2-color-border-neutral-subtle);
|
|
@@ -3786,10 +3744,6 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
|
|
|
3786
3744
|
width: 100%;
|
|
3787
3745
|
padding: 0;
|
|
3788
3746
|
}
|
|
3789
|
-
|
|
3790
|
-
.capra-Menu-module-3G4VeG-menuItemListItemShell {
|
|
3791
|
-
width: 100%;
|
|
3792
|
-
}
|
|
3793
3747
|
.capra-TabNav-module-pLDWhG-root {
|
|
3794
3748
|
flex-direction: column;
|
|
3795
3749
|
width: 100%;
|
package/docs/core-menu--usage.md
CHANGED
|
@@ -14,5 +14,5 @@
|
|
|
14
14
|
| `itemActiveAccentBar` | `boolean` | No | true | When `itemHoverAppearance` is `accent`, whether the active/selected row shows the inline-end accent bar (vertical TabNav indicator). Set to `false` for horizontal TabNav flyout menus where selection should not show that bar.<br>@default true |
|
|
15
15
|
| `itemActiveLabelSemibold` | `boolean` | No | true | When `itemHoverAppearance` is `accent`, whether the active/selected row uses a semibold label. Set to `false` for TabNav horizontal submenus where the active item should match normal menu weight.<br>@default true |
|
|
16
16
|
| `panelPadding` | `'default' \| 'none'` | No | 'default' | Inset of the menu panel (`role="menu"`). `none` uses a minimal inset so focus rings are not clipped under scroll/overflow; use for flyouts that should sit close to the popover edge (e.g. TabNav submenu).<br>@default 'default' |
|
|
17
|
-
| `popoverOffset` | `number` | No |
|
|
17
|
+
| `popoverOffset` | `number` | No | 2 | Gap along the main axis between the trigger and the menu panel (React Aria `Popover` `offset`).<br>Defaults to 2px to match `spacing.xs`; `Popover` positioning takes a number, so the token cannot be applied via CSS.<br>Use a smaller value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav).<br>@default 2 |
|
|
18
18
|
| `trapFocus` | `boolean` | No | false | When `true`, focus is contained in the menu panel while it is open (Tab cycles within the panel; focus restores on close).<br>The popover stays non-modal so outside pointer dismiss still works. Use for patterns that must not move focus to sibling controls until the menu closes (e.g. horizontal TabNav flyouts).<br>@default false |
|
|
@@ -71,6 +71,8 @@ TabNav uses link-based navigation. The following apply:
|
|
|
71
71
|
* Active nav links have `aria-current="page"` set.
|
|
72
72
|
* Tabs that contain a dropdown use a button with `aria-haspopup="menu"` and `aria-expanded` set.
|
|
73
73
|
* Dropdown menu items use the Menu component with appropriate roles.
|
|
74
|
+
* The tab bar does not add outer spacing for surrounding layout. Handle page-level spacing where `TabNav` is composed.
|
|
75
|
+
* Interactive tabs and sub-items keep the `.tab` styles on the focusable element so hover, active, and focus treatments match the hit target.
|
|
74
76
|
|
|
75
77
|
### Orientation
|
|
76
78
|
|