@capra/core 1.11.1 → 1.12.0

package/dist/style.css

@@ -3444,7 +3444,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
 .capra-Toast-module-p7lQQG-toast[data-type="error"] {
   --_cds-toast-icon-color: var(--cds2-color-foreground-danger-default);
 }
-.capra-Menu-module-3G4VeG-menu, .capra-Menu-module-3G4VeG-list {
+.capra-Menu-module-HIhAFW-menu, .capra-Menu-module-HIhAFW-list {
   gap: var(--cds2-spacing-xs);
   box-sizing: border-box;
   min-width: 152px;
@@ -3454,29 +3454,29 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   flex-direction: column;
   display: flex;
   overflow: auto;
-}
 
-.capra-Menu-module-3G4VeG-menu > :not(:last-child):not(.capra-Menu-module-3G4VeG-divider):not(:has( + .capra-Menu-module-3G4VeG-divider)), .capra-Menu-module-3G4VeG-list > :not(:last-child):not(.capra-Menu-module-3G4VeG-divider):not(:has( + .capra-Menu-module-3G4VeG-divider)) {
-  margin-block-end: var(--cds2-spacing-xs);
-}
+  & > :not(:last-child):not(.capra-Menu-module-HIhAFW-divider):not(:has( + .capra-Menu-module-HIhAFW-divider)) {
+    margin-block-end: var(--cds2-spacing-xs);
+  }
 
-.capra-Menu-module-3G4VeG-menu {
-  padding: 5px;
+  &:focus-visible {
+    outline: none;
+  }
 }
 
-.capra-Menu-module-3G4VeG-menuTriggerSlot {
-  display: inline-block;
-}
+.capra-Menu-module-HIhAFW-menu {
+  padding: 5px;
 
-.capra-Menu-module-3G4VeG-menu[data-panel-padding="none"] {
-  padding: var(--cds2-spacing-sm);
+  &[data-panel-padding="none"] {
+    padding: var(--cds2-spacing-sm);
+  }
 }
 
-.capra-Menu-module-3G4VeG-menu:focus-visible, .capra-Menu-module-3G4VeG-list:focus-visible {
-  outline: none;
+.capra-Menu-module-HIhAFW-menuTriggerSlot {
+  display: inline-block;
 }
 
-.capra-Menu-module-3G4VeG-menuItem {
+.capra-Menu-module-HIhAFW-menuItem {
   appearance: none;
   border-radius: var(--cds-radius-sm);
   color: var(--cds2-color-foreground-default);
@@ -3491,257 +3491,239 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   min-width: 152px;
   max-width: 256px;
   text-decoration: none;
-}
 
-.capra-Menu-module-3G4VeG-menuItemLeadingGutter {
-  margin-inline-end: var(--cds2-spacing-md);
-}
-
-.capra-Menu-module-3G4VeG-menuItemTrailingGutter {
-  margin-inline-start: var(--cds2-spacing-md);
-}
-
-.capra-Menu-module-3G4VeG-menuItem:hover:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--cds2-color-background-neutral-hover);
-}
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--cds2-color-background-neutral-hover);
+  }
 
-.capra-Menu-module-3G4VeG-menuItem:focus {
-  outline: none;
-}
+  &:focus {
+    outline: none;
+  }
 
-.capra-Menu-module-3G4VeG-menuItem[data-focus-visible="true"] {
-  outline: var(--cds2-border-focus);
-  outline-offset: var(--cds2-spacing-xs);
-}
+  &[data-focus-visible="true"] {
+    outline: var(--cds2-border-focus);
+    outline-offset: var(--cds2-spacing-xs);
+  }
 
-.capra-Menu-module-3G4VeG-menuItem:is(:disabled, [aria-disabled="true"]) {
-  color: var(--cds2-color-foreground-disabled);
-  cursor: not-allowed;
-}
+  &:is(:disabled, [aria-disabled="true"]) {
+    color: var(--cds2-color-foreground-disabled);
+    cursor: not-allowed;
 
-.capra-Menu-module-3G4VeG-menuItem:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemListItemShell, .capra-Menu-module-3G4VeG-menuItem:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-disabled);
-}
+    & .capra-Menu-module-HIhAFW-menuItemListItemShell, & .capra-Menu-module-HIhAFW-menuItemLabel, & .capra-Menu-module-HIhAFW-menuItemDescription, & .capra-Menu-module-HIhAFW-menuItemShortcut {
+      color: var(--cds2-color-foreground-disabled);
+    }
 
-.capra-Menu-module-3G4VeG-menuItem:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemShortcut {
-  background-color: var(--cds-color-background-secondary);
-  border: var(--cds2-border-default);
-  color: var(--cds2-color-foreground-disabled);
-}
+    & .capra-Menu-module-HIhAFW-menuItemShortcut {
+      background-color: var(--cds-color-background-secondary);
+      border: var(--cds2-border-default);
+    }
+  }
 
-.capra-Menu-module-3G4VeG-menuItem[data-variant="danger"]:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel, .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"]:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemShortcut {
-  color: var(--cds2-color-foreground-disabled);
-}
+  &[data-active="true"] {
+    background-color: var(--cds2-color-background-accent-selected);
+    color: var(--cds2-color-foreground-default);
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem:is(:disabled, [aria-disabled="true"]) {
-  color: var(--cds2-color-foreground-disabled);
-  background-color: #0000;
-}
+    & .capra-Menu-module-HIhAFW-menuItemLabel {
+      color: inherit;
+    }
+  }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-disabled);
-}
+  &[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--cds2-color-background-neutral-hover);
+    color: var(--cds2-color-foreground-default);
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"]:is(:disabled, [aria-disabled="true"]) {
-  color: var(--cds2-color-foreground-disabled);
-  background-color: #0000;
-  border-inline-end: none;
-}
+    & .capra-Menu-module-HIhAFW-menuItemLabel {
+      color: inherit;
+    }
+  }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"]:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-disabled);
-  font: var(--cds2-typography-body-md-normal);
-}
+  &[data-variant="danger"] {
+    color: var(--cds2-color-foreground-danger-default);
 
-.capra-Menu-module-3G4VeG-menuItem[data-active="true"] {
-  background-color: var(--cds2-color-background-accent-selected);
-  color: var(--cds2-color-foreground-default);
-}
+    & .capra-Menu-module-HIhAFW-menuItemLabel {
+      color: inherit;
+    }
 
-.capra-Menu-module-3G4VeG-menuItem[data-active="true"] .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: inherit;
-}
+    &:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-HIhAFW-menuItemShortcut {
+      border: var(--cds2-border-default);
+      color: var(--cds2-color-foreground-danger-default);
+    }
 
-.capra-Menu-module-3G4VeG-menuItem[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--cds2-color-background-neutral-hover);
-  color: var(--cds2-color-foreground-default);
-}
+    &:hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--cds2-color-background-danger-subtle);
+      color: var(--cds2-color-foreground-danger-default);
+    }
 
-.capra-Menu-module-3G4VeG-menuItem[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: inherit;
-}
+    &[data-active="true"] {
+      background-color: var(--cds2-color-background-danger-hover);
+      color: var(--cds2-color-foreground-danger-default);
 
-.capra-Menu-module-3G4VeG-menuItem[data-variant="danger"], .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"] .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-danger-default);
-}
+      &:hover:not(:disabled, [aria-disabled="true"]) {
+        background-color: var(--cds2-color-background-danger-subtle);
+      }
+    }
+  }
 
-.capra-Menu-module-3G4VeG-menuItem[data-variant="danger"]:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemShortcut {
-  border: var(--cds2-border-default);
-  color: var(--cds2-color-foreground-danger-default);
-}
+  &[data-indent="true"] {
+    padding-inline-start: var(--cds2-spacing-xl);
+  }
 
-.capra-Menu-module-3G4VeG-menuItem[data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--cds2-color-background-danger-subtle);
-  color: var(--cds2-color-foreground-danger-default);
-}
+  &[data-has-description="true"] {
+    & .capra-Menu-module-HIhAFW-menuItemTrailingGutter {
+      align-self: center;
+      height: auto !important;
+    }
 
-.capra-Menu-module-3G4VeG-menuItem[data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-danger-default);
-}
+    & .capra-Menu-module-HIhAFW-menuItemListItemShell {
+      align-items: start;
+    }
+  }
 
-.capra-Menu-module-3G4VeG-menuItem[data-variant="danger"].capra-Menu-module-3G4VeG-menuItem[data-active="true"] {
-  background-color: var(--cds2-color-background-danger-hover);
-  color: var(--cds2-color-foreground-danger-default);
+  & .capra-Menu-module-HIhAFW-menuItemListItemShell {
+    width: 100%;
+    color: inherit;
+    align-items: center;
+  }
 }
 
-.capra-Menu-module-3G4VeG-menuItem[data-variant="danger"].capra-Menu-module-3G4VeG-menuItem[data-active="true"] .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-danger-default);
-}
+.capra-Menu-module-HIhAFW-menuItemLeadingGutter {
+  margin-inline-end: var(--cds2-spacing-md);
 
-.capra-Menu-module-3G4VeG-menuItem[data-variant="danger"].capra-Menu-module-3G4VeG-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--cds2-color-background-danger-subtle);
-  color: var(--cds2-color-foreground-danger-default);
+  & .capra-Menu-module-HIhAFW-slot {
+    line-height: 0;
+  }
 }
 
-.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 {
-  color: var(--cds2-color-foreground-danger-default);
+.capra-Menu-module-HIhAFW-menuItemTrailingGutter {
+  margin-inline-start: var(--cds2-spacing-md);
 }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--cds2-color-background-danger-subtle);
-  color: var(--cds2-color-foreground-danger-default);
+.capra-Menu-module-HIhAFW-menuItemTrailingGroup {
+  align-items: center;
+  gap: var(--cds2-spacing-md);
+  display: inline-flex;
 }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-danger-default);
+.capra-Menu-module-HIhAFW-menuItemLabel {
+  color: inherit;
   font: var(--cds2-typography-body-md-normal);
 }
 
-.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"] {
-  background-color: var(--cds2-color-border-danger-focus);
-  border-inline-end: 2px solid var(--cds2-color-border-accent-default);
-  color: var(--cds2-color-foreground-danger-default);
-}
-
-.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 {
-  color: var(--cds2-color-foreground-danger-default);
-  font: var(--cds2-typography-body-md-semibold);
-}
-
-.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"]) {
-  background-color: var(--cds2-color-background-danger-subtle);
-  color: var(--cds2-color-foreground-danger-default);
-}
-
-.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 {
-  color: var(--cds2-color-foreground-danger-default);
-  font: var(--cds2-typography-body-md-semibold);
-}
-
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem:hover:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--cds2-color-background-neutral-hover);
+.capra-Menu-module-HIhAFW-menuItemDescription {
+  color: var(--cds2-color-foreground-default);
+  font: var(--cds2-typography-body-sm-normal);
 }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemShortcut {
+.capra-Menu-module-HIhAFW-menuItemShortcut {
+  background-color: var(--cds2-color-neutral-surface);
+  border: var(--cds2-border-default);
+  border-color: var(--cds2-color-border-neutral-subtle);
+  border-radius: var(--cds2-radius-md);
   color: var(--cds2-color-foreground-subtle);
+  font: var(--cds2-typography-body-sm-normal);
+  padding: 0 var(--cds2-spacing-sm);
+  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
 }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"] {
-  background-color: var(--cds2-color-background-accent-selected);
-  border-inline-end: 2px solid var(--cds2-color-border-accent-default);
-  color: var(--cds2-color-foreground-accent-default);
-}
-
-.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"] {
-  border-inline-end: none;
-}
-
-.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 {
-  font: var(--cds2-typography-body-md-normal);
-}
-
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"] .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-accent-default);
-  font: var(--cds2-typography-body-md-semibold);
-}
-
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--cds2-color-background-accent-selected);
-  color: var(--cds2-color-foreground-accent-default);
-}
+.capra-Menu-module-HIhAFW-menu[data-item-hover-appearance="accent"] {
+  & .capra-Menu-module-HIhAFW-menuItem {
+    &:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-HIhAFW-menuItemShortcut {
+      color: var(--cds2-color-foreground-subtle);
+    }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--cds2-color-border-focus);
-  border-inline-end: 2px solid var(--cds2-color-border-accent-default);
-  color: var(--cds2-color-foreground-accent-default);
-}
+    &:is(:disabled, [aria-disabled="true"]) {
+      color: var(--cds2-color-foreground-disabled);
+      background-color: #0000;
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-accent-default);
-  font: var(--cds2-typography-body-md-semibold);
-}
+      &[data-active="true"] {
+        background-color: #0000;
+        border-inline-end: none;
+      }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-has-submenu][data-open]:hover:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--cds2-color-background-accent-selected);
-  color: var(--cds2-color-foreground-accent-default);
-}
+      &[data-active="true"] .capra-Menu-module-HIhAFW-menuItemLabel {
+        font: var(--cds2-typography-body-md-normal);
+      }
+    }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"] .capra-Menu-module-3G4VeG-menuItem[data-has-submenu][data-open]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
-  color: var(--cds2-color-foreground-accent-default);
-}
+    &[data-active="true"] {
+      background-color: var(--cds2-color-background-accent-selected);
+      border-inline-end: 2px solid var(--cds2-color-border-accent-default);
+      color: var(--cds2-color-foreground-accent-default);
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"][data-item-active-accent-bar="false"] .capra-Menu-module-3G4VeG-menuItem[data-has-submenu][data-open], .capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"][data-item-active-accent-bar="false"] .capra-Menu-module-3G4VeG-menuItem[data-has-submenu][data-open]:hover:not(:disabled, [aria-disabled="true"]) {
-  border-inline-end: none;
-}
+      & .capra-Menu-module-HIhAFW-menuItemLabel {
+        color: var(--cds2-color-foreground-accent-default);
+        font: var(--cds2-typography-body-md-semibold);
+      }
 
-.capra-Menu-module-3G4VeG-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-3G4VeG-menuItem[data-has-submenu][data-open] .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-has-submenu][data-open]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-3G4VeG-menuItemLabel {
-  font: var(--cds2-typography-body-md-normal);
-}
+      &:hover:not(:disabled, [aria-disabled="true"]) {
+        background-color: var(--cds2-color-background-accent-selected);
+        color: var(--cds2-color-foreground-accent-default);
+      }
+    }
 
-.capra-Menu-module-3G4VeG-section {
-  display: contents;
-}
+    &[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--cds2-color-border-focus);
+      border-inline-end: 2px solid var(--cds2-color-border-accent-default);
+      color: var(--cds2-color-foreground-accent-default);
 
-.capra-Menu-module-3G4VeG-menuItem[data-indent="true"] {
-  padding-inline-start: var(--cds2-spacing-xl);
-}
+      & .capra-Menu-module-HIhAFW-menuItemLabel {
+        color: var(--cds2-color-foreground-accent-default);
+        font: var(--cds2-typography-body-md-semibold);
+      }
 
-.capra-Menu-module-3G4VeG-menuItemLabel {
-  color: inherit;
-  font: var(--cds2-typography-body-md-normal);
-}
+      &:hover {
+        background-color: var(--cds2-color-background-accent-selected);
+      }
+    }
 
-.capra-Menu-module-3G4VeG-menuItemDescription {
-  color: var(--cds2-color-foreground-default);
-  font: var(--cds2-typography-body-sm-normal);
-}
+    &[data-variant="danger"] {
+      &:hover:not(:disabled, [aria-disabled="true"]) {
+        background-color: var(--cds2-color-background-danger-subtle);
+        color: var(--cds2-color-foreground-danger-default);
+
+        & .capra-Menu-module-HIhAFW-menuItemLabel {
+          font: var(--cds2-typography-body-md-normal);
+        }
+      }
+
+      &[data-active="true"] {
+        background-color: var(--cds2-color-border-danger-focus);
+        border-inline-end: 2px solid var(--cds2-color-border-accent-default);
+        color: var(--cds2-color-foreground-danger-default);
+
+        & .capra-Menu-module-HIhAFW-menuItemLabel {
+          color: var(--cds2-color-foreground-danger-default);
+          font: var(--cds2-typography-body-md-semibold);
+        }
+
+        &:hover:not(:disabled, [aria-disabled="true"]) {
+          background-color: var(--cds2-color-background-danger-subtle);
+        }
+      }
+    }
+  }
 
-.capra-Menu-module-3G4VeG-menuItem[data-has-description="true"] .capra-Menu-module-3G4VeG-menuItemTrailingGutter {
-  align-self: center;
-  height: auto !important;
-}
+  &[data-item-active-accent-bar="false"] {
+    & .capra-Menu-module-HIhAFW-menuItem[data-active="true"], & .capra-Menu-module-HIhAFW-menuItem[data-has-submenu][data-open] {
+      border-inline-end: none;
+    }
+  }
 
-.capra-Menu-module-3G4VeG-menuItemTrailingGroup {
-  align-items: center;
-  gap: var(--cds2-spacing-md);
-  display: inline-flex;
+  &[data-item-active-label-semibold="false"] {
+    & .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 {
+      font: var(--cds2-typography-body-md-normal);
+    }
+  }
 }
 
-.capra-Menu-module-3G4VeG-menuItemShortcut {
-  background-color: var(--cds2-color-neutral-surface);
-  border: var(--cds2-border-default);
-  border-color: var(--cds2-color-border-neutral-subtle);
-  border-radius: var(--cds2-radius-md);
-  color: var(--cds2-color-foreground-subtle);
-  font: var(--cds2-typography-body-sm-normal);
-  padding: 0 var(--cds2-spacing-sm);
-  white-space: nowrap;
-  justify-content: center;
-  align-items: center;
-  display: inline-flex;
+.capra-Menu-module-HIhAFW-section {
+  display: contents;
 }
 
-.capra-Menu-module-3G4VeG-header {
+.capra-Menu-module-HIhAFW-header {
   box-sizing: border-box;
   color: var(--cds2-color-foreground-default);
   font: var(--cds2-typography-body-md-semibold);
@@ -3752,7 +3734,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   display: flex;
 }
 
-.capra-Menu-module-3G4VeG-divider {
+.capra-Menu-module-HIhAFW-divider {
   border: none;
   border-block-start: var(--cds2-border-default);
   border-color: var(--cds2-color-border-neutral-subtle);
@@ -3762,10 +3744,6 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   width: 100%;
   padding: 0;
 }
-
-.capra-Menu-module-3G4VeG-menuItemListItemShell {
-  width: 100%;
-}
 .capra-TabNav-module-pLDWhG-root {
   flex-direction: column;
   width: 100%;

package/docs/core-menu--usage.md

@@ -14,5 +14,5 @@
 | `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 |
 | `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 |
 | `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' |
-| `popoverOffset` | `number` | No | 0 | Gap along the main axis between the trigger and the menu panel (React Aria `Popover` `offset`).<br>Use a small value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav).<br>@default 0 |
+| `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 |
 | `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 |

package/docs/core-tabnav--design.md

@@ -71,6 +71,8 @@ TabNav uses link-based navigation. The following apply:
 * Active nav links have `aria-current="page"` set.
 * Tabs that contain a dropdown use a button with `aria-haspopup="menu"` and `aria-expanded` set.
 * Dropdown menu items use the Menu component with appropriate roles.
+* The tab bar does not add outer spacing for surrounding layout. Handle page-level spacing where `TabNav` is composed.
+* Interactive tabs and sub-items keep the `.tab` styles on the focusable element so hover, active, and focus treatments match the hit target.
 
 ### Orientation
 

package/docs/core-tabnav--usage.md

@@ -8,7 +8,8 @@ TabNav provides a horizontal or vertical navigation styled as tabs. Tab items ar
 | `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `activeKey` | `string` | No | `--` | Key of the currently active tab (for visual styling). Typically derived from the current URL. |
-| `onTabClick` | `(key: string, event: React.MouseEvent) => void` | No | `--` | Callback when a tab link is clicked (before navigation). |
+| `onTabPress` | `(key: string) => void` | No | `--` | Callback when a tab link is pressed (before navigation). |
+| `onTabClick` | `(key: string, event: React.MouseEvent) => void` | No | `--` | Callback when a tab link is clicked (before navigation).<br>@deprecated Use `onTabPress` instead. |
 | `items` | `TabNavItemType[]` | Yes | `--` | Tab items configuration. |
 | `tabPlacement` | `(typeof tabNavPlacements)[number]` | No | 'horizontal' | Orientation of the tab bar: horizontal (bottom) or vertical (left).<br>@default 'horizontal' |
 | `centered` | `boolean` | No | false | Whether to center the tabs.<br>@default false |
@@ -19,7 +20,7 @@ TabNav provides a horizontal or vertical navigation styled as tabs. Tab items ar
 ## Usage
 
 ```tsx
-import { TabNav } from '@capra/core';
+import { RouterProvider, TabNav } from '@capra/core';
 
 // Basic usage - tab items are links that redirect to URLs
 <TabNav
@@ -62,4 +63,21 @@ import { TabNav } from '@capra/core';
     { key: 'settings', name: 'Settings', href: '/settings' },
   ]}
 />
-```
+
+// With client-side routing
+<RouterProvider navigate={navigate}>
+  <TabNav
+    activeKey={currentPath}
+    items={[
+      { key: 'overview', name: 'Overview', href: '/overview' },
+      {
+        key: 'settings',
+        name: 'Settings',
+        subItems: [{ key: 'profile', name: 'Profile', href: '/settings/profile' }],
+      },
+    ]}
+  />
+</RouterProvider>
+```
+
+When the app provides `RouterProvider`, `TabNav` passes `href` and the rest of `RoutedLinkProps` through to navigable tabs and sub-items so routing stays client-side.

package/docs/history-changelogs-capra-core--docs.md

@@ -1,5 +1,21 @@
 # History/Changelogs/@capra-core
 
+### 1.12.0
+
+#### Minor Changes
+
+* [1fdb8d2](https://bitbucket.org/cribl/capra-ui/commits/1fdb8d2): Add `TabNav` `onTabPress` for sub-item client-side routing support.
+
+#### Patch Changes
+
+* [9550263](https://bitbucket.org/cribl/capra-ui/commits/9550263): Fix Menu submenu viewport clipping by enabling popover flip when nested panels would overflow the screen edge.
+* [9550263](https://bitbucket.org/cribl/capra-ui/commits/9550263): Fix Menu leading icon vertical alignment with item labels.
+* [b4285e0](https://bitbucket.org/cribl/capra-ui/commits/b4285e0): Fix menu description text color when disabled.
+* [9550263](https://bitbucket.org/cribl/capra-ui/commits/9550263): Fix Menu danger item icons so leading icons inherit the same semantic foreground color as the label.
+* Updated dependencies [928c9a8](https://bitbucket.org/cribl/capra-ui/commits/928c9a8) — added new icons: AddressBook, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDownLeftAndArrowUpRightToCenter, ArrowTurnDownLeft, ArrowUpRightAndArrowDownLeftFromCenter, ArrowsMaximize, ArrowsMinimize, At, Backward, BackwardStep, BadgeCheck, BagShopping, Ban, Barcode, Bold, Bolt, Book, BookOpen, BoxArchive, BracketsCurly, BriefcaseMedical, Bug, Bullhorn, Bullseye, Car, CaretDownSolid, CaretLeftSolid, CaretRightSolid, CaretUpSolid, CartShopping, ChartEvents, ChartFunnel, ChartMap, ChartScatter, ChartSingle, Check, CircleCheck, CircleCheckSolid, CircleExclamation, CircleInfo, CircleInfoSolid, CirclePlusSolid, CircleQuestion, CircleR, CircleStopSolid, CircleUpFilled, CircleXmarkSolid, Code, CodeBlock, CodeBranch, CodeFork, CodeMerge, CodePullRequest, Compass, Copyright, CriblOutlined, Crown, CupTogo, Database, DiagramSankey, EmptySet, FaceFrown, FaceMeh, FaceSmile, File, FileLines, FilePlusMinus, Fire, Flask, Forward, ForwardStep, GaugeSimple, Gift, GitAlt, Grid2Plus, GripDotsVertical, HardDrive, Headphones, Heart, HeartSolid, HibernatingCloud, Highlighter, Hourglass, IdCard, Image, Italic, Keyboard, Lightbulb, LinkSlash, ListOrdered, ListTree, Lock, Mars, Message, Messages, Microphone, Mobile, MugHot, Notebook, Outbound, Palette, Paperclip, Pause, Play, Print, Qrcode, Robot, RocketLaunch, Scissors, Share, Shirt, SlashForward, Sliders, SlidersUp, SortAlphaAscending, SortAlphaDescending, SortDown, SortDownSolid, SortNumericAscending, SortNumericDescending, SortOutlined, SortUp, SortUpSolid, SpinnerThird, SquareExclamation, SquareExclamationSolid, Star, StarSolid, Store, Strikethrough, Tablet, Tag, ThumbsDown, ThumbsDownSolid, ThumbsUp, ThumbtackAngleFilled, ThumbtackAngleOutlined, Token, Trash, TriangleExclamation, TriangleExclamationSolid, Trophy, Underline, Venus, Video, Volume
+* Updated dependencies [3572a4f](https://bitbucket.org/cribl/capra-ui/commits/3572a4f) — Updated fill color for HibernatingCloud icon
+  * @capra/icons\@1.10.0
+
 ### 1.11.1
 
 #### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capra/core",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "description": "Core React components for the Capra design system",
@@ -35,7 +35,7 @@
   "dependencies": {
     "react-aria": "^3.48.0",
     "react-aria-components": "^1.17.0",
-    "@capra/icons": "^1.9.0"
+    "@capra/icons": "^1.10.0"
   },
   "devDependencies": {
     "clsx": "^2.1.1",
@@ -43,9 +43,9 @@
     "antd": "4.24.16",
     "storybook": "^10.4.6",
     "tsdown": "^0.22.7",
+    "@private/linting": "^0.0.1",
     "@private/building": "^0.1.0",
     "@capra/theme": "^1.4.0",
-    "@private/linting": "^0.0.1",
     "@private/stories": "^0.0.0",
     "@private/testing": "^0.0.7"
   },