@wpmoo/ui 0.2.0 → 0.2.1

package/dist/assets/css/moo.css

@@ -150,6 +150,7 @@
   --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);
@@ -223,6 +224,7 @@
   --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);
@@ -296,6 +298,7 @@
   --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);
@@ -369,6 +372,7 @@
   --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);
@@ -717,7 +721,7 @@
     opacity: 1;
   }
   .form-control:disabled {
-    background-color: var(--bs-secondary-bg);
+    background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
     opacity: 1;
   }
   .form-control::file-selector-button {
@@ -740,7 +744,7 @@
     }
   }
   .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: var(--bs-secondary-bg);
+    background-color: var(--moo-border);
   }
   .form-control-plaintext {
     display: block;
@@ -852,7 +856,7 @@
     background-image: none;
   }
   .form-select:disabled {
-    background-color: var(--bs-secondary-bg);
+    background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
   }
   .form-select:-moz-focusring {
     color: transparent;
@@ -2572,7 +2576,7 @@
     --bs-badge-padding-x: 0.65em;
     --bs-badge-padding-y: 0.35em;
     --bs-badge-font-size: 0.75em;
-    --bs-badge-font-weight: 700;
+    --bs-badge-font-weight: 500;
     --bs-badge-color: #fff;
     --bs-badge-border-radius: var(--bs-border-radius);
     display: inline-block;
@@ -4002,30 +4006,78 @@
   textarea.form-control:not(.form-control-sm, .form-control-lg) {
     padding: 0.5rem 0.75rem;
   }
-  .input-group {
+  .input-group:not(:has(> .form-control[type="file"])) {
     border: var(--bs-border-width) solid var(--moo-border);
-    border-radius: 0.625rem;
+    border-radius: var(--moo-input-group-border-radius);
   }
-  .input-group:not(:has(textarea)) {
-    align-items: center;
-    height: 2rem;
+  .input-group.rounded-pill:not(:has(> .form-control[type="file"])) {
+    --moo-input-group-border-radius: var(--bs-border-radius-pill);
   }
-  .input-group:not(:has(textarea)) > .form-control {
+  .input-group:not(:has(textarea)):not(:has(> .form-control[type="file"])) {
+    height: calc(2rem + var(--bs-border-width) * 2);
+  }
+  .input-group:not(:has(textarea)):not(:has(> .form-control[type="file"])) > .form-control {
     min-height: 0;
   }
   .input-group > textarea.form-control {
     resize: none;
   }
-  .input-group > :not(:first-child):not([class~="dropdown-menu"]):not([class~="valid-tooltip"]):not([class~="valid-feedback"]):not([class~="invalid-tooltip"]):not([class~="invalid-feedback"]) {
+  .input-group:not(:has(> .form-control[type="file"])) > :not(:first-child):not([class~="dropdown-menu"]):not([class~="valid-tooltip"]):not([class~="valid-feedback"]):not([class~="invalid-tooltip"]):not([class~="invalid-feedback"]) {
     margin: 0;
   }
-  .input-group > :not(ul) {
+  .input-group:not(:has(> .form-control[type="file"])) > :not(ul) {
     border: 0;
     border-radius: 0;
   }
+  .input-group:not(:has(> .form-control[type="file"])) > :first-child:not(ul) {
+    border-start-start-radius: var(--moo-input-group-border-radius);
+    border-end-start-radius: var(--moo-input-group-border-radius);
+  }
+  .input-group:not(:has(> .form-control[type="file"])) > :is(:last-child, :nth-last-child(2):has(+ .dropdown-menu)):not(ul) {
+    border-start-end-radius: var(--moo-input-group-border-radius);
+    border-end-end-radius: var(--moo-input-group-border-radius);
+  }
   .input-group > :is(button, a) {
     border: var(--bs-btn-border-width) var(--bs-border-style) var(--bs-btn-border-color);
   }
+  .input-group > .btn-ghost {
+    --bs-btn-hover-bg: transparent;
+    --bs-btn-active-bg: transparent;
+    position: relative;
+    isolation: isolate;
+    border-radius: var(--moo-input-group-border-radius) !important;
+  }
+  .input-group > .btn-ghost::before {
+    position: absolute;
+    inset: 0.25rem;
+    z-index: -1;
+    content: "";
+    border-radius: var(--moo-input-group-border-radius);
+    background-color: var(--moo-muted-surface);
+    opacity: 0;
+    transition: opacity opacity 0.15s linear;
+  }
+  .input-group > .btn-ghost:hover::before,
+.input-group > .btn-ghost:is(.show, [aria-expanded="true"])::before {
+    opacity: 1;
+  }
+  .input-group > .btn-ghost:is(.show, [aria-expanded="true"]) {
+    color: var(--bs-btn-active-color);
+  }
+  .input-group > .btn-ghost[aria-pressed="true"] {
+    color: var(--bs-primary);
+  }
+  .input-group > .btn-ghost[aria-pressed="true"]::before {
+    opacity: 0;
+  }
+  .input-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+    transform: none;
+  }
+  .input-group > :is(.btn-xs, .btn-icon-xs) {
+    --bs-btn-padding-y: 0.125rem;
+    --bs-btn-padding-x: 0.375rem;
+    --bs-btn-line-height: 0.875rem;
+  }
   .input-group > .input-group-text {
     color: var(--bs-secondary-color);
     background-color: transparent;
@@ -4067,11 +4119,11 @@
     border: 0;
     background-color: transparent;
   }
-  .input-group:has(> .form-control:focus) {
+  .input-group:has(> .form-control:focus):not(:has(> .form-control[type="file"])) {
     border-color: #8b8b8b;
     box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
   }
-  .input-group > :focus {
+  .input-group:not(:has(> .form-control[type="file"])) > :focus {
     outline: 0;
     box-shadow: none;
   }
@@ -5429,6 +5481,9 @@ label.btn {
     margin-bottom: 0;
     font-weight: 500;
   }
+  .field:has(> .is-invalid) > .form-label {
+    color: var(--bs-danger);
+  }
   .field-description,
 .field-error {
     margin-top: 0;