@wpmoo/ui 0.3.1 → 0.4.0

package/THIRD_PARTY_NOTICES.md

@@ -24,7 +24,9 @@ Moo UI vendors a build-time icon metadata subset from Iconify's Lucide icon
 set at `src/icons/lucide-icons.json` and renders selected icons into the
 generated catalog. Lucide is licensed under the ISC License. The source
 metadata identifies the Lucide project, its contributors, and the upstream
-license URL.
+license URL. The root favicon set (`favicon.svg`, `favicon.ico`,
+`apple-touch-icon.png`, `icon-192.png`, and `icon-512.png`) uses the Lucide
+Blocks geometry and remains covered by the same ISC license notice.
 
 ## Geist
 

package/dist/assets/css/moo-ui.css

@@ -87,10 +87,10 @@
   --bs-secondary-color-rgb: 24, 24, 27;
   --bs-secondary-bg: #e9ecef;
   --bs-secondary-bg-rgb: 233, 236, 239;
-  --bs-tertiary-color: rgba(24, 24, 27, 0.5);
-  --bs-tertiary-color-rgb: 24, 24, 27;
-  --bs-tertiary-bg: #f8f9fa;
-  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-tertiary-color: #a1a1aa;
+  --bs-tertiary-color-rgb: 161, 161, 170;
+  --bs-tertiary-bg: #fafafa;
+  --bs-tertiary-bg-rgb: 250, 250, 250;
   --bs-heading-color: inherit;
   --bs-link-color: #171717;
   --bs-link-color-rgb: 23, 23, 23;
@@ -103,7 +103,7 @@
   --bs-border-width: 1px;
   --bs-border-style: solid;
   --bs-border-color: #e4e4e7;
-  --bs-border-color-translucent: rgba(10, 10, 10, 0.175);
+  --bs-border-color-translucent: rgba(24, 24, 27, 0.175);
   --bs-border-radius: 0.5rem;
   --bs-border-radius-sm: 0.375rem;
   --bs-border-radius-lg: 0.625rem;
@@ -136,10 +136,10 @@
   --bs-secondary-color-rgb: 222, 226, 230;
   --bs-secondary-bg: #343a40;
   --bs-secondary-bg-rgb: 52, 58, 64;
-  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
-  --bs-tertiary-color-rgb: 222, 226, 230;
-  --bs-tertiary-bg: #2b3035;
-  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-tertiary-color: #71717a;
+  --bs-tertiary-color-rgb: 113, 113, 122;
+  --bs-tertiary-bg: #202024;
+  --bs-tertiary-bg-rgb: 32, 32, 36;
   --bs-primary-text-emphasis: #747474;
   --bs-secondary-text-emphasis: #f8f8f9;
   --bs-success-text-emphasis: #73b38a;
@@ -173,7 +173,7 @@
   --bs-highlight-color: #dee2e6;
   --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
-  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-border-color-translucent: rgba(250, 250, 250, 0.15);
   --bs-form-valid-color: #75b798;
   --bs-form-valid-border-color: #75b798;
   --bs-form-invalid-color: #ea868f;
@@ -2126,7 +2126,7 @@ progress {
   padding-bottom: calc(0.25rem + var(--bs-border-width));
   margin-bottom: 0;
   font-size: inherit;
-  line-height: 1.5;
+  line-height: 1.42857;
 }
 
 .col-form-label-lg {
@@ -2159,7 +2159,7 @@ progress {
   padding: 0.25rem 0.625rem;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.42857;
   color: var(--bs-body-color);
   appearance: none;
   background-color: transparent;
@@ -2193,7 +2193,7 @@ progress {
 
 .form-control::-webkit-date-and-time-value {
   min-width: 85px;
-  height: 1.5em;
+  height: 1.42857em;
   margin: 0;
 }
 
@@ -2208,6 +2208,7 @@ progress {
 }
 
 .form-control:disabled {
+  color: var(--bs-tertiary-color);
   background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
   opacity: 1;
 }
@@ -2242,7 +2243,7 @@ progress {
   width: 100%;
   padding: 0.25rem 0;
   margin-bottom: 0;
-  line-height: 1.5;
+  line-height: 1.42857;
   color: var(--bs-body-color);
   background-color: transparent;
   border: solid transparent;
@@ -2259,7 +2260,7 @@ progress {
 }
 
 .form-control-sm {
-  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
+  min-height: calc(1.42857em + 0.5rem + calc(var(--bs-border-width) * 2));
   padding: 0.25rem 0.5rem;
   font-size: 0.76563rem;
   border-radius: var(--bs-border-radius-sm);
@@ -2278,7 +2279,7 @@ progress {
 }
 
 .form-control-lg {
-  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
+  min-height: calc(1.42857em + 1rem + calc(var(--bs-border-width) * 2));
   padding: 0.5rem 1rem;
   font-size: 1.09375rem;
   border-radius: var(--bs-border-radius-lg);
@@ -2295,11 +2296,11 @@ textarea.form-control {
 }
 
 textarea.form-control-sm {
-  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
+  min-height: calc(1.42857em + 0.5rem + calc(var(--bs-border-width) * 2));
 }
 
 textarea.form-control-lg {
-  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
+  min-height: calc(1.42857em + 1rem + calc(var(--bs-border-width) * 2));
 }
 
 .form-control-color {
@@ -2323,11 +2324,11 @@ textarea.form-control-lg {
 }
 
 .form-control-color.form-control-sm {
-  height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
+  height: calc(1.42857em + 0.5rem + calc(var(--bs-border-width) * 2));
 }
 
 .form-control-color.form-control-lg {
-  height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
+  height: calc(1.42857em + 1rem + calc(var(--bs-border-width) * 2));
 }
 
 .form-select {
@@ -2337,7 +2338,7 @@ textarea.form-control-lg {
   padding: 0.25rem 1.875rem 0.25rem 0.625rem;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.42857;
   color: var(--bs-body-color);
   appearance: none;
   background-color: transparent;
@@ -2368,6 +2369,7 @@ textarea.form-control-lg {
 }
 
 .form-select:disabled {
+  color: var(--bs-tertiary-color);
   background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
 }
 
@@ -2789,7 +2791,7 @@ textarea.form-control-lg {
   padding: 0.25rem 0.625rem;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.42857;
   color: var(--bs-body-color);
   text-align: center;
   white-space: nowrap;
@@ -2895,11 +2897,11 @@ textarea.form-control-lg {
 
 .was-validated .form-control:valid, .form-control.is-valid {
   border-color: var(--bs-form-valid-border-color);
-  padding-right: calc(1.5em + 0.5rem);
+  padding-right: calc(1.42857em + 0.5rem);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2316803c' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: right calc(0.375em + 0.125rem) center;
-  background-size: calc(0.75em + 0.25rem) calc(0.75em + 0.25rem);
+  background-position: right calc(0.35714em + 0.125rem) center;
+  background-size: calc(0.71429em + 0.25rem) calc(0.71429em + 0.25rem);
 }
 
 .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
@@ -2908,8 +2910,8 @@ textarea.form-control-lg {
 }
 
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
-  padding-right: calc(1.5em + 0.5rem);
-  background-position: top calc(0.375em + 0.125rem) right calc(0.375em + 0.125rem);
+  padding-right: calc(1.42857em + 0.5rem);
+  background-position: top calc(0.35714em + 0.125rem) right calc(0.35714em + 0.125rem);
 }
 
 .was-validated .form-select:valid, .form-select.is-valid {
@@ -2920,7 +2922,7 @@ textarea.form-control-lg {
   --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2316803c' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
   padding-right: 3.4375rem;
   background-position: right 0.625rem center, center right 1.875rem;
-  background-size: 16px 12px, calc(0.75em + 0.25rem) calc(0.75em + 0.25rem);
+  background-size: 16px 12px, calc(0.71429em + 0.25rem) calc(0.71429em + 0.25rem);
 }
 
 .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
@@ -2929,7 +2931,7 @@ textarea.form-control-lg {
 }
 
 .was-validated .form-control-color:valid, .form-control-color.is-valid {
-  width: calc(3rem + calc(1.5em + 0.5rem));
+  width: calc(3rem + calc(1.42857em + 0.5rem));
 }
 
 .was-validated .form-check-input:valid, .form-check-input.is-valid {
@@ -2995,11 +2997,11 @@ textarea.form-control-lg {
 
 .was-validated .form-control:invalid, .form-control.is-invalid {
   border-color: var(--bs-form-invalid-border-color);
-  padding-right: calc(1.5em + 0.5rem);
+  padding-right: calc(1.42857em + 0.5rem);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc2626'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc2626' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: right calc(0.375em + 0.125rem) center;
-  background-size: calc(0.75em + 0.25rem) calc(0.75em + 0.25rem);
+  background-position: right calc(0.35714em + 0.125rem) center;
+  background-size: calc(0.71429em + 0.25rem) calc(0.71429em + 0.25rem);
 }
 
 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
@@ -3008,8 +3010,8 @@ textarea.form-control-lg {
 }
 
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
-  padding-right: calc(1.5em + 0.5rem);
-  background-position: top calc(0.375em + 0.125rem) right calc(0.375em + 0.125rem);
+  padding-right: calc(1.42857em + 0.5rem);
+  background-position: top calc(0.35714em + 0.125rem) right calc(0.35714em + 0.125rem);
 }
 
 .was-validated .form-select:invalid, .form-select.is-invalid {
@@ -3020,7 +3022,7 @@ textarea.form-control-lg {
   --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc2626'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc2626' stroke='none'/%3e%3c/svg%3e");
   padding-right: 3.4375rem;
   background-position: right 0.625rem center, center right 1.875rem;
-  background-size: 16px 12px, calc(0.75em + 0.25rem) calc(0.75em + 0.25rem);
+  background-size: 16px 12px, calc(0.71429em + 0.25rem) calc(0.71429em + 0.25rem);
 }
 
 .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
@@ -3029,7 +3031,7 @@ textarea.form-control-lg {
 }
 
 .was-validated .form-control-color:invalid, .form-control-color.is-invalid {
-  width: calc(3rem + calc(1.5em + 0.5rem));
+  width: calc(3rem + calc(1.42857em + 0.5rem));
 }
 
 .was-validated .form-check-input:invalid, .form-check-input.is-invalid {
@@ -12304,6 +12306,17 @@ textarea.form-control-lg {
   }
 }
 
+:root {
+  --moo-overlay-backdrop-opacity: 1;
+  --moo-overlay-backdrop-bg: color-mix(in srgb, var(--bs-black) 10%, transparent);
+  --moo-overlay-backdrop-filter: blur(8px);
+  --moo-input-group-border-radius: var(--bs-border-radius-lg);
+  --moo-disabled-control-opacity: 0.5;
+  --moo-sidebar-foreground: var(--moo-foreground);
+  --moo-sidebar-accent: var(--moo-muted-surface);
+  --moo-sidebar-border: var(--moo-border);
+}
+
 :root,
 [data-bs-theme="light"] {
   --moo-surface: #fff;
@@ -12314,14 +12327,7 @@ textarea.form-control-lg {
   --moo-ring: #18181b;
   --moo-destructive: #dc2626;
   --moo-destructive-foreground: #fff;
-  --moo-overlay-backdrop-opacity: 1;
-  --moo-overlay-backdrop-bg: color-mix(in srgb, var(--bs-black) 10%, transparent);
-  --moo-overlay-backdrop-filter: blur(8px);
-  --moo-input-group-border-radius: var(--bs-border-radius-lg);
   --moo-sidebar: #fafafa;
-  --moo-sidebar-foreground: var(--moo-foreground);
-  --moo-sidebar-accent: var(--moo-muted-surface);
-  --moo-sidebar-border: var(--moo-border);
   --bs-body-color: var(--moo-foreground);
   --bs-body-color-rgb: 24, 24, 27;
   --bs-heading-color: var(--moo-foreground);
@@ -12337,14 +12343,7 @@ textarea.form-control-lg {
   --moo-ring: #fafafa;
   --moo-destructive: #f87171;
   --moo-destructive-foreground: #18181b;
-  --moo-overlay-backdrop-opacity: 1;
-  --moo-overlay-backdrop-bg: color-mix(in srgb, var(--bs-black) 10%, transparent);
-  --moo-overlay-backdrop-filter: blur(8px);
-  --moo-input-group-border-radius: var(--bs-border-radius-lg);
   --moo-sidebar: #1c1c1f;
-  --moo-sidebar-foreground: var(--moo-foreground);
-  --moo-sidebar-accent: var(--moo-muted-surface);
-  --moo-sidebar-border: var(--moo-border);
   --bs-body-color: var(--moo-foreground);
   --bs-body-color-rgb: 250, 250, 250;
   --bs-heading-color: var(--moo-foreground);
@@ -12357,6 +12356,13 @@ textarea.form-control-lg {
   box-shadow: none;
 }
 
+.form-control.is-invalid,
+.form-control.is-invalid:focus,
+.form-select.is-invalid,
+.form-select.is-invalid:focus {
+  box-shadow: 0 0 0 var(--bs-focus-ring-width) color-mix(in srgb, var(--bs-form-invalid-border-color) 20%, transparent);
+}
+
 .btn-check:focus-visible + .btn {
   outline: var(--bs-focus-ring-width) solid var(--moo-ring);
   outline-offset: var(--bs-focus-ring-width);
@@ -12600,10 +12606,19 @@ kbd {
   min-height: 2rem;
 }
 
+.form-control:disabled,
+.form-select:disabled {
+  opacity: var(--moo-disabled-control-opacity);
+}
+
 textarea.form-control:not(.form-control-sm, .form-control-lg) {
   padding: 0.5rem 0.75rem;
 }
 
+textarea.form-control:disabled {
+  resize: none;
+}
+
 .input-group:not(:has(> .form-control[type="file"])) {
   border: var(--bs-border-width) solid var(--moo-border);
   border-radius: var(--moo-input-group-border-radius);
@@ -12857,7 +12872,12 @@ label.btn {
 .btn.disabled,
 .btn[aria-disabled="true"] {
   pointer-events: none;
-  opacity: var(--bs-btn-disabled-opacity);
+  opacity: var(--moo-disabled-control-opacity);
+}
+
+.btn-check:disabled + .btn {
+  pointer-events: none;
+  opacity: var(--moo-disabled-control-opacity);
 }
 
 .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
@@ -14017,6 +14037,10 @@ label.btn {
   height: 1rem;
 }
 
+.page-item.disabled {
+  opacity: var(--moo-disabled-control-opacity);
+}
+
 .progress {
   --bs-progress-bar-bg: var(--moo-foreground);
 }
@@ -14073,6 +14097,16 @@ label.btn {
   text-decoration: underline;
 }
 
+.accordion-button:disabled {
+  color: var(--moo-muted-foreground);
+  opacity: var(--moo-disabled-control-opacity);
+  pointer-events: none;
+}
+
+.accordion-button:disabled:hover {
+  text-decoration: none;
+}
+
 .accordion-flush {
   --bs-accordion-btn-padding-x: 0;
   --bs-accordion-btn-padding-y: 0.625rem;
@@ -14117,6 +14151,13 @@ label.btn {
   box-shadow: var(--bs-box-shadow-sm);
 }
 
+.tabs-list .nav-link:disabled,
+.tabs-list .nav-link.disabled {
+  color: var(--moo-muted-foreground);
+  opacity: var(--moo-disabled-control-opacity);
+  pointer-events: none;
+}
+
 .tab-content {
   display: grid;
   width: 100%;
@@ -14369,6 +14410,252 @@ label.btn {
   opacity: 0.1;
 }
 
+.combobox {
+  --moo-combobox-width: 12.5rem;
+  --moo-combobox-multiple-width: 20rem;
+  --moo-combobox-menu-max-height: 16rem;
+  --moo-combobox-option-line-height: 1.25rem;
+  --moo-combobox-description-font-size: 0.75rem;
+  width: 100%;
+  max-width: var(--moo-combobox-width);
+}
+
+.combobox--multiple {
+  max-width: var(--moo-combobox-multiple-width);
+}
+
+.combobox-control {
+  position: relative;
+  width: 100%;
+}
+
+.combobox-control:has(.combobox-input:disabled) {
+  opacity: var(--moo-disabled-control-opacity);
+}
+
+.combobox-control:has(.combobox-input:disabled) .combobox-input:disabled {
+  opacity: 1;
+}
+
+.combobox-input {
+  padding-inline-end: calc(0.625rem + 2rem);
+}
+
+.combobox-input.is-invalid {
+  padding-inline-end: calc(0.625rem + 2rem);
+  background-image: none;
+}
+
+.combobox-indicator {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  color: var(--bs-secondary-color);
+  pointer-events: none;
+}
+
+.combobox-indicator > [data-icon] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
+.combobox-clear {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
+  width: 2rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--bs-secondary-color);
+  cursor: pointer;
+}
+
+.combobox-clear:hover,
+.combobox-clear:focus-visible {
+  color: var(--bs-body-color);
+}
+
+.combobox-clear > [data-icon] {
+  width: 0.875em;
+  height: 0.875em;
+  flex: 0 0 auto;
+}
+
+.combobox-chips {
+  display: flex;
+  min-height: 2rem;
+  align-items: center;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  padding-block: 0.25rem;
+  padding-inline: 0.625rem;
+  cursor: text;
+}
+
+.combobox-chips:focus-within {
+  border-color: #8b8b8b;
+  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
+}
+
+.combobox-value {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.combobox-chip {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: default;
+}
+
+.combobox-chip__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.combobox-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--bs-border-radius-pill);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.65;
+}
+
+.combobox-chip__remove:hover,
+.combobox-chip__remove:focus-visible {
+  opacity: 1;
+}
+
+.combobox-chip__remove > [data-icon] {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex: 0 0 auto;
+}
+
+.combobox-chips-input {
+  min-width: 5rem;
+  flex: 1 1 5rem;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.combobox-chips-input::placeholder {
+  color: var(--bs-tertiary-color);
+}
+
+.combobox-menu {
+  position: absolute;
+  inset-block-start: calc(100% + 0.125rem);
+  inset-inline-start: 0;
+  z-index: 1000;
+  width: max-content;
+  min-width: 100%;
+  max-width: calc(100vw - 1rem);
+  max-height: var(--moo-combobox-menu-max-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.combobox-menu::-webkit-scrollbar {
+  display: none;
+}
+
+.combobox-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline-end: 2rem;
+  line-height: var(--moo-combobox-option-line-height);
+}
+
+.combobox-option__content {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.combobox-option[aria-current="true"] {
+  background-color: var(--bs-dropdown-link-hover-bg);
+}
+
+.combobox-option[aria-selected="true"] {
+  font-weight: 500;
+}
+
+.combobox-option__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.combobox--custom-items .combobox-option__label {
+  font-weight: 500;
+}
+
+.combobox-option__description {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--bs-secondary-color);
+  font-size: var(--moo-combobox-description-font-size);
+  line-height: 1.5;
+  text-overflow: ellipsis;
+}
+
+.combobox-option__check {
+  display: inline-flex;
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  visibility: hidden;
+}
+
+.combobox-option[aria-selected="true"] .combobox-option__check {
+  visibility: visible;
+}
+
+.combobox-option__check > [data-icon] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
+.combobox-group-label {
+  padding: 0.375rem 0.5rem;
+  font-size: var(--moo-combobox-description-font-size);
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.combobox-empty {
+  padding: 0.25rem 0.375rem;
+  color: var(--bs-secondary-color);
+  text-align: center;
+}
+
 .form-label,
 .form-check-label {
   user-select: none;