v6: Form cleanup & new --radius-* tokens/classes

js/src/nav-overflow.js

@@ -242,20 +242,25 @@ class NavOverflow extends BaseComponent {
 
     const overflowWidth = overflowItem?.offsetWidth || 0
 
+    // Keep items are always visible; subtract their widths so the threshold
+    // reflects actual available space for non-keep items.
+    const keepWidth = this._items
+      .filter(item => item.classList.contains(CLASS_NAME_KEEP))
+      .reduce((sum, item) => sum + item.offsetWidth, 0)
+
     let usedWidth = 0
     const itemsToOverflow = []
-    const overflowThreshold = navWidth - overflowWidth - 10 // 10px buffer
+    const overflowThreshold = navWidth - overflowWidth - keepWidth - 10 // 10px buffer
 
     // Calculate which items need to overflow (skip items with keep class)
     for (const item of this._items) {
-      const itemWidth = item.offsetWidth
-      usedWidth += itemWidth
-
       // Never overflow items with the keep class
       if (item.classList.contains(CLASS_NAME_KEEP)) {
         continue
       }
 
+      usedWidth += item.offsetWidth
+
       if (usedWidth > overflowThreshold) {
         itemsToOverflow.push(item)
       }

scss/_accordion.scss

@@ -19,7 +19,7 @@ $accordion-tokens: defaults(
     --accordion-transition: var(--accordion-transition-property) var(--accordion-timing),
     --accordion-border-color: var(--border-color),
     --accordion-border-width: var(--border-width),
-    --accordion-border-radius: var(--accordion-radius, var(--border-radius-lg)),
+    --accordion-border-radius: var(--accordion-radius, var(--radius-7)),
     --accordion-btn-color: var(--fg-2),
     --accordion-btn-bg: var(--bg-body),
     --accordion-btn-icon-width: 1rem,

scss/_alert.scss

@@ -16,7 +16,7 @@ $alert-tokens: defaults(
     --alert-color: var(--theme-fg, inherit),
     --alert-border-color: var(--theme-border, var(--border-color)),
     --alert-border: var(--border-width) solid var(--alert-border-color),
-    --alert-border-radius: var(--border-radius),
+    --alert-border-radius: var(--radius-5),
     --alert-link-color: inherit,
     --hr-border-color: var(--theme-border, var(--border-color)),
   ),

scss/_badge.scss

@@ -16,7 +16,7 @@ $badge-tokens: defaults(
     --badge-bg: var(--bg-2),
     --badge-border-width: var(--border-width),
     --badge-border-color: transparent,
-    --badge-border-radius: var(--border-radius-lg),
+    --badge-border-radius: var(--radius-7),
   ),
   $badge-tokens
 );

scss/_breadcrumb.scss

@@ -12,15 +12,15 @@ $breadcrumb-tokens: defaults(
     --breadcrumb-margin-bottom: 1rem,
     --breadcrumb-font-size: inherit,
     --breadcrumb-bg: transparent,
-    --breadcrumb-border-radius: var(--border-radius),
+    --breadcrumb-border-radius: var(--radius-5),
     --breadcrumb-divider-color: var(--fg-4),
     --breadcrumb-link-padding-x: .75rem,
     --breadcrumb-link-padding-y: .25rem,
     --breadcrumb-link-color: var(--fg-3),
     --breadcrumb-link-hover-color: var(--fg-2),
     --breadcrumb-link-hover-bg: var(--bg-1),
     --breadcrumb-link-active-color: var(--fg-1),
-    --breadcrumb-link-border-radius: var(--border-radius-lg),
+    --breadcrumb-link-border-radius: var(--radius-7),
   ),
   $breadcrumb-tokens
 );

scss/_card.scss

@@ -16,9 +16,9 @@ $card-tokens: defaults(
     --card-subtitle-color: inherit,
     --card-border-width: var(--border-width),
     --card-border-color: var(--border-color-translucent),
-    --card-border-radius: var(--border-radius-lg),
+    --card-border-radius: var(--radius-7),
     --card-box-shadow: none,
-    --card-inner-border-radius: calc(var(--border-radius-lg) - var(--border-width)),
+    --card-inner-border-radius: calc(var(--radius-7) - var(--border-width)),
     --card-cap-padding-y: var(--spacer-3),
     --card-cap-padding-x: var(--spacer),
     --card-cap-bg: var(--bg-1),

scss/_chip.scss

@@ -13,7 +13,7 @@ $chip-tokens: defaults(
     --chip-height: 1.75rem,
     --chip-padding-x: .625rem,
     --chip-gap: .3125rem,
-    --chip-border-radius: var(--border-radius-pill),
+    --chip-border-radius: var(--radius-pill),
     --chip-img-size: 1.25rem,
     --chip-icon-size: 1rem,
     --chip-dismiss-size: 1rem,

scss/_config.scss

@@ -69,17 +69,31 @@ $negative-spacers: (
 
 $sizes: (
   1: $spacer,
-  2: calc($spacer * 2),
-  3: calc($spacer * 3),
-  4: calc($spacer * 4),
-  5: calc($spacer * 5),
-  6: calc($spacer * 6),
-  7: calc($spacer * 7),
-  8: calc($spacer * 8),
-  9: calc($spacer * 9),
-  10: calc($spacer * 10),
-  11: calc($spacer * 11),
-  12: calc($spacer * 12),
+  2: $spacer * 2,
+  3: $spacer * 3,
+  4: $spacer * 4,
+  5: $spacer * 5,
+  6: $spacer * 6,
+  7: $spacer * 7,
+  8: $spacer * 8,
+  9: $spacer * 9,
+  10: $spacer * 10,
+  11: $spacer * 11,
+  12: $spacer * 12,
+) !default;
+
+$radius: .5rem !default;
+$radii: (
+  0: 0,
+  1: $radius * .25,
+  2: $radius * .375,
+  3: $radius * .5,
+  4: $radius * .75,
+  5: $radius,
+  6: $radius * 1.25,
+  7: $radius * 1.5,
+  8: $radius * 2,
+  9: $radius * 3,
 ) !default;
 
 // Breakpoints

scss/_datepicker.scss

@@ -17,7 +17,7 @@ $datepicker-tokens: defaults(
     --datepicker-color: var(--fg-body),
     --datepicker-border-color: var(--border-color-translucent),
     --datepicker-border-width: var(--border-width),
-    --datepicker-border-radius: var(--border-radius-lg),
+    --datepicker-border-radius: var(--radius-7),
     --datepicker-box-shadow: var(--box-shadow),
     --datepicker-font-size: var(--font-size-sm),
     --datepicker-min-width: 280px,
@@ -107,7 +107,7 @@ $datepicker-tokens: defaults(
     cursor: pointer;
     background-color: transparent;
     border: 0;
-    @include border-radius(var(--border-radius));
+    @include border-radius(var(--radius-5));
 
     &::before {
       position: absolute;
@@ -191,7 +191,7 @@ $datepicker-tokens: defaults(
     // cursor: pointer;
     background-color: transparent;
     border: 0;
-    @include border-radius(var(--border-radius));
+    @include border-radius(var(--radius-5));
 
     &:disabled {
       color: var(--datepicker-day-disabled-color);
@@ -240,7 +240,7 @@ $datepicker-tokens: defaults(
     cursor: pointer;
     background-color: transparent;
     border: 0;
-    @include border-radius(var(--border-radius));
+    @include border-radius(var(--radius-5));
 
     &:disabled {
       color: var(--datepicker-day-disabled-color);
@@ -338,7 +338,7 @@ $datepicker-tokens: defaults(
     cursor: pointer;
     background-color: transparent;
     border: 0;
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-5);
 
     &:hover {
       background-color: var(--datepicker-day-hover-bg);
@@ -370,17 +370,17 @@ $datepicker-tokens: defaults(
   }
 
   [data-vc-date-hover="first"] [data-vc-date-btn] {
-    border-start-start-radius: var(--border-radius);
-    border-end-start-radius: var(--border-radius);
+    border-start-start-radius: var(--radius-5);
+    border-end-start-radius: var(--radius-5);
   }
 
   [data-vc-date-hover="last"] [data-vc-date-btn] {
-    border-start-end-radius: var(--border-radius);
-    border-end-end-radius: var(--border-radius);
+    border-start-end-radius: var(--radius-5);
+    border-end-end-radius: var(--radius-5);
   }
 
   [data-vc-date-hover="first-and-last"] [data-vc-date-btn] {
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-5);
   }
 
   [data-vc-date-selected="middle"] [data-vc-date-btn] {
@@ -396,20 +396,20 @@ $datepicker-tokens: defaults(
   }
 
   [data-vc-date-selected="first"] [data-vc-date-btn] {
-    border-top-left-radius: var(--border-radius);
+    border-top-left-radius: var(--radius-5);
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    border-bottom-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--radius-5);
   }
 
   [data-vc-date-selected="last"] [data-vc-date-btn] {
     border-top-left-radius: 0;
-    border-top-right-radius: var(--border-radius);
-    border-bottom-right-radius: var(--border-radius);
+    border-top-right-radius: var(--radius-5);
+    border-bottom-right-radius: var(--radius-5);
     border-bottom-left-radius: 0;
   }
 
   [data-vc-date-selected="first-and-last"] [data-vc-date-btn] {
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-5);
   }
 }

scss/_dialog.scss

@@ -26,7 +26,7 @@ $dialog-tokens: defaults(
     --dialog-bg: var(--bg-body),
     --dialog-border-color: var(--border-color-translucent),
     --dialog-border-width: var(--border-width),
-    --dialog-border-radius: var(--border-radius-lg),
+    --dialog-border-radius: var(--radius-7),
     --dialog-box-shadow: var(--box-shadow-lg),
     --dialog-transition-duration: .3s,
     --dialog-transition-timing: cubic-bezier(.22, 1, .36, 1),

scss/_drawer.scss

@@ -24,7 +24,7 @@ $drawer-tokens: defaults(
     --drawer-bg: var(--bg-body),
     --drawer-border-width: var(--border-width),
     --drawer-border-color: var(--border-color-translucent),
-    --drawer-border-radius: var(--border-radius-lg),
+    --drawer-border-radius: var(--radius-7),
     --drawer-box-shadow: var(--box-shadow-lg),
     --drawer-transition-duration: .3s,
     --drawer-transition-timing: cubic-bezier(.22, 1, .36, 1),

scss/_list-group.scss

@@ -15,7 +15,7 @@ $list-group-tokens: defaults(
     --list-group-bg: var(--bg-body),
     --list-group-border-color: var(--border-color),
     --list-group-border-width: var(--border-width),
-    --list-group-border-radius: var(--border-radius),
+    --list-group-border-radius: var(--radius-5),
     --list-group-item-padding-x: var(--spacer),
     --list-group-item-padding-y: var(--spacer-2),
     --list-group-action-color: var(--fg-2),

scss/_menu.scss

@@ -21,7 +21,7 @@ $menu-tokens: defaults(
     --menu-color: var(--fg-body),
     --menu-bg: var(--bg-body),
     // --menu-border-color: var(--border-color-translucent),
-    // --menu-border-radius: var(--border-radius-lg),
+    // --menu-border-radius: var(--radius-7),
     // --menu-border-width: var(--border-width),
     --menu-box-shadow: var(--box-shadow),
     // --menu-max-height: none,
@@ -37,7 +37,7 @@ $menu-tokens: defaults(
     --menu-item-gap: .5rem,
     --menu-item-padding-x: .75rem,
     --menu-item-padding-y: .25rem,
-    --menu-item-border-radius: var(--border-radius),
+    --menu-item-border-radius: var(--radius-5),
     --menu-icon-size: 1rem,
     --menu-image-size: 1.5rem,
     --menu-description-font-size: var(--font-size-xs),
@@ -76,7 +76,7 @@ $menu-tokens: defaults(
     background-color: var(--menu-bg);
     background-clip: padding-box;
     border: var(--menu-border-width, var(--border-width)) solid var(--menu-border-color, var(--border-color-translucent));
-    @include border-radius(var(--menu-border-radius, var(--border-radius-lg)));
+    @include border-radius(var(--menu-border-radius, var(--radius-7)));
     @include box-shadow(var(--menu-box-shadow));
     opacity: 0;
     transform: scale(.95);
@@ -206,7 +206,7 @@ $menu-tokens: defaults(
     width: var(--menu-image-size);
     height: var(--menu-image-size);
     object-fit: cover;
-    @include border-radius(var(--border-radius-sm));
+    @include border-radius(var(--radius-5));
   }
 
   .menu-item-content {

scss/_nav-overflow.scss

@@ -9,6 +9,18 @@
     min-width: 0; // Allow flex child to shrink below content width
   }
 
+  // Pills use inline-flex by default; override so the nav fills its container
+  // and the ResizeObserver can detect width changes.
+  .nav-pills.nav-overflow {
+    display: flex;
+  }
+
+  // Inside a navbar the nav is a flex child that sizes to content by default;
+  // grow it so it fills remaining space and shrinks with the container.
+  .navbar-nav.nav-overflow {
+    flex: 1 1 0;
+  }
+
   // Container item for overflow
   .nav-overflow-item {
     flex-shrink: 0;

scss/_nav.scss

@@ -41,7 +41,7 @@ $nav-tabs-tokens: defaults(
   (
     --nav-tabs-border-width: var(--border-width),
     --nav-tabs-border-color: var(--border-color),
-    --nav-tabs-border-radius: var(--border-radius),
+    --nav-tabs-border-radius: var(--radius-5),
     --nav-tabs-link-hover-border-color: var(--border-subtle),
     --nav-tabs-link-active-color: var(--fg-color),
     --nav-tabs-link-active-bg: var(--bg-body),
@@ -59,8 +59,10 @@ $nav-pills-tokens: defaults(
   (
     --nav-pills-bg: var(--bg-1),
     --nav-pills-padding: .25rem,
+    --nav-pills-border-radius: var(--radius-9),
     --nav-pills-link-active-color: var(--primary-contrast),
     --nav-pills-link-active-bg: var(--primary-bg),
+    --nav-pills-link-border-radius: var(--radius-9),
   ),
   $nav-pills-tokens
 );
@@ -114,7 +116,7 @@ $nav-underline-tokens: defaults(
     white-space: nowrap;
     background: none;
     border: var(--nav-link-border-width) solid transparent;
-    @include border-radius(var(--border-radius));
+    @include border-radius(var(--radius-5));
     @include transition(var(--nav-link-transition));
 
     &:hover,
@@ -192,10 +194,10 @@ $nav-underline-tokens: defaults(
     display: inline-flex;
     padding: var(--nav-pills-padding);
     background-color: var(--nav-pills-bg);
-    @include border-radius(var(--border-radius-pill));
+    @include border-radius(var(--nav-pills-border-radius));
 
     .nav-link {
-      @include border-radius(var(--border-radius-pill));
+      @include border-radius(var(--nav-pills-link-border-radius));
     }
 
     .nav-link.active,
@@ -205,6 +207,16 @@ $nav-underline-tokens: defaults(
     }
   }
 
+  .nav-pills-vertical {
+    flex-direction: column;
+    align-items: stretch;
+
+    .nav-item,
+    .nav-link {
+      width: 100%;
+    }
+  }
+
   //
   // Underline
   //

scss/_navbar.scss

@@ -38,7 +38,7 @@ $navbar-tokens: defaults(
     --navbar-toggler-padding-x: .75rem,
     --navbar-toggler-font-size: var(--font-size-lg),
     --navbar-toggler-border-color: color-mix(in oklch, var(--fg-body) 15%, transparent),
-    --navbar-toggler-border-radius: var(--border-radius),
+    --navbar-toggler-border-radius: var(--radius-5),
     --navbar-toggler-transition: box-shadow .15s ease-in-out,
   ),
   $navbar-tokens

scss/_popover.scss

@@ -17,8 +17,8 @@ $popover-tokens: defaults(
     --popover-bg: var(--bg-body),
     --popover-border-width: var(--border-width),
     --popover-border-color: var(--border-color-translucent),
-    --popover-border-radius: var(--border-radius-lg),
-    --popover-inner-border-radius: calc(var(--border-radius-lg) - var(--border-width)),
+    --popover-border-radius: var(--radius-7),
+    --popover-inner-border-radius: calc(var(--radius-7) - var(--border-width)),
     --popover-box-shadow: var(--box-shadow),
     --popover-header-padding-x: var(--spacer),
     --popover-header-padding-y: var(--spacer-3),