@wwtdev/bsds-css 2.0.8 → 2.1.0

package/dist/components/_accordions.scss

@@ -77,7 +77,7 @@
 .bs-accordion :where(header button) > :where([data-position="end"]) {
   grid-area: end;
   transform: rotate(0);
-  transition: transform 250ms ease-out;
+  transition: var(--bs-trans-rotate180);
 }
 
 .bs-accordion :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {

package/dist/components/_badge.scss

@@ -2,9 +2,13 @@
   .bs-badge {
   --badge-bg: var(--bs-red-base);
   --badge-text: var(--bs-white);
+  display: inline-block;
 }
 
-.bs-badge[data-position^='left']::before,
+/* ------ Badge wrapped around text ------ */
+
+/* Badge DOT */
+.bs-badge:where([data-position^='left'])::before,
 .bs-badge:where(:not([data-position^='left']))::after {
   align-items: center;
   background: var(--badge-bg);
@@ -26,11 +30,13 @@
   font-size: 0.8125em;
 }
 
-.bs-badge[data-count]:where([data-position^='left'])::before,
-.bs-badge[data-count]:where(:not([data-position^='left']))::after {
+/* Badge COUNT */
+
+.bs-badge:where([data-count][data-position^='left'])::before,
+.bs-badge:where([data-count]:not([data-position^='left']))::after {
   color: var(--badge-text);
   content: attr(data-count);
-  min-height: 1rem;
+  height: 1rem;
   min-width: 1rem;
   padding: 0 4px;
   top: -0.0625rem;
@@ -38,31 +44,52 @@
   width: auto;
 }
 
-.bs-badge[data-count]::before {
-  margin-right: 0.25rem;
+.bs-badge:where([data-count='0'])::before,
+.bs-badge:where([data-count='0'])::after {
+  display: none;
 }
 
-.bs-badge[data-count]::after {
-  margin-left: 0.25rem;
+.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::before,
+.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::after {
+  display: inline-flex;
 }
 
-.bs-badge[data-count='0']::before,
-.bs-badge[data-count='0']::after {
-  display: none;
+/* Badge SPACING against wrapped text */
+
+.bs-badge::before {
+  margin-right: 0.25rem;
 }
 
-.bs-badge[data-show-zero]:where(:not([data-show-zero="false"]))::before,
-.bs-badge[data-show-zero]:where(:not([data-show-zero="false"]))::after {
-  display: inline-flex;
+.bs-badge::after {
+  margin-left: 0.25rem;
 }
 
-.bs-badge[data-badge-color^='blue'] {
+/* Badge COLORS */
+
+.bs-badge:where([data-badge-color^='blue']) {
   --badge-bg: var(--bs-blue-base);
 }
-.bs-badge[data-badge-color^='white'] {
+.bs-badge:where([data-badge-color^='white']) {
   --badge-bg: var(--bs-white);
   --badge-text: var(--bs-black);
 }
 
+/* ------ Standalone Badge (not wrapped around text) ------ */
+.bs-badge:where([data-variant="notext"]) {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.bs-badge:where([data-variant="notext"]) {
+  line-height: 1;
+}
+
+.bs-badge:where([data-variant="notext"])::after,
+.bs-badge:where([data-variant="notext"])::before {
+  margin: 0;
+  top: unset;
+}
+
   }
   

package/dist/components/_buttons.scss

@@ -3,7 +3,7 @@
   --btn-main: var(--bs-blue-base);
   --btn-secondary: var(--bs-blue-medium);
   --btn-highlight: var(--bs-blue-100);
-  --btn-padding: .25rem .75rem .375rem;
+  --btn-padding: .25rem .75rem;
   --btn-focus-pseudo-width: calc(100% + 0.5rem);
   align-items: center;
   background-color: var(--btn-main);
@@ -14,6 +14,7 @@
   display: inline-flex;
   font-size: var(--bs-text-md);
   font-weight: 600;
+  height: 2.5rem;
   justify-content: center;
   line-height: 1.5;
   outline: 2px solid transparent;
@@ -143,7 +144,9 @@
 
 /* Button Size */
 .bs-button:where([data-size^='sm']) {
+  --btn-padding: .25rem .75rem .375rem;
   font-size: var(--bs-text-sm);
+  height: 1.75rem;
 }
 .bs-button:where([data-size^='sm']):where([data-text]:not([data-text="false"])) {
   font-size: var(--bs-text-base);
@@ -171,15 +174,6 @@
   background-color: transparent;
 }
 
-/* Icon Height */
-.bs-button :where(svg:not([height])) {
-  height: var(--bs-text-base);
-}
-
-.bs-button:where([data-size^='sm']) :where(svg:not([height])) {
-  height: var(--bs-text-xs);
-}
-
 /* links as buttons */
 a.bs-button {
   align-items: center;

package/dist/components/_circle-buttons.scss

@@ -40,7 +40,7 @@ a.bs-circle-button {
   height: calc(100% + 0.5rem);
   inset: -0.25rem;
   position: absolute;
-  transition: border-color 0.125s ease-in-out;
+  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
   width: calc(100% + 0.5rem);
 }
 
@@ -101,10 +101,12 @@ a.bs-circle-button {
   box-shadow: inset 0px 0px 4px 1px var(--btn-main);
 }
 
-.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon) {
+.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
+.bs-circle-button:where([data-direction="right"]):hover::before {
   transform: translateX(.25rem);
 }
-.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon) {
+.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon),
+.bs-circle-button:where([data-direction="left"]):hover::before {
   transform: translateX(-.25rem);
 }
 

package/dist/components/_filter-buttons.scss

@@ -0,0 +1,101 @@
+@mixin filter-buttons() {
+  /*
+custom properties:
+--filterbtn-caret-size
+--filterbtn-caret-transform
+--filterbtn-color
+--filterbtn-focus-color
+--filterbtn-height
+--filterbtn-text-size
+--filterbtn-weight
+*/
+
+button:where(.bs-filter-button) {
+  flex-shrink: 0;
+}
+
+.bs-filter-button {
+  align-items: center;
+  border-radius: 0.25rem;
+  color: var(--filterbtn-color, var(--bs-ink-blue));
+  column-gap: 0.5rem;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--filterbtn-text-size, var(--bs-text-base));
+  font-weight: var(--filterbtn-weight, 400);
+  height: var(--filterbtn-height, 2rem);
+  line-height: 1.5;
+  outline: solid var(--filterbtn-focus-color, transparent) .125rem;
+  outline-offset: -.125rem;
+  padding-inline: .5rem;
+  transition: outline-color 100ms ease-in-out;
+  width: max-content;
+}
+
+.bs-filter-button :where(.bs-icon),
+.bs-filter-button :where(span:has(svg:only-child)) {
+  display: block;
+  height: var(--filterbtn-caret-size, 1rem);
+  line-height: 1;
+  transform: var(--filterbtn-caret-transform, rotate(0deg));
+  transform-origin: center;
+  transition: var(--bs-trans-rotate180);
+  width: var(--filterbtn-caret-size, 1rem);
+}
+
+.bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
+  --filterbtn-height: 1.75rem;
+  --filterbtn-text-size: var(--bs-text-sm);
+  --filterbtn-caret-size: .75rem;
+}
+
+.bs-filter-button:where([data-size="sm"]) {
+  --filterbtn-text-size: var(--bs-text-sm);
+}
+
+.bs-filter-button:where([data-size="xs"]) {
+  --filterbtn-text-size: var(--bs-text-xs);
+  --filterbtn-weight: 600;
+}
+
+/* Hover state */
+.bs-filter-button:hover {
+  --filterbtn-color: var(--bs-blue-base);
+}
+
+/* Focus state */
+.bs-filter-button:where(:focus-visible) {
+  --filterbtn-focus-color: var(--bs-blue-base);
+}
+
+/* Filter open state */
+.bs-filter-button:where([aria-expanded="true"],[data-open="true"]) {
+  --filterbtn-caret-transform: rotate(180deg);
+}
+
+/* Badge non-standard color */
+.bs-filter-button :where(.bs-badge) {
+  --badge-bg: var(--bs-ink-blue);
+}
+
+:where(.dark) .bs-filter-button :where(.bs-badge) {
+  --badge-bg: var(--bs-blue-medium);
+}
+
+.bs-filter-button:hover :where(.bs-badge) {
+  --badge-bg: var(--filterbtn-color);
+}
+
+/* Disabled state */
+.bs-filter-button:where(:disabled) {
+  --filterbtn-color: var(--bs-ink-disabled);
+  cursor: default;
+}
+
+.bs-filter-button:where(:disabled) :where(.bs-badge) {
+  --badge-bg: var(--bs-bg-disabled);
+  --badge-text: var(--bs-ink-disabled);
+}
+
+  }
+  

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

@@ -11,7 +11,7 @@
   border-radius: .25rem;
   color: var(--bs-ink-base);
   display: flex;
-  height: 2.5rem;
+  height: var(--input-addon-height, 2.5rem);
   overflow: hidden;
   padding: 0;
   pointer-events: none;
@@ -53,7 +53,7 @@ and issues with box-sizing
   flex-shrink: 0;
   position: relative;
 }
-.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"]), .bs-input-addon, bs-input) {
+.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"]), .bs-input-addon, bs-input, .bs-input) {
   flex-grow: 1;
   flex-shrink: 1;
 }
@@ -74,6 +74,7 @@ and issues with box-sizing
 .bs-input-addon > *,
 .bs-input-addon :where(input, select),
 .bs-input-addon :is(bs-input, bs-select) :where(input, select),
+.bs-input-addon :is(input, select):where(.bs-input, .bs-select),
 .bs-input-addon :where(.bs-input-addon) {
   --input-border: transparent;
   --input-border-width: 0px;
@@ -83,9 +84,11 @@ and issues with box-sizing
   --input-addon-nested-border: transparent;
 }
 
-.bs-input-addon :where(:focus-within) :where(input, select),
+.bs-input-addon :where(:focus-within) :where(input, select, button),
 .bs-input-addon :where(:focus-within) :is(bs-input, bs-select) :where(input, select),
-.bs-input-addon :where(input, select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon :where(:focus-within) :is(input, select, button):where(.bs-input, .bs-select),
+.bs-input-addon :where(input, select, button):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon :is(input, select):where(.bs-input, .bs-select):where(:focus, :focus-within, :focus-visible),
 .bs-input-addon :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
   --input-border: transparent;
   box-shadow: none;
@@ -139,6 +142,7 @@ and issues with box-sizing
 .bs-input-addon:where(:not([data-multifocus]):focus-within),
 .bs-input-addon:where([data-multifocus="false"]:focus-within),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(input, select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(input, select):where(.bs-input, .bs-select):where(:focus, :focus-within, :focus-visible),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
   --input-border: var(--focus-border);
   position: relative;
@@ -154,11 +158,13 @@ and issues with box-sizing
   z-index: 1;
 }
 
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :where(input:focus, select:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :where(input:focus, select:focus, button:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(input, select):where(.bs-input, .bs-select):where(:focus),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(bs-input, bs-select) :where(input:focus, select:focus),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(input:focus, select:focus) {
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(input:focus, select:focus, button:focus) {
   border-radius: .25rem;
   box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
+  z-index: 1;
 }
 
 .bs-input-addon:where(:not([data-multifocus]):focus-within)::after,
@@ -183,7 +189,7 @@ 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 .bs-button {
+.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);

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

@@ -8,12 +8,13 @@
   box-sizing: content-box;
 }
 
-.bs-input-search:where(.bs-input-addon) :where([data-component="bs-icon-search"]) {
-  --icon-size: 1.75rem;
-  padding-left: 0.75rem;
+.bs-input-search :where([data-component="bs-icon-search"]) {
+  --icon-size: var(--search-icon-size, 1.75rem);
+  padding: var(--search-icon-padding, 0 0 0 .75rem);
 }
 
-.bs-input-search:where(.bs-input-addon) :where(button) {
+/* Clear Button */
+.bs-input-search button {
   align-items: center;
   background-color: transparent;
   cursor: pointer;
@@ -24,11 +25,40 @@
   transition: transform 100ms ease-in-out;
 }
 
-.bs-input-search:where(.bs-input-addon) :where(button:active) {
+.bs-input-search button:where(:active) {
   transform: scale(0.97);
   transform-origin: center;
   box-shadow: inset 0px 0px 4px 1px var(--bs-blue-base);
 }
 
+.bs-input-search button:where(:focus) {
+  border-radius: .25rem;
+  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
+  z-index: 1;
+}
+
+
+/* Filter variant */
+
+.bs-input-search:where([data-variant="filter"]) {
+  --focus-border: transparent;
+  --input-border: transparent;
+  --input-addon-height: 1.5rem;
+  --input-caret: var(--bs-blue-base);
+  --input-padding-block: 0 0.125rem;
+  --input-padding-inline: 0.5rem;
+  --input-placeholder: var(--bs-ink-light);
+  --input-text-size: var(--bs-text-sm);
+  --search-icon-size: 1rem;
+  --search-icon-padding: 0;
+}
+
+/* -------- 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) {
+  --input-bg: var(--bs-bg-base);
+  --input-border: transparent;
+}
+
   }
   

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

@@ -5,26 +5,36 @@
   margin-top: 0.25rem;
 }
 
+/*
+Custom properties:
+--input-bg (background color)
+--input-border (border color)
+--input-border-width (border width)
+--input-caret (caret color)
+--input-padding-block (padding block)
+--input-padding-inline (padding inline)
+--input-placeholder (placeholder color)
+--input-text-size (font size)
+*/
+
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea,
 select,
 :is(.bs-input, .bs-select, .bs-textarea) {
-  --input-bg: var(--bs-bg-base);
-  --input-border: var(--bs-violet-medium);
   appearance: none;
-  background-color: var(--input-bg);
-  border-color: var(--input-border);
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-color: var(--input-border, var(--bs-violet-medium));
   border-radius: 0.25rem;
   border-style: solid;
   border-width: var(--input-border-width, 1px);
-  caret-color: var(--bs-blue-base);
+  caret-color: var(--input-caret, var(--bs-blue-base));
   color: var(--bs-ink-base);
-  font-size: var(--bs-text-base);
+  font-size: var(--input-text-size, var(--bs-text-base));
   font-weight: 400;
   height: 2.5rem;
   line-height: var(--bs-leading-base);
-  min-height: 2.5rem;
-  padding-inline: 0.75rem;
+  padding-block: var(--input-padding-block, 0.0625rem);
+  padding-inline: var(--input-padding-inline, 0.75rem);
 }
 
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
@@ -49,7 +59,7 @@ textarea {
 
 :is(input, textarea, select)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea)::placeholder {
-  color: var(--bs-violet-lightest);
+  color: var(--input-placeholder, var(--bs-violet-lightest));
 }
 :is(input, textarea, select):where(:focus-visible)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
@@ -59,6 +69,7 @@ textarea {
 :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);
+  outline-style: none;
   outline-width: 0px;
 }
 

package/dist/components/_modal.scss

@@ -22,6 +22,16 @@
   opacity: 1;
 }
 
+.bs-modal :where(.close-button-container) {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1.5rem;
+}
+
+.bs-modal :where(.close-button) {
+  cursor: pointer;
+}
+
 @media (min-width: 752px) {
   .bs-modal {
     left: 50%;

package/dist/components/_pills.scss

@@ -15,10 +15,9 @@
   font-size: var(--bs-text-xs);
   height: 1.5rem;
   gap: var(--pill-gap);
-  line-height: 1.33;
-  padding: 6px 6px 4px;
+  line-height: 1rem;
+  padding: 0 .375rem;
   text-decoration: none;
-  vertical-align: middle;
 }
 
 :where(.bs-pill .bs-icon) {

package/dist/components/accordions.css

@@ -76,7 +76,7 @@
 .bs-accordion :where(header button) > :where([data-position="end"]) {
   grid-area: end;
   transform: rotate(0);
-  transition: transform 250ms ease-out;
+  transition: var(--bs-trans-rotate180);
 }
 
 .bs-accordion :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {

package/dist/components/badge.css

@@ -1,9 +1,13 @@
 .bs-badge {
   --badge-bg: var(--bs-red-base);
   --badge-text: var(--bs-white);
+  display: inline-block;
 }
 
-.bs-badge[data-position^='left']::before,
+/* ------ Badge wrapped around text ------ */
+
+/* Badge DOT */
+.bs-badge:where([data-position^='left'])::before,
 .bs-badge:where(:not([data-position^='left']))::after {
   align-items: center;
   background: var(--badge-bg);
@@ -25,11 +29,13 @@
   font-size: 0.8125em;
 }
 
-.bs-badge[data-count]:where([data-position^='left'])::before,
-.bs-badge[data-count]:where(:not([data-position^='left']))::after {
+/* Badge COUNT */
+
+.bs-badge:where([data-count][data-position^='left'])::before,
+.bs-badge:where([data-count]:not([data-position^='left']))::after {
   color: var(--badge-text);
   content: attr(data-count);
-  min-height: 1rem;
+  height: 1rem;
   min-width: 1rem;
   padding: 0 4px;
   top: -0.0625rem;
@@ -37,28 +43,49 @@
   width: auto;
 }
 
-.bs-badge[data-count]::before {
-  margin-right: 0.25rem;
+.bs-badge:where([data-count='0'])::before,
+.bs-badge:where([data-count='0'])::after {
+  display: none;
 }
 
-.bs-badge[data-count]::after {
-  margin-left: 0.25rem;
+.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::before,
+.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::after {
+  display: inline-flex;
 }
 
-.bs-badge[data-count='0']::before,
-.bs-badge[data-count='0']::after {
-  display: none;
+/* Badge SPACING against wrapped text */
+
+.bs-badge::before {
+  margin-right: 0.25rem;
 }
 
-.bs-badge[data-show-zero]:where(:not([data-show-zero="false"]))::before,
-.bs-badge[data-show-zero]:where(:not([data-show-zero="false"]))::after {
-  display: inline-flex;
+.bs-badge::after {
+  margin-left: 0.25rem;
 }
 
-.bs-badge[data-badge-color^='blue'] {
+/* Badge COLORS */
+
+.bs-badge:where([data-badge-color^='blue']) {
   --badge-bg: var(--bs-blue-base);
 }
-.bs-badge[data-badge-color^='white'] {
+.bs-badge:where([data-badge-color^='white']) {
   --badge-bg: var(--bs-white);
   --badge-text: var(--bs-black);
 }
+
+/* ------ Standalone Badge (not wrapped around text) ------ */
+.bs-badge:where([data-variant="notext"]) {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.bs-badge:where([data-variant="notext"]) {
+  line-height: 1;
+}
+
+.bs-badge:where([data-variant="notext"])::after,
+.bs-badge:where([data-variant="notext"])::before {
+  margin: 0;
+  top: unset;
+}

package/dist/components/buttons.css

@@ -2,7 +2,7 @@
   --btn-main: var(--bs-blue-base);
   --btn-secondary: var(--bs-blue-medium);
   --btn-highlight: var(--bs-blue-100);
-  --btn-padding: .25rem .75rem .375rem;
+  --btn-padding: .25rem .75rem;
   --btn-focus-pseudo-width: calc(100% + 0.5rem);
   align-items: center;
   background-color: var(--btn-main);
@@ -13,6 +13,7 @@
   display: inline-flex;
   font-size: var(--bs-text-md);
   font-weight: 600;
+  height: 2.5rem;
   justify-content: center;
   line-height: 1.5;
   outline: 2px solid transparent;
@@ -142,7 +143,9 @@
 
 /* Button Size */
 .bs-button:where([data-size^='sm']) {
+  --btn-padding: .25rem .75rem .375rem;
   font-size: var(--bs-text-sm);
+  height: 1.75rem;
 }
 .bs-button:where([data-size^='sm']):where([data-text]:not([data-text="false"])) {
   font-size: var(--bs-text-base);
@@ -170,15 +173,6 @@
   background-color: transparent;
 }
 
-/* Icon Height */
-.bs-button :where(svg:not([height])) {
-  height: var(--bs-text-base);
-}
-
-.bs-button:where([data-size^='sm']) :where(svg:not([height])) {
-  height: var(--bs-text-xs);
-}
-
 /* links as buttons */
 a.bs-button {
   align-items: center;

package/dist/components/circle-buttons.css

@@ -39,7 +39,7 @@ a.bs-circle-button {
   height: calc(100% + 0.5rem);
   inset: -0.25rem;
   position: absolute;
-  transition: border-color 0.125s ease-in-out;
+  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
   width: calc(100% + 0.5rem);
 }
 
@@ -100,10 +100,12 @@ a.bs-circle-button {
   box-shadow: inset 0px 0px 4px 1px var(--btn-main);
 }
 
-.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon) {
+.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
+.bs-circle-button:where([data-direction="right"]):hover::before {
   transform: translateX(.25rem);
 }
-.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon) {
+.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon),
+.bs-circle-button:where([data-direction="left"]):hover::before {
   transform: translateX(-.25rem);
 }