@wwtdev/bsds-css 2.4.0 → 2.5.0

package/dist/components/_dropdown-options.scss

@@ -11,6 +11,11 @@
   overflow-y: auto;
   padding-block: 0.5rem;
   padding-left: 0;
+  position: relative;
+}
+
+.bs-dropdown-options:focus-visible {
+  outline: none;
 }
 
  /* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
@@ -92,8 +97,8 @@
 .bs-dropdown-options :where(li:not([role="separator"]):hover),
 .bs-dropdown-options :where(li[data-selected]) {
   background-color: var(--bs-bg-medium);
-  border-left: 4px solid var(--bs-blue-base);
-  color: var(--bs-blue-base);
+  border-left: 4px solid var(--bs-ink-blue);
+  color: var(--bs-ink-blue);
   outline: none;
 }
 
@@ -103,8 +108,8 @@
 .bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
   /* 25% alpha version of --bs-red-400 */
   background-color: rgba(248, 169, 170, 0.25);
-  border-left: 4px solid var(--bs-red-500);
-  color: var(--bs-red-500);
+  border-left: 4px solid var(--bs-ink-red);
+  color: var(--bs-ink-red);
 }
 
 /* Hover or data-selected for 2-col/3-col/description variants */
@@ -114,7 +119,7 @@
 .bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
 .bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
 .bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-blue-base);
+  color: var(--bs-ink-blue);
 }
 
 /* Hover or data-selected for negative + 2-col/3-col/description variants */
@@ -124,21 +129,11 @@
 .bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
 .bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
 .bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-red-500);
-}
-
-/* List option mouse click focus (do not show) */
-.bs-dropdown-options :where(li:focus:not(:focus-visible)){
-  outline: none;
-}
-
-/* data-variant="negative" list option mouse click focus (do not show) */
-.bs-dropdown-options :where(li[data-variant~="negative"]:focus:not(:focus-visible)) {
-  outline: none;
+  color: var(--bs-ink-red);
 }
 
 /* List option keyboard navigation focus */
-.bs-dropdown-options :where(li:focus-visible) {
+.bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
   --focus-border-color: var(--bs-blue-base);
   border: 2px solid var(--focus-border-color);
   outline: none;
@@ -146,13 +141,13 @@
 }
 
 /* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown-options :where(li[data-selected]:focus-visible) {
+.bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
   border-left: 4px solid var(--focus-border-color);
   padding-left: 1.25rem;
 }
 
 /* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
+.bs-dropdown-options:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
   --focus-border-color: var(--bs-red-200);
 }
 
@@ -210,11 +205,11 @@
   padding-right: 0.625rem;
 }
 
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li:focus-visible) {
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-active]) {
   padding-left: 0.625rem;
 }
 
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[data-selected]:focus-visible) {
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-selected][data-active]) {
   padding-left: 0.5rem;
 }
 
@@ -228,11 +223,11 @@
     padding-right: 0.625rem;
   }
 
-  .bs-dropdown-options :where(li:focus-visible) {
+  .bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
     padding-left: 0.625rem;
   }
 
-  .bs-dropdown-options :where(li[data-selected]:focus-visible) {
+  .bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
     padding-left: 0.5rem;
   }
 }

package/dist/components/_form-input-composite.scss

@@ -57,15 +57,20 @@ and issues with box-sizing
   flex-shrink: 0;
   position: relative;
 }
+
+.bs-input-addon > :where([data-part="main"], .bs-input-addon, bs-input, .bs-input),
 .bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"]), .bs-input-addon, bs-input, .bs-input) {
   flex-grow: 1;
   flex-shrink: 1;
 }
+
+.bs-input-addon > :where([data-part="main"]) > :where(input, select),
 .bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"])) > :where(input, select) {
   width: 100%;
 }
 
 .bs-input-addon > *:where(:not(.bs-input-addon)) {
+  align-items: center;
   border-width: 0px;
   display: flex;
   height: 100%;
@@ -105,14 +110,14 @@ and issues with box-sizing
   --input-addon-nested-border: var(--bs-violet-lightest);
 }
 
-.bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within)),
-.bs-input-addon > :where(:not(:last-child, :focus-within))::after {
+.bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within, [data-part="right"])),
+.bs-input-addon > :where(:not(:last-child, :focus-within, [data-part="right"]))::after {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.bs-input-addon > :where(.bs-input-addon:not(:first-child, :focus-within)),
-.bs-input-addon > :where(:not(:first-child, :focus-within))::after {
+.bs-input-addon > :where(.bs-input-addon:not(:first-child, :focus-within, [data-part="left"])),
+.bs-input-addon > :where(:not(:first-child, :focus-within, [data-part="left"]))::after {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -136,6 +141,37 @@ and issues with box-sizing
   border-radius: 0px;
 }
 
+/* -------- Auto Padding for Children, Auto Sizing Icons -------- */
+/* Opt in for now, for backwards compatibility */
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > *:where(:not(.bs-input-addon)) {
+  padding-inline: 0;
+}
+
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where([data-part="left"]:not(.bs-input-addon)),
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where(:first-child:not(.bs-input-addon)) {
+  padding-inline: 0.75rem 0.5rem;
+}
+
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where([data-part="right"]:not(.bs-input-addon)),
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where(:last-child:not(.bs-input-addon)) {
+  padding-inline: 0.5rem 0.75rem;
+}
+
+.bs-input-addon:where([data-autopad="true"][data-multifocus]) > *:where(:not(.bs-input-addon)) {
+  padding-inline: 0.75rem;
+}
+
+.bs-input-addon:where([data-autosize-icons="true"], [data-variant="combobox"]) > :where(:not([data-autowidth], [data-part="main"], .bs-input-addon)) {
+  height: 100%;
+  min-width: min-content;
+}
+
+.bs-input-addon:where([data-autosize-icons="true"], [data-variant="combobox"]) :where(svg) {
+  height: auto;
+  max-height: 100%;
+  width: 1rem;
+}
+
 /* -------- Hover styles -------- */
 .bs-input-addon:hover {
   --input-bg: var(--bs-bg-input-hover);
@@ -223,5 +259,36 @@ and issues with box-sizing
   margin-top: 0.25rem;
 }
 
+/* ----------------- Variant: Combobox Input ----------------- */
+/*
+Combobox variant also shares styles with data-autopad="true" &
+data-autosize-icons="true" - see above
+*/
+.bs-input-addon:where([data-variant="combobox"]) {
+  --input-addon-nested-border: transparent;
+}
+
+.bs-input-addon:where([data-variant="combobox"]) :where(button svg) {
+  transform: var(--icon-btn-transform, none);
+  transition: var(--bs-trans-rotate180);
+}
+
+.bs-input-addon:where([data-variant="combobox"]) :where(button[data-open="true"]) {
+  --icon-btn-transform: rotate(180deg);
+}
+
+.bs-input-addon:where([data-variant="combobox"][data-disabled="true"]) > :where(button) {
+  opacity: 0;
+}
+
+.bs-input-addon:where([data-variant="combobox"]) > :where(button) {
+  border-radius: .25rem;
+  outline: 1px solid transparent;
+}
+
+.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible:not([data-open])) {
+  outline: 1px solid var(--focus-border);
+}
+
   }
   

package/dist/components/_tab-list.scss

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

package/dist/components/_tooltip.scss

@@ -10,7 +10,7 @@
   background-color: var(--bs-bg-base-elevated);
   border-radius: 4px;
   box-shadow: var(--bs-shadow-contentLowCenter);
-  color: var(--bs-violet-base);
+  color: var(--bs-ink-violet);
   display: flex;
   font-size: var(--bs-text-sm);
   justify-content: center;

package/dist/components/dropdown-options.css

@@ -10,6 +10,11 @@
   overflow-y: auto;
   padding-block: 0.5rem;
   padding-left: 0;
+  position: relative;
+}
+
+.bs-dropdown-options:focus-visible {
+  outline: none;
 }
 
  /* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
@@ -91,8 +96,8 @@
 .bs-dropdown-options :where(li:not([role="separator"]):hover),
 .bs-dropdown-options :where(li[data-selected]) {
   background-color: var(--bs-bg-medium);
-  border-left: 4px solid var(--bs-blue-base);
-  color: var(--bs-blue-base);
+  border-left: 4px solid var(--bs-ink-blue);
+  color: var(--bs-ink-blue);
   outline: none;
 }
 
@@ -102,8 +107,8 @@
 .bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
   /* 25% alpha version of --bs-red-400 */
   background-color: rgba(248, 169, 170, 0.25);
-  border-left: 4px solid var(--bs-red-500);
-  color: var(--bs-red-500);
+  border-left: 4px solid var(--bs-ink-red);
+  color: var(--bs-ink-red);
 }
 
 /* Hover or data-selected for 2-col/3-col/description variants */
@@ -113,7 +118,7 @@
 .bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
 .bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
 .bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-blue-base);
+  color: var(--bs-ink-blue);
 }
 
 /* Hover or data-selected for negative + 2-col/3-col/description variants */
@@ -123,21 +128,11 @@
 .bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
 .bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
 .bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-red-500);
-}
-
-/* List option mouse click focus (do not show) */
-.bs-dropdown-options :where(li:focus:not(:focus-visible)){
-  outline: none;
-}
-
-/* data-variant="negative" list option mouse click focus (do not show) */
-.bs-dropdown-options :where(li[data-variant~="negative"]:focus:not(:focus-visible)) {
-  outline: none;
+  color: var(--bs-ink-red);
 }
 
 /* List option keyboard navigation focus */
-.bs-dropdown-options :where(li:focus-visible) {
+.bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
   --focus-border-color: var(--bs-blue-base);
   border: 2px solid var(--focus-border-color);
   outline: none;
@@ -145,13 +140,13 @@
 }
 
 /* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown-options :where(li[data-selected]:focus-visible) {
+.bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
   border-left: 4px solid var(--focus-border-color);
   padding-left: 1.25rem;
 }
 
 /* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
+.bs-dropdown-options:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
   --focus-border-color: var(--bs-red-200);
 }
 
@@ -209,11 +204,11 @@
   padding-right: 0.625rem;
 }
 
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li:focus-visible) {
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-active]) {
   padding-left: 0.625rem;
 }
 
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[data-selected]:focus-visible) {
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-selected][data-active]) {
   padding-left: 0.5rem;
 }
 
@@ -227,11 +222,11 @@
     padding-right: 0.625rem;
   }
 
-  .bs-dropdown-options :where(li:focus-visible) {
+  .bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
     padding-left: 0.625rem;
   }
 
-  .bs-dropdown-options :where(li[data-selected]:focus-visible) {
+  .bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
     padding-left: 0.5rem;
   }
 }

package/dist/components/form-input-composite.css

@@ -56,15 +56,20 @@ and issues with box-sizing
   flex-shrink: 0;
   position: relative;
 }
+
+.bs-input-addon > :where([data-part="main"], .bs-input-addon, bs-input, .bs-input),
 .bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"]), .bs-input-addon, bs-input, .bs-input) {
   flex-grow: 1;
   flex-shrink: 1;
 }
+
+.bs-input-addon > :where([data-part="main"]) > :where(input, select),
 .bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"])) > :where(input, select) {
   width: 100%;
 }
 
 .bs-input-addon > *:where(:not(.bs-input-addon)) {
+  align-items: center;
   border-width: 0px;
   display: flex;
   height: 100%;
@@ -104,14 +109,14 @@ and issues with box-sizing
   --input-addon-nested-border: var(--bs-violet-lightest);
 }
 
-.bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within)),
-.bs-input-addon > :where(:not(:last-child, :focus-within))::after {
+.bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within, [data-part="right"])),
+.bs-input-addon > :where(:not(:last-child, :focus-within, [data-part="right"]))::after {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.bs-input-addon > :where(.bs-input-addon:not(:first-child, :focus-within)),
-.bs-input-addon > :where(:not(:first-child, :focus-within))::after {
+.bs-input-addon > :where(.bs-input-addon:not(:first-child, :focus-within, [data-part="left"])),
+.bs-input-addon > :where(:not(:first-child, :focus-within, [data-part="left"]))::after {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -135,6 +140,37 @@ and issues with box-sizing
   border-radius: 0px;
 }
 
+/* -------- Auto Padding for Children, Auto Sizing Icons -------- */
+/* Opt in for now, for backwards compatibility */
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > *:where(:not(.bs-input-addon)) {
+  padding-inline: 0;
+}
+
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where([data-part="left"]:not(.bs-input-addon)),
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where(:first-child:not(.bs-input-addon)) {
+  padding-inline: 0.75rem 0.5rem;
+}
+
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where([data-part="right"]:not(.bs-input-addon)),
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where(:last-child:not(.bs-input-addon)) {
+  padding-inline: 0.5rem 0.75rem;
+}
+
+.bs-input-addon:where([data-autopad="true"][data-multifocus]) > *:where(:not(.bs-input-addon)) {
+  padding-inline: 0.75rem;
+}
+
+.bs-input-addon:where([data-autosize-icons="true"], [data-variant="combobox"]) > :where(:not([data-autowidth], [data-part="main"], .bs-input-addon)) {
+  height: 100%;
+  min-width: min-content;
+}
+
+.bs-input-addon:where([data-autosize-icons="true"], [data-variant="combobox"]) :where(svg) {
+  height: auto;
+  max-height: 100%;
+  width: 1rem;
+}
+
 /* -------- Hover styles -------- */
 .bs-input-addon:hover {
   --input-bg: var(--bs-bg-input-hover);
@@ -221,3 +257,34 @@ and issues with box-sizing
 :where(label, .bs-label, bs-label) + .bs-input-addon {
   margin-top: 0.25rem;
 }
+
+/* ----------------- Variant: Combobox Input ----------------- */
+/*
+Combobox variant also shares styles with data-autopad="true" &
+data-autosize-icons="true" - see above
+*/
+.bs-input-addon:where([data-variant="combobox"]) {
+  --input-addon-nested-border: transparent;
+}
+
+.bs-input-addon:where([data-variant="combobox"]) :where(button svg) {
+  transform: var(--icon-btn-transform, none);
+  transition: var(--bs-trans-rotate180);
+}
+
+.bs-input-addon:where([data-variant="combobox"]) :where(button[data-open="true"]) {
+  --icon-btn-transform: rotate(180deg);
+}
+
+.bs-input-addon:where([data-variant="combobox"][data-disabled="true"]) > :where(button) {
+  opacity: 0;
+}
+
+.bs-input-addon:where([data-variant="combobox"]) > :where(button) {
+  border-radius: .25rem;
+  outline: 1px solid transparent;
+}
+
+.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible:not([data-open])) {
+  outline: 1px solid var(--focus-border);
+}

package/dist/components/tab-list.css

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

package/dist/components/tooltip.css

@@ -9,7 +9,7 @@
   background-color: var(--bs-bg-base-elevated);
   border-radius: 4px;
   box-shadow: var(--bs-shadow-contentLowCenter);
-  color: var(--bs-violet-base);
+  color: var(--bs-ink-violet);
   display: flex;
   font-size: var(--bs-text-sm);
   justify-content: center;

package/dist/wwt-bsds-preset.js

@@ -148,6 +148,7 @@ module.exports = {
         "base-to-light": "var(--bs-bg-base-to-light)",
         "base-to-medium": "var(--bs-bg-base-to-medium)",
         "light": "var(--bs-bg-light)",
+        "light-to-base": "var(--bs-bg-light-to-base)",
         "light-to-medium": "var(--bs-bg-light-to-medium)",
         "medium": "var(--bs-bg-medium)",
         "medium-to-light": "var(--bs-bg-medium-to-light)",