@capra/core 1.8.2 → 1.10.0

package/dist/style.css

@@ -628,22 +628,33 @@
   align-items: center;
   display: flex;
 }
-.capra-Badge-module-yecu4W-badge {
+.capra-Badge-module-_3WihW-badge {
   border: var(--cds2-border-badge);
+  border-color: var(--cds2-color-background-application);
   border-radius: var(--cds2-radius-full);
   font: var(--cds2-typography-body-xs-semibold);
-  padding: 0 var(--cds2-spacing-sm);
-  height: var(--cds2-dimension-component-sm);
-  min-width: var(--cds2-dimension-component-sm);
   justify-content: center;
   align-items: center;
   width: fit-content;
   display: flex;
 
+  &[data-size="md"] {
+    height: var(--cds2-dimension-component-sm);
+    min-width: var(--cds2-dimension-component-sm);
+    padding: 0 var(--cds2-spacing-sm);
+  }
+
+  &[data-size="sm"] {
+    height: var(--cds2-dimension-component-xs);
+    min-width: var(--cds2-dimension-component-xs);
+    padding: 0 var(--cds2-spacing-xs);
+  }
+
   &[data-variant="dot"] {
     height: var(--cds2-dimension-icon-xs);
     min-width: unset;
     width: var(--cds2-dimension-icon-xs);
+    padding: 0;
   }
 
   &[data-appearance="info"] {
@@ -665,86 +676,88 @@
     background-color: var(--cds2-color-background-danger-solid-default);
     color: var(--cds2-color-foreground-danger-contrast);
   }
+
+  &[data-appearance="neutral"] {
+    background-color: var(--cds2-color-background-neutral-solid-default);
+    color: var(--cds2-color-foreground-neutral-contrast);
+  }
 }
 
-.capra-Badge-module-yecu4W-base {
+.capra-Badge-module-_3WihW-base {
+  --_badge-offset-x: 0px;
+  --_badge-offset-y: 0px;
   width: fit-content;
   display: inline-block;
   position: relative;
 
-  & .capra-Badge-module-yecu4W-badge {
+  & .capra-Badge-module-_3WihW-badge {
+    top: var(--_badge-offset-y);
+    right: var(--_badge-offset-x);
     position: absolute;
-    top: 0;
-    right: 0;
     transform: translate(50%, -50%);
   }
 }
-.capra-ListItem-module-VUh15W-listItem {
-  color: var(--cds2-color-foreground-default);
-  font: var(--cds2-typography-body-md-normal);
+.capra-ListItem-module-QN6vFW-__listItem-layout {
   padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
   gap: var(--cds2-spacing-md);
   grid-template-columns: auto 1fr auto;
-  grid-template-areas: "capra-ListItem-module-VUh15W-leading capra-ListItem-module-VUh15W-content capra-ListItem-module-VUh15W-trailing";
-  width: 100%;
+  grid-template-areas: "capra-ListItem-module-QN6vFW-leading capra-ListItem-module-QN6vFW-content capra-ListItem-module-QN6vFW-trailing";
   display: grid;
 }
 
-.capra-ListItem-module-VUh15W-slots:not(:empty):not([data-trailing="true"]) {
-  margin-inline-end: var(--cds-spacing-md);
-}
-
-.capra-ListItem-module-VUh15W-slots[data-trailing="true"]:not(:empty) {
-  margin-inline-start: var(--cds-spacing-md);
+.capra-ListItem-module-QN6vFW-listItem {
+  color: var(--cds2-color-foreground-default);
+  font: var(--cds2-typography-body-md-normal);
+  width: 100%;
 }
 
-.capra-ListItem-module-VUh15W-slots {
+.capra-ListItem-module-QN6vFW-slots {
   font: var(--cds2-typography-body-md-normal);
   align-items: center;
   gap: var(--cds2-spacing-md);
   min-height: var(--cds2-dimension-component-sm);
-  grid-column: capra-ListItem-module-VUh15W-leading;
+  grid-column: capra-ListItem-module-QN6vFW-leading;
   display: flex;
 
   &[data-trailing="true"] {
-    grid-column: capra-ListItem-module-VUh15W-trailing;
+    grid-column: capra-ListItem-module-QN6vFW-trailing;
   }
 }
 
-.capra-ListItem-module-VUh15W-slot {
+.capra-ListItem-module-QN6vFW-slot {
   min-width: var(--cds2-dimension-component-xs);
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.capra-ListItem-module-VUh15W-content {
+.capra-ListItem-module-QN6vFW-content {
   column-gap: var(--cds2-spacing-md);
-  grid-template: "capra-ListItem-module-VUh15W-label capra-ListItem-module-VUh15W-suffix"
-                 "capra-ListItem-module-VUh15W-description capra-ListItem-module-VUh15W-description"
+  grid-template: "capra-ListItem-module-QN6vFW-label capra-ListItem-module-QN6vFW-suffix"
+                 "capra-ListItem-module-QN6vFW-description capra-ListItem-module-QN6vFW-description"
                  / 1fr auto;
-  grid-column: capra-ListItem-module-VUh15W-content;
+  grid-column: capra-ListItem-module-QN6vFW-content;
   display: grid;
 }
 
-.capra-ListItem-module-VUh15W-label {
+.capra-ListItem-module-QN6vFW-label {
   color: var(--cds2-color-foreground-default);
   font: var(--cds2-typography-body-md-normal);
-  grid-area: capra-ListItem-module-VUh15W-label;
+  grid-area: capra-ListItem-module-QN6vFW-label;
   overflow: hidden;
 }
 
-.capra-ListItem-module-VUh15W-suffix {
+.capra-ListItem-module-QN6vFW-suffix {
   color: var(--cds2-color-foreground-subtle);
   font: var(--cds2-typography-body-sm-normal);
-  grid-area: capra-ListItem-module-VUh15W-suffix;
+  grid-area: capra-ListItem-module-QN6vFW-suffix;
   justify-self: end;
 }
 
-.capra-ListItem-module-VUh15W-description {
+.capra-ListItem-module-QN6vFW-description {
   color: var(--cds2-color-foreground-subtle);
   font: var(--cds2-typography-body-sm-normal);
-  grid-area: capra-ListItem-module-VUh15W-description;
+  grid-area: capra-ListItem-module-QN6vFW-description;
 }
 .capra-Pill-module-xa3pfa-pill {
   align-items: center;
@@ -3777,21 +3790,21 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
 .capra-Menu-module-3G4VeG-menuItemListItemShell {
   width: 100%;
 }
-.capra-TabNav-module-qqfvea-root {
+.capra-TabNav-module-pLDWhG-root {
   flex-direction: column;
   width: 100%;
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] {
   flex-direction: column-reverse;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] {
   flex-direction: row;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tabBar {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tabBar {
   border-block-end: none;
   border-inline-end: 1px solid var(--cds2-color-border-neutral-subtle);
   flex-direction: column;
@@ -3800,7 +3813,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   padding-inline-end: var(--cds2-spacing-lg);
 }
 
-.capra-TabNav-module-qqfvea-tabBar {
+.capra-TabNav-module-pLDWhG-tabBar {
   justify-content: space-between;
   align-items: center;
   gap: var(--cds2-spacing-md);
@@ -3809,41 +3822,41 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-tabBar:has(.capra-TabNav-module-qqfvea-extraContent) {
+.capra-TabNav-module-pLDWhG-tabBar:has(.capra-TabNav-module-pLDWhG-extraContent) {
   gap: var(--cds2-spacing-xl);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tabBar {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tabBar {
   border: none;
   margin-block-start: 0;
 }
 
-.capra-TabNav-module-qqfvea-tabList {
+.capra-TabNav-module-pLDWhG-tabList {
   gap: var(--cds2-spacing-xl);
   flex-flow: wrap;
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-root[data-wrap="nowrap"] .capra-TabNav-module-qqfvea-tabList {
+.capra-TabNav-module-pLDWhG-root[data-wrap="nowrap"] .capra-TabNav-module-pLDWhG-tabList {
   flex-wrap: nowrap;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tabList {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tabList {
   flex-flow: column;
   gap: 0;
   width: 100%;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tabList > :not(:last-child), .capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tabGroup > :not(:last-child), .capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-subTabList .capra-TabNav-module-qqfvea-subTabListItem:not(:last-child) {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tabList > :not(:last-child), .capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tabGroup > :not(:last-child), .capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-subTabList .capra-TabNav-module-pLDWhG-subTabListItem:not(:last-child) {
   margin-block-end: var(--cds2-spacing-md);
 }
 
-.capra-TabNav-module-qqfvea-root[data-centered="true"] .capra-TabNav-module-qqfvea-tabList {
+.capra-TabNav-module-pLDWhG-root[data-centered="true"] .capra-TabNav-module-pLDWhG-tabList {
   flex: 1;
   justify-content: center;
 }
 
-.capra-TabNav-module-qqfvea-tab {
+.capra-TabNav-module-pLDWhG-tab {
   appearance: none;
   cursor: pointer;
   justify-content: center;
@@ -3872,59 +3885,59 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   }
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab {
   border-bottom: 2px solid #0000;
   transition: none;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
   border-bottom-color: var(--cds2-color-border-accent-default);
-  color: var(--cds2-color-foreground-neutral-default) !important;
+  color: var(--cds2-color-foreground-accent-default) !important;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab[data-active="true"][data-disabled="true"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab[data-active="true"][data-disabled="true"] {
   border-bottom-color: #0000;
 }
 
-.capra-TabNav-module-qqfvea-tab[data-active="true"] {
+.capra-TabNav-module-pLDWhG-tab[data-active="true"] {
   color: var(--cds2-color-foreground-accent-default);
 }
 
-.capra-TabNav-module-qqfvea-tabIcon {
+.capra-TabNav-module-pLDWhG-tabIcon {
   align-items: center;
   display: inline-flex;
 }
 
-.capra-TabNav-module-qqfvea-tabLabel {
+.capra-TabNav-module-pLDWhG-tabLabel {
   white-space: nowrap;
 }
 
-.capra-TabNav-module-qqfvea-indentSpacer {
+.capra-TabNav-module-pLDWhG-indentSpacer {
   flex-shrink: 0;
   width: 16px;
   min-width: 16px;
 }
 
-.capra-TabNav-module-qqfvea-dropdownIcon {
+.capra-TabNav-module-pLDWhG-dropdownIcon {
   color: inherit;
   flex-shrink: 0;
   align-items: center;
   display: inline-flex;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-dropdownIcon {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-dropdownIcon {
   margin-inline-start: auto;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab[data-expanded="false"] .capra-TabNav-module-qqfvea-dropdownIcon svg {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab[data-expanded="false"] .capra-TabNav-module-pLDWhG-dropdownIcon svg {
   transform: rotate(-90deg);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab[data-expanded="true"] .capra-TabNav-module-qqfvea-dropdownIcon svg {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab[data-expanded="true"] .capra-TabNav-module-pLDWhG-dropdownIcon svg {
   transform: none;
 }
 
-.capra-TabNav-module-qqfvea-tabGroup {
+.capra-TabNav-module-pLDWhG-tabGroup {
   flex-direction: column;
   align-items: stretch;
   gap: 0;
@@ -3932,7 +3945,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-subTabList {
+.capra-TabNav-module-pLDWhG-subTabList {
   flex-flow: column;
   gap: 0;
   width: 100%;
@@ -3942,20 +3955,20 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-subTabListItem {
+.capra-TabNav-module-pLDWhG-subTabListItem {
   margin: 0;
   padding: 0;
 }
 
-.capra-TabNav-module-qqfvea-subTab {
+.capra-TabNav-module-pLDWhG-subTab {
   width: 100%;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab[data-active="true"], .capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab[data-submenu-open="true"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab[data-active="true"], .capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab[data-submenu-open="true"] {
   border-bottom-color: var(--cds2-color-border-accent-default);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab {
   border-bottom: none;
   padding-block: 0;
   padding-inline: var(--cds2-spacing-md);
@@ -3964,42 +3977,42 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   width: 100%;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab[data-active="true"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab[data-active="true"] {
   background-color: var(--cds2-color-background-accent-subtle);
   border-inline-end-color: var(--cds2-color-border-accent-default);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
   background-color: var(--cds2-color-background-accent-selected);
   border-inline-end-color: var(--cds2-color-border-accent-strong);
   color: var(--cds2-color-foreground-accent-default);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab[data-active="true"][data-disabled="true"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab[data-active="true"][data-disabled="true"] {
   background-color: #0000;
   border-inline-end-color: #0000;
 }
 
-.capra-TabNav-module-qqfvea-extraContent {
+.capra-TabNav-module-pLDWhG-extraContent {
   align-items: center;
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-panel {
+.capra-TabNav-module-pLDWhG-panel {
   font: var(--cds2-typography-body-md-normal);
   color: var(--cds2-color-foreground-default);
   flex: 1;
   padding-block-start: var(--cds2-spacing-lg);
 }
 
-.capra-TabNav-module-qqfvea-subMenu {
+.capra-TabNav-module-pLDWhG-subMenu {
   padding: var(--cds2-spacing-xs);
   min-width: 160px;
   margin: 0;
   list-style: none;
 }
 
-.capra-TabNav-module-qqfvea-subMenuItem {
+.capra-TabNav-module-pLDWhG-subMenuItem {
   appearance: none;
   text-align: start;
   width: 100%;
@@ -4027,7 +4040,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   }
 }
 
-.capra-TabNav-module-qqfvea-subMenuItemActive {
+.capra-TabNav-module-pLDWhG-subMenuItemActive {
   background-color: var(--cds2-color-background-accent-subtle);
   color: var(--cds2-color-foreground-accent-default);
   font: var(--cds2-typography-body-sm-semibold);
@@ -4129,3 +4142,169 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   gap: var(--cds2-spacing-md);
   display: inline-flex;
 }
+.capra-ListItem-module-QN6vFW-__listItem-layout {
+  padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
+  gap: var(--cds2-spacing-md);
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: "capra-ListItem-module-QN6vFW-leading capra-ListItem-module-QN6vFW-content capra-ListItem-module-QN6vFW-trailing";
+  display: grid;
+}
+
+.capra-ListItem-module-QN6vFW-listItem {
+  color: var(--cds2-color-foreground-default);
+  font: var(--cds2-typography-body-md-normal);
+  width: 100%;
+}
+
+.capra-ListItem-module-QN6vFW-slots {
+  font: var(--cds2-typography-body-md-normal);
+  align-items: center;
+  gap: var(--cds2-spacing-md);
+  min-height: var(--cds2-dimension-component-sm);
+  grid-column: capra-ListItem-module-QN6vFW-leading;
+  display: flex;
+
+  &[data-trailing="true"] {
+    grid-column: capra-ListItem-module-QN6vFW-trailing;
+  }
+}
+
+.capra-ListItem-module-QN6vFW-slot {
+  min-width: var(--cds2-dimension-component-xs);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.capra-ListItem-module-QN6vFW-content {
+  column-gap: var(--cds2-spacing-md);
+  grid-template: "capra-ListItem-module-QN6vFW-label capra-ListItem-module-QN6vFW-suffix"
+                 "capra-ListItem-module-QN6vFW-description capra-ListItem-module-QN6vFW-description"
+                 / 1fr auto;
+  grid-column: capra-ListItem-module-QN6vFW-content;
+  display: grid;
+}
+
+.capra-ListItem-module-QN6vFW-label {
+  color: var(--cds2-color-foreground-default);
+  font: var(--cds2-typography-body-md-normal);
+  grid-area: capra-ListItem-module-QN6vFW-label;
+  overflow: hidden;
+}
+
+.capra-ListItem-module-QN6vFW-suffix {
+  color: var(--cds2-color-foreground-subtle);
+  font: var(--cds2-typography-body-sm-normal);
+  grid-area: capra-ListItem-module-QN6vFW-suffix;
+  justify-self: end;
+}
+
+.capra-ListItem-module-QN6vFW-description {
+  color: var(--cds2-color-foreground-subtle);
+  font: var(--cds2-typography-body-sm-normal);
+  grid-area: capra-ListItem-module-QN6vFW-description;
+}
+
+.capra-Tree-module--hXpBa-root {
+  width: 100%;
+  padding: var(--cds2-spacing-xs);
+}
+
+.capra-Tree-module--hXpBa-item {
+  border-radius: var(--cds2-radius-md);
+  color: var(--cds2-color-foreground-default);
+  min-height: var(--cds2-dimension-component-sm);
+
+  &[data-hovered="true"]:not([data-disabled="true"]) {
+    background-color: var(--cds2-color-background-accent-hover);
+  }
+
+  &[data-focus-visible="true"] {
+    outline: var(--cds2-border-focus);
+    outline-offset: var(--cds2-spacing-xs);
+  }
+
+  &[data-disabled="true"] {
+    color: var(--cds2-color-foreground-disabled);
+    cursor: not-allowed;
+
+    & .capra-Tree-module--hXpBa-itemLabel, & .capra-Tree-module--hXpBa-itemSuffix, & .capra-Tree-module--hXpBa-chevronButton {
+      color: var(--cds2-color-foreground-disabled);
+    }
+  }
+}
+
+.capra-Tree-module--hXpBa-indentSpacer {
+  flex: 0 0 var(--cds2-dimension-component-xs);
+  height: var(--cds2-dimension-component-md);
+  width: var(--cds2-dimension-component-xs);
+  margin-block: calc(-1 * var(--cds2-spacing-sm));
+  display: block;
+  position: relative;
+
+  &:before {
+    content: "";
+    border-right: var(--cds2-border-default);
+    z-index: -1;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: calc(50% - .5px);
+  }
+}
+
+.capra-Tree-module--hXpBa-chevronButton {
+  all: unset;
+  border-radius: var(--cds2-radius-md);
+  cursor: pointer;
+  flex: 0 0 var(--cds2-dimension-component-sm);
+  height: var(--cds2-dimension-component-sm);
+  width: var(--cds2-dimension-component-sm);
+  margin: calc(-1 * var(--cds2-spacing-sm));
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+
+  &[data-focus-visible="true"] {
+    outline: var(--cds2-border-focus);
+    outline-offset: var(--cds2-spacing-xs);
+  }
+}
+
+.capra-Tree-module--hXpBa-chevronIcon {
+  transition: transform var(--cds2-motion-duration-medium-2) ease;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.capra-Tree-module--hXpBa-item[data-expanded="true"] .capra-Tree-module--hXpBa-chevronIcon {
+  transform: rotate(90deg);
+}
+
+.capra-Tree-module--hXpBa-selectionCheckbox {
+  flex: 0 0 var(--cds2-dimension-component-xs);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.capra-Tree-module--hXpBa-itemContent {
+  grid-template-areas: "capra-Tree-module--hXpBa-label capra-Tree-module--hXpBa-suffix";
+  grid-template-rows: unset;
+  align-items: center;
+}
+
+.capra-Tree-module--hXpBa-itemLabel {
+  color: var(--cds2-color-foreground-default);
+}
+
+.capra-Tree-module--hXpBa-itemSuffix {
+  color: var(--cds2-color-foreground-subtle);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .capra-Tree-module--hXpBa-chevronIcon {
+    transition: none;
+  }
+}

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

@@ -10,4 +10,6 @@ Alerts are used to communicate important information to the user.
 | `children` | `React.ReactNode` | Yes | `--` | The description of the alert. This is required.<br><br>@required |
 | `action` | `{     label: string;     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;   } \| React.ReactElement` | No | `--` | The configuration of the action button. The object must contain a label displayed on the button and an onClick callback function. This is optional.<br><br>When the object is not provided, the alert will not render the action button. |
 | `onDismiss` | `true \| (() => void)` | No | `--` | Optional function to call when the user dismisses the alert.<br><br>If this is not provided, the alert will not render the dismiss button.<br><br>Alerts with `appearance="danger"` cannot be dismissed and will not render the dismiss button.<br><br>**Integration note:** while the `Alert` will handle its own dismissal, this is non-persistent.<br>Persistent dismissal should be handled by the parent component. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `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. |

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

@@ -7,6 +7,8 @@
 | `isActive` | `boolean` | No | `--` | Whether the anchor is active. |
 | `isDisabled` | `boolean` | No | `--` | Whether the anchor is disabled. |
 | `as` | `As` | No | `--` | The underlying element rendered by the anchor. Defaults to `a`. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `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. |
 
 ## Usage

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

@@ -12,6 +12,8 @@ AutocompleteField combines a text field with a suggestions list. Consumers can s
 | `items` | `AutocompleteItem[]` | No | `--` | The items to display in the dropdown. |
 | `value` | `AutocompleteItem['value']` | No | `--` | The value of the input. |
 | `shouldAutoSizeDropdown` | `boolean` | No | `--` | Whether to automatically size the dropdown to the width of the input. Defaults to `true` |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `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. |
 | `helperText` | `string` | No | `--` | Helper text below the field. Replaced by error message when status is error. Use for requirements, disclaimers. |
 | `label` | `string` | No | `--` | Label for the field. Required for accessibility; use aria-label if another element acts as label. |

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

@@ -10,7 +10,7 @@ A label is required to indicate the number of notifications.
 
 ### Size
 
-Badges come in 3 sizes to support ones, tens, and values above 100.
+Badges support `md` and `sm` sizes. Use `sm` when composing with smaller controls, such as icon-only buttons, while keeping `md` for standard button and navigation attachments.
 
 ### Dot
 
@@ -26,7 +26,11 @@ Using color as the only means to communicate status should be avoided (WCAG SC 1
 
 ### Corner attachment
 
-Badges are placed in the top-right of the parent component to avoid obscuring the parent content.
+Badges are placed in the top-right of the parent component to avoid obscuring the parent content. Use `BadgeLayout`'s `offset` prop to nudge the badge inward or outward when the anchor component has a tighter visual target.
+
+### Icon button composition
+
+Use `size="sm"` when attaching badges to `IconButton`. Tertiary icon buttons may need a small `offset` so the badge overlaps the icon rather than floating too far outside the control.
 
 ### Inline
 
@@ -44,7 +48,7 @@ Do:
 
 * Do cap displayed values at 99 with a "99+" label.
 * Do use the dot variant for simple presence indicators.
-* Do include count context in the parent's accessible label.
+* Do associate interactive anchors with badge count context using `aria-describedby`.
 
 Don't:
 
@@ -52,11 +56,12 @@ Don't:
 * Don't use Badge for labels or tags — use Tag.
 * Don't place Badge on non-interactive decorative elements.
 * Don't use Badge colors as the only method to communicate status.
+* Don't include badge count context in the anchor's `aria-label`.
 
 ## Accessibility
 
-* The badge is a nested static element; it is announced as part of its parent.
-* The parent element's accessible label should include the count context (e.g., "Notifications, 5 unread").
+* Badge requires an accessible label via `aria-label` or `aria-labelledby` that describes the count or status (e.g., "76 unread").
+* When composing with interactive controls such as `Button` or `IconButton`, set `aria-describedby` on the anchor to the badge's `id`. Keep the anchor's accessible name limited to the control action or label (e.g., "Messages"), not the badge content.
 * Use `aria-live="polite"` on the parent for dynamic badge updates.
 
 ## Content

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

@@ -4,10 +4,13 @@ Badges display an indicator/counter on an associated component.
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `variant` | `'counter' \| 'dot'` | No | `--` | The variant of the badge. 'counter' displays a count, 'dot' displays only a dot.<br>@default 'counter' |
-| `appearance` | `'danger' \| 'info' \| 'success' \| 'warning'` | No | 'danger' | Controls the Badge color.<br>@default 'danger' |
+| `variant` | `'counter' \| 'dot'` | No | 'counter' | The variant of the badge. 'counter' displays a count, 'dot' displays only a dot.<br>@default 'counter' |
+| `appearance` | `'danger' \| 'info' \| 'success' \| 'warning' \| 'neutral'` | No | 'danger' | Controls the Badge color.<br>@default 'danger' |
+| `size` | `(typeof badgeSizes)[number]` | No | 'md' | Controls the Badge dimensions.<br>@default 'md' |
 | `count` | `number` | No | 0 | The number to display in the badge. Default is 0. |
 | `showZero` | `boolean` | No | false | Whether to display the badge when the count is zero. Default is false. |
 | `overflowCount` | `number` | No | 99 | The number to display in the badge when the count is greater than the overflow count. Default is 99. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `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. |
 | `aria-live` | `React.AriaAttributes['aria-live']` | No | `--` | `--` |