@wpmoo/ui 0.3.1 → 0.4.0

package/dist/assets/css/moo.css

@@ -136,6 +136,14 @@
   --bs-focus-ring-width: 2px;
   --bs-focus-ring-opacity: 0.25;
   --bs-focus-ring-color: var(--moo-ring);
+  --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);
   color-scheme: light;
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
@@ -147,14 +155,7 @@
   --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-body-bg: var(--moo-surface);
@@ -221,14 +222,7 @@
   --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-body-bg: var(--moo-surface);
@@ -295,14 +289,7 @@
   --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-body-bg: var(--moo-surface);
@@ -369,14 +356,7 @@
   --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-body-bg: var(--moo-surface);
@@ -652,7 +632,7 @@
     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 {
     padding-top: calc(0.5rem + var(--bs-border-width));
@@ -680,7 +660,7 @@
     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;
@@ -709,7 +689,7 @@
   }
   .form-control::-webkit-date-and-time-value {
     min-width: 85px;
-    height: 1.5em;
+    height: 1.42857em;
     margin: 0;
   }
   .form-control::-webkit-datetime-edit {
@@ -721,6 +701,7 @@
     opacity: 1;
   }
   .form-control:disabled {
+    color: var(--bs-tertiary-color);
     background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
     opacity: 1;
   }
@@ -751,7 +732,7 @@
     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;
@@ -765,7 +746,7 @@
     padding-left: 0;
   }
   .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);
@@ -781,7 +762,7 @@
     margin-inline-end: 0.5rem;
   }
   .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);
@@ -795,10 +776,10 @@
     min-height: 2rem;
   }
   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 {
     width: 3rem;
@@ -817,10 +798,10 @@
     border-radius: 0.625rem;
   }
   .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 {
     --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
@@ -829,7 +810,7 @@
     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;
@@ -856,6 +837,7 @@
     background-image: none;
   }
   .form-select:disabled {
+    color: var(--bs-tertiary-color);
     background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
   }
   .form-select:-moz-focusring {
@@ -1034,7 +1016,7 @@
     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;
@@ -1127,19 +1109,19 @@
   }
   .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 {
     border-color: var(--bs-form-valid-border-color);
     box-shadow: 0 0 0 2px rgba(var(--bs-success-rgb), 0.25);
   }
   .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 {
     border-color: var(--bs-form-valid-border-color);
@@ -1148,14 +1130,14 @@
     --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 {
     border-color: var(--bs-form-valid-border-color);
     box-shadow: 0 0 0 2px rgba(var(--bs-success-rgb), 0.25);
   }
   .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 {
     border-color: var(--bs-form-valid-border-color);
@@ -1210,19 +1192,19 @@
   }
   .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 {
     border-color: var(--bs-form-invalid-border-color);
     box-shadow: 0 0 0 2px rgba(var(--bs-danger-rgb), 0.25);
   }
   .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 {
     border-color: var(--bs-form-invalid-border-color);
@@ -1231,14 +1213,14 @@
     --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 {
     border-color: var(--bs-form-invalid-border-color);
     box-shadow: 0 0 0 2px rgba(var(--bs-danger-rgb), 0.25);
   }
   .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 {
     border-color: var(--bs-form-invalid-border-color);
@@ -3840,6 +3822,12 @@
     outline-offset: var(--bs-focus-ring-width);
     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);
@@ -4003,9 +3991,16 @@
   .form-control {
     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);
@@ -4214,7 +4209,11 @@ 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 {
     transform: translateY(0.5px);
@@ -5219,6 +5218,9 @@ label.btn {
     width: 1rem;
     height: 1rem;
   }
+  .page-item.disabled {
+    opacity: var(--moo-disabled-control-opacity);
+  }
   .progress {
     --bs-progress-bar-bg: var(--moo-foreground);
   }
@@ -5264,6 +5266,14 @@ label.btn {
   .accordion-button:hover {
     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;
@@ -5301,6 +5311,12 @@ label.btn {
     background-color: var(--moo-surface);
     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%;
@@ -5512,6 +5528,216 @@ label.btn {
   .field-fieldset + hr {
     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;