@wwtdev/bsds-css 1.16.5 → 2.0.0

package/dist/components/_accordions.scss

@@ -47,6 +47,22 @@
   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);
 }
@@ -66,22 +82,6 @@
   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) {

package/dist/components/_buttons.scss

@@ -166,8 +166,8 @@
   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;
 }
 
@@ -188,6 +188,5 @@ a.bs-button {
   vertical-align: middle;
 }
 
-
   }
   

package/dist/components/_dropdown-options.scss

@@ -107,13 +107,13 @@
   --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 */
@@ -126,14 +126,6 @@
     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;
-  }
 }
 
   }

package/dist/components/_form-booleans.scss

@@ -37,7 +37,8 @@
 
 /* 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);
 
   appearance: none;
@@ -52,23 +53,27 @@
   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);
 
@@ -80,7 +85,8 @@ input:where([type='checkbox'])::before {
   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: '';
@@ -94,7 +100,8 @@ input:where([type='checkbox'])::after {
   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;
@@ -103,7 +110,8 @@ input:where([type='checkbox']):where(:indeterminate)::after {
 }
 
 /* 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);
 
@@ -116,7 +124,8 @@ input:where([type='radio'])::before {
   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);
 
@@ -134,7 +143,9 @@ input:where([type='radio'])::after {
 }
 
 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(:checked, :indeterminate)::before,
+.bs-boolean :where(:checked, :indeterminate)::after {
   visibility: visible;
 }
 
@@ -159,25 +170,30 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
 
 /* 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);
 }

package/dist/components/_form-character-count.scss

@@ -7,13 +7,13 @@
   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);
 }
 

package/dist/components/_form-elements.scss

@@ -9,15 +9,18 @@
   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);
 }
 

package/dist/components/_form-labels.scss

@@ -1,5 +1,6 @@
 @mixin form-labels() {
-  :where(label, legend) {
+  .bs-label,
+:where(label, legend) {
   --label-color: var(--bs-ink-base);
 
   color: var(--label-color);
@@ -10,19 +11,15 @@
   width: 100%;
 }
 
-:where([data-required]:not([data-required="false"])) {
-  color: var(--bs-ink-red);
+:where([data-required]:not([data-required="false"])),
+.bs-label :where([data-required="true"]) {
+  --label-color: var(--bs-ink-red);
 }
 
-:where(label[data-disabled]:not([data-disabled="false"])) {
-  --label-color: var(--bs-ink-disabled);
-}
-
-: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);
 }
 

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

@@ -6,7 +6,9 @@
 }
 
 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);
   appearance: none;
@@ -23,49 +25,62 @@ 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)::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)::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;
 }
@@ -76,14 +91,17 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
 }
 
 :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;
@@ -91,12 +109,14 @@ 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");
 }

package/dist/components/_loader.scss

@@ -33,31 +33,32 @@
 }
 
 /* ----- 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%;
 }

package/dist/components/_profile-details.scss

@@ -2,6 +2,7 @@
   .bs-profile-details {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-sm);
+  line-height: 1.3;
 }
 
 .bs-profile-details > :where(*) {
@@ -18,14 +19,26 @@
   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;
   column-gap: 0.5rem;
   cursor: pointer;
   display: flex;
   font-size: inherit;
 }
+.bs-profile-details .bs-icon {
+  height: .75rem;
+  width: .75rem;
+}
 
   }
   

package/dist/components/_tab-list.scss

@@ -20,7 +20,6 @@
   justify-content: var(--tab-justify);
   line-height: 1.5;
   opacity: var(--tab-list-opacity);
-  overflow: hidden;
   position: relative;
   width: 100%;
 }

package/dist/components/accordions.css

@@ -46,6 +46,22 @@
   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);
 }
@@ -65,22 +81,6 @@
   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) {

package/dist/components/buttons.css

@@ -165,8 +165,8 @@
   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;
 }
 
@@ -186,4 +186,3 @@ a.bs-button {
   outline: none;
   vertical-align: middle;
 }
-

package/dist/components/dropdown-options.css

@@ -106,13 +106,13 @@
   --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 */
@@ -125,12 +125,4 @@
     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;
-  }
 }