@wwtdev/bsds-css 3.0.0-rc.30 → 3.0.0-rc.32

package/dist/wwt-bsds.css

@@ -3381,16 +3381,16 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   color: var(--bs-gray-400);
 }
 :where(.bs-box) :is(input, textarea, select):where(:focus-visible),
-:where(.bs-box) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
+:where(.bs-box) :is(.bs-input, .bs-textarea, .bs-select-deprecated):where(:focus-visible) {
   --offset-color: var(--bs-bg-medium);
 }
 :where(.bs-box[data-invert]) :is(input, textarea, select):where(:focus-visible),
-:where(.bs-box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
+:where(.bs-box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select-deprecated):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(.bs-input, .bs-select, .bs-textarea):where([data-error]:not([data-error="false"])) {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea):where([data-error]:not([data-error="false"])) {
   --input-border: var(--bs-ink-negative);
 }
 /* Fieldset */
@@ -3457,7 +3457,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   background-color: transparent;
 }
 /* Fix issue in Windows, where <select> options would be invisible, due to background-color: transparent */
-.bs-input-addon :where(.bs-select, select) {
+.bs-input-addon :where(.bs-select-deprecated, select) {
   background-color: var(--input-bg, var(--bs-bg-base));
 }
 /**
@@ -3516,8 +3516,8 @@ and issues with box-sizing
 /* Remove (hide) children's borders, outlines */
 .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 :is(.bs-input, .bs-select-deprecated) :where(input, select),
+.bs-input-addon :is(input, select):where(.bs-input, .bs-select-deprecated),
 .bs-input-addon :where(.bs-input-addon) {
   --input-border: transparent;
   --input-border-width: 0px;
@@ -3526,11 +3526,11 @@ and issues with box-sizing
   --input-addon-nested-border: transparent;
 }
 .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(:focus-within) :is(input, select, button):where(.bs-input, .bs-select),
+.bs-input-addon :where(:focus-within) :is(.bs-input, .bs-selected-deprecated) :where(input, select),
+.bs-input-addon :where(:focus-within) :is(input, select, button):where(.bs-input, .bs-select-deprecated),
 .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) {
+.bs-input-addon :is(input, select):where(.bs-input, .bs-select-deprecated):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon :is(.bs-input, .bs-select-deprecated) :where(input, select):where(:focus, :focus-within, :focus-visible) {
   --input-border: transparent;
   box-shadow: none;
   outline: none;
@@ -3599,8 +3599,8 @@ 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) {
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(input, select):where(.bs-input, .bs-select-deprecated):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(.bs-input, .bs-select-deprecated) :where(input, select):where(:focus, :focus-within, :focus-visible) {
   --input-border: var(--focus-border);
   position: relative;
   z-index: 1;
@@ -3613,8 +3613,8 @@ and issues with box-sizing
   z-index: 1;
 }
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :is(input, select, button):where(: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"])) > :is(input, select):where(.bs-input, .bs-select-deprecated):where(:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(.bs-input, .bs-select-deprecated) :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;
@@ -3957,7 +3957,7 @@ Custom properties:
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea,
 select,
-:is(.bs-input, .bs-select, .bs-textarea) {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea) {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -3978,19 +3978,19 @@ select,
 :where(.dark) input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 :where(.dark) textarea,
 :where(.dark) select,
-:where(.dark) :is(.bs-input, .bs-select, .bs-textarea) {
+:where(.dark) :is(.bs-input, .bs-select-deprecated, .bs-textarea) {
   --input-bg: transparent;
 }
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea,
 select,
-:is(.bs-input, .bs-select, .bs-textarea) {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea) {
   width: 100%;
 }
 input:where([type='text'], [type='email'], [type='url']),
 select,
 .bs-input:where([type='text'], [type='email'], [type='url']),
-:is(.bs-input, .bs-select, .bs-textarea) {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea) {
   text-overflow: ellipsis;
 }
 .bs-textarea,
@@ -3999,44 +3999,44 @@ textarea {
   padding-block: 0.5rem;
   resize: vertical;
 }
-:is(input, textarea, select)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
+:is(input, textarea, select)::-moz-placeholder, :is(.bs-input, .bs-select-deprecated, .bs-textarea)::-moz-placeholder {
   color: var(--input-placeholder, var(--bs-violet-100));
 }
 :is(input, textarea, select)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea)::placeholder,
+:is(.bs-input, .bs-select-deprecated, .bs-textarea):where([data-placeholder="true"]) {
   color: var(--input-placeholder, var(--bs-violet-100));
 }
-:where(.dark) :is(input, textarea, select)::-moz-placeholder, :where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
+:where(.dark) :is(input, textarea, select)::-moz-placeholder, :where(.dark) :is(.bs-input, .bs-select-deprecated, .bs-textarea)::-moz-placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
 :where(.dark) :is(input, textarea, select)::placeholder,
-:where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
-:where(.dark) :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
+:where(.dark) :is(.bs-input, .bs-select-deprecated, .bs-textarea)::placeholder,
+:where(.dark) :is(.bs-input, .bs-select-deprecated, .bs-textarea):where([data-placeholder="true"]) {
   --input-placeholder: var(--bs-violet-200);
 }
-:is(input, textarea, select):where(:focus-visible)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::-moz-placeholder {
+:is(input, textarea, select):where(:focus-visible)::-moz-placeholder, :is(.bs-input, .bs-select-deprecated, .bs-textarea):where(:focus-visible)::-moz-placeholder {
   opacity: 0;
 }
 :is(input, textarea, select):where(:focus-visible)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea):where(:focus-visible)::placeholder {
   opacity: 0;
 }
 /* FOCUS state */
 :is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible),
-:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible),
-:is(select, .bs-select):where(:focus) {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea):where(:focus-visible),
+:is(select, .bs-select-deprecated):where(:focus) {
   --input-border: var(--bs-primary-base);
   outline-style: none;
   outline-width: 0px;
 }
 /* OPEN state */
-:is(select, .bs-select):where(:open) {
+:is(select, .bs-select-deprecated):where(:open) {
   background: var(--bs-bg-base-to-light);
 }
 /* DISABLED state */
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
-:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea):where(:disabled) {
   --input-border: var(--bs-ink-disabled);
   --input-bg: var(--bs-bg-disabled);
   color: var(--bs-ink-disabled);
@@ -4045,12 +4045,12 @@ textarea {
 :is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled),
 textarea:where(:disabled),
 select:where(:disabled),
-:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea):where(:disabled) {
   --input-border-width: 0px;
 }
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]:not([data-error="false"])),
-:is(.bs-input, .bs-select, .bs-textarea):where([data-error="true"]) {
+:is(.bs-input, .bs-select-deprecated, .bs-textarea):where([data-error="true"]) {
   --input-border: var(--bs-ink-negative);
 }
 /*
@@ -4066,18 +4066,18 @@ 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(.bs-input, .bs-textarea, .bs-select):disabled::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-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-deprecated):disabled::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select-deprecated)[disabled]::-moz-placeholder {
   opacity: 0;
 }
 :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 {
+:is(.bs-input, .bs-textarea, .bs-select-deprecated):disabled::placeholder,
+:is(.bs-input, .bs-textarea, .bs-select-deprecated)[disabled]::placeholder {
   opacity: 0;
 }
-/* Select */
+/* Select & BsSelectDeprecated */
 select,
-.bs-select {
+.bs-select-deprecated {
   /* 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;
@@ -4086,22 +4086,22 @@ select,
   padding-right: 2.25rem;
 }
 select[multiple],
-.bs-select[multiple] {
+.bs-select-deprecated[multiple] {
   background-image: none;
   height: auto;
 }
 :where(.dark) select,
-:where(.dark) .bs-select {
+:where(.dark) .bs-select-deprecated {
   /* 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");
 }
 :where(.dark) select:where(:disabled),
-:where(.dark) .bs-select:where(:disabled) {
+:where(.dark) .bs-select-deprecated:where(: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");
 }
 /* Allows for styling a button to look like a select input */
-:where(button).bs-select {
+:where(button).bs-select-deprecated {
   align-items: center;
   /* Remove this for buttons since they will have the caret added */
   background-image: none;
@@ -4109,22 +4109,22 @@ select[multiple],
   display: flex;
   padding-right: var(--input-padding-inline, 0.75rem);
 }
-:where(.dark) :where(button).bs-select,
-:where(.dark) :where(button).bs-select:where(:disabled) {
+:where(.dark) :where(button).bs-select-deprecated,
+:where(.dark) :where(button).bs-select-deprecated:where(:disabled) {
   background-image: none;
 }
-:where(button).bs-select :where(*:first-child) {
+:where(button).bs-select-deprecated :where(*:first-child) {
   flex-grow: 1;
   text-align: left;
 }
-:where(button).bs-select :where(.bs-icon) {
+:where(button).bs-select-deprecated :where(.bs-icon) {
   color: var(--bs-ink-base);
   transform: none;
   transition-duration: var(--bs-transition-medium);
   transition-property: transform;
   transition-timing-function: var(--bs-transition-ease);
 }
-:where(button).bs-select:where([data-open="true"]) :where(.bs-icon) {
+:where(button).bs-select-deprecated:where([data-open="true"]) :where(.bs-icon) {
   transform: rotate(180deg);
 }
 .bs-horizontal-nav-mobile {
@@ -4502,7 +4502,7 @@ select[multiple],
   margin-right: 0rem;
   margin-top: 0.5rem;
 }
-.bs-inline-tabs {
+.bs-inline-tab-group {
   display: flex;
   gap: var(--bs-space-2);
 }
@@ -4583,7 +4583,7 @@ select[multiple],
 }
 /* -- Softchoice Mode Overrides -- */
 :where(.softchoice .bs-inline-tab) {
-  
+
   /* Ink */
   &:not([data-selected], :disabled, [aria-disabled="true"]) {
     color: var(--bs-cobalt-400);