@wwtdev/bsds-css 1.16.5 → 2.0.1

package/dist/wwt-bsds.css

@@ -818,6 +818,19 @@ h6,
   font-weight: inherit;
   line-height: inherit;
 }
+.bs-accordion :where(header button) > :where(span) {
+  grid-area: main;
+  margin-right: var(--bs-space-2);
+  text-align: left;
+}
+.bs-accordion :where(header button) > :where(span) {
+  vertical-align: middle;
+}
+@media (min-width: 957px) {
+  .bs-accordion :where(header button) > :where(span) {
+    margin-right: var(--bs-space-3);
+  }
+}
 .bs-accordion :where(header button) :where([data-position]) {
   width: var(--accordion-text-size);
 }
@@ -833,19 +846,6 @@ h6,
 .bs-accordion :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
   transform: rotate(180deg);
 }
-.bs-accordion :where(header button) > :where(span) {
-  grid-area: main;
-  margin-right: var(--bs-space-2);
-  text-align: left;
-}
-.bs-accordion :where(header button) > :where(span) {
-  vertical-align: middle;
-}
-@media (min-width: 957px) {
-  .bs-accordion :where(header button) > :where(span) {
-    margin-right: var(--bs-space-3);
-  }
-}
 /* Accordion Content (the collapsible / expandible part) */
 .bs-accordion :where(.bs-accordion-content) {
   display: grid;
@@ -1122,8 +1122,8 @@ h6,
 .bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
   box-shadow: inset 0 0 0 1px var(--bs-gray-400);
 }
-.bs-button:where([data-text]:where([data-text])):disabled,
-.bs-button:where([data-text]:where([data-text]))[aria-disabled="true"] {
+.bs-button:where([data-text]:not([data-text="false"])):disabled,
+.bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
   background-color: transparent;
 }
 /* Icon Height */
@@ -1503,12 +1503,12 @@ a.bs-circle-button {
   --focus-border-color: var(--bs-blue-base);
   border: 2px solid var(--focus-border-color);
   outline: none;
-  padding-left: 0.625rem;
+  padding-left: 1.375rem;
 }
 /* Navigation focus on a selected element should preserve 4px left border */
 .bs-dropdown-options :where(li[data-selected]:focus-visible) {
   border-left: 4px solid var(--focus-border-color);
-  padding-left: 0.5rem;
+  padding-left: 1.25rem;
 }
 /* data-variant="negative" list option keyboard navigation focus */
 .bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
@@ -1519,15 +1519,8 @@ a.bs-circle-button {
     padding-left: 0.5rem;
     padding-right: 0.75rem;
   }
-
-  .bs-dropdown-options :where(li:focus-visible) {
-    padding-left: 0.625rem;
-  }
-
-  .bs-dropdown-options :where(li[data-selected]:focus-visible) {
-    padding-left: 0.5rem;
-  }
 }
+.bs-label,
 :where(label, legend) {
   --label-color: var(--bs-ink-base);
 
@@ -1538,16 +1531,14 @@ a.bs-circle-button {
   line-height: var(--bs-leading-base);
   width: 100%;
 }
-:where([data-required]:not([data-required="false"])) {
-  color: var(--bs-ink-red);
-}
-:where(label[data-disabled]:not([data-disabled="false"])) {
-  --label-color: var(--bs-ink-disabled);
+:where([data-required]:not([data-required="false"])),
+.bs-label :where([data-required="true"]) {
+  --label-color: var(--bs-ink-red);
 }
-:where([data-disabled]:not([data-disabled="false"]) [data-required]:not([data-required="false"])) {
-  --label-color: var(--bs-ink-disabled);
-}
-:where([data-disabled]:not([data-disabled="false"])) label {
+: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-color: var(--bs-ink-disabled);
 }
 /* Generally applicable (all input types) */
@@ -1558,14 +1549,17 @@ a.bs-circle-button {
 :where([data-disabled]:not([data-disabled="false"]), [data-disabled]:not([data-disabled="false"]) [data-required]:not([data-required="false"])) {
   color: var(--bs-gray-400);
 }
-:where(.box) :is(input, textarea, select):where(:focus-visible) {
+:where(.box) :is(input, textarea, select):where(:focus-visible),
+:where(.box) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
   --offset-color: var(--bs-bg-medium);
 }
-:where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible) {
+:where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible),
+:where(.box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
   --offset-color: var(--bs-bg-invert-base);
 }
 /* Errors and Messages */
-:is(input, select, textarea):where([data-error]:not([data-error="false"])) {
+:is(input, select, textarea):where([data-error]:not([data-error="false"])),
+:is(.bs-input, .bs-select, .bs-textarea):where([data-error]:not([data-error="false"])) {
   --input-border: var(--bs-ink-red);
 }
 /* Fieldset */
@@ -1585,7 +1579,9 @@ a.bs-circle-button {
   margin-top: 0.25rem;
 }
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-textarea, select {
+textarea,
+select,
+:is(.bs-input, .bs-select, .bs-textarea) {
   --input-bg: var(--bs-bg-base);
   --input-border: var(--bs-violet-medium);
   -webkit-appearance: none;
@@ -1604,48 +1600,60 @@ textarea, select {
   line-height: var(--bs-leading-base);
   min-height: 2.5rem;
   padding-inline: 0.75rem;
+}
+input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+textarea,
+select {
   width: 100%;
 }
 input:where([type='text'], [type='email'], [type='url']),
-select {
+select,
+.bs-input:where([type='text'], [type='email'], [type='url']),
+.bs-select {
   text-overflow: ellipsis;
 }
+.bs-textarea,
 textarea {
   height: auto;
   padding-block: 0.5rem;
   resize: vertical;
 }
-:is(input, textarea, select)::-moz-placeholder {
+:is(input, textarea, select)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
   color: var(--bs-violet-lightest);
 }
-:is(input, textarea, select)::placeholder {
+:is(input, textarea, select)::placeholder,
+:is(.bs-input, .bs-select, .bs-textarea)::placeholder {
   color: var(--bs-violet-lightest);
 }
-:is(input, textarea, select):where(:focus-visible)::-moz-placeholder {
+:is(input, textarea, select):where(:focus-visible)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::-moz-placeholder {
   opacity: 0;
 }
-:is(input, textarea, select):where(:focus-visible)::placeholder {
+:is(input, textarea, select):where(:focus-visible)::placeholder,
+:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
   opacity: 0;
 }
-:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible) {
+: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-width: 0px;
 }
-:is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled) {
+: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);
   --input-bg: var(--bs-bg-disabled);
   color: var(--bs-ink-disabled);
 }
 /* Errors and Messages */
-:is(input, select, textarea):where([data-error]:not([data-error="false"])) {
+:is(input, select, textarea):where([data-error]:not([data-error="false"])),
+:is(.bs-input, .bs-select, .bs-textarea):where([data-error="true"]) {
   --input-border: var(--bs-ink-red);
 }
 /*
 Removes the built-in 'margin' on bottom of textarea
 see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
-:has not fully supported yet but will work for most
 */
-:has(> textarea:only-child) {
+:has(> textarea:only-child),
+:has(> .bs-textarea:only-child) {
   display: block;
   line-height: 0;
 }
@@ -1653,17 +1661,20 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
 :where(select:disabled) {
   opacity: 1;
 }
-:is(input, textarea, select):disabled::-moz-placeholder, :is(input, textarea, select)[disabled]::-moz-placeholder {
+:is(input, textarea, select):disabled::-moz-placeholder, :is(input, textarea, select)[disabled]::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select):disabled::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select)[disabled]::-moz-placeholder {
   color: var(--bs-ink-disabled);
   opacity: 1;
 }
 :is(input, textarea, select):disabled::placeholder,
-:is(input, textarea, select)[disabled]::placeholder {
+: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;
 }
 /* Select */
-select {
+select,
+.bs-select {
   /* 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='%230A0B19' 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");
   background-position: right 0.75rem center;
@@ -1671,11 +1682,13 @@ select {
   background-size: 1em 1em;
   padding-right: var(--bs-space-9);
 }
-.dark select {
+.dark select,
+.dark .bs-select {
   /* 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");
 }
-.dark select:disabled {
+.dark select:disabled,
+.dark .bs-select: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");
 }
@@ -1878,12 +1891,12 @@ and issues with box-sizing
   text-align: right;
   white-space: nowrap;
 }
-:where([disabled], [data-disabled]) + .bs-character-count,
-:where([disabled], [data-disabled]) .bs-character-count,
-.bs-character-count:where([data-disabled]) {
+:where(:disabled, [data-disabled="true"]) + .bs-character-count,
+:where(:disabled, [data-disabled="true"]) .bs-character-count,
+.bs-character-count:where([data-disabled="true"]) {
   color: var(--bs-ink-disabled);
 }
-.bs-character-count:where([data-error]) {
+.bs-character-count:where([data-error="true"]) {
   color: var(--bs-ink-red);
 }
 /* Containers and Labels for Checkbox/Radio */
@@ -1916,7 +1929,8 @@ and issues with box-sizing
   font-size: var(--bs-text-xs);
 }
 /* Checkbox & Radio Input */
-:where(input[type='checkbox'], input[type='radio']) {
+:where(input[type='checkbox'], input[type='radio']),
+.bs-boolean :where(input) {
   --box-shadow: var(--bs-ink-base);
 
   -webkit-appearance: none;
@@ -1934,20 +1948,24 @@ and issues with box-sizing
   position: relative;
   width: 1rem;
 }
-:where(input[type='checkbox'], input[type='radio']):focus-visible {
+:where(input[type='checkbox'], input[type='radio']):focus-visible,
+.bs-boolean :where(input):focus-visible {
   box-shadow: inset 0 0 0 0.125rem var(--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(input[type='checkbox']) {
+:where(input[type='checkbox']),
+.bs-boolean :where([type='checkbox']) {
   border-radius: 0.125rem;
 }
-:where(input[type='radio']) {
+:where(input[type='radio']),
+.bs-boolean :where([type='radio']) {
   border-radius: 50%;
 }
 /* Checkbox's checkmark  */
-input:where([type='checkbox'])::before {
+input:where([type='checkbox'])::before,
+.bs-boolean :where([type="checkbox"])::before {
   --filled-size: 1rem;
   --check-fill-color: var(--bs-blue-base);
 
@@ -1958,7 +1976,8 @@ input:where([type='checkbox'])::before {
   visibility: hidden;
   width: var(--filled-size);
 }
-input:where([type='checkbox'])::after {
+input:where([type='checkbox'])::after,
+.bs-boolean :where([type="checkbox"])::after {
   border: solid var(--bs-white);
   border-width: 0 0.125rem 0.125rem 0;
   content: '';
@@ -1971,7 +1990,8 @@ input:where([type='checkbox'])::after {
   visibility: hidden;
   width: 0.375em;
 }
-input:where([type='checkbox']):where(:indeterminate)::after {
+input:where([type='checkbox']):where(:indeterminate)::after,
+.bs-boolean :where([type="checkbox"]):where(:indeterminate)::after {
   border: none;
   background-color: var(--bs-white);
   height: 0.125rem;
@@ -1979,7 +1999,8 @@ input:where([type='checkbox']):where(:indeterminate)::after {
   width: 0.625em;
 }
 /* Radio's dot */
-input:where([type='radio'])::before {
+input:where([type='radio'])::before,
+.bs-boolean :where([type="radio"])::before {
   --filled-size: 1rem;
   --radio-fill-color: var(--bs-blue-base);
 
@@ -1991,7 +2012,8 @@ input:where([type='radio'])::before {
   visibility: hidden;
   width: var(--filled-size);
 }
-input:where([type='radio'])::after {
+input:where([type='radio'])::after,
+.bs-boolean :where([type="radio"])::after {
   --inner-size: 0.375rem;
   --inner-fill-color: var(--bs-white);
 
@@ -2008,7 +2030,9 @@ input:where([type='radio'])::after {
   width: var(--inner-size);
 }
 input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
-input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after {
+input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after,
+.bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
+.bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after {
   visibility: visible;
 }
 .bs-boolean:where([data-size='sm']) input::before {
@@ -2026,20 +2050,25 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
   --inner-size: 0.25rem;
 }
 /* Disabled State */
-input:where([type='checkbox'], [type='radio']):disabled {
+input:where([type='checkbox'], [type='radio']):disabled,
+.bs-boolean :where(input):disabled {
   --box-shadow: var(--bs-bg-disabled);
   background-color: transparent;
   cursor: default;
 }
 input:where([type='checkbox']):checked:disabled::before,
-input:where([type='checkbox']):indeterminate:disabled::before {
+input:where([type='checkbox']):indeterminate:disabled::before,
+.bs-boolean :where(input[type="checkbox"]):checked:disabled::before,
+.bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before {
   --check-fill-color: var(--bs-bg-disabled);
 }
-input:where([type='radio']):checked:disabled::before {
+input:where([type='radio']):checked:disabled::before,
+.bs-boolean :where(input[type="radio"]):checked:disabled::before {
   --radio-fill-color: var(--bs-bg-disabled);
 }
 /* Error state */
-input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])) {
+input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
+.bs-boolean :where(input[data-error="true"]) {
   --box-shadow: var(--bs-red-base);
   --outline-color: var(--bs-red-base);
 }
@@ -2335,30 +2364,31 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   --loader-width: 6rem;
 }
 /* ----- loader dots ----- */
-.bs-loader > :where(div) {
+.bs-loader > :where(*:not(.visually-hidden)) {
   background-color: var(--loader-dot-bg);
   border-radius: 50%;
+  display: block;
   height: var(--loader-dot-size);
   position: absolute;
   top: var(--loader-dot-top);
   width: var(--loader-dot-size);
 }
-.bs-loader > :where(div) {
+.bs-loader > :where(*:not(.visually-hidden)) {
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
-.bs-loader > :where(div:nth-child(1)) {
+.bs-loader > :where(*:nth-child(1)) {
   animation: loading-1 0.6s infinite;
   left: 0%;
 }
-.bs-loader > :where(div:nth-child(2)) {
+.bs-loader > :where(*:nth-child(2)) {
   animation: loading-2 0.6s infinite;
   left: 0%;
 }
-.bs-loader > :where(div:nth-child(3)) {
+.bs-loader > :where(*:nth-child(3)) {
   animation: loading-2 0.6s infinite;
   left: 40%;
 }
-.bs-loader > :where(div:nth-child(4)) {
+.bs-loader > :where(*:nth-child(4)) {
   animation: loading-3 0.6s infinite;
   left: 80%;
 }
@@ -2638,6 +2668,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 .bs-profile-details {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-sm);
+  line-height: 1.3;
 }
 .bs-profile-details > :where(*) {
   display: block;
@@ -2652,15 +2683,26 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   color: var(--profile-action-color, var(--bs-orange-warning));
   font-size: inherit;
 }
+.bs-profile-details > :where(button:first-child:hover) {
+  text-decoration: underline;
+}
+/* Remove the profile name underline when hovering on the action button. */
+.bs-profile-details:has(:where(button:first-child:hover)) {
+  --profile-name-decoration: none;
+}
 /* Action button and optional meta details w/ icon */
 .bs-profile-details > :where([data-icon]) {
-  align-items: normal;
+  align-items: center;
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
   cursor: pointer;
   display: flex;
   font-size: inherit;
 }
+.bs-profile-details .bs-icon {
+  height: .75rem;
+  width: .75rem;
+}
 /* Profile with User Details */
 .bs-profile:where([data-layout]),
 .bs-profile:where([data-layout^='vertical']) {
@@ -2704,7 +2746,6 @@ a.bs-profile:where([data-layout]):hover {
   justify-content: var(--tab-justify);
   line-height: 1.5;
   opacity: var(--tab-list-opacity);
-  overflow: hidden;
   position: relative;
   width: 100%;
 }
@@ -2764,16 +2805,6 @@ a.bs-profile:where([data-layout]):hover {
   transition: transform var(--active-line-transition-duration) ease-in;
   width: 100%;
 }
-/* Hidden tabs dropdown */
-:is(.bs-tab-list, bs-tab-list) .bs-tab-list-dropdown {
-  position: absolute;
-}
-@media (min-width: 752px) {
-  :is(.bs-tab-list, bs-tab-list) .bs-tab-list-dropdown {
-    position: static;
-  }
-
-}
 table {
   border-collapse: collapse;
   border-spacing: 0;