@wwtdev/bsds-css 3.0.0-rc.41 → 3.0.0-rc.43

package/dist/wwt-bsds-components.css

@@ -3326,6 +3326,80 @@ data-autosize-icons="true" - see above
   --box-shadow: var(--bs-negative-base);
   --outline-color: var(--bs-negative-base);
 }
+/*
+ HEADS-UP! Styling to look like an input is inherited from .bs-input
+*/
+.bs-input-button {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  cursor: pointer;
+}
+/* -- Multiselect Count -- */
+.bs-input-button-count {
+  grid-column-start: 1;
+  margin-right: var(--bs-space-2);
+}
+/* -- Placeholder -- */
+.bs-input-button-placeholder {
+  grid-column-start: 2;
+  color: var(--input-placeholder, var(--bs-violet-100));
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+:where(.dark) .bs-input-button-placeholder {
+  --input-placeholder: var(--bs-violet-200);
+}
+/* -- Display Value -- */
+/* ...more will be coming here to handle multiselect pill display inside of input. */
+.bs-input-button-value {
+  grid-column-start: 2;
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+/* -- Clear Button -- */
+.bs-input-button-clear {
+  grid-column-start: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 var(--bs-space-3);
+  cursor: pointer;
+  background-color: inherit;
+  transition: transform var(--bs-transition-fast) var(--bs-transition-ease);
+}
+.bs-input-button-clear:where(:focus-visible) {
+  outline: none;
+  border-radius: .25rem;
+  box-shadow: var(--bs-blue-base) 0px 0px 0px 1px inset;
+}
+/* -- Caret Indicator -- */
+.bs-input-button-caret {
+  grid-column-start: 4;
+  margin-left: var(--bs-space-2);
+  transition: rotate var(--bs-transition-medium) var(--bs-transition-ease);
+}
+.bs-input-button-clear + .bs-input-button-caret {
+  margin-left: var(--bs-space-1);
+}
+.bs-input-button:where([aria-expanded="true"]) :where(.bs-input-button-caret) {
+  rotate: 180deg;
+}
+/* -- Disabled -- */
+.bs-input-button:where([aria-disabled="true"]) {
+  cursor: default;
+}
+.bs-input-button:where([aria-disabled="true"]) :where(.bs-badge) {
+  --badge-bg: var(--bs-ink-disabled);
+}
+.bs-input-button:where([aria-disabled="true"]) :where(.bs-input-button-caret, .bs-input-button-placeholder) {
+ display: none;
+}
 .bs-input-phone :where(.bs-input-addon) > button {
   align-items: center;
   background-color: inherit;
@@ -3492,13 +3566,13 @@ Custom properties:
   outline-width: 0px;
 }
 /* DISABLED state */
-:is(.bs-input, .bs-textarea):where(:disabled) {
+:is(.bs-input, .bs-textarea):where(:disabled, [aria-disabled="true"]) {
   --input-border: var(--bs-ink-disabled);
   --input-bg: var(--bs-bg-disabled);
   color: var(--bs-ink-disabled);
 }
 /* Text inputs should not have a border when disabled */
-:is(.bs-input, .bs-textarea):where(:disabled) {
+:is(.bs-input, .bs-textarea):where(:disabled, [aria-disabled="true"]) {
   --input-border-width: 0px;
 }
 /* Errors and Messages */
@@ -3533,6 +3607,9 @@ label:where(.bs-label) {
   font-weight: 600;
   line-height: var(--bs-leading-lg);
 }
+:where(.bs-label + .bs-input, .bs-label > .bs-input) {
+  margin-top: 0.25rem;
+}
 /* Required asterisk */
 .bs-label :where([data-required="true"]) {
   color: var(--label-asterisk-color, var(--bs-ink-negative));
@@ -3672,7 +3749,6 @@ label:where(.bs-label) {
   top: 0;
 }
 .bs-option {
-  /* did not use "flex, flex-col, gap" in order to avoid gap spacing pain for consumers with custom cases */
   padding: var(--bs-space-1) var(--bs-space-2);
   color: var(--bs-ink-base);
   cursor: pointer;
@@ -5265,8 +5341,8 @@ a.bs-text-button {
   left: 0;
   width: var(--bs-popover-width, -moz-fit-content);
   width: var(--bs-popover-width, fit-content);
-  height:var(--bs-popover-height, -moz-fit-content);
-  height:var(--bs-popover-height, fit-content);
+  height: var(--bs-popover-height, -moz-fit-content);
+  height: var(--bs-popover-height, fit-content);
   max-width: calc(100dvw - 3rem);
   max-height: calc(100dvh - 3rem);
   padding: var(--bs-space-6);
@@ -5377,89 +5453,6 @@ a.bs-text-button {
   opacity: 0;
   transform: scale(.95);
 }
-/*
-  HEADS-UP:
-  BsDropdown inherits base styles from its BsPopover root element
-  ...so some of these styles override those defaults.
-*/
-.bs-dropdown {
-  background-color: var(--bs-bg-base-to-medium);
-  max-height: 20rem;
-  padding: 0;
-}
-/* filter could be "display: none" if mounted for it's logic, yet hidden due to using an outside input/model */
-.bs-dropdown:where(:has(.bs-dropdown-filter:not([style*="display: none"]))) {
-  padding-top: 0;
-}
-.bs-dropdown :where(hr) {
-  margin: var(--bs-space-3) 0;
-}
-.bs-dropdown:where(:focus-visible) {
-  outline: none;
-}
-.bs-dropdown-list {
-  max-height: 20rem;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: var(--bs-space-3) 0;
-}
-.bs-dropdown-list:where(:focus-visible) {
-  outline: none;
-}
-.bs-dropdown:where(:has(.bs-dropdown-filter)) :where(.bs-dropdown-list) {
-  padding-top: 0;
-  /* filter input is 4rem, so 20rem (default) - 4rem = 16rem */
-  max-height: 16rem;
-}
-/* -- FILTER -- */
-.bs-dropdown-filter {
-  position: sticky;
-  top: 0;
-  padding: var(--bs-space-3);
-  /* fade to transparent in bottom padding area, so scrolling menu items under filter looks better */
-  background-image: linear-gradient(
-    var(--bs-bg-base-to-medium) calc(100% - var(--bs-space-3)),
-    transparent 100%
-  );
-  z-index: 1;
-}
-.bs-dropdown-filter-icon {
-  margin-left: var(--bs-space-3);
-}
-.bs-dropdown-filter-input {
-  padding-inline: var(--bs-space-2);
-}
-/* override form-text-fields.css style that hides placeholder when inputs are focused */
-.bs-dropdown-filter-input::-moz-placeholder {
-  opacity: 1;
-}
-.bs-dropdown-filter-input::placeholder {
-  opacity: 1;
-}
-.bs-dropdown-filter-button {
-  border-color: transparent;
-  color: inherit;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: var(--bs-text-base);
-  padding: 0 var(--bs-space-3);
-  position: relative;
-  text-decoration: none;
-}
-.bs-dropdown-filter-button:where(:focus-visible) {
-  border-radius: var(--bs-space-1);
-  box-shadow: 0px 0px 0px 1px inset var(--bs-primary-base);
-}
-/* -- SIZING -- */
-.bs-dropdown:where([data-size="sm"]) {
-  --bs-popover-width: 10rem; /* 160px */
-}
-.bs-dropdown:where([data-size="md"]) {
-  --bs-popover-width: 20rem; /* 320px */
-}
-.bs-dropdown:where([data-size="lg"]) {
-  --bs-popover-width: 28rem; /* 448px */
-}
 /*
   HEADS-UP:
   Most BsFlyout base styles come from its BsPopover root element,
@@ -5887,6 +5880,89 @@ a.bs-text-button {
   opacity: 0;
   transform: var(--toast-transform);
 }
+/*
+  HEADS-UP:
+  BsDropdown inherits base styles from its BsPopover root element
+  ...so some of these styles override those defaults.
+*/
+.bs-dropdown {
+  background-color: var(--bs-bg-base-to-medium);
+  max-height: 20rem;
+  padding: 0;
+}
+/* filter could be "display: none" if mounted for it's logic, yet hidden due to using an outside input/model */
+.bs-dropdown:where(:has(.bs-dropdown-filter:not([style*="display: none"]))) {
+  padding-top: 0;
+}
+.bs-dropdown :where(hr) {
+  margin: var(--bs-space-3) 0;
+}
+.bs-dropdown:where(:focus-visible) {
+  outline: none;
+}
+.bs-dropdown-list {
+  max-height: 20rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--bs-space-3) 0;
+}
+.bs-dropdown-list:where(:focus-visible) {
+  outline: none;
+}
+.bs-dropdown:where(:has(.bs-dropdown-filter)) :where(.bs-dropdown-list) {
+  padding-top: 0;
+  /* filter input is 4rem, so 20rem (default) - 4rem = 16rem */
+  max-height: 16rem;
+}
+/* -- FILTER -- */
+.bs-dropdown-filter {
+  position: sticky;
+  top: 0;
+  padding: var(--bs-space-3);
+  /* fade to transparent in bottom padding area, so scrolling menu items under filter looks better */
+  background-image: linear-gradient(
+    var(--bs-bg-base-to-medium) calc(100% - var(--bs-space-3)),
+    transparent 100%
+  );
+  z-index: 1;
+}
+.bs-dropdown-filter-icon {
+  margin-left: var(--bs-space-3);
+}
+.bs-dropdown-filter-input {
+  padding-inline: var(--bs-space-2);
+}
+/* override form-text-fields.css style that hides placeholder when inputs are focused */
+.bs-dropdown-filter-input::-moz-placeholder {
+  opacity: 1;
+}
+.bs-dropdown-filter-input::placeholder {
+  opacity: 1;
+}
+.bs-dropdown-filter-button {
+  border-color: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--bs-text-base);
+  padding: 0 var(--bs-space-3);
+  position: relative;
+  text-decoration: none;
+}
+.bs-dropdown-filter-button:where(:focus-visible) {
+  border-radius: var(--bs-space-1);
+  box-shadow: 0px 0px 0px 1px inset var(--bs-primary-base);
+}
+/* -- SIZING -- */
+.bs-dropdown:where([data-size="sm"]) {
+  --bs-popover-width: 10rem; /* 160px */
+}
+.bs-dropdown:where([data-size="md"]) {
+  --bs-popover-width: 20rem; /* 320px */
+}
+.bs-dropdown:where([data-size="lg"]) {
+  --bs-popover-width: 28rem; /* 448px */
+}
 /*
   HEADS-UP:
   Most BsTooltip base styles come from its BsPopover root element,