@wwtdev/bsds-css 2.31.0 → 2.33.0

package/dist/wwt-bsds-utilities.min.css

@@ -0,0 +1 @@
+.flow>*+*{margin-top:var(--flow-space,1.25em)}.flow>:where(h1,h2,h3,h4,h5,h6){--flow-space:2em}.flow>:where(hr)+*{--flow-space:1.5em}.flow>:where(h1,h2,h3,h4,h5,h6)+*{--flow-space:.5em}.flow>:where(ul,ol)>:where(li){margin-top:var(--flow-space,0.625em)}.bs-text-ink-blue{color:var(--bs-ink-blue)}.bs-bg-ink-blue{background-color:var(--bs-ink-blue)}.bs-text-ink-orange{color:var(--bs-ink-orange)}.bs-bg-ink-orange{background-color:var(--bs-ink-orange)}.bs-text-ink-pink{color:var(--bs-ink-pink)}.bs-bg-ink-pink{background-color:var(--bs-ink-pink)}.bs-text-ink-plum{color:var(--bs-ink-plum)}.bs-bg-ink-plum{background-color:var(--bs-ink-plum)}.bs-text-ink-purple{color:var(--bs-ink-purple)}.bs-bg-ink-purple{background-color:var(--bs-ink-purple)}.bs-text-ink-red{color:var(--bs-ink-red)}.bs-bg-ink-red{background-color:var(--bs-ink-red)}.bs-text-ink-royal{color:var(--bs-ink-royal)}.bs-bg-ink-royal{background-color:var(--bs-ink-royal)}.bs-text-ink-violet{color:var(--bs-ink-violet)}.bs-bg-ink-violet{background-color:var(--bs-ink-violet)}.bs-text-blue-base{color:var(--bs-blue-base)}.bs-bg-blue-base{background-color:var(--bs-blue-base)}.bs-text-blue-medium{color:var(--bs-blue-medium)}.bs-bg-blue-medium{background-color:var(--bs-blue-medium)}.bs-text-blue-light{color:var(--bs-blue-light)}.bs-bg-blue-light{background-color:var(--bs-blue-light)}.bs-text-blue-lightest{color:var(--bs-blue-lightest)}.bs-bg-blue-lightest{background-color:var(--bs-blue-lightest)}.bs-text-gray-dark{color:var(--bs-gray-dark)}.bs-bg-gray-dark{background-color:var(--bs-gray-dark)}.bs-text-gray-base{color:var(--bs-gray-base)}.bs-bg-gray-base{background-color:var(--bs-gray-base)}.bs-text-gray-medium{color:var(--bs-gray-medium)}.bs-bg-gray-medium{background-color:var(--bs-gray-medium)}.bs-text-gray-light{color:var(--bs-gray-light)}.bs-bg-gray-light{background-color:var(--bs-gray-light)}.bs-text-gray-lightest{color:var(--bs-gray-lightest)}.bs-bg-gray-lightest{background-color:var(--bs-gray-lightest)}.bs-text-navy-base{color:var(--bs-navy-base)}.bs-bg-navy-base{background-color:var(--bs-navy-base)}.bs-text-navy-medium{color:var(--bs-navy-medium)}.bs-bg-navy-medium{background-color:var(--bs-navy-medium)}.bs-text-navy-light{color:var(--bs-navy-light)}.bs-bg-navy-light{background-color:var(--bs-navy-light)}.bs-text-navy-lightest{color:var(--bs-navy-lightest)}.bs-bg-navy-lightest{background-color:var(--bs-navy-lightest)}.bs-text-warning{color:var(--bs-warning)}.bs-bg-warning{background-color:var(--bs-warning)}.bs-text-orange-base{color:var(--bs-orange-base)}.bs-bg-orange-base{background-color:var(--bs-orange-base)}.bs-text-orange-medium{color:var(--bs-orange-medium)}.bs-bg-orange-medium{background-color:var(--bs-orange-medium)}.bs-text-orange-light{color:var(--bs-orange-light)}.bs-bg-orange-light{background-color:var(--bs-orange-light)}.bs-text-orange-lightest{color:var(--bs-orange-lightest)}.bs-bg-orange-lightest{background-color:var(--bs-orange-lightest)}.bs-text-pink-base{color:var(--bs-pink-base)}.bs-bg-pink-base{background-color:var(--bs-pink-base)}.bs-text-pink-medium{color:var(--bs-pink-medium)}.bs-bg-pink-medium{background-color:var(--bs-pink-medium)}.bs-text-pink-light{color:var(--bs-pink-light)}.bs-bg-pink-light{background-color:var(--bs-pink-light)}.bs-text-pink-lightest{color:var(--bs-pink-lightest)}.bs-bg-pink-lightest{background-color:var(--bs-pink-lightest)}.bs-text-plum-base{color:var(--bs-plum-base)}.bs-bg-plum-base{background-color:var(--bs-plum-base)}.bs-text-plum-medium{color:var(--bs-plum-medium)}.bs-bg-plum-medium{background-color:var(--bs-plum-medium)}.bs-text-plum-light{color:var(--bs-plum-light)}.bs-bg-plum-light{background-color:var(--bs-plum-light)}.bs-text-plum-lightest{color:var(--bs-plum-lightest)}.bs-bg-plum-lightest{background-color:var(--bs-plum-lightest)}.bs-text-red-base{color:var(--bs-red-base)}.bs-bg-red-base{background-color:var(--bs-red-base)}.bs-text-red-medium{color:var(--bs-red-medium)}.bs-bg-red-medium{background-color:var(--bs-red-medium)}.bs-text-red-light{color:var(--bs-red-light)}.bs-bg-red-light{background-color:var(--bs-red-light)}.bs-text-red-lightest{color:var(--bs-red-lightest)}.bs-bg-red-lightest{background-color:var(--bs-red-lightest)}.bs-text-royal-base{color:var(--bs-royal-base)}.bs-bg-royal-base{background-color:var(--bs-royal-base)}.bs-text-royal-medium{color:var(--bs-royal-medium)}.bs-bg-royal-medium{background-color:var(--bs-royal-medium)}.bs-text-royal-light{color:var(--bs-royal-light)}.bs-bg-royal-light{background-color:var(--bs-royal-light)}.bs-text-royal-lightest{color:var(--bs-royal-lightest)}.bs-bg-royal-lightest{background-color:var(--bs-royal-lightest)}.bs-text-violet-base{color:var(--bs-violet-base)}.bs-bg-violet-base{background-color:var(--bs-violet-base)}.bs-text-violet-medium{color:var(--bs-violet-medium)}.bs-bg-violet-medium{background-color:var(--bs-violet-medium)}.bs-text-violet-light{color:var(--bs-violet-light)}.bs-bg-violet-light{background-color:var(--bs-violet-light)}.bs-text-violet-lightest{color:var(--bs-violet-lightest)}.bs-bg-violet-lightest{background-color:var(--bs-violet-lightest)}.bs-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.bs-box{--bg-color:var(--bs-bg-medium-to-light);--border-color:transparent;--box-space:var(--bs-space-6);--text-color:var(--bs-ink-base);background:var(--bg-color);border-radius:.25rem;border:1px solid var(--border-color);color:var(--text-color);padding-bottom:var(--box-space);padding-left:var(--box-space);padding-right:var(--box-space);padding-top:var(--box-space)}.bs-box:where([data-invert="true"]){--bg-color:var(--bs-bg-invert-light);--text-color:var(--bs-ink-invert-base)}.bs-box:where([data-border="true"]){--border-color:var(--bs-border-base)}:where(.bs-box) :is(input,textarea,select):where(:focus-visible),:where(.bs-box) :is(.bs-input,.bs-textarea,.bs-select-deprecated):where(:focus-visible){--offset-color:var(--bs-bg-medium)}:where(.bs-box[data-invert="true"]) :is(input,textarea,select):where(:focus-visible),:where(.bs-box[data-invert="true"]) :is(.bs-input,.bs-textarea,.bs-select-deprecated):where(:focus-visible){--offset-color:var(--bs-bg-invert-base)}:where(.bs-box[data-invert="true"]) .bs-pill{--pill-background:var(--bs-bg-invert-light);--pill-text:var(--bs-gray-100)}:where(.bs-box[data-invert="true"]) :is(a,button).bs-pill:is(:hover,:focus){--pill-border:var(--bs-gray-100)}:where(.dark .bs-box[data-invert="true"]) .bs-pill{--pill-text:var(--bs-accent-1-base)}:where(.dark .bs-box[data-invert="true"]) :is(a,button).bs-pill:is(:hover,:focus){--pill-border:var(--bs-accent-1-base)}:where(.bs-box) .bs-switch :where(input:focus-visible)+:where(span),:where(.bs-box) .bs-switch:where(:focus-visible) :where(button span){--offset-color:var(--bs-bg-medium)}:where(.bs-box[data-invert]) .bs-switch :where(input:focus-visible)+:where(span),:where(.bs-box[data-invert]) .bs-switch:where(:focus-visible) :where(button span){--offset-color:var(--bs-bg-invert-base)}.bs-cluster{--cluster-space:var(--bs-space-6);align-items:center;display:flex;flex-wrap:wrap;gap:var(--cluster-space);justify-content:flex-start}.bs-cluster:where([data-brick="true"])>*{align-self:stretch;flex-grow:1}.bs-cluster:where([data-gap="tight"]){--cluster-space:var(--bs-space-2)}.bs-box-shadow-low{box-shadow:var(--bs-shadow-contentLow)}.bs-box-shadow-low-center{box-shadow:var(--bs-shadow-contentLowCenter)}.bs-box-shadow-medium{box-shadow:var(--bs-shadow-contentMedium)}.bs-box-shadow-high{box-shadow:var(--bs-shadow-contentHigh)}.bs-box-shadow-left-panel{box-shadow:var(--bs-shadow-drawerLeft)}.bs-box-shadow-right-panel{box-shadow:var(--bs-shadow-drawerRight)}.bs-box-shadow-profile{box-shadow:var(--bs-shadow-profilePhoto)}.bs-text-xs{font-size:var(--bs-text-xs);font-weight:var(--bs-font-semibold);line-height:var(--bs-leading-lg)}.bs-text-sm{font-size:var(--bs-text-sm);font-weight:var(--bs-font-normal);line-height:var(--bs-leading-lg)}.bs-text-base{font-size:var(--bs-text-base);font-weight:var(--bs-font-normal);line-height:var(--bs-leading-lg)}.bs-text-md{font-size:var(--bs-text-base);font-weight:var(--bs-font-normal);line-height:var(--bs-leading-lg)}@media(min-width:1166px){.bs-text-md{font-size:var(--bs-text-md)}}.bs-text-lg{font-size:var(--bs-text-md);font-weight:var(--bs-font-normal);line-height:var(--bs-leading-regular)}@media(min-width:1166px){.bs-text-lg{font-size:var(--bs-text-lg)}}.bs-text-xl{font-size:var(--bs-text-lg);font-weight:var(--bs-font-normal);line-height:var(--bs-leading-sm)}@media(min-width:1166px){.bs-text-xl{font-size:var(--bs-text-xl)}}.bs-text-2xl{font-size:var(--bs-text-xl);font-weight:var(--bs-font-light);line-height:var(--bs-leading-sm)}@media(min-width:1166px){.bs-text-2xl{font-size:var(--bs-text-2xl)}}.bs-text-3xl{font-size:var(--bs-text-2xl);font-weight:var(--bs-font-light);line-height:var(--bs-leading-sm)}@media(min-width:1166px){.bs-text-3xl{font-size:var(--bs-text-3xl)}}.bs-text-4xl{font-size:var(--bs-text-3xl);font-weight:var(--bs-font-light);line-height:var(--bs-leading-sm)}@media(min-width:1166px){.bs-text-4xl{font-size:var(--bs-text-4xl)}}.bs-text-5xl{font-size:var(--bs-text-4xl);font-weight:var(--bs-font-light);line-height:var(--bs-leading-sm)}@media(min-width:1166px){.bs-text-5xl{font-size:var(--bs-text-5xl)}}.bs-text-6xl{font-size:var(--bs-text-5xl);font-weight:var(--bs-font-light);line-height:var(--bs-leading-sm)}@media(min-width:1166px){.bs-text-6xl{font-size:var(--bs-text-6xl)}}.bs-font-light{font-weight:var(--bs-font-light)}.bs-font-normal{font-weight:var(--bs-font-normal)}.bs-font-semibold{font-weight:var(--bs-font-semibold)}.bs-leading-none{line-height:var(--bs-leading-none)}.bs-leading-sm{line-height:var(--bs-leading-sm)}.bs-leading-regular{line-height:var(--bs-leading-regular)}.bs-leading-lg{line-height:var(--bs-leading-lg)}.bs-prose{--prose-width:70ch;font-size:var(--bs-text-base);font-weight:var(--bs-font-normal);line-height:var(--bs-leading-lg);max-width:var(--prose-width)}@media(min-width:1166px){.bs-prose{font-size:var(--bs-text-md)}}.bs-prose:where([data-width="wide"]){--prose-width:90%}.bs-prose:where([data-width="full"]){--prose-width:100%}.bs-prose>*+*{--prose-space:1.25em;margin-top:var(--prose-space)}.bs-prose>:where(h1,h2,h3,h4,h5,h6){--prose-space:2em}.bs-prose>:where(hr)+*{--prose-space:1.5em}.bs-prose>:where(h1,h2,h3,h4,h5,h6)+*{--prose-space:.5em}.bs-prose>:where(ul,ol)>:where(li){--prose-space:.625em}.bs-region{--region-space:var(--bs-space-6);padding-top:var(--region-space);padding-bottom:var(--region-space)}.bs-region:where([data-space='sm']){--region-space:var(--bs-space-3)}.bs-region:where([data-space='lg']){--region-space:var(--bs-space-12)}.bs-transition-quick{transition-duration:var(--bs-transition-quick)}.bs-transition-fast{transition-duration:var(--bs-transition-fast)}.bs-transition-moderate{transition-duration:var(--bs-transition-moderate)}.bs-transition-medium{transition-duration:var(--bs-transition-medium)}.bs-transition-slow{transition-duration:var(--bs-transition-slow)}.bs-transition-leisurely{transition-duration:var(--bs-transition-leisurely)}.bs-transition-long{transition-duration:var(--bs-transition-long)}.bs-transition-ease{transition-timing-function:var(--bs-transition-ease)}.bs-transition-cubic{transition-timing-function:var(--bs-transition-cubic)}.bs-wrapper{--max-width:75rem;--wrapper-space:var(--bs-space-6);margin-left:auto;margin-right:auto;max-width:var(--max-width);min-width:0;padding-left:var(--wrapper-space);padding-right:var(--wrapper-space);position:relative;width:100%}.bs-wrapper:where([data-flush="true"]){padding-left:0;padding-right:0}.bs-bg-base{background-color:var(--bs-bg-base)}.bs-bg-light{background-color:var(--bs-bg-light)}.bs-bg-medium{background-color:var(--bs-bg-medium)}.bs-bg-disabled{background-color:var(--bs-bg-disabled)}.bs-bg-invert-base{background-color:var(--bs-bg-invert-base)}.bs-bg-invert-medium{background-color:var(--bs-bg-invert-medium)}.bs-bg-invert-light{background-color:var(--bs-bg-invert-light)}.bs-bg-base-to-light{background-color:var(--bs-bg-base-to-light)}.bs-bg-base-to-medium{background-color:var(--bs-bg-base-to-medium)}.bs-bg-medium-to-base{background-color:var(--bs-bg-medium-to-base)}.bs-bg-medium-to-light{background-color:var(--bs-bg-medium-to-light)}.bs-bg-light-to-base{background-color:var(--bs-bg-light-to-base)}.bs-bg-light-to-medium{background-color:var(--bs-bg-light-to-medium)}.bs-border-base{border-color:var(--bs-border-base)}.bs-border-medium{border-color:var(--bs-border-medium)}.bs-border-light{border-color:var(--bs-border-light)}.bs-border-dark{border-color:var(--bs-border-dark)}.bs-border-medium-to-light{border-color:var(--bs-border-medium-to-light)}.bs-border-input{border-color:var(--bs-border-input)}.bs-border-active{border-color:var(--bs-border-active)}.bs-border-error{border-color:var(--bs-border-error)}.bs-text-transparent{color:var(--bs-transparent)}.bs-bg-transparent{background-color:var(--bs-transparent)}.bs-border-transparent{border-color:var(--bs-transparent)}.bs-text-inherit{color:var(--bs-inherit)}.bs-bg-inherit{background-color:var(--bs-inherit)}.bs-border-inherit{border-color:var(--bs-inherit)}.bs-text-current{color:var(--bs-current)}.bs-bg-current{background-color:var(--bs-current)}.bs-border-current{border-color:var(--bs-current)}.bs-border-atom-ai{background:linear-gradient(white,white) padding-box,var(--bs-gradient-atom-ai-border) border-box;border:2px solid transparent}.bs-bg-atom-ai{background-image:var(--bs-gradient-atom-ai-bg)}.bs-bg-gradient-dark{background:var(--bs-gradient-dark)}.bs-bg-gradient-light{background:var(--bs-gradient-light)}.bs-bg-gradient-line{background:var(--bs-gradient-line)}.bs-bg-gradient-light-blue-transparent{background:var(--bs-gradient-light-blue-transparent)}.bs-bg-gradient-light-blue-opaque{background:var(--bs-gradient-light-blue-opaque)}.bs-bg-gradient-light-gray{background:var(--bs-gradient-light-gray)}.bs-bg-gradient-blue-top-left{background:var(--bs-gradient-blue-top-left)}.bs-bg-gradient-blue-top-center{background:var(--bs-gradient-blue-top-center)}.bs-bg-gradient-blue-top-right{background:var(--bs-gradient-blue-top-right)}.bs-bg-gradient-blue-mid-left{background:var(--bs-gradient-blue-mid-left)}.bs-bg-gradient-blue-mid-right{background:var(--bs-gradient-blue-mid-right)}.bs-bg-gradient-blue-center{background:var(--bs-gradient-blue-center)}.bs-bg-gradient-blue-bottom-left{background:var(--bs-gradient-blue-bottom-left)}.bs-bg-gradient-blue-bottom-center{background:var(--bs-gradient-blue-bottom-center)}.bs-bg-gradient-blue-bottom-right{background:var(--bs-gradient-blue-bottom-right)}.bs-bg-gradient-softchoice-light{background:var(--bs-gradient-softchoice-light)}.bs-bg-gradient-softchoice-dark{background:var(--bs-gradient-softchoice-dark)}.bs-text-ink-base{color:var(--bs-ink-base)}.bs-bg-ink-base{background-color:var(--bs-ink-base)}.bs-text-ink-medium{color:var(--bs-ink-medium)}.bs-bg-ink-medium{background-color:var(--bs-ink-medium)}.bs-text-ink-light{color:var(--bs-ink-light)}.bs-bg-ink-light{background-color:var(--bs-ink-light)}.bs-text-ink-disabled{color:var(--bs-ink-disabled)}.bs-bg-ink-disabled{background-color:var(--bs-ink-disabled)}.bs-text-ink-invert-base{color:var(--bs-ink-invert-base)}.bs-bg-ink-invert-base{background-color:var(--bs-ink-invert-base)}.bs-text-ink-invert-medium{color:var(--bs-ink-invert-medium)}.bs-bg-ink-invert-medium{background-color:var(--bs-ink-invert-medium)}.bs-text-ink-invert-light{color:var(--bs-ink-invert-light)}.bs-bg-ink-invert-light{background-color:var(--bs-ink-invert-light)}.bs-text-ink-primary{color:var(--bs-ink-primary)}.bs-bg-ink-primary{background-color:var(--bs-ink-primary)}.bs-text-ink-secondary{color:var(--bs-ink-secondary)}.bs-bg-ink-secondary{background-color:var(--bs-ink-secondary)}.bs-text-ink-accent-1{color:var(--bs-ink-accent-1)}.bs-bg-ink-accent-1{background-color:var(--bs-ink-accent-1)}.bs-text-ink-accent-2{color:var(--bs-ink-accent-2)}.bs-bg-ink-accent-2{background-color:var(--bs-ink-accent-2)}.bs-text-ink-accent-3{color:var(--bs-ink-accent-3)}.bs-bg-ink-accent-3{background-color:var(--bs-ink-accent-3)}.bs-text-ink-negative{color:var(--bs-ink-negative)}.bs-bg-ink-negative{background-color:var(--bs-ink-negative)}.bs-text-ink-positive{color:var(--bs-ink-positive)}.bs-bg-ink-positive{background-color:var(--bs-ink-positive)}.bs-text-ink-ecomm-positive{color:var(--bs-ink-ecomm-positive)}.bs-bg-ink-ecomm-positive{background-color:var(--bs-ink-ecomm-positive)}.bs-text-ink-warning{color:var(--bs-ink-warning)}.bs-bg-ink-warning{background-color:var(--bs-ink-warning)}.bs-text-ink-white{color:var(--bs-ink-white)}.bs-bg-ink-white{background-color:var(--bs-ink-white)}.bs-text-primary-base-fixed{color:var(--bs-primary-base-fixed)}.bs-bg-primary-base-fixed{background-color:var(--bs-primary-base-fixed)}.bs-text-primary-base{color:var(--bs-primary-base)}.bs-bg-primary-base{background-color:var(--bs-primary-base)}.bs-text-primary-medium{color:var(--bs-primary-medium)}.bs-bg-primary-medium{background-color:var(--bs-primary-medium)}.bs-text-primary-light{color:var(--bs-primary-light)}.bs-bg-primary-light{background-color:var(--bs-primary-light)}.bs-text-primary-lightest{color:var(--bs-primary-lightest)}.bs-bg-primary-lightest{background-color:var(--bs-primary-lightest)}.bs-text-primary-highlight{color:var(--bs-primary-highlight)}.bs-bg-primary-highlight{background-color:var(--bs-primary-highlight)}.bs-text-secondary-base-fixed{color:var(--bs-secondary-base-fixed)}.bs-bg-secondary-base-fixed{background-color:var(--bs-secondary-base-fixed)}.bs-text-secondary-base{color:var(--bs-secondary-base)}.bs-bg-secondary-base{background-color:var(--bs-secondary-base)}.bs-text-secondary-medium{color:var(--bs-secondary-medium)}.bs-bg-secondary-medium{background-color:var(--bs-secondary-medium)}.bs-text-secondary-light{color:var(--bs-secondary-light)}.bs-bg-secondary-light{background-color:var(--bs-secondary-light)}.bs-text-secondary-lightest{color:var(--bs-secondary-lightest)}.bs-bg-secondary-lightest{background-color:var(--bs-secondary-lightest)}.bs-text-secondary-highlight{color:var(--bs-secondary-highlight)}.bs-bg-secondary-highlight{background-color:var(--bs-secondary-highlight)}.bs-text-neutral-dark{color:var(--bs-neutral-dark)}.bs-bg-neutral-dark{background-color:var(--bs-neutral-dark)}.bs-text-neutral-base{color:var(--bs-neutral-base)}.bs-bg-neutral-base{background-color:var(--bs-neutral-base)}.bs-text-neutral-medium{color:var(--bs-neutral-medium)}.bs-bg-neutral-medium{background-color:var(--bs-neutral-medium)}.bs-text-neutral-light{color:var(--bs-neutral-light)}.bs-bg-neutral-light{background-color:var(--bs-neutral-light)}.bs-text-neutral-lightest{color:var(--bs-neutral-lightest)}.bs-bg-neutral-lightest{background-color:var(--bs-neutral-lightest)}.bs-text-accent-1-base-fixed{color:var(--bs-accent-1-base-fixed)}.bs-bg-accent-1-base-fixed{background-color:var(--bs-accent-1-base-fixed)}.bs-text-accent-1-base{color:var(--bs-accent-1-base)}.bs-bg-accent-1-base{background-color:var(--bs-accent-1-base)}.bs-text-accent-1-medium{color:var(--bs-accent-1-medium)}.bs-bg-accent-1-medium{background-color:var(--bs-accent-1-medium)}.bs-text-accent-1-light{color:var(--bs-accent-1-light)}.bs-bg-accent-1-light{background-color:var(--bs-accent-1-light)}.bs-text-accent-1-lightest{color:var(--bs-accent-1-lightest)}.bs-bg-accent-1-lightest{background-color:var(--bs-accent-1-lightest)}.bs-text-accent-1-highlight{color:var(--bs-accent-1-highlight)}.bs-bg-accent-1-highlight{background-color:var(--bs-accent-1-highlight)}.bs-text-accent-2-base-fixed{color:var(--bs-accent-2-base-fixed)}.bs-bg-accent-2-base-fixed{background-color:var(--bs-accent-2-base-fixed)}.bs-text-accent-2-base{color:var(--bs-accent-2-base)}.bs-bg-accent-2-base{background-color:var(--bs-accent-2-base)}.bs-text-accent-2-medium{color:var(--bs-accent-2-medium)}.bs-bg-accent-2-medium{background-color:var(--bs-accent-2-medium)}.bs-text-accent-2-light{color:var(--bs-accent-2-light)}.bs-bg-accent-2-light{background-color:var(--bs-accent-2-light)}.bs-text-accent-2-lightest{color:var(--bs-accent-2-lightest)}.bs-bg-accent-2-lightest{background-color:var(--bs-accent-2-lightest)}.bs-text-accent-2-highlight{color:var(--bs-accent-2-highlight)}.bs-bg-accent-2-highlight{background-color:var(--bs-accent-2-highlight)}.bs-text-accent-3-base-fixed{color:var(--bs-accent-3-base-fixed)}.bs-bg-accent-3-base-fixed{background-color:var(--bs-accent-3-base-fixed)}.bs-text-accent-3-base{color:var(--bs-accent-3-base)}.bs-bg-accent-3-base{background-color:var(--bs-accent-3-base)}.bs-text-accent-3-medium{color:var(--bs-accent-3-medium)}.bs-bg-accent-3-medium{background-color:var(--bs-accent-3-medium)}.bs-text-accent-3-light{color:var(--bs-accent-3-light)}.bs-bg-accent-3-light{background-color:var(--bs-accent-3-light)}.bs-text-accent-3-lightest{color:var(--bs-accent-3-lightest)}.bs-bg-accent-3-lightest{background-color:var(--bs-accent-3-lightest)}.bs-text-accent-3-highlight{color:var(--bs-accent-3-highlight)}.bs-bg-accent-3-highlight{background-color:var(--bs-accent-3-highlight)}.bs-text-accent-4-base{color:var(--bs-accent-4-base)}.bs-bg-accent-4-base{background-color:var(--bs-accent-4-base)}.bs-text-accent-4-medium{color:var(--bs-accent-4-medium)}.bs-bg-accent-4-medium{background-color:var(--bs-accent-4-medium)}.bs-text-accent-4-light{color:var(--bs-accent-4-light)}.bs-bg-accent-4-light{background-color:var(--bs-accent-4-light)}.bs-text-accent-4-lightest{color:var(--bs-accent-4-lightest)}.bs-bg-accent-4-lightest{background-color:var(--bs-accent-4-lightest)}.bs-text-accent-4-highlight{color:var(--bs-accent-4-highlight)}.bs-bg-accent-4-highlight{background-color:var(--bs-accent-4-highlight)}.bs-text-positive-base-fixed{color:var(--bs-positive-base-fixed)}.bs-bg-positive-base-fixed{background-color:var(--bs-positive-base-fixed)}.bs-text-positive-base{color:var(--bs-positive-base)}.bs-bg-positive-base{background-color:var(--bs-positive-base)}.bs-text-positive-medium{color:var(--bs-positive-medium)}.bs-bg-positive-medium{background-color:var(--bs-positive-medium)}.bs-text-positive-light{color:var(--bs-positive-light)}.bs-bg-positive-light{background-color:var(--bs-positive-light)}.bs-text-positive-lightest{color:var(--bs-positive-lightest)}.bs-bg-positive-lightest{background-color:var(--bs-positive-lightest)}.bs-text-positive-highlight{color:var(--bs-positive-highlight)}.bs-bg-positive-highlight{background-color:var(--bs-positive-highlight)}.bs-text-ecomm-positive-base-fixed{color:var(--bs-ecomm-positive-base-fixed)}.bs-bg-ecomm-positive-base-fixed{background-color:var(--bs-ecomm-positive-base-fixed)}.bs-text-ecomm-positive-base{color:var(--bs-ecomm-positive-base)}.bs-bg-ecomm-positive-base{background-color:var(--bs-ecomm-positive-base)}.bs-text-ecomm-positive-medium{color:var(--bs-ecomm-positive-medium)}.bs-bg-ecomm-positive-medium{background-color:var(--bs-ecomm-positive-medium)}.bs-text-ecomm-positive-light{color:var(--bs-ecomm-positive-light)}.bs-bg-ecomm-positive-light{background-color:var(--bs-ecomm-positive-light)}.bs-text-ecomm-positive-lightest{color:var(--bs-ecomm-positive-lightest)}.bs-bg-ecomm-positive-lightest{background-color:var(--bs-ecomm-positive-lightest)}.bs-text-ecomm-positive-highlight{color:var(--bs-ecomm-positive-highlight)}.bs-bg-ecomm-positive-highlight{background-color:var(--bs-ecomm-positive-highlight)}.bs-text-warning-dark{color:var(--bs-warning-dark)}.bs-bg-warning-dark{background-color:var(--bs-warning-dark)}.bs-text-warning-base{color:var(--bs-warning-base)}.bs-bg-warning-base{background-color:var(--bs-warning-base)}.bs-text-warning-medium{color:var(--bs-warning-medium)}.bs-bg-warning-medium{background-color:var(--bs-warning-medium)}.bs-text-warning-light{color:var(--bs-warning-light)}.bs-bg-warning-light{background-color:var(--bs-warning-light)}.bs-text-warning-lightest{color:var(--bs-warning-lightest)}.bs-bg-warning-lightest{background-color:var(--bs-warning-lightest)}.bs-text-warning-highlight{color:var(--bs-warning-highlight)}.bs-bg-warning-highlight{background-color:var(--bs-warning-highlight)}.bs-text-negative-dark{color:var(--bs-negative-dark)}.bs-bg-negative-dark{background-color:var(--bs-negative-dark)}.bs-text-negative-base{color:var(--bs-negative-base)}.bs-bg-negative-base{background-color:var(--bs-negative-base)}.bs-text-negative-medium{color:var(--bs-negative-medium)}.bs-bg-negative-medium{background-color:var(--bs-negative-medium)}.bs-text-negative-light{color:var(--bs-negative-light)}.bs-bg-negative-light{background-color:var(--bs-negative-light)}.bs-text-negative-lightest{color:var(--bs-negative-lightest)}.bs-bg-negative-lightest{background-color:var(--bs-negative-lightest)}.bs-text-negative-highlight{color:var(--bs-negative-highlight)}.bs-bg-negative-highlight{background-color:var(--bs-negative-highlight)}

package/dist/wwt-bsds.css

@@ -6051,17 +6051,50 @@ This must go last to properly override the other classes
   transform: translateY(-50%) scale(0.5);
 }
 :root {
-  --bs-vertical-nav-width: 9.875rem;
+  --bs-vertical-nav-width: 11.25rem;
   --bs-vertical-nav-narrow-width: 4.5rem;
+  --bs-vertical-nav-collapsed-width: 4.5rem;
+  /* Dynamic width set by the navigation component for page layout */
+  --bs-page-nav-width: 0px;
 }
-.bs-vertical-nav {
+.bs-vertical-nav-wrapper {
   --active-color: rgba(255, 255, 255, 0.25);
   --bg-color: var(--bs-navy-base);
   --border-color: var(--bs-border-dark);
+  --text-color: var(--bs-white);
+  --link-color: var(--bs-white);
+  --link-hover-color: var(--bs-white);
+  --link-active-color: var(--bs-white);
+  --toggle-bg-color: var(--bg-color);
+  --toggle-color: var(--bs-white);
   --top-offset: 48px;
+}
+.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"]) {
+  --active-color: var(--bs-blue-10);
+  --bg-color: var(--bs-bg-base);
+  --border-color: var(--bs-border-medium);
+  --text-color: var(--bs-ink-medium);
+  --link-color: var(--bs-ink-medium);
+  --link-hover-color: var(--bs-ink-blue);
+  --link-active-color: var(--bs-ink-blue);
+  --toggle-bg-color: var(--bs-bg-base);
+  --toggle-color: var(--bs-ink-medium);
+}
+.dark :where(.bs-vertical-nav-wrapper),
+.dark :where(.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"])) {
+  --active-color: rgba(255, 255, 255, 0.25);
+  --bg-color: var(--bs-bg-base);
+  --border-color: var(--bs-border-medium);
+  --text-color: var(--bs-white);
+  --link-color: var(--bs-white);
+  --link-hover-color: var(--bs-white);
+  --link-active-color: var(--bs-white);
+}
+.bs-vertical-nav {
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   background-color: var(--bg-color);
-  color: var(--bs-white);
+  border-inline-end: 1px solid var(--border-color);
+  color: var(--text-color);
   display: flex;
   flex-direction: column;
   height: 100dvh;
@@ -6077,54 +6110,100 @@ This must go last to properly override the other classes
   right: 0;
   scrollbar-width: none;  /* Firefox */
   top: var(--top-offset);
-  /* Slight delay for visibility to change prior to opacity */
   transition: opacity 200ms ease 10ms;
   visibility: hidden;
+  pointer-events: none;
   width: auto;
-  z-index: 1000;
+  z-index: 999;
 }
 .bs-vertical-nav:where([data-mobile-shown="true"]) {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
 }
-.dark .bs-vertical-nav {
-  --active-color: rgba(255, 255, 255, 0.25);
-  --bg-color: var(--bs-bg-base);
-  --border-color: var(--bs-border-dark);
-  border-right: 1px solid var(--bs-border-medium);
+.bs-vertical-nav:where([data-collapsible="true"]) {
+  transition: opacity 200ms ease 10ms, width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 @media (min-width: 1166px) {
   .bs-vertical-nav {
-    border-right: 1px solid var(--bg-color);
     opacity: 1;
-    padding-bottom: 1rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 1rem;
+    padding: 1rem;
     right: auto;
-    transition: none;
     visibility: visible;
+    pointer-events: auto;
     width: var(--bs-vertical-nav-width);
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) {
     width: var(--bs-vertical-nav-narrow-width);
   }
+
+  .bs-vertical-nav:where([data-collapsed="true"]) {
+    width: var(--bs-vertical-nav-collapsed-width);
+  }
 }
 .bs-vertical-nav::-webkit-scrollbar {
   display: none;  /* Safari and Chrome */
 }
+/* ===== Collapse Toggle Button ===== */
+.bs-vertical-nav-toggle {
+  align-items: center;
+  background: var(--toggle-bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: 100px;
+  color: var(--toggle-color);
+  cursor: pointer;
+  display: none; /* Hidden by default on mobile */
+  height: 24px;
+  width: 24px;
+  justify-content: center;
+  padding: 0;
+  position: fixed;
+  left: calc(var(--bs-vertical-nav-width) - 0.5rem);
+  pointer-events: auto; /* Ensure button is clickable */
+  top: calc(var(--top-offset) + 1.125rem); /* top-offset + 18px */
+  transition: left 300ms ease-out, opacity 100ms ease-out;
+  z-index: 1002; /* Above nav to prevent hover conflicts */
+}
+@media (min-width: 1166px) {
+  .bs-vertical-nav-toggle {
+    display: flex;
+    opacity: 1;
+    transition: left 300ms ease-out, opacity 100ms ease-out;
+  }
+  
+  .bs-vertical-nav-toggle:where([data-collapsed="true"]) {
+    left: calc(var(--bs-vertical-nav-collapsed-width) - 0.5rem);
+  }
+  
+  /* Adjust position for narrow variant when NOT collapsed */
+  .bs-vertical-nav-toggle:where([data-narrow="true"]:not([data-collapsed="true"])) {
+    left: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem);
+  }
+}
+.bs-vertical-nav-toggle-icon {
+  height: 8px;
+  width: 8px;
+  color: inherit;
+  transition: transform 200ms var(--bs-transition-ease);
+  will-change: transform;
+  flex-shrink: 0;
+}
 /* ===== Sections ===== */
 .bs-vertical-nav :where(.bs-vertical-nav-section) {
-  border-top: 2px solid var(--border-color);
+  border-top: 1px solid var(--border-color);
   margin-top: 0.5rem;
   padding-top: 0.5rem;
 }
 @media (min-width: 1166px) {
   .bs-vertical-nav :where(.bs-vertical-nav-section) {
-    margin-top: 0.25rem;
+    margin-top: 0.5rem;
   }
 }
+/* Divider-only sections have no additional padding since no toggle button */
+.bs-vertical-nav :where(.bs-vertical-nav-section[data-divider-only="true"]) {
+  padding-top: 0.5rem;
+}
 /* Don't show border if the very first item is a section */
 .bs-vertical-nav :where(ul li:first-child) {
   border-top: none;
@@ -6147,7 +6226,7 @@ This must go last to properly override the other classes
 @media (min-width: 1166px) {
   .bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
     /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
   }
 
   .bs-vertical-nav :where(.bs-vertical-nav-section-toggle span:first-child) {
@@ -6155,7 +6234,7 @@ This must go last to properly override the other classes
     text-align: start;
     text-overflow: ellipsis;
     /* nav width - nav left padding - nav right padding - link left padding - link right padding - caret width */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.75rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem - 0.75rem);
   }
 }
 .bs-vertical-nav :where(.bs-vertical-nav-section-toggle-caret) {
@@ -6178,64 +6257,70 @@ This must go last to properly override the other classes
   margin-top: 0;
   padding-left: 0;
 }
-@media (min-width: 1166px) {
-  .bs-vertical-nav :where(ul) {
-    gap: 0.25rem;
-  }
-}
 /* ===== Nav List Items / Links */
 .bs-vertical-nav :where(ul li a) {
   align-items: center;
   border-radius: 4px;
+  color: var(--link-color);
   cursor: pointer;
   display: flex;
   font-size: 1rem;
   font-weight: 400;
   gap: 0.5rem;
   height: 100%;
-  padding-bottom: 0.75rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.75rem;
-  width: 100%;
+  padding: 0.5rem 0.75rem;
+  position: relative;
+}
+/* Narrow variant - text always visible on desktop (overrides collapsed state) */
+@media (min-width: 1166px) {
+  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a > span:last-child) {
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+  }
 }
 @media (min-width: 1166px) {
   .bs-vertical-nav :where(ul li a) {
     font-size: 0.875rem;
-    padding-bottom: 0.5rem;
-    padding-top: 0.5rem;
+    min-height: 2.5rem; /* Fixed minimum height to prevent height changes */
+    padding: 0.5rem 0.75rem; /* Explicit padding for consistency */
     /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
+  }
+
+  /* Collapsed state width */
+  .bs-vertical-nav:where([data-collapsed="true"]) :where(ul li a) {
+    /* collapsed width - nav left padding - nav right padding */
+    width: calc(var(--bs-vertical-nav-collapsed-width) - 1rem - 1rem);
   }
 
   /* Text overflow - normal width - no icon */
   .bs-vertical-nav :where(ul li a:not(:has(.bs-vertical-nav-link-icon)) span:first-child) {
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
     /* nav width - nav left padding - nav right padding - link left padding - link right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem  - 0.75rem - 0.75rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem);
   }
 
   /* Text overflow - normal width - with icon */
   .bs-vertical-nav :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
     /* nav width - nav left padding - nav right padding - link left padding - link right padding - icon width - icon gap */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.875rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem - 1rem - 0.5rem);
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
     flex-direction: column;
     font-size: 0.6875rem;
-    gap: 0.25rem;
+    gap: 0.5rem; /* 8px - matches Figma */
     line-height: 1.3;
-    padding-bottom: 0.75rem;
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-    padding-top: 0.75rem;
+    padding: 0.5rem 0.75rem; /* 8px 12px - matches Figma */
     text-align: center;
     /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-narrow-width) - 1rem - 1rem);
   }
 
   /* Text overflow - narrow width */
@@ -6243,32 +6328,142 @@ This must go last to properly override the other classes
   .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
     /* nav width - nav left padding - nav right padding - link left padding  */
     width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
   }
 }
+.bs-vertical-nav-section:where([data-app-links="true"]) {
+  padding-top: 1rem;
+}
+.bs-vertical-nav-section:where([data-app-links="true"]) :where(ul li a) {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
 .bs-vertical-nav :where(ul li a:hover) {
+  color: var(--link-hover-color);
   font-weight: 600;
 }
+.bs-vertical-nav-section:where([data-app-links="true"]) :where(ul li a:hover) {
+  color: var(--bs-ink-blue);
+}
 .bs-vertical-nav :where(ul li a[data-active="true"]) {
   background-color: var(--active-color);
+  color: var(--link-active-color);
   font-weight: 600;
+  transition: background-color 200ms ease-out;
 }
+/* Icon sizing - mobile/default */
 .bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
   height: 1rem;
   width: 1rem;
+  flex-shrink: 0; /* Prevent icon from shrinking */
 }
 @media (min-width: 1166px) {
-  .bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
+  /* Wide and collapsible variant icons - 14px */
+  .bs-vertical-nav:not([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
     height: 0.875rem;
     width: 0.875rem;
   }
 
+  /* Narrow variant icons - 16px (inherits from base) */
   .bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
     height: 1rem;
     width: 1rem;
   }
 }
+.bs-vertical-nav-section:where([data-app-links="true"]) .bs-vertical-nav-link-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-left: 0;
+}
+/* Default: Show text on mobile */
+.bs-vertical-nav :where(ul li a > span:last-child) {
+  opacity: 1;
+  visibility: visible;
+  width: auto;
+}
+/* Desktop: Show text when NOT collapsed */
+@media (min-width: 1166px) {
+  .bs-vertical-nav:not([data-collapsed="true"]) :where(ul li a > span:last-child) {
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+    /* Immediate visibility when appropriate */
+    transition: opacity 150ms ease, visibility 0ms linear;
+  }
+}
+/* Desktop: Hide text when collapsed */
+@media (min-width: 1166px) {
+  .bs-vertical-nav:where([data-collapsed="true"]) :where(ul li a > span:last-child) {
+    opacity: 0;
+    visibility: hidden;
+    width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    /* Delay visibility to prevent flash during breakpoint transition */
+    transition: opacity 150ms ease, visibility 0ms linear 150ms;
+  }
+}
+/* Keep icons visible when collapsed */
+.bs-vertical-nav:where([data-collapsed="true"]) :where(.bs-vertical-nav-link-icon) {
+  display: block;
+}
+/* Hide section toggle when collapsed */
+.bs-vertical-nav:where([data-collapsed="true"]) :where(.bs-vertical-nav-section-toggle) {
+  display: none;
+}
+/* ===== Hover Expansion (CSS-only) ===== */
+@media (min-width: 1166px) {
+  /* Expand nav on hover when collapsed and collapsible - but NOT when hovering the toggle button */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"][data-collapsible="true"]) {
+    width: var(--bs-vertical-nav-width);
+  }
+
+  /* Narrow variant should respect narrow width on hover */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"][data-narrow="true"]) {
+    width: var(--bs-vertical-nav-narrow-width);
+  }
+
+  /* Expand link widths on hover when collapsed */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(ul li a) {
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
+  }
+
+  /* Narrow variant links should respect narrow width on hover */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"][data-narrow="true"]) :where(ul li a) {
+    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
+  }
+
+  /* Show text on hover when collapsed */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(ul li a > span:last-child) {
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+  }
+
+  /* Hide toggle button on hover when collapsed - but NOT when hovering the button itself */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav-toggle[data-collapsed="true"]) {
+    opacity: 0;
+    pointer-events: none; /* Prevent interaction when hidden */
+  }
+
+  /* Show section toggles on hover when collapsed */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(.bs-vertical-nav-section-toggle) {
+    display: flex;
+  }
+}
+/* ===== Top Content ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-top-content) {
+  margin-bottom: 0.5rem;
+  padding: 0;
+}
+@media (min-width: 1166px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-top-content) {
+    margin-bottom: 0.75rem;
+  }
+}
 /* ===== End Items ===== */
 .bs-vertical-nav :where(.bs-vertical-nav-end-items) {
   display: flex;
@@ -6276,11 +6471,23 @@ This must go last to properly override the other classes
   gap: 0.25rem;
   margin-top: auto;
 }
+/* End items visibility for collapsible variant (desktop only) */
+@media (min-width: 1166px) {
+  /* Hide end items when collapsible variant is collapsed */
+  .bs-vertical-nav:where([data-collapsible="true"][data-collapsed="true"]) :where(.bs-vertical-nav-end-items) {
+    display: none;
+  }
+
+  /* Show end items on hover when collapsible variant is collapsed */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsible="true"][data-collapsed="true"]) :where(.bs-vertical-nav-end-items) {
+    display: flex;
+  }
+}
 .bs-vertical-nav :where(.bs-vertical-nav-end-items > *) {
-  color: var(--bs-white);
+  color: var(--text-color);
 }
 .bs-vertical-nav :where(.bs-vertical-nav-end-items > *:not(button)) {
-  color: var(--bs-white);
+  color: var(--text-color);
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -6297,6 +6504,13 @@ This must go last to properly override the other classes
   margin-right: 0.75rem;
   margin-top: 0.5rem;
 }
+/* Hide end items in narrow variant (all screen sizes) */
 .bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-end-items) {
   display: none;
 }
+/* ===== CSS-Only Page Layout Support ===== */
+/* Apply to any element that needs to adjust for navigation width (e.g., headers, main content) */
+.bs-header-with-nav {
+  margin-inline-start: var(--bs-page-nav-width);
+  transition: margin-inline-start 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}