@wwtdev/bsds-css 2.4.1 → 2.5.1

package/dist/components/_dropdown-options.scss

@@ -97,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;
 }
 
@@ -108,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 */
@@ -119,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 */
@@ -129,7 +129,7 @@
 .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);
+  color: var(--bs-ink-red);
 }
 
 /* List option keyboard navigation focus */

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/_modal.scss

@@ -31,6 +31,9 @@
 
 .bs-modal :where(.modal-title) {
   flex-grow: 1;
+  font-size: var(--bs-text-md);
+  font-weight: 600;
+  margin: 0;
 }
 
 .bs-modal :where(.only-close-button-modal-header) {

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

@@ -96,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;
 }
 
@@ -107,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 */
@@ -118,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 */
@@ -128,7 +128,7 @@
 .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);
+  color: var(--bs-ink-red);
 }
 
 /* List option keyboard navigation focus */

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/modal.css

@@ -30,6 +30,9 @@
 
 .bs-modal :where(.modal-title) {
   flex-grow: 1;
+  font-size: var(--bs-text-md);
+  font-weight: 600;
+  margin: 0;
 }
 
 .bs-modal :where(.only-close-button-modal-header) {

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;