@wpmoo/ui 0.1.0 → 0.2.0

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

@@ -430,6 +430,7 @@ caption {
 }
 
 th {
+  font-weight: 500;
   text-align: inherit;
   text-align: -webkit-match-parent;
 }
@@ -4932,7 +4933,7 @@ textarea.form-control-lg {
   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 {
@@ -12313,6 +12314,9 @@ 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-sidebar: #fafafa;
   --moo-sidebar-foreground: var(--moo-foreground);
   --moo-sidebar-accent: var(--moo-muted-surface);
@@ -12332,6 +12336,9 @@ 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-sidebar: #1c1c1f;
   --moo-sidebar-foreground: var(--moo-foreground);
   --moo-sidebar-accent: var(--moo-muted-surface);
@@ -12348,6 +12355,12 @@ textarea.form-control-lg {
   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;
 }
@@ -12846,6 +12859,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;
 }
 
@@ -12895,6 +12910,12 @@ label.btn {
   border-bottom: 0;
 }
 
+.card-header,
+.card-body,
+.card-footer {
+  padding-block: 0;
+}
+
 .card-footer {
   display: flex;
   align-items: center;
@@ -12966,27 +12987,126 @@ label.btn {
   min-width: max(100%, var(--moo-dropdown-sidebar-min-width));
 }
 
+@media (min-width: 992px) {
+  [data-slot="sidebar-header"] [data-moo-sidebar-dropdown-positioned] > .dropdown-menu {
+    position: fixed !important;
+    z-index: 1000;
+    inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
+    inset-inline-start: var(--moo-sidebar-dropdown-inline-start) !important;
+    width: var(--moo-dropdown-sidebar-min-width);
+    min-width: var(--moo-dropdown-sidebar-min-width);
+    margin: 0;
+    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 {
@@ -13001,6 +13121,38 @@ label.btn {
   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);
@@ -13034,7 +13186,13 @@ label.btn {
 }
 
 .skeleton {
+  color: var(--moo-border);
   border-radius: var(--bs-border-radius);
+  overflow: hidden;
+}
+
+.skeleton > .placeholder {
+  display: block;
 }
 
 .sidebar-wrapper {
@@ -13239,6 +13397,11 @@ label.btn {
   color: var(--moo-sidebar-foreground);
 }
 
+.sidebar-menu-button.sidebar-menu-button--account,
+.sidebar-menu-button.sidebar-menu-button--workspace {
+  cursor: default;
+}
+
 .sidebar-menu-item--account {
   padding-inline: 0;
 }
@@ -13340,6 +13503,10 @@ label.btn {
   font-size: 0.81288rem;
 }
 
+.sidebar-menu-sub-item {
+  position: relative;
+}
+
 .sidebar-menu-action {
   position: absolute;
   inset-inline-end: 0.25rem;
@@ -13382,6 +13549,10 @@ label.btn {
   padding-inline-end: 2.5rem;
 }
 
+.sidebar-menu-sub-item:has(> .sidebar-menu-badge) > .sidebar-menu-button {
+  padding-inline-end: 2.5rem;
+}
+
 .sidebar-menu-item:has(> .sidebar-menu-action) > .sidebar-menu-badge {
   inset-inline-end: 2rem;
 }
@@ -13420,8 +13591,8 @@ label.btn {
 }
 
 .sidebar-footer .sidebar-account-menu {
-  width: 100%;
-  min-width: 100%;
+  width: auto;
+  min-width: var(--moo-dropdown-sidebar-min-width);
   padding: 0.25rem;
   border-radius: var(--bs-border-radius-lg);
   box-shadow: var(--bs-box-shadow);
@@ -13553,6 +13724,10 @@ label.btn {
     flex-basis: var(--moo-sidebar-width-icon);
     width: var(--moo-sidebar-width-icon);
   }
+  .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar-inset {
+    position: relative;
+    z-index: 0;
+  }
   [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-label,
 [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__text,
 [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__subtitle,
@@ -13565,10 +13740,74 @@ label.btn {
 [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-badge {
     display: none !important;
   }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
+    z-index: 1000;
+  }
+  .sidebar-menu-flyout {
+    position: fixed;
+    z-index: 1000;
+    inset-block-start: var(--moo-sidebar-flyout-block-start);
+    inset-inline-start: var(--moo-sidebar-flyout-inline-start);
+    display: flex;
+    flex-direction: column;
+    min-width: 10rem;
+    max-width: 14rem;
+    margin: 0;
+    padding: 0.25rem;
+    list-style: none;
+    border: var(--bs-border-width) solid var(--moo-border);
+    border-radius: var(--bs-border-radius-lg);
+    background: var(--moo-surface);
+    box-shadow: var(--bs-box-shadow);
+  }
+  .sidebar-menu-flyout .sidebar-menu-sub-item {
+    position: relative;
+  }
+  .sidebar-menu-flyout .sidebar-menu-button {
+    justify-content: flex-start;
+    height: 2rem;
+    padding-inline: 0.5rem;
+  }
+  .sidebar-menu-flyout .sidebar-menu-button__text {
+    display: grid;
+  }
+  .sidebar-menu-flyout .sidebar-menu-badge {
+    display: flex !important;
+  }
   [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button {
     justify-content: center;
     padding-inline: 0;
   }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:hover {
+    background: transparent;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace[aria-expanded="true"] {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:focus-visible {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account {
+    padding: 0;
+    overflow: visible;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:hover {
+    background: transparent;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account[aria-expanded="true"] {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
+  [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:focus-visible {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
   [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--lg {
     height: 2rem;
     padding: 0;
@@ -13650,6 +13889,21 @@ label.btn {
   --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;
@@ -13661,6 +13915,35 @@ label.btn {
   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;
@@ -13704,21 +13987,41 @@ label.btn {
 }
 
 .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;
@@ -13754,33 +14057,266 @@ 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;
+  --bs-tooltip-padding-x: 0.75rem;
+  --bs-tooltip-padding-y: 0.375rem;
+  --bs-tooltip-font-size: 0.75rem;
+  --bs-tooltip-opacity: 1;
+  line-height: 1.333;
+}
+
+.tooltip-trigger {
+  color: var(--moo-foreground);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--moo-muted-foreground);
+  text-underline-offset: 0.2em;
+}
+
+.tooltip-kbd {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: var(--bs-border-radius-sm);
+}
+
+.popover {
+  --bs-popover-border-radius: var(--bs-border-radius-lg);
+  --bs-popover-border-color: var(--moo-border);
+  --bs-popover-header-bg: var(--bs-popover-bg);
+  --bs-popover-header-color: var(--bs-popover-body-color);
+  --bs-popover-header-padding-x: 0.625rem;
+  --bs-popover-header-padding-y: 0.625rem;
+  --bs-popover-body-padding-x: 0.625rem;
+  --bs-popover-body-padding-y: 0.625rem;
+  --bs-popover-font-size: 0.875rem;
+  line-height: 1.43;
+  --bs-popover-max-width: 20rem;
+  width: 20rem;
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.popover-header {
+  padding-bottom: 0;
+  border-bottom: 0;
+  font-weight: 500;
+}
+
+.popover .popover-arrow {
+  display: none;
+}
+
+.modal {
+  --bs-modal-border-radius: var(--bs-border-radius-xl);
+  --bs-modal-border-color: var(--moo-border);
+  --bs-modal-header-border-width: 0;
+  --bs-modal-footer-border-color: var(--moo-border);
+  --bs-modal-title-line-height: 1;
+}
+
+.modal[tabindex]:focus-visible {
+  outline: none;
+}
+
+.modal-content {
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.modal-title {
+  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;
+}
+
+.offcanvas.sheet {
+  --bs-offcanvas-width: 24rem;
+  --bs-offcanvas-border-color: var(--moo-border);
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.offcanvas.sheet[tabindex]:focus-visible {
+  outline: none;
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.offcanvas.sheet .offcanvas-title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.toast {
+  --bs-toast-border-radius: var(--bs-border-radius-lg);
+  --bs-toast-border-color: var(--moo-border);
+  --bs-toast-box-shadow: var(--bs-box-shadow-lg);
+  --bs-toast-padding-x: 1rem;
+}
+
+.toast-header strong {
+  font-weight: 500;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.field > .form-label {
+  margin-bottom: 0;
+  font-weight: 500;
+}
+
+.field-description,
+.field-error {
+  margin-top: 0;
+  font-size: 0.875rem;
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.field-group > hr {
+  margin-block: 0;
+}
+
+.field-legend {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.375rem;
+}
+
+.field-fieldset > * + * {
+  margin-top: 1rem;
+}
+
+.field-fieldset > .field-legend + .field-description {
+  margin-top: 0;
+}
+
+.field-fieldset + hr {
+  opacity: 0.1;
+}
+
+.form-label,
+.form-check-label {
+  user-select: none;
+}
+
+.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);
 }