@wwtdev/bsds-css 2.1.2 → 2.1.4

package/dist/components/_buttons.scss

@@ -13,7 +13,7 @@
   cursor: pointer;
   display: inline-flex;
   font-size: var(--btn-text-size, var(--bs-text-md));
-  font-weight: 600;
+  font-weight: var(--btn-weight, 600);
   height: var(--btn-height, 2.5rem);
   justify-content: center;
   line-height: 1.5;
@@ -125,10 +125,10 @@
   --btn-padding: 0;
   --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   --btn-text-size: var(--bs-text-md);
+  --btn-weight: 400;
   background-color: transparent;
   color: var(--bs-blue-500);
   cursor: pointer;
-  font-weight: 400;
   line-height: 150%;
 }
 .bs-button:where([data-text]:not([data-text="false"])):hover {
@@ -141,29 +141,49 @@
 }
 .bs-button:where([data-text]:not([data-text="false"])):active {
   box-shadow: none;
+  transform: none;
+}
+
+/* ------------ Button Sizes, Media-based Text Sizing -------------- */
+/* Std button: Mobile text size, WM text size */
+.bs-button {
+  --btn-text-size: 1rem;
+}
+
+@media (min-width: 752px) {
+  .bs-button {
+    --btn-text-size: 1.125rem;
+  }
 }
 
-/* ------------ Button Size -------------- */
 .bs-button:where([data-size^='sm']) {
   --btn-height: 1.75rem;
   --btn-padding: .25rem .75rem .375rem;
+  /* Std button size="sm" text size is same across all media sizes */
   --btn-text-size: var(--bs-text-sm);
 }
 
-.bs-button:where([data-size][data-text]:not([data-text="false"])) {
+/* Text buttons: For now, text size not dependent on media size */
+.bs-button:where([data-text]:not([data-text="false"])) {
   --btn-height: auto;
   --btn-padding: 0;
+  --btn-text-size: var(--bs-text-md);
 }
 
 .bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
   --btn-text-size: var(--bs-text-base);
 }
 
-/* Size XS only applies to text buttons */
+/* Size XS & XXS only applies to text buttons */
 .bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
   --btn-text-size: var(--bs-text-sm);
 }
 
+.bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-xs);
+  --btn-weight: 600;
+}
+
 
 /* ------------ Disabled Styling ------------ */
 :where(button:disabled),

package/dist/components/_circle-buttons.scss

@@ -31,12 +31,11 @@ a.bs-circle-button {
   text-decoration: none;
 }
 
-.bs-circle-button::before {
+.bs-circle-button :where(.bs-circle-button-icon)::before {
   border-color: var(--btn-border-color);
   border-radius: var(--btn-border-radius);
   border-style: solid;
   border-width: 0.125rem;
-  content: '';
   height: calc(100% + 0.5rem);
   inset: -0.25rem;
   position: absolute;
@@ -62,17 +61,17 @@ a.bs-circle-button {
   --icon-size: var(--btn-icon-size);
 }
 
-
-/* Button Size */
-.bs-circle-button:where([data-size^='sm']) {
-  --btn-icon-padding: .375rem;
-  --btn-icon-size: .75rem;
-  --btn-text-size: var(--bs-text-sm);
+/* non-bs-icon svgs */
+.bs-circle-button :where(.bs-circle-button-icon) > :where(svg) {
+  height: var(--btn-icon-size);
+  width: var(--btn-icon-size);
 }
 
 /* Icon Buttons with Text */
 .bs-circle-button:where([data-text]:not([data-text="false"])) {
-  --btn-border-radius: 0.5rem;
+  --btn-text-size: var(--bs-text-md);
+  --btn-icon-size: 0.75rem;
+  --btn-icon-padding: 0.375rem;
 }
 
 /* Ghost Buttons */
@@ -119,10 +118,14 @@ a.bs-circle-button {
     inset 0px 0px 4px 1px var(--btn-highlight);
 }
 
-.bs-circle-button:focus-visible {
+.bs-circle-button:where(:focus-visible) {
   --btn-border-color: var(--btn-main);
 }
 
+.bs-circle-button:where(:focus-visible) :where(.bs-circle-button-icon)::before {
+  content: '';
+}
+
 /* Disabled State */
 .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
   --btn-icon-stroke-color: var(--bs-ink-disabled);
@@ -133,5 +136,25 @@ a.bs-circle-button {
   background-color: var(--bs-bg-disabled);
 }
 
+
+/* Button Size */
+.bs-circle-button:where([data-size^='sm']) {
+  --btn-icon-padding: .375rem;
+  --btn-icon-size: .75rem;
+  --btn-text-size: var(--bs-text-sm);
+}
+
+.bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .3125rem;
+  --btn-icon-size: .625rem;
+  --btn-text-size: var(--bs-text-base);
+}
+
+.bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .25rem;
+  --btn-icon-size: .5rem;
+  --btn-text-size: var(--bs-text-sm);
+}
+
   }
   

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

@@ -18,6 +18,10 @@
   position: relative;
 }
 
+.bs-input-addon * {
+  background-color: transparent;
+}
+
 /**
 Implement an outer 'border' via pseudo-element instead of
 on main element to avoid content shifting, double-stroke effect,
@@ -62,7 +66,6 @@ and issues with box-sizing
 }
 
 .bs-input-addon > *:where(:not(.bs-input-addon)) {
-  background-color: var(--input-bg, var(--bs-bg-base));
   border-width: 0px;
   display: flex;
   height: 100%;
@@ -99,7 +102,7 @@ and issues with box-sizing
 /** Inner borders should be straight; shown only if variant: "inner-bordered" */
 .bs-input-addon:where([data-variant="inner-bordered"]),
 .bs-input-addon:where([data-variant="inner-bordered"]) :where(.bs-input-addon) {
-  --input-addon-nested-border: var(--bs-violet-100);
+  --input-addon-nested-border: var(--bs-violet-lightest);
 }
 
 .bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within)),
@@ -133,6 +136,10 @@ and issues with box-sizing
   border-radius: 0px;
 }
 
+/* -------- Hover styles -------- */
+.bs-input-addon:hover {
+  --input-bg: var(--bs-bg-input-hover);
+}
 
 /* -------- Focus styles -------- */
 .bs-input-addon {
@@ -190,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-input-search.scss

@@ -53,6 +53,11 @@
   --search-icon-padding: 0;
 }
 
+/* Filter variant: cancels out base hover state styles */
+.bs-input-addon:where([data-variant="filter"]):hover {
+  --input-bg: var(--bs-bg-base);
+}
+
 /* -------- Disabled styles -------- */
 .bs-input-addon:where([data-variant="filter"][data-disabled="true"]),
 .bs-input-addon:where([data-variant="filter"][data-disabled="true"]) :is(.bs-button, .bs-input) {

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

@@ -66,6 +66,8 @@ textarea {
   opacity: 0;
 }
 
+/* FOCUS state */
+
 :is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible),
 :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible) {
   --input-border: var(--bs-blue-base);
@@ -73,6 +75,15 @@ textarea {
   outline-width: 0px;
 }
 
+/* HOVER state */
+
+:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:hover),
+:is(.bs-input, .bs-select, .bs-textarea):where(:hover) {
+  --input-bg: var(--bs-bg-input-hover);
+}
+
+/* DISABLED state */
+
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
 :is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
   --input-border: var(--bs-ink-disabled);
@@ -105,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

@@ -12,7 +12,7 @@
   cursor: pointer;
   display: inline-flex;
   font-size: var(--btn-text-size, var(--bs-text-md));
-  font-weight: 600;
+  font-weight: var(--btn-weight, 600);
   height: var(--btn-height, 2.5rem);
   justify-content: center;
   line-height: 1.5;
@@ -124,10 +124,10 @@
   --btn-padding: 0;
   --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   --btn-text-size: var(--bs-text-md);
+  --btn-weight: 400;
   background-color: transparent;
   color: var(--bs-blue-500);
   cursor: pointer;
-  font-weight: 400;
   line-height: 150%;
 }
 .bs-button:where([data-text]:not([data-text="false"])):hover {
@@ -140,29 +140,49 @@
 }
 .bs-button:where([data-text]:not([data-text="false"])):active {
   box-shadow: none;
+  transform: none;
+}
+
+/* ------------ Button Sizes, Media-based Text Sizing -------------- */
+/* Std button: Mobile text size, WM text size */
+.bs-button {
+  --btn-text-size: 1rem;
+}
+
+@media (min-width: 752px) {
+  .bs-button {
+    --btn-text-size: 1.125rem;
+  }
 }
 
-/* ------------ Button Size -------------- */
 .bs-button:where([data-size^='sm']) {
   --btn-height: 1.75rem;
   --btn-padding: .25rem .75rem .375rem;
+  /* Std button size="sm" text size is same across all media sizes */
   --btn-text-size: var(--bs-text-sm);
 }
 
-.bs-button:where([data-size][data-text]:not([data-text="false"])) {
+/* Text buttons: For now, text size not dependent on media size */
+.bs-button:where([data-text]:not([data-text="false"])) {
   --btn-height: auto;
   --btn-padding: 0;
+  --btn-text-size: var(--bs-text-md);
 }
 
 .bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
   --btn-text-size: var(--bs-text-base);
 }
 
-/* Size XS only applies to text buttons */
+/* Size XS & XXS only applies to text buttons */
 .bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
   --btn-text-size: var(--bs-text-sm);
 }
 
+.bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-xs);
+  --btn-weight: 600;
+}
+
 
 /* ------------ Disabled Styling ------------ */
 :where(button:disabled),