@wwtdev/bsds-css 3.0.17 → 3.1.0

package/README.md

@@ -100,7 +100,7 @@ Alternatively, you can leverage native CSS `@layer` to ensure TW utilities will
 
 ### 3. Dark Mode-compatible "semantic" color utilities
 
-We've extended the TW theme with color utilities that will automatically adjust when using dark mode.  These classes require the CSS custom properties defined in the global stylesheet (`wwt-bsds.css`).  If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from [tokens.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/tokens.css) and [global.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/global.css) in your project.
+We've extended the TW theme with color utilities that will automatically adjust when using dark mode.  These classes require the CSS custom properties defined in the global stylesheet (`wwt-bsds.css`).  If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from [tokens.css](https://github.com/wwt-custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/tokens.css) and [global.css](https://github.com/wwt-custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/global.css) in your project.
 
 
 ### Browser Support

package/dist/wwt-bsds-components.css

@@ -221,7 +221,6 @@
 }
 /* Backdrop for mobile bottom sheet */
 .bs-dropdown-deprecated-backdrop {
-  -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   background: rgba(29, 30, 72, 0.05);
   bottom: 0;
@@ -658,7 +657,7 @@ Custom properties:
   padding-inline: var(--input-padding-inline, 0.75rem);
   text-overflow: ellipsis;
 }
-:where(.dark) .bs-select-deprecated {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated {
   --input-bg: transparent;
 }
 .bs-select-deprecated {
@@ -671,11 +670,11 @@ Custom properties:
 .bs-select-deprecated:where([data-placeholder="true"]) {
   color: var(--input-placeholder, var(--bs-violet-100));
 }
-:where(.dark) .bs-select-deprecated::-moz-placeholder {
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated::-moz-placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
-:where(.dark) .bs-select-deprecated::placeholder,
-:where(.dark) .bs-select-deprecated:where([data-placeholder="true"]) {
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated::placeholder,
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated:where([data-placeholder="true"]) {
   --input-placeholder: var(--bs-violet-200);
 }
 .bs-select-deprecated:where(:focus-visible)::-moz-placeholder {
@@ -728,11 +727,11 @@ Custom properties:
   background-image: none;
   height: auto;
 }
-:where(.dark) .bs-select-deprecated {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated {
   /* URL Encoded SVG dropdown caret so there is something there */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
-:where(.dark) .bs-select-deprecated:where(:disabled) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated:where(:disabled) {
   /* URL Encoded SVG dropdown caret so there is something there */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23555775' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
@@ -745,8 +744,8 @@ Custom properties:
   display: flex;
   padding-right: var(--input-padding-inline, 0.75rem);
 }
-:where(.dark) :where(button).bs-select-deprecated,
-:where(.dark) :where(button).bs-select-deprecated:where(:disabled) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :where(button).bs-select-deprecated,
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :where(button).bs-select-deprecated:where(:disabled) {
   background-image: none;
 }
 :where(button).bs-select-deprecated :where(*:first-child) {
@@ -942,7 +941,7 @@ Custom properties:
   width: max-content;
   z-index: 999;
 }
-:where(.dark) .bs-tooltip :where(.bs-tooltip-text) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text) {
   color: var(--bs-ink-base);
 }
 /* -------------------- POSITION: UNDEFINED / TOP -------------------- */
@@ -1272,12 +1271,16 @@ This must go last to properly override the other classes
     margin-top: 0;
   }
 }
-/* COLOR VARIANTS */
-.bs-alert:where([data-variant="success"]) {
+/* COLOR VARIANTS
+'success' has been deprecated in favor of 'positive' naming convention.
+*/
+.bs-alert:where([data-variant="success"]),
+.bs-alert:where([data-variant="positive"]) {
   background-color: var(--bs-positive-highlight);
   border-color: var(--bs-ink-positive);
 }
-.bs-alert:where([data-variant="success"]) :where(.bs-alert-icon) {
+.bs-alert:where([data-variant="success"]) :where(.bs-alert-icon),
+.bs-alert:where([data-variant="positive"]) :where(.bs-alert-icon) {
   color: var(--bs-ink-positive);
 }
 .bs-alert:where([data-variant="warning"]) {
@@ -1295,16 +1298,15 @@ This must go last to properly override the other classes
   color: var(--bs-ink-negative);
 }
 /* DARK MODE SPECIAL CASE */
-.dark .bs-alert :where(.bs-alert-action) {
-  --btn-border-color-focused: var(--bs-text-base);
-  --btn-text-color: var(--bs-text-base);
-  --btn-text-color-hovered: var(--bs-text-base);
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-alert :where(.bs-alert-action) {
+  --btn-border-color-focused: var(--bs-ink-base);
+  --btn-text-color: var(--bs-ink-base);
+  --btn-text-color-hovered: var(--bs-ink-base);
 }
 .bs-backdrop {
   position: fixed;
   inset: 0;
-  -webkit-backdrop-filter: blur(4px);
-          backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
   background: rgba(29, 30, 72, 0.05);
   transition-property: opacity;
   transition-duration: var(--bs-backdrop-transition-duration);
@@ -1498,7 +1500,7 @@ This must go last to properly override the other classes
 }
 /*
 Workaround for BsPopover shifting issue on BsButton scale down
-See: https://github.wwt.com/custom-apps/wwt-blue-steel/pull/917
+See: https://github.com/wwt-custom-apps/wwt-blue-steel/pull/917
 */
 .bs-button:where(.bs-button-no-scale:active) {
   transform: scale(1);
@@ -1664,6 +1666,8 @@ See: https://github.wwt.com/custom-apps/wwt-blue-steel/pull/917
   --btn-padding: .25rem .75rem .375rem;
   /* Std button size="sm" text size is same across all media sizes */
   --btn-text-size: var(--bs-text-sm);
+  /* Override height to ensure consistent sizing */
+  height: var(--btn-height);
 }
 /* DEPRECATED */
 /* Text buttons: For now, text size not dependent on media size */
@@ -2157,11 +2161,11 @@ a.bs-circle-button {
   font-weight: var(--description-weight);
   line-height: var(--description-line-height);
 }
-.bs-empty-state :where(a) {
+.bs-empty-state :where(a:not(.bs-button)) {
   color: var(--bs-ink-primary);
   text-decoration: underline;
 }
-.bs-empty-state :where(a:hover) {
+.bs-empty-state :where(a:hover:not(.bs-button)) {
   cursor: pointer;
 }
 /* Call to Actions */
@@ -2302,7 +2306,7 @@ button:where(.bs-filter-button) {
 .bs-filter-button :where(.bs-badge) {
   --badge-bg: var(--bs-ink-primary);
 }
-:where(.dark) .bs-filter-button :where(.bs-badge) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-filter-button :where(.bs-badge) {
   --badge-bg: var(--bs-primary-medium);
 }
 .bs-filter-button:hover :where(.bs-badge) {
@@ -2885,8 +2889,12 @@ button:where(.bs-filter-button) {
   color: var(--bs-ink-white);
   background-color: var(--bs-neutral-base);
 }
+/* Size */
+.bs-inline-tab:where([data-size="sm"]) {
+  height: 1.75rem;
+}
 /* -- Dark Mode Overrides -- */
-:where(.dark .bs-inline-tab) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-inline-tab {
 
   /* Selected & Disabled */
   &[data-selected]:where(:disabled, [aria-disabled="true"]) {
@@ -2910,7 +2918,7 @@ button:where(.bs-filter-button) {
   pointer-events: none;
   position: relative;
 }
-:where(.dark) .bs-input-addon {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-addon {
   background-color: var(--input-bg, transparent);
 }
 .bs-input-addon * {
@@ -3155,6 +3163,10 @@ data-autosize-icons="true" - see above
 .bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible) {
   outline: 1px solid var(--focus-border);
 }
+/* -- Small size variant -- */
+.bs-input-addon:where([data-size="sm"]) {
+  --input-addon-height: 1.75rem;
+}
 /* !! Some styles duplicated to base/input-booleans.css !! */
 .bs-boolean {
   display: inline-flex;
@@ -3321,7 +3333,7 @@ data-autosize-icons="true" - see above
   overflow: hidden;
   white-space: nowrap;
 }
-:where(.dark) .bs-input-button-placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-button-placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
 /* -- Display Value -- */
@@ -3370,7 +3382,7 @@ data-autosize-icons="true" - see above
   --badge-bg: var(--bs-ink-disabled);
 }
 .bs-input-button:where([aria-disabled="true"]) :where(.bs-input-button-caret, .bs-input-button-placeholder) {
- display: none;
+  display: none;
 }
 .bs-input-phone :where(.bs-input-addon) > button {
   align-items: center;
@@ -3396,20 +3408,28 @@ data-autosize-icons="true" - see above
   min-width: 7.5rem;
 }
 .bs-input-search {
+  align-items: center;
+  background-color: var(--input-bg, var(--bs-bg-base));
   display: grid;
   grid-template-columns: 1fr 2.5rem;
-  align-items: center;
-  width: 100%;
   height: var(--input-search-height, 2.5rem);
+  width: 100%;
+
+  :where(:has(.bs-input-search-input:disabled)) {
+    --input-bg: var(--bs-bg-disabled);
+  }
+}
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-search {
+  --input-bg: transparent;
 }
 /* -- Icon -- */
 .bs-input-search-icon {
   --icon-size: var(--search-icon-size, 1.75rem);
-  position: relative;
   grid-area: 1 / 1;
-  padding: var(--search-icon-padding, 0 0 0 .75rem);
   height: 100%;
+  padding: var(--search-icon-padding, 0 0 0 .75rem);
   pointer-events: none;
+  position: relative;
   z-index: 1;
 }
 .bs-input-search-icon :where(svg) {
@@ -3417,6 +3437,7 @@ data-autosize-icons="true" - see above
 }
 /* -- Input -- */
 .bs-input-search-input {
+  --input-bg: transparent;
   --input-padding-inline: .75rem;
   grid-area: 1 / 1 / 1 / -1;
   pointer-events: auto;
@@ -3436,19 +3457,19 @@ data-autosize-icons="true" - see above
 }
 /* -- Button -- */
 .bs-input-search-button {
-  grid-area: 1 / 2 / 1 / -1;
-  display: flex;
   align-items: center;
-  justify-content: center;
-  height: 100%;
-  cursor: pointer;
   background-color: inherit;
+  cursor: pointer;
+  display: flex;
+  grid-area: 1 / 2 / 1 / -1;
+  height: 100%;
+  justify-content: center;
   transition: transform var(--bs-transition-fast) var(--bs-transition-ease);
 }
 .bs-input-search-button:where(:focus-visible) {
-  outline: none;
   border-radius: .25rem;
   box-shadow: var(--bs-blue-base) 0px 0px 0px 1px inset;
+  outline: none;
 }
 /* -- Disabled -- */
 .bs-input-search:where(:has(:disabled)) {
@@ -3457,30 +3478,41 @@ data-autosize-icons="true" - see above
 /* -- Filter Variant -- */
 .bs-input-search:where([data-variant="filter"]) :where(.bs-input-search-input) {
   --focus-border: transparent;
-  --input-border: transparent;
   --input-addon-height: 1.5rem;
+  --input-border: transparent;
   --input-caret: var(--bs-blue-base);
   --input-padding-block: 0 0.125rem;
   --input-padding-inline: 2.5rem 0.5rem;
   --input-placeholder: var(--bs-ink-light);
   --input-text-size: var(--bs-text-sm);
-  --search-icon-size: 1rem;
   --search-icon-padding: 0;
+  --search-icon-size: 1rem;
 }
 .bs-input-search:where([data-variant="filter"]):where(:focus-within) .bs-input-search-input {
   --input-border: transparent;
 }
-:where(.dark) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::-moz-placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::-moz-placeholder {
   --input-placeholder: var(--bs-ink-light);
 }
-:where(.dark) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::placeholder {
   --input-placeholder: var(--bs-ink-light);
 }
 .bs-input-search:where([data-variant="filter"]):where(:has(:disabled)) .bs-input-search-input {
   --input-bg: var(--bs-bg-base);
   --input-border: transparent;
 }
-/* !! Styles duplicated to base/input-general.css !! */
+/* -- Small size variant -- */
+.bs-input-search:where([data-size="sm"]) {
+  --input-search-height: 1.75rem;
+  --search-icon-size: 1.5rem;
+}
+.bs-input-search:where([data-size="sm"]) .bs-input-search-icon + .bs-input-search-input {
+  padding-inline-start: 2rem;
+}
+.bs-input-search:where([data-size="sm"]) .bs-input-search-input:has(+ .bs-input-search-button) {
+  padding-inline-end: 2rem;
+}
+/* !! Styles duplicated to base/input-text.css !! */
 /* Includes text inputs & textarea */
 /*
 Custom properties:
@@ -3506,12 +3538,12 @@ Custom properties:
   color: var(--bs-ink-base);
   font-size: var(--input-text-size, var(--bs-text-base));
   font-weight: 400;
-  height: 2.5rem;
+  height: var(--input-height, 2.5rem);
   line-height: var(--bs-leading-lg);
   padding-block: var(--input-padding-block, 0.0625rem);
   padding-inline: var(--input-padding-inline, 0.75rem);
 }
-:where(.dark) :is(.bs-input, .bs-textarea) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(.bs-input, .bs-textarea) {
   --input-bg: transparent;
 }
 :is(.bs-input, .bs-textarea) {
@@ -3533,11 +3565,11 @@ Custom properties:
 :is(.bs-input, .bs-textarea):where([data-placeholder="true"]) {
   color: var(--input-placeholder, var(--bs-violet-100));
 }
-:where(.dark) :is(.bs-input, .bs-textarea)::-moz-placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(.bs-input, .bs-textarea)::-moz-placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
-:where(.dark) :is(.bs-input, .bs-textarea)::placeholder,
-:where(.dark) :is(.bs-input, .bs-textarea):where([data-placeholder="true"]) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(.bs-input, .bs-textarea)::placeholder,
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(.bs-input, .bs-textarea):where([data-placeholder="true"]) {
   --input-placeholder: var(--bs-violet-200);
 }
 :is(.bs-input, .bs-textarea):where(:focus-visible)::-moz-placeholder {
@@ -3581,6 +3613,14 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
 :is(.bs-input, .bs-textarea)[disabled]::placeholder {
   opacity: 0;
 }
+/* -- Small size variant -- */
+.bs-input:where([data-size="sm"]),
+:where([data-size="sm"]) .bs-input {
+  --input-height: 1.75rem;
+  --input-padding-block: 0.125rem;
+  --input-padding-inline: 0.5rem;
+  --input-text-size: var(--bs-text-sm);
+}
 /* !! Some styles duplicated to base/labels.css !! */
 label:where(.bs-label) {
   display: inline-block;
@@ -3855,7 +3895,6 @@ label:where(.bs-label) {
   padding-top: 0.125rem;
 }
 .bs-overlay {
-  -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   background: rgba(29, 30, 72, 0.05);
   bottom: 0;
@@ -4053,7 +4092,7 @@ label:where(.bs-label) {
   --pill-background: var(--bs-purple-100);
 }
 /* Dark mode selector for complete */
-:where(.dark) .bs-pill:where([data-status^="complete"]) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-pill:where([data-status^="complete"]) {
   --status-color: var(--bs-purple-100);
   --pill-background: var(--bs-purple-400);
 }
@@ -4079,7 +4118,7 @@ label:where(.bs-label) {
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%230A0B19'/%3E%3C/svg%3E");
 }
 /* White + */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="add"]):not(:disabled, [aria-disabled="true"])::after{
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-pill:where([data-variant^="filter"][data-variant*="add"]):not(:disabled, [aria-disabled="true"])::after{
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%23ffffff'/%3E%3C/svg%3E");
 }
 /* ------------------------------ Variant: "Filter Remove" Styles ------------------------------ */
@@ -4088,7 +4127,7 @@ label:where(.bs-label) {
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
 }
 /* White X */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):not(:disabled, [aria-disabled="true"])::after {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):not(:disabled, [aria-disabled="true"])::after {
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
 }
 /* ------------------------------ Variant: "Filter Active" Styles DEPRECATED ------------------------------ */
@@ -4200,6 +4239,7 @@ label:where(.bs-label) {
 
   aspect-ratio: 1/1;
   border-radius: 50%;
+  color: var(--bs-ink-primary);
   height: var(--profile-size);
   overflow: hidden;
   position: relative;
@@ -4235,7 +4275,7 @@ label:where(.bs-label) {
 .bs-profile-img:where([data-no-img]:not([data-no-img="false"]))::after {
   align-items: center;
   border: 1px solid currentColor;
-  color: var(--bs-ink-primary);
+  color: currentColor;
   content: attr(data-initials);
   display: flex;
   font-size: var(--profile-text);
@@ -4486,6 +4526,79 @@ a.bs-profile:where([data-layout]):hover {
 .bs-switch input:where(:disabled) {
   cursor: default;
 }
+.bs-switch-button-group {
+  display: flex;
+  background-color: var(--bs-bg-base);
+  position: relative;
+  align-items: stretch;
+}
+.bs-switch-button {
+  display: flex;
+  flex: 1 0 0;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--bs-space-3);
+  border: 1px solid var(--bs-border-base);
+  font-weight: var(--bs-font-normal);
+  background: transparent;
+  font-size: var(--bs-text-sm);
+  line-height:var(--bs-leading-lg);
+  font-family: inherit;
+  color: var(--bs-ink-base);
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+}
+.bs-switch-button:where(:first-child) {
+  border-radius: 0.25rem 0 0 0.25rem;
+}
+.bs-switch-button:where(:last-child) {
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+.bs-switch-button:where(:not(:first-child)) {
+  border-left: none;
+}
+.bs-switch-button:where(:not([data-selected]):hover) {
+  color: var(--bs-ink-primary);
+}
+/* focus */
+.bs-switch-button:where(:focus-visible) {
+  border: 1px solid var(--bs-border-active);
+}
+.bs-switch-button:where(:last-child):where(:focus-visible) {
+  border-right: 1px solid var(--bs-border-active);
+}
+/* Selected state */
+.bs-switch-button:where([data-selected]) {
+  background-color: var(--bs-primary-highlight);
+  border: 1px solid var(--bs-border-active);
+  color: var(--bs-ink-primary);
+  font-weight: var(--bs-font-semibold);
+}
+.bs-switch-button:where(:has(+ .bs-switch-button:where([data-selected="true"]))) {
+  border-right-color: transparent;
+}
+/* Size variants */
+.bs-switch-button-group:where([data-size="sm"]) {
+  height: 28px;
+}
+.bs-switch-button-group:where([data-size="md"]) {
+  height: 40px;
+}
+/* disabled styling */
+/* .bs-switch-button-group[data-disabled] .bs-switch-button {  */
+.bs-switch-button:where(:disabled) {
+  cursor: default;
+  color: var(--bs-ink-disabled);
+  pointer-events: none;
+}
+/* .bs-switch-button-group[data-disabled] .bs-switch-button[data-selected] { */
+.bs-switch-button:where(:disabled):where([data-selected]) {
+  background-color: var(--bs-bg-disabled);
+  border: 1px solid var(--bs-ink-disabled);
+  color: var(--bs-ink-disabled);
+}
 .bs-tab-list {
   --active-line-max-width: 0;
   --active-line-offset: 0;
@@ -5117,7 +5230,11 @@ a.bs-text-button {
   --step-color: var(--bs-ink-warning);
   --progress-step-bg: var(--bs-warning-base);
 }
+/* 
+'error' status is deprecated, use 'negative' instead
+*/
 :is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="error"]),
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="negative"]),
 :is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="cancelled"]) {
   --step-color: var(--bs-ink-negative);
   --progress-step-bg: var(--bs-negative-base);
@@ -5134,12 +5251,12 @@ a.bs-text-button {
   --toggle-color: var(--bs-white);
   --top-offset: 48px;
 }
-.dark :where(.bs-vertical-nav-wrapper) {
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :where(.bs-vertical-nav-wrapper) {
   --bg-color: var(--bs-bg-base);
   --border-color: var(--bs-border-medium);
 }
 .bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"]),
-.dark :where(.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"])) {
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :where(.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);