@wwtdev/bsds-css 2.1.3 → 2.1.4

package/dist/components/_buttons.scss

@@ -141,6 +141,7 @@
 }
 .bs-button:where([data-text]:not([data-text="false"])):active {
   box-shadow: none;
+  transform: none;
 }
 
 /* ------------ Button Sizes, Media-based Text Sizing -------------- */

package/dist/components/_dropdown-options.scss

@@ -1,16 +1,14 @@
 @mixin dropdown-options() {
   /* Option list */
 .bs-dropdown-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   list-style: none;
-  margin-bottom: 0.25rem;
-  margin-top: 0.25rem;
+  margin-block: 0.25rem;
   max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
   overflow-y: auto;
-  padding: 0;
-}
-
-.bs-dropdown-options :where(li:first-child) {
-  margin-top: 0.5rem;
+  padding-block: 0.5rem;
 }
 
 /* Option list item */
@@ -25,11 +23,8 @@
   column-gap: 0.5rem;
   cursor: pointer;
   display: grid;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.25rem;
-  padding-left: 1.25rem;
-  padding-right: 1.375rem;
-  padding-top: 0.25rem;
+  padding-block: 0.25rem;
+  padding-inline: 1.25rem;
   row-gap: 0.125rem;
   word-break: break-word;
   word-wrap: break-word;
@@ -41,7 +36,7 @@
 }
 
 /* Variant: description */
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] > :nth-child(2)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   min-height: 1.125rem;
@@ -49,7 +44,7 @@
 }
 
 /* Variant: 2-col description */
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   grid-column-start: 2;
@@ -58,7 +53,7 @@
 }
 
 /* Hover or data-selected */
-.bs-dropdown-options :where(li:hover),
+.bs-dropdown-options :where(li:not([role="separator"]):hover),
 .bs-dropdown-options :where(li[data-selected]) {
   background-color: var(--bs-bg-medium);
   border-left: 4px solid var(--bs-blue-base);
@@ -77,18 +72,18 @@
 }
 
 /* Hover or data-selected for 2-col/description variants */
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)) {
   color: var(--bs-blue-base);
 }
 
 /* Hover or data-selected for negative + 2-col/description variants */
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)) {
   color: var(--bs-red-500);
 }
 
@@ -121,11 +116,37 @@
   --focus-border-color: var(--bs-red-200);
 }
 
+/* Multi-select divider */
+.bs-dropdown-options :where(li[role="separator"]) {
+  cursor: default;
+  padding-block: 0.125rem;
+  padding-right: 1.375rem;
+}
+
+.bs-dropdown-options :where(hr) {
+  background-color: var(--bs-navy-light);
+  height: .0625rem;
+  margin-block: 0;
+  margin-inline: 0;
+}
+
 @media (min-width: 752px)  {
   .bs-dropdown-options :where(li) {
     padding-left: 0.5rem;
     padding-right: 0.75rem;
   }
+
+  .bs-dropdown-options :where(li[role="separator"]) {
+    padding-right: 0.625rem;
+  }
+
+  .bs-dropdown-options :where(li:focus-visible) {
+    padding-left: 0.625rem;
+  }
+
+  .bs-dropdown-options :where(li[data-selected]:focus-visible) {
+    padding-left: 0.5rem;
+  }
 }
 
   }

package/dist/components/_form-input-composite.scss

@@ -197,9 +197,9 @@ and issues with box-sizing
 /* -------- Disabled styles -------- */
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])),
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
-  --input-bg: var(--bs-gray-200);
-  --input-border: var(--bs-gray-400);
-  color: var(--bs-gray-400);
+  --input-bg: var(--bs-bg-disabled);
+  --input-border: var(--bs-ink-disabled);
+  color: var(--bs-ink-disabled);
 }
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
   pointer-events: none;

package/dist/components/_form-labels.scss

@@ -8,22 +8,24 @@ label:where(.bs-label) {
 .bs-label,
 :where(label, legend) {
   --label-color: var(--bs-ink-base);
-
   color: var(--label-color);
   font-size: var(--bs-text-sm);
   font-weight: 600;
   line-height: var(--bs-leading-base);
 }
 
-:where([data-required]:not([data-required="false"])),
+/* Required asterisk */
+:where(label, legend) :where([data-required]:not([data-required="false"])),
 .bs-label :where([data-required="true"]) {
-  --label-color: var(--bs-ink-red);
+  color: var(--label-asterisk-color, var(--bs-ink-red));
 }
 
+/* Disabled state */
 :where(label[data-disabled]:not([data-disabled="false"])),
 :where(label[data-disabled]:not([data-disabled="false"])) *,
 .bs-label:where([data-disabled="true"]),
 .bs-label:where([data-disabled="true"]) * {
+  --label-asterisk-color: transparent;
   --label-color: var(--bs-ink-disabled);
 }
 

package/dist/components/_form-switches.scss

@@ -55,13 +55,13 @@
   width: var(--switch-width);
 }
 
-.bs-switch input:where(:checked) ~ span,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span {
+.bs-switch :where(input:checked) ~ :where(span),
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span) {
   --switch-background: var(--bs-blue-base);
 }
 
 /* Toggle "ball" */
-.bs-switch span::before {
+.bs-switch :where(span)::before {
   background-color: var(--ball-background);
   border-radius: 50%;
   box-sizing: border-box;
@@ -76,34 +76,25 @@
   z-index: 2;
 }
 
-.bs-switch input:where(:checked) ~ span::before,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span::before {
+.bs-switch :where(input:checked) ~ :where(span)::before,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span)::before {
   transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
 }
 
-.bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::before,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::before {
+.bs-switch :where(input:checked) ~ :where(span[data-inner-on-label][data-inner-off-label])::before,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span[data-inner-on-label][data-inner-off-label])::before {
   transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
 }
 
 
 /* Inner "on/off" text */
-
-.bs-switch span:where([data-inner-on-label][data-inner-off-label]) {
-  color: white;
-  --switch-width: 3.5rem;
-}
-
-.bs-switch:where([data-size="sm"]) span:where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 2.625rem;
-}
-
-.bs-switch span::after {
+.bs-switch :where(span)::after {
   align-items: center;
   color: var(--ball-background);
+  content: var(--inner-label-text);
   display: flex;
   height: 100%;
-  justify-content: flex-start;
+  justify-content: var(--inner-label-position, flex-start);
   left: 0;
   line-height: var(--inner-text-line-height);
   padding: var(--inner-text-padding);
@@ -113,35 +104,45 @@
   width: 100%;
 }
 
-.bs-switch input:where(:not(:checked)) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed="false"]) span:where([data-inner-on-label][data-inner-off-label])::after  {
-  content: attr(data-inner-off-label);
-  justify-content: flex-end;
+.bs-switch :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 3.5rem;
+}
+
+.bs-switch:where([data-size="sm"]) :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 2.625rem;
 }
 
-.bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::after {
-  content: attr(data-inner-on-label);
-  justify-content: flex-start;
+.bs-switch :where(input:not(:checked)) ~ :where([data-inner-on-label][data-inner-off-label])::after,
+.bs-switch:where([aria-pressed="false"]) :where([data-inner-on-label][data-inner-off-label])::after  {
+  --inner-label-position: flex-end;
+  --inner-label-text: attr(data-inner-off-label);
+}
+
+.bs-switch :where(input:checked) ~ :where([data-inner-on-label][data-inner-off-label])::after,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where([data-inner-on-label][data-inner-off-label])::after {
+  --inner-label-text: attr(data-inner-on-label);
 }
 
 /* Focus state */
 
-.bs-switch :where(input:focus-visible) + span {
+.bs-switch :where(input:focus-visible) + :where(span),
+.bs-switch:where(:focus-visible) :where(button span) {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-base));
   outline: 2px solid transparent;
 }
-:where(.box) .bs-switch :where(input:focus-visible) + span {
+:where(.box) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.box) .bs-switch:where(:focus-visible) :where(button span) {
   --offset-color: var(--bs-bg-medium);
 }
-:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + span {
+:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
   --offset-color: var(--bs-bg-invert-base);
 }
 
 /* Disabled state */
-
-.bs-switch:where([data-disabled]:not([data-disabled="false"])) {
+.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
+.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]) :is(input ~ span, button span) {
   --ball-background: var(--bs-ink-disabled);
   --switch-background: var(--bs-bg-disabled);
 }

package/dist/components/_form-text-fields.scss

@@ -116,8 +116,7 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
 :is(input, textarea, select)[disabled]::placeholder,
 :is(.bs-input, .bs-textarea, .bs-select):disabled::placeholder,
 :is(.bs-input, .bs-textarea, .bs-select)[disabled]::placeholder {
-  color: var(--bs-ink-disabled);
-  opacity: 1;
+  opacity: 0;
 }
 
 /* Select */

package/dist/components/_modal.scss

@@ -22,7 +22,18 @@
   opacity: 1;
 }
 
-.bs-modal :where(.close-button-container) {
+.bs-modal :where(.modal-header) {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+}
+
+.bs-modal :where(.modal-title) {
+  flex-grow: 1;
+}
+
+.bs-modal :where(.only-close-button-modal-header) {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 1.5rem;

package/dist/components/buttons.css

@@ -140,6 +140,7 @@
 }
 .bs-button:where([data-text]:not([data-text="false"])):active {
   box-shadow: none;
+  transform: none;
 }
 
 /* ------------ Button Sizes, Media-based Text Sizing -------------- */

package/dist/components/dropdown-options.css

@@ -1,15 +1,13 @@
 /* Option list */
 .bs-dropdown-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   list-style: none;
-  margin-bottom: 0.25rem;
-  margin-top: 0.25rem;
+  margin-block: 0.25rem;
   max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
   overflow-y: auto;
-  padding: 0;
-}
-
-.bs-dropdown-options :where(li:first-child) {
-  margin-top: 0.5rem;
+  padding-block: 0.5rem;
 }
 
 /* Option list item */
@@ -24,11 +22,8 @@
   column-gap: 0.5rem;
   cursor: pointer;
   display: grid;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.25rem;
-  padding-left: 1.25rem;
-  padding-right: 1.375rem;
-  padding-top: 0.25rem;
+  padding-block: 0.25rem;
+  padding-inline: 1.25rem;
   row-gap: 0.125rem;
   word-break: break-word;
   word-wrap: break-word;
@@ -40,7 +35,7 @@
 }
 
 /* Variant: description */
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] > :nth-child(2)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   min-height: 1.125rem;
@@ -48,7 +43,7 @@
 }
 
 /* Variant: 2-col description */
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   grid-column-start: 2;
@@ -57,7 +52,7 @@
 }
 
 /* Hover or data-selected */
-.bs-dropdown-options :where(li:hover),
+.bs-dropdown-options :where(li:not([role="separator"]):hover),
 .bs-dropdown-options :where(li[data-selected]) {
   background-color: var(--bs-bg-medium);
   border-left: 4px solid var(--bs-blue-base);
@@ -76,18 +71,18 @@
 }
 
 /* Hover or data-selected for 2-col/description variants */
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)) {
   color: var(--bs-blue-base);
 }
 
 /* Hover or data-selected for negative + 2-col/description variants */
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)) {
   color: var(--bs-red-500);
 }
 
@@ -120,9 +115,35 @@
   --focus-border-color: var(--bs-red-200);
 }
 
+/* Multi-select divider */
+.bs-dropdown-options :where(li[role="separator"]) {
+  cursor: default;
+  padding-block: 0.125rem;
+  padding-right: 1.375rem;
+}
+
+.bs-dropdown-options :where(hr) {
+  background-color: var(--bs-navy-light);
+  height: .0625rem;
+  margin-block: 0;
+  margin-inline: 0;
+}
+
 @media (min-width: 752px)  {
   .bs-dropdown-options :where(li) {
     padding-left: 0.5rem;
     padding-right: 0.75rem;
   }
+
+  .bs-dropdown-options :where(li[role="separator"]) {
+    padding-right: 0.625rem;
+  }
+
+  .bs-dropdown-options :where(li:focus-visible) {
+    padding-left: 0.625rem;
+  }
+
+  .bs-dropdown-options :where(li[data-selected]:focus-visible) {
+    padding-left: 0.5rem;
+  }
 }

package/dist/components/form-input-composite.css

@@ -196,9 +196,9 @@ and issues with box-sizing
 /* -------- Disabled styles -------- */
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])),
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
-  --input-bg: var(--bs-gray-200);
-  --input-border: var(--bs-gray-400);
-  color: var(--bs-gray-400);
+  --input-bg: var(--bs-bg-disabled);
+  --input-border: var(--bs-ink-disabled);
+  color: var(--bs-ink-disabled);
 }
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
   pointer-events: none;

package/dist/components/form-labels.css

@@ -7,21 +7,23 @@ label:where(.bs-label) {
 .bs-label,
 :where(label, legend) {
   --label-color: var(--bs-ink-base);
-
   color: var(--label-color);
   font-size: var(--bs-text-sm);
   font-weight: 600;
   line-height: var(--bs-leading-base);
 }
 
-:where([data-required]:not([data-required="false"])),
+/* Required asterisk */
+:where(label, legend) :where([data-required]:not([data-required="false"])),
 .bs-label :where([data-required="true"]) {
-  --label-color: var(--bs-ink-red);
+  color: var(--label-asterisk-color, var(--bs-ink-red));
 }
 
+/* Disabled state */
 :where(label[data-disabled]:not([data-disabled="false"])),
 :where(label[data-disabled]:not([data-disabled="false"])) *,
 .bs-label:where([data-disabled="true"]),
 .bs-label:where([data-disabled="true"]) * {
+  --label-asterisk-color: transparent;
   --label-color: var(--bs-ink-disabled);
 }

package/dist/components/form-switches.css

@@ -54,13 +54,13 @@
   width: var(--switch-width);
 }
 
-.bs-switch input:where(:checked) ~ span,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span {
+.bs-switch :where(input:checked) ~ :where(span),
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span) {
   --switch-background: var(--bs-blue-base);
 }
 
 /* Toggle "ball" */
-.bs-switch span::before {
+.bs-switch :where(span)::before {
   background-color: var(--ball-background);
   border-radius: 50%;
   box-sizing: border-box;
@@ -75,34 +75,25 @@
   z-index: 2;
 }
 
-.bs-switch input:where(:checked) ~ span::before,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span::before {
+.bs-switch :where(input:checked) ~ :where(span)::before,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span)::before {
   transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
 }
 
-.bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::before,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::before {
+.bs-switch :where(input:checked) ~ :where(span[data-inner-on-label][data-inner-off-label])::before,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span[data-inner-on-label][data-inner-off-label])::before {
   transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
 }
 
 
 /* Inner "on/off" text */
-
-.bs-switch span:where([data-inner-on-label][data-inner-off-label]) {
-  color: white;
-  --switch-width: 3.5rem;
-}
-
-.bs-switch:where([data-size="sm"]) span:where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 2.625rem;
-}
-
-.bs-switch span::after {
+.bs-switch :where(span)::after {
   align-items: center;
   color: var(--ball-background);
+  content: var(--inner-label-text);
   display: flex;
   height: 100%;
-  justify-content: flex-start;
+  justify-content: var(--inner-label-position, flex-start);
   left: 0;
   line-height: var(--inner-text-line-height);
   padding: var(--inner-text-padding);
@@ -112,35 +103,45 @@
   width: 100%;
 }
 
-.bs-switch input:where(:not(:checked)) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed="false"]) span:where([data-inner-on-label][data-inner-off-label])::after  {
-  content: attr(data-inner-off-label);
-  justify-content: flex-end;
+.bs-switch :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 3.5rem;
+}
+
+.bs-switch:where([data-size="sm"]) :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 2.625rem;
 }
 
-.bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::after {
-  content: attr(data-inner-on-label);
-  justify-content: flex-start;
+.bs-switch :where(input:not(:checked)) ~ :where([data-inner-on-label][data-inner-off-label])::after,
+.bs-switch:where([aria-pressed="false"]) :where([data-inner-on-label][data-inner-off-label])::after  {
+  --inner-label-position: flex-end;
+  --inner-label-text: attr(data-inner-off-label);
+}
+
+.bs-switch :where(input:checked) ~ :where([data-inner-on-label][data-inner-off-label])::after,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where([data-inner-on-label][data-inner-off-label])::after {
+  --inner-label-text: attr(data-inner-on-label);
 }
 
 /* Focus state */
 
-.bs-switch :where(input:focus-visible) + span {
+.bs-switch :where(input:focus-visible) + :where(span),
+.bs-switch:where(:focus-visible) :where(button span) {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-base));
   outline: 2px solid transparent;
 }
-:where(.box) .bs-switch :where(input:focus-visible) + span {
+:where(.box) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.box) .bs-switch:where(:focus-visible) :where(button span) {
   --offset-color: var(--bs-bg-medium);
 }
-:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + span {
+:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
   --offset-color: var(--bs-bg-invert-base);
 }
 
 /* Disabled state */
-
-.bs-switch:where([data-disabled]:not([data-disabled="false"])) {
+.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
+.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]) :is(input ~ span, button span) {
   --ball-background: var(--bs-ink-disabled);
   --switch-background: var(--bs-bg-disabled);
 }

package/dist/components/form-text-fields.css

@@ -115,8 +115,7 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
 :is(input, textarea, select)[disabled]::placeholder,
 :is(.bs-input, .bs-textarea, .bs-select):disabled::placeholder,
 :is(.bs-input, .bs-textarea, .bs-select)[disabled]::placeholder {
-  color: var(--bs-ink-disabled);
-  opacity: 1;
+  opacity: 0;
 }
 
 /* Select */

package/dist/components/modal.css

@@ -21,7 +21,18 @@
   opacity: 1;
 }
 
-.bs-modal :where(.close-button-container) {
+.bs-modal :where(.modal-header) {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+}
+
+.bs-modal :where(.modal-title) {
+  flex-grow: 1;
+}
+
+.bs-modal :where(.only-close-button-modal-header) {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 1.5rem;