@wpmoo/ui 0.2.0 → 0.3.0

package/LICENSE

@@ -2,17 +2,6 @@ MIT License
 
 Copyright (c) 2026 WPMoo (wpmoo.org)
 
-This license applies to the source code in this repository, except where a
-file, directory, or third-party notice states otherwise.
-
-WPMoo-generated visual assets are not licensed under the MIT License unless
-explicitly stated. This includes brand assets, component preview images,
-marketing images, screenshots, generated artwork, and other WPMoo-owned image
-assets under `static/images/`. See `ASSET_LICENSE.md`.
-
-Vendored third-party material keeps its original license and attribution.
-See `THIRD_PARTY_NOTICES.md`.
-
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

package/README.md

@@ -46,7 +46,7 @@ Drop the stylesheet into ordinary Bootstrap markup:
 
 ```html
 <link rel="stylesheet"
-      href="https://unpkg.com/@wpmoo/ui@0.2.0/dist/assets/css/moo-ui.css">
+      href="https://unpkg.com/@wpmoo/ui@0.2.1/dist/assets/css/moo-ui.css">
 
 <button type="button" class="btn btn-primary">Create workspace</button>
 ```
@@ -126,37 +126,37 @@ projects often need. The README wraps a few of those transparent assets in
 theme-aware surfaces so they stay legible on GitHub.
 
 <p align="center">
-  <a href="https://ui.wpmoo.org/components/button.html">
+  <a href="https://ui.wpmoo.org/components/button/">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="static/images/readme/button-dark.svg">
       <img src="static/images/readme/button-light.svg" alt="Button preview" width="31%">
     </picture>
   </a>
-  <a href="https://ui.wpmoo.org/components/dialog.html">
+  <a href="https://ui.wpmoo.org/components/dialog/">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="static/images/readme/dialog-dark.svg">
       <img src="static/images/readme/dialog-light.svg" alt="Dialog preview" width="31%">
     </picture>
   </a>
-  <a href="https://ui.wpmoo.org/components/sidebar.html">
+  <a href="https://ui.wpmoo.org/components/sidebar/">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="static/images/readme/sidebar-dark.svg">
       <img src="static/images/readme/sidebar-light.svg" alt="Sidebar preview" width="31%">
     </picture>
   </a>
-  <a href="https://ui.wpmoo.org/components/toast.html">
+  <a href="https://ui.wpmoo.org/components/toast/">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="static/images/readme/toast-dark.svg">
       <img src="static/images/readme/toast-light.svg" alt="Toast preview" width="31%">
     </picture>
   </a>
-  <a href="https://ui.wpmoo.org/components/sheet.html">
+  <a href="https://ui.wpmoo.org/components/sheet/">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="static/images/readme/sheet-dark.svg">
       <img src="static/images/readme/sheet-light.svg" alt="Sheet preview" width="31%">
     </picture>
   </a>
-  <a href="https://ui.wpmoo.org/components/input.html">
+  <a href="https://ui.wpmoo.org/components/input/">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="static/images/readme/input-dark.svg">
       <img src="static/images/readme/input-light.svg" alt="Input preview" width="31%">

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

@@ -2208,7 +2208,7 @@ progress {
 }
 
 .form-control:disabled {
-  background-color: var(--bs-secondary-bg);
+  background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
   opacity: 1;
 }
 
@@ -2234,7 +2234,7 @@ progress {
 }
 
 .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
-  background-color: var(--bs-secondary-bg);
+  background-color: var(--moo-border);
 }
 
 .form-control-plaintext {
@@ -2368,7 +2368,7 @@ textarea.form-control-lg {
 }
 
 .form-select:disabled {
-  background-color: var(--bs-secondary-bg);
+  background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
 }
 
 .form-select:-moz-focusring {
@@ -2748,7 +2748,7 @@ textarea.form-control-lg {
 
 .form-floating > :disabled ~ label::after,
 .form-floating > .form-control:disabled ~ label::after {
-  background-color: var(--bs-secondary-bg);
+  background-color: color-mix(in srgb, var(--moo-border) 40%, transparent);
 }
 
 .input-group {
@@ -5045,7 +5045,7 @@ textarea.form-control-lg {
   --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;
@@ -12317,6 +12317,7 @@ textarea.form-control-lg {
   --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);
@@ -12339,6 +12340,7 @@ textarea.form-control-lg {
   --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);
@@ -12602,17 +12604,20 @@ 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;
 }
 
@@ -12620,19 +12625,75 @@ textarea.form-control:not(.form-control-sm, .form-control-lg) {
   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;
@@ -12684,12 +12745,12 @@ textarea.form-control:not(.form-control-sm, .form-control-lg) {
   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;
 }
@@ -14269,6 +14330,10 @@ label.btn {
   font-weight: 500;
 }
 
+.field:has(> .is-invalid) > .form-label {
+  color: var(--bs-danger);
+}
+
 .field-description,
 .field-error {
   margin-top: 0;