@wwtdev/bsds-css 1.16.4 → 2.0.0

package/dist/components/form-booleans.css

@@ -36,7 +36,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;
@@ -51,23 +52,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);
 
@@ -79,7 +84,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: '';
@@ -93,7 +99,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;
@@ -102,7 +109,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);
 
@@ -115,7 +123,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);
 
@@ -133,7 +142,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;
 }
 
@@ -158,25 +169,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.css

@@ -6,12 +6,12 @@
   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.css

@@ -8,15 +8,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.css

@@ -1,3 +1,4 @@
+.bs-label,
 :where(label, legend) {
   --label-color: var(--bs-ink-base);
 
@@ -9,18 +10,14 @@
   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.css

@@ -5,7 +5,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;
@@ -22,49 +24,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;
 }
@@ -75,14 +90,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;
@@ -90,12 +108,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.css

@@ -32,31 +32,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.css

@@ -1,6 +1,7 @@
 .bs-profile-details {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-sm);
+  line-height: 1.3;
 }
 
 .bs-profile-details > :where(*) {
@@ -17,11 +18,23 @@
   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.css

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

package/dist/wwt-bsds-wc-base.css

@@ -395,9 +395,9 @@ button {
   --bs-gray-light: var(--bs-gray-400);
   --bs-gray-lightest: var(--bs-gray-500);
 
-  --bs-border-dark: var(--bs-gray-400);
-  --bs-border-base: var(--bs-gray-200);
-  --bs-border-light: var(--bs-gray-100);
+  --bs-border-dark: var(--bs-gray-200);
+  --bs-border-base: var(--bs-gray-400);
+  --bs-border-light: var(--bs-gray-500);
 
   --bs-shadow-base: rgba(0, 0, 0, 0.06);
   --bs-shadow-invert: rgba(10, 11, 25, 0.60);