@wwtdev/bsds-css 2.5.1 → 2.5.2

package/README.md

@@ -56,25 +56,53 @@ Since our CSS has its own reset and default styles, we prevent Tailwind's `base`
 
 Once you have completed the Tailwind installation steps, you can use the classes generated from the preset.
 
-### 3. Dark Mode-compatible "semantic" color utilities
-
-We've extended the TW theme with color utilities that will automatically adjust when using dark mode.  These classes require the CSS custom properties defined in the global stylesheet (`wwt-bsds.css`).  If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from [tokens.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/tokens.css) and [global.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/global.css) in your project.
+#### Order matters!
 
-### 4. Order matters!
-
-In your project's stylesheet ordering, the base Tailwind styles should come first, _then_ the BSDS CSS framework.  
+In your project's stylesheet ordering, the BSDS CSS framework should come first, _then_ the base Tailwind styles for easier overriding via TW utilities.  
 
 ```javascript
 /* src/main.js */
 
-// TW
-import './styles/tailwind.css'
 
 // Blue Steel Styles
 import '@wwtdev/bsds-css/dist/wwt-bsds.min.css'
+// TW
+import './styles/tailwind.css'
+
+```
+
+Alternatively, you can leverage native CSS `@layer` to ensure TW utilities will always trump these styles.  
+
+```css
+/* src/styles/index.css (or wherever your styles live)  */
+
+@layer app-base, external, app, utils;
+
+/* -- BASE -- */
+@import "@wwtdev/bsds-css/dist/wwt-bsds.min.css" layer(app-base);
+
+/* -- EXTERNAL: any external stylesheets, e.g. from other 3d party libs -- */
+@import "some-other-pkg/dist/style.css" layer(external);
+
+/* -- APP / INTERNAL STYLES, e.g. your site's base styles -- */
+@import "some-content.css" layer(app);
+
+/* -- UTILITY CLASSES --
+  Due to how native CSS @layer works, and our defined layer order at the top of this file, utility classes will always trump any other styles in the app (as long as those styles are in one of our defined layers)
+*/
+
+@layer utils {
+  @tailwind base;
+  @tailwind utilities;
+}
 
 ```
 
+### 3. Dark Mode-compatible "semantic" color utilities
+
+We've extended the TW theme with color utilities that will automatically adjust when using dark mode.  These classes require the CSS custom properties defined in the global stylesheet (`wwt-bsds.css`).  If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from [tokens.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/tokens.css) and [global.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/global.css) in your project.
+
+
 ### Browser Support
 
 Our styles are compiled using Post CSS and Autoprefixer using the [`defaults` setting](https://github.com/browserslist/browserslist#full-list).

package/dist/components/_badge.scss

@@ -1,6 +1,6 @@
 @mixin badge() {
   .bs-badge {
-  --badge-bg: var(--bs-red-base);
+  --badge-bg: var(--bs-red-400);
   --badge-text: var(--bs-white);
   display: inline-block;
 }

package/dist/components/_banner.scss

@@ -34,7 +34,7 @@
 }
 
 .bs-banner :where(.bs-banner-content p a) {
-  color: var(--bs-pink-light);
+  color: var(--bs-blue-lightest);
   text-decoration: underline;
 }
 

package/dist/components/_dropdown-options.scss

@@ -96,7 +96,7 @@
 /* Hover or data-selected */
 .bs-dropdown-options :where(li:not([role="separator"]):hover),
 .bs-dropdown-options :where(li[data-selected]) {
-  background-color: var(--bs-bg-medium);
+  background-color: var(--bs-bg-medium-to-light);
   border-left: 4px solid var(--bs-ink-blue);
   color: var(--bs-ink-blue);
   outline: none;

package/dist/components/_dropdown.scss

@@ -28,7 +28,7 @@
   --dropdown-width: 100%;
   --dropdown-transform: translate(0, 100%);
 
-  background-color: var(--bs-bg-base-elevated);
+  background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
   bottom: var(--dropdown-bottom);
   box-shadow: var(--bs-shadow-contentMedium);

package/dist/components/_form-booleans.scss

@@ -9,8 +9,8 @@
 }
 
 .bs-boolean:where([data-size='sm']) input {
-  width: var(--bs-text-xs);
-  height: var(--bs-text-xs);
+  height: .75rem;
+  width: .75rem;
 }
 
 .bs-boolean label {
@@ -39,11 +39,8 @@
 
 :where(input[type='checkbox'], input[type='radio']),
 :is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
-  --box-shadow: var(--bs-ink-base);
-
   appearance: none;
-  background-color: var(--bs-bg-base);
-  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
+  box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base));
   cursor: pointer;
   display: grid;
   height: 1rem;
@@ -71,79 +68,73 @@
   border-radius: 50%;
 }
 
-/* Checkbox's checkmark  */
+/* Checkbox's checkbox, checkmark.  Checkmark is hidden unless checked/indeterminate. */
 input:where([type='checkbox'])::before,
 :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
-  --filled-size: 1rem;
-  --check-fill-color: var(--bs-blue-base);
-
+  --cb-filled-size: var(--filled-size, 1rem);
   content: '';
   border-radius: 0.125rem;
-  box-shadow: inset var(--filled-size) var(--filled-size) var(--check-fill-color);
-  height: var(--filled-size);
+  box-shadow: inset var(--cb-filled-size) var(--cb-filled-size) var(--fill-bg-color, var(--bs-blue-base));
+  height: var(--cb-filled-size);
   visibility: hidden;
-  width: var(--filled-size);
+  width: var(--cb-filled-size);
 }
 
 input:where([type='checkbox'])::after,
 :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
-  border: solid var(--bs-white);
+  border: solid var(--bs-bg-base);
   border-width: 0 0.125rem 0.125rem 0;
   content: '';
-  height: 0.75em;
+  height: var(--inner-check-height, 0.75em);
   left: 50%;
   position: absolute;
   top: 50%;
   transform-origin: center;
   transform: translate(-50%, -60%) rotate(45deg);
   visibility: hidden;
-  width: 0.375em;
+  width: var(--inner-check-width, 0.375em);
 }
 
 input:where([type='checkbox']):where(:indeterminate)::after,
 .bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
 .bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
   border: none;
-  background-color: var(--bs-white);
-  height: 0.125rem;
+  background-color: var(--bs-bg-base);
+  height: var(--inner-dash-height, 0.125rem);
   transform: translate(-50%, -0.0625rem) rotate(0deg);
-  width: 0.625em;
+  width: var(--inner-dash-width, 0.625em);
 }
 
-/* Radio's dot */
+/* Radio outer circle, Radio dot.  Dot is hidden unless checked. */
 input:where([type='radio'])::before,
 .bs-boolean :where([type="radio"])::before {
-  --filled-size: 1rem;
-  --radio-fill-color: var(--bs-blue-base);
-
-  background-color: var(--radio-fill-color);
+  --radio-filled-size: var(--filled-size, 1rem);
+  background-color: var(--fill-bg-color, var(--bs-blue-base));
   border-radius: 50%;
   box-sizing: content-box;
   content: '';
-  height: var(--filled-size);
+  height: var(--radio-filled-size);
   visibility: hidden;
-  width: var(--filled-size);
+  width: var(--radio-filled-size);
 }
 
 input:where([type='radio'])::after,
 .bs-boolean :where([type="radio"])::after {
-  --inner-size: 0.375rem;
-  --inner-fill-color: var(--bs-white);
-
-  background-color: var(--inner-fill-color);
+  background-color: var(--bs-bg-base);
   border-radius: 50%;
   box-sizing: content-box;
   content: '';
-  height: var(--inner-size);
+  height: var(--inner-dot-size, 0.375rem);
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   visibility: hidden;
-  width: var(--inner-size);
+  width: var(--inner-dot-size, 0.375rem);
 }
 
 /* Show checkmark, indeterminate mark, or radio dot */
+
 .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
 .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
 input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
@@ -153,61 +144,35 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
   visibility: visible;
 }
 
-.bs-boolean:where([data-size='sm']) input::before,
-.bs-checkbox:where([data-size="sm"])::before {
-  --filled-size: var(--bs-text-xs);
-}
+/* ---------- Sizes ----------- */
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']::after,
-.bs-checkbox:where([data-size="sm"])::after {
-  height: 0.5625rem;
-  width: 0.3125rem;
+.bs-boolean:where([data-size="sm"]),
+.bs-checkbox:where([data-size="sm"]) {
+  --filled-size: 0.75rem;
+  --inner-check-height: 0.5625rem;
+  --inner-check-width: 0.3125rem;
+  --inner-dash-height: 0.125rem;
+  --inner-dash-width: .75em;
+  --inner-dot-size: 0.25rem;
 }
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
-.bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after  {
-  height: 0.125rem;
-  width: .75em;
-}
+/* ---------- Disabled State ----------- */
 
-.bs-boolean:where([data-size='sm']) input[type='radio']::after {
-  --inner-size: 0.25rem;
-}
-
-
-/* Disabled State */
-
-input:where([type='checkbox'], [type='radio']):disabled,
-.bs-boolean :where(input):disabled,
-.bs-checkbox:is([data-disabled="true"], :disabled) {
-  --box-shadow: var(--bs-bg-disabled);
+:where(input[type="checkbox"], input[type="radio"]):disabled,
+.bs-boolean:where([data-disabled="true"]),
+.bs-checkbox:where([data-disabled="true"]) {
+  --box-shadow: var(--bs-ink-disabled);
+  --fill-bg-color: var(--bs-ink-disabled);
   background-color: transparent;
   cursor: default;
-}
-
-.bs-checkbox:where([data-disabled="true"]:not(input)) {
   pointer-events: none;
 }
 
-input:where([type='checkbox']):checked: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,
-.bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
-.bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
-  --check-fill-color: var(--bs-bg-disabled);
-}
-
-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 */
+/* ---------- Error state ----------- */
 
 input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
-.bs-boolean :where(input[data-error="true"]),
+.bs-boolean :where(input[data-error="true"]), /* deprecate this one in favor of next line */
+.bs-boolean:where([data-error="true"]),
 .bs-checkbox:where([data-error="true"]) {
   --box-shadow: var(--bs-red-base);
   --outline-color: var(--bs-red-base);

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

@@ -10,7 +10,7 @@
 :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);
+  visibility: hidden;
 }
 
 .bs-character-count:where([data-error="true"]) {

package/dist/components/_form-hints.scss

@@ -1,18 +1,22 @@
 @mixin form-hints() {
   .bs-hint {
   --hint-color: var(--bs-ink-light);
-  min-width: 0;
   color: var(--hint-color);
   font-size: var(--bs-text-xs);
-  padding: 0;
-  margin: 0;
   list-style: none;
+  margin: 0;
+  min-width: 0;
   overflow-wrap: break-word;
+  padding: 0;
 }
 
 .bs-hint:where([data-error]:not([data-error="false"])) {
   --hint-color: var(--bs-ink-red);
 }
 
+:where(:disabled, [data-disabled="true"]) .bs-hint {
+  --hint-color: var(--bs-ink-disabled);
+}
+
   }
   

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

@@ -7,7 +7,7 @@
 .bs-input-addon {
   --input-border: var(--bs-violet-300);
   align-items: center;
-  background-color: var(--input-bg, var(--bs-bg-base));
+  background-color: var(--input-bg, transparent);
   border-radius: .25rem;
   color: var(--bs-ink-base);
   display: flex;

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

@@ -22,7 +22,7 @@ textarea,
 select,
 :is(.bs-input, .bs-select, .bs-textarea) {
   appearance: none;
-  background-color: var(--input-bg, var(--bs-bg-base));
+  background-color: var(--input-bg, transparent);
   border-color: var(--input-border, var(--bs-violet-medium));
   border-radius: 0.25rem;
   border-style: solid;

package/dist/components/_modal.scss

@@ -1,6 +1,6 @@
 @mixin modal() {
   .bs-modal {
-  background-color: var(--bs-bg-base-elevated);
+  background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
   box-shadow: var(--bs-shadow-contentHigh);
   left: 1.5rem;
@@ -55,5 +55,6 @@
     width: 35rem;
   }
 }
+
   }
   

package/dist/components/_timeline.scss

@@ -22,7 +22,7 @@
 
 .bs-timeline :where(.bs-step-item) {
   align-items: center;
-  color: var(--step-color, var(--bs-ink-disabled));
+  color: var(--step-color, var(--bs-ink-light));
   display: flex;
   flex-direction: column;
   padding-inline: 1rem;

package/dist/components/badge.css

@@ -1,5 +1,5 @@
 .bs-badge {
-  --badge-bg: var(--bs-red-base);
+  --badge-bg: var(--bs-red-400);
   --badge-text: var(--bs-white);
   display: inline-block;
 }

package/dist/components/banner.css

@@ -33,7 +33,7 @@
 }
 
 .bs-banner :where(.bs-banner-content p a) {
-  color: var(--bs-pink-light);
+  color: var(--bs-blue-lightest);
   text-decoration: underline;
 }
 

package/dist/components/dropdown-options.css

@@ -95,7 +95,7 @@
 /* Hover or data-selected */
 .bs-dropdown-options :where(li:not([role="separator"]):hover),
 .bs-dropdown-options :where(li[data-selected]) {
-  background-color: var(--bs-bg-medium);
+  background-color: var(--bs-bg-medium-to-light);
   border-left: 4px solid var(--bs-ink-blue);
   color: var(--bs-ink-blue);
   outline: none;

package/dist/components/dropdown.css

@@ -27,7 +27,7 @@
   --dropdown-width: 100%;
   --dropdown-transform: translate(0, 100%);
 
-  background-color: var(--bs-bg-base-elevated);
+  background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
   bottom: var(--dropdown-bottom);
   box-shadow: var(--bs-shadow-contentMedium);

package/dist/components/form-booleans.css

@@ -8,8 +8,8 @@
 }
 
 .bs-boolean:where([data-size='sm']) input {
-  width: var(--bs-text-xs);
-  height: var(--bs-text-xs);
+  height: .75rem;
+  width: .75rem;
 }
 
 .bs-boolean label {
@@ -38,11 +38,8 @@
 
 :where(input[type='checkbox'], input[type='radio']),
 :is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
-  --box-shadow: var(--bs-ink-base);
-
   appearance: none;
-  background-color: var(--bs-bg-base);
-  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
+  box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base));
   cursor: pointer;
   display: grid;
   height: 1rem;
@@ -70,79 +67,73 @@
   border-radius: 50%;
 }
 
-/* Checkbox's checkmark  */
+/* Checkbox's checkbox, checkmark.  Checkmark is hidden unless checked/indeterminate. */
 input:where([type='checkbox'])::before,
 :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
-  --filled-size: 1rem;
-  --check-fill-color: var(--bs-blue-base);
-
+  --cb-filled-size: var(--filled-size, 1rem);
   content: '';
   border-radius: 0.125rem;
-  box-shadow: inset var(--filled-size) var(--filled-size) var(--check-fill-color);
-  height: var(--filled-size);
+  box-shadow: inset var(--cb-filled-size) var(--cb-filled-size) var(--fill-bg-color, var(--bs-blue-base));
+  height: var(--cb-filled-size);
   visibility: hidden;
-  width: var(--filled-size);
+  width: var(--cb-filled-size);
 }
 
 input:where([type='checkbox'])::after,
 :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
-  border: solid var(--bs-white);
+  border: solid var(--bs-bg-base);
   border-width: 0 0.125rem 0.125rem 0;
   content: '';
-  height: 0.75em;
+  height: var(--inner-check-height, 0.75em);
   left: 50%;
   position: absolute;
   top: 50%;
   transform-origin: center;
   transform: translate(-50%, -60%) rotate(45deg);
   visibility: hidden;
-  width: 0.375em;
+  width: var(--inner-check-width, 0.375em);
 }
 
 input:where([type='checkbox']):where(:indeterminate)::after,
 .bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
 .bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
   border: none;
-  background-color: var(--bs-white);
-  height: 0.125rem;
+  background-color: var(--bs-bg-base);
+  height: var(--inner-dash-height, 0.125rem);
   transform: translate(-50%, -0.0625rem) rotate(0deg);
-  width: 0.625em;
+  width: var(--inner-dash-width, 0.625em);
 }
 
-/* Radio's dot */
+/* Radio outer circle, Radio dot.  Dot is hidden unless checked. */
 input:where([type='radio'])::before,
 .bs-boolean :where([type="radio"])::before {
-  --filled-size: 1rem;
-  --radio-fill-color: var(--bs-blue-base);
-
-  background-color: var(--radio-fill-color);
+  --radio-filled-size: var(--filled-size, 1rem);
+  background-color: var(--fill-bg-color, var(--bs-blue-base));
   border-radius: 50%;
   box-sizing: content-box;
   content: '';
-  height: var(--filled-size);
+  height: var(--radio-filled-size);
   visibility: hidden;
-  width: var(--filled-size);
+  width: var(--radio-filled-size);
 }
 
 input:where([type='radio'])::after,
 .bs-boolean :where([type="radio"])::after {
-  --inner-size: 0.375rem;
-  --inner-fill-color: var(--bs-white);
-
-  background-color: var(--inner-fill-color);
+  background-color: var(--bs-bg-base);
   border-radius: 50%;
   box-sizing: content-box;
   content: '';
-  height: var(--inner-size);
+  height: var(--inner-dot-size, 0.375rem);
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   visibility: hidden;
-  width: var(--inner-size);
+  width: var(--inner-dot-size, 0.375rem);
 }
 
 /* Show checkmark, indeterminate mark, or radio dot */
+
 .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
 .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
 input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
@@ -152,61 +143,35 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
   visibility: visible;
 }
 
-.bs-boolean:where([data-size='sm']) input::before,
-.bs-checkbox:where([data-size="sm"])::before {
-  --filled-size: var(--bs-text-xs);
-}
+/* ---------- Sizes ----------- */
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']::after,
-.bs-checkbox:where([data-size="sm"])::after {
-  height: 0.5625rem;
-  width: 0.3125rem;
+.bs-boolean:where([data-size="sm"]),
+.bs-checkbox:where([data-size="sm"]) {
+  --filled-size: 0.75rem;
+  --inner-check-height: 0.5625rem;
+  --inner-check-width: 0.3125rem;
+  --inner-dash-height: 0.125rem;
+  --inner-dash-width: .75em;
+  --inner-dot-size: 0.25rem;
 }
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
-.bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after  {
-  height: 0.125rem;
-  width: .75em;
-}
+/* ---------- Disabled State ----------- */
 
-.bs-boolean:where([data-size='sm']) input[type='radio']::after {
-  --inner-size: 0.25rem;
-}
-
-
-/* Disabled State */
-
-input:where([type='checkbox'], [type='radio']):disabled,
-.bs-boolean :where(input):disabled,
-.bs-checkbox:is([data-disabled="true"], :disabled) {
-  --box-shadow: var(--bs-bg-disabled);
+:where(input[type="checkbox"], input[type="radio"]):disabled,
+.bs-boolean:where([data-disabled="true"]),
+.bs-checkbox:where([data-disabled="true"]) {
+  --box-shadow: var(--bs-ink-disabled);
+  --fill-bg-color: var(--bs-ink-disabled);
   background-color: transparent;
   cursor: default;
-}
-
-.bs-checkbox:where([data-disabled="true"]:not(input)) {
   pointer-events: none;
 }
 
-input:where([type='checkbox']):checked: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,
-.bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
-.bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
-  --check-fill-color: var(--bs-bg-disabled);
-}
-
-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 */
+/* ---------- Error state ----------- */
 
 input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
-.bs-boolean :where(input[data-error="true"]),
+.bs-boolean :where(input[data-error="true"]), /* deprecate this one in favor of next line */
+.bs-boolean:where([data-error="true"]),
 .bs-checkbox:where([data-error="true"]) {
   --box-shadow: var(--bs-red-base);
   --outline-color: var(--bs-red-base);

package/dist/components/form-character-count.css

@@ -9,7 +9,7 @@
 :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);
+  visibility: hidden;
 }
 
 .bs-character-count:where([data-error="true"]) {

package/dist/components/form-hints.css

@@ -1,14 +1,18 @@
 .bs-hint {
   --hint-color: var(--bs-ink-light);
-  min-width: 0;
   color: var(--hint-color);
   font-size: var(--bs-text-xs);
-  padding: 0;
-  margin: 0;
   list-style: none;
+  margin: 0;
+  min-width: 0;
   overflow-wrap: break-word;
+  padding: 0;
 }
 
 .bs-hint:where([data-error]:not([data-error="false"])) {
   --hint-color: var(--bs-ink-red);
 }
+
+:where(:disabled, [data-disabled="true"]) .bs-hint {
+  --hint-color: var(--bs-ink-disabled);
+}