@wpmoo/ui 0.1.1 → 0.2.1

package/dist/assets/css/moo.css

@@ -147,6 +147,10 @@
   --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);
@@ -217,6 +221,10 @@
   --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);
@@ -287,6 +295,10 @@
   --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);
@@ -357,6 +369,10 @@
   --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);
@@ -705,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 {
@@ -728,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;
@@ -840,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;
@@ -2462,7 +2478,7 @@
     float: left;
     padding-right: var(--bs-breadcrumb-item-padding-x);
     color: var(--bs-breadcrumb-divider-color);
-    content: var(--bs-breadcrumb-divider, ">") /* rtl: var(--bs-breadcrumb-divider, ">") */;
+    content: var(--bs-breadcrumb-divider, ">") /* rtl: var(--bs-breadcrumb-divider, "<") */;
   }
   .breadcrumb-item.active {
     color: var(--bs-breadcrumb-item-active-color);
@@ -2560,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;
@@ -3824,6 +3840,11 @@
     outline-offset: var(--bs-focus-ring-width);
     box-shadow: none;
   }
+  .btn-check:focus-visible + .btn {
+    outline: var(--bs-focus-ring-width) solid var(--moo-ring);
+    outline-offset: var(--bs-focus-ring-width);
+    box-shadow: none;
+  }
   .input-group > .dropdown-toggle[aria-expanded="true"]:focus-visible {
     outline: 0;
   }
@@ -3985,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;
@@ -4050,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;
   }
@@ -4199,6 +4268,8 @@ label.btn {
     --bs-btn-bg: transparent;
     --bs-btn-hover-bg: var(--moo-muted-surface);
     --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-color: var(--bs-btn-color);
     --bs-btn-active-border-color: transparent;
   }
   .btn-danger {
@@ -4241,6 +4312,11 @@ label.btn {
     gap: 0.375rem;
     border-bottom: 0;
   }
+  .card-header,
+.card-body,
+.card-footer {
+    padding-block: 0;
+  }
   .card-footer {
     display: flex;
     align-items: center;
@@ -4315,26 +4391,101 @@ label.btn {
       transform: none !important;
     }
   }
+  .menubar {
+    gap: 0.125rem;
+    padding: 0.1875rem;
+  }
+  .menubar .dropdown-menu {
+    z-index: 1000;
+  }
+  .menubar [data-bs-toggle="dropdown"].show,
+.menubar .dropdown-toggle.show {
+    --bs-btn-color: var(--moo-foreground);
+    color: var(--bs-btn-color);
+    font-weight: 500;
+  }
   .avatar {
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2rem;
     height: 2rem;
     flex: 0 0 auto;
-    overflow: hidden;
-    border: var(--bs-border-width) solid var(--moo-border);
+    overflow: visible;
+    border: 0;
     border-radius: var(--bs-border-radius-pill);
     background-color: var(--moo-muted-surface);
     color: var(--moo-foreground);
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 1;
+    text-transform: uppercase;
+  }
+  .avatar::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border: var(--bs-border-width) solid var(--moo-border);
+    border-radius: var(--bs-border-radius-pill);
+    pointer-events: none;
+    opacity: 0.8;
   }
   .avatar > img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: var(--bs-border-radius-pill);
+  }
+  .avatar-fallback {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    padding: 0 0.15rem;
+  }
+  .avatar--has-image > .avatar-fallback {
+    display: none;
+  }
+  .avatar-badge {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 0.9375rem;
+    min-width: 0.9375rem;
+    padding-inline: 0.2rem;
+    border-radius: var(--bs-border-radius-pill);
+    border: 2px solid var(--bs-body-bg);
+    background-color: var(--moo-muted-surface);
+    color: var(--moo-foreground);
+    font-size: 0.625rem;
+    font-weight: 500;
+    line-height: 1;
+  }
+  .avatar-badge [data-icon] {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+  .avatar-badge--dot {
+    height: 0.625rem;
+    min-width: 0.625rem;
+    padding-inline: 0;
+  }
+  .avatar-badge--icon {
+    width: 0.75rem;
+    height: 0.75rem;
+    min-width: 0.75rem;
+    padding-inline: 0;
+  }
+  .avatar-badge--icon [data-icon] {
+    width: 0.375rem;
+    height: 0.375rem;
   }
   .avatar-sm {
     width: 1.5rem;
@@ -4346,6 +4497,33 @@ label.btn {
     height: 2.5rem;
     font-size: 1rem;
   }
+  .avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
+  .avatar-group > .avatar {
+    z-index: 0;
+  }
+  .avatar-group .avatar + .avatar,
+.avatar-group .avatar + .avatar-count,
+.avatar-group .avatar-count + .avatar {
+    margin-inline-start: -0.5rem;
+  }
+  .avatar-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    flex: 0 0 auto;
+    border-radius: var(--bs-border-radius-pill);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .avatar-count::before {
+    content: "+";
+    margin-inline-end: -0.1rem;
+  }
   .nav {
     --bs-nav-link-color: var(--moo-foreground);
     --bs-nav-link-hover-color: var(--moo-foreground);
@@ -4373,7 +4551,12 @@ label.btn {
     flex: 0 0 auto;
   }
   .skeleton {
+    color: var(--moo-border);
     border-radius: var(--bs-border-radius);
+    overflow: hidden;
+  }
+  .skeleton > .placeholder {
+    display: block;
   }
   .sidebar-wrapper {
     --moo-sidebar-width: 16rem;
@@ -4981,6 +5164,18 @@ label.btn {
   .breadcrumb {
     --bs-breadcrumb-item-active-color: var(--moo-foreground);
   }
+  :dir(rtl) .breadcrumb {
+    --bs-breadcrumb-divider: "<";
+  }
+  :dir(rtl) .breadcrumb-item + .breadcrumb-item {
+    padding-right: var(--bs-breadcrumb-item-padding-x);
+    padding-left: 0;
+  }
+  :dir(rtl) .breadcrumb-item + .breadcrumb-item::before {
+    float: right;
+    padding-right: 0;
+    padding-left: var(--bs-breadcrumb-item-padding-x);
+  }
   .breadcrumb-item a {
     color: var(--moo-muted-foreground);
     text-decoration: none;
@@ -4990,6 +5185,30 @@ label.btn {
     color: var(--moo-foreground);
     text-decoration: none;
   }
+  .breadcrumb-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    color: var(--moo-muted-foreground);
+  }
+  .breadcrumb-ellipsis [data-icon] {
+    width: 1rem;
+    height: 1rem;
+  }
+  .breadcrumb-dropdown-item {
+    display: inline-flex;
+    align-items: center;
+  }
+  .breadcrumb-dropdown-item button {
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    color: var(--moo-muted-foreground);
+    text-decoration: none;
+  }
+  .breadcrumb-dropdown-item button:hover,
+.breadcrumb-dropdown-item button:focus {
+    color: var(--moo-foreground);
+  }
   .page-link {
     display: inline-flex;
     align-items: center;
@@ -5024,18 +5243,35 @@ label.btn {
     content: none;
   }
   .accordion-button [data-icon] {
+    position: absolute;
+    inset-inline-end: var(--bs-accordion-btn-padding-x);
+    top: 50%;
     width: 1rem;
     height: 1rem;
-    margin-inline-start: auto;
     flex-shrink: 0;
+    pointer-events: none;
+    transform: translateY(-50%);
     transition: transform 0.2s ease-in-out;
+    transform-origin: center;
   }
   .accordion-button:not(.collapsed) [data-icon] {
-    transform: rotate(-180deg);
+    transform: translateY(-50%) rotate(-180deg);
+  }
+  .accordion-flush .accordion-button {
+    text-align: start;
   }
   .accordion-button:hover {
     text-decoration: underline;
   }
+  .accordion-flush {
+    --bs-accordion-btn-padding-x: 0;
+    --bs-accordion-btn-padding-y: 0.625rem;
+    --bs-accordion-body-padding-x: 0;
+    --bs-accordion-body-padding-y: 0.625rem;
+  }
+  .accordion-flush .accordion-button {
+    font-weight: 500;
+  }
   .tabs-list {
     display: inline-flex;
     gap: 0.125rem;
@@ -5066,30 +5302,66 @@ label.btn {
   }
   .tab-content {
     display: grid;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    margin-top: 0.75rem;
   }
   .tab-content > .tab-pane {
     grid-area: 1 / 1;
     display: block;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    opacity: 0;
+    transform: translateY(0.25rem);
     visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
   }
   .tab-content > .active {
+    opacity: 1;
+    transform: none;
     visibility: visible;
+    pointer-events: auto;
+    transition-delay: 0s;
+  }
+  .collapsible {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
   }
   .collapsible-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 1rem;
+    padding-inline: 0.5rem;
+    gap: 0.5rem;
   }
   .collapsible-title {
     margin-bottom: 0;
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-size: 0.76562rem;
+    font-weight: 500;
+    color: var(--moo-foreground);
+  }
+  .collapsible .btn[data-bs-toggle='collapse'] {
+    color: var(--moo-muted-foreground);
+    line-height: 1;
+  }
+  .collapsible .btn[data-bs-toggle='collapse'] [data-icon] {
+    width: 0.875rem;
+    height: 0.875rem;
   }
   .collapsible-content {
-    padding-top: 0.5rem;
-    font-size: 0.875rem;
+    padding: 0.5rem 0.75rem;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    font-size: 0.76562rem;
     color: var(--moo-muted-foreground);
+    width: 100%;
   }
   .tooltip {
     --bs-tooltip-max-width: 20rem;
@@ -5153,15 +5425,31 @@ label.btn {
     font-size: 1rem;
     font-weight: 500;
   }
+  .modal-header {
+    gap: calc(var(--bs-modal-padding) * 0.75);
+  }
+  .modal--alert {
+    --bs-modal-width: 24rem;
+    --bs-modal-padding: 1rem;
+  }
+  .modal-header--alert {
+    align-items: flex-start;
+    padding: var(--bs-modal-padding);
+  }
+  .modal-header__content {
+    min-width: 0;
+  }
+  .modal-description {
+    margin-top: calc(var(--bs-modal-padding) * 0.375);
+    margin-bottom: 0;
+    color: var(--bs-secondary-color);
+  }
+  .modal--alert .modal-footer {
+    padding: var(--bs-modal-padding);
+  }
   .modal-footer {
     padding: 1rem;
   }
-  body:has(.modal.show) > .modal-backdrop {
-    --bs-backdrop-opacity: 1;
-    background-color: color-mix(in srgb, var(--bs-black) 10%, transparent);
-    -webkit-backdrop-filter: blur(4px);
-    backdrop-filter: blur(4px);
-  }
   .offcanvas.sheet {
     --bs-offcanvas-width: 24rem;
     --bs-offcanvas-border-color: var(--moo-border);
@@ -5175,20 +5463,6 @@ label.btn {
     font-size: 1rem;
     font-weight: 500;
   }
-  :has(> .offcanvas.sheet:is(.showing, .show, .hiding)) > .offcanvas-backdrop {
-    background-color: color-mix(in srgb, var(--bs-black) 10%, transparent);
-    transition: opacity 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
-  }
-  :has(> .offcanvas.sheet:is(.showing, .show)) > .offcanvas-backdrop {
-    opacity: 1;
-    -webkit-backdrop-filter: blur(4px);
-    backdrop-filter: blur(4px);
-  }
-  :has(> .offcanvas.sheet.hiding) > .offcanvas-backdrop {
-    opacity: 0;
-    -webkit-backdrop-filter: blur(0);
-    backdrop-filter: blur(0);
-  }
   .toast {
     --bs-toast-border-radius: var(--bs-border-radius-lg);
     --bs-toast-border-color: var(--moo-border);
@@ -5207,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;
@@ -5260,9 +5537,15 @@ label.btn {
   filter: var(--bs-btn-close-white-filter);
 }
 
-body:has(.moo-ui .modal.show) > .modal-backdrop {
-  --bs-backdrop-opacity: 1;
-  background-color: color-mix(in srgb, var(--bs-black) 10%, transparent);
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
+.modal-backdrop,
+.offcanvas-backdrop {
+  --bs-backdrop-opacity: var(--moo-overlay-backdrop-opacity, 1);
+  background-color: var(--moo-overlay-backdrop-bg, color-mix(in srgb, var(--bs-black) 10%, transparent));
+  -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, blur(8px));
+  backdrop-filter: var(--moo-overlay-backdrop-filter, blur(8px));
+}
+
+.modal-backdrop.show,
+.offcanvas-backdrop.show {
+  opacity: var(--moo-overlay-backdrop-opacity, 1);
 }