@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/scss/components/sidebar/_collapsed.scss

@@ -0,0 +1,112 @@
+
+@include media-breakpoint-up(lg) {
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-label,
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__text,
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__subtitle,
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__end {
+    display: none;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-sub,
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-action,
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-action,
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-badge {
+    display: none !important;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
+    z-index: $zindex-fixed + 1;
+  }
+
+  .sidebar-menu-flyout {
+    position: fixed;
+    z-index: $zindex-dropdown;
+    inset-block-start: var(--moo-sidebar-flyout-block-start);
+    left: var(--moo-sidebar-flyout-left);
+    right: auto;
+    display: flex;
+    flex-direction: column;
+    min-width: $spacer * 10;
+    max-width: $spacer * 14;
+    margin: 0;
+    padding: $spacer * 0.25;
+    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: $spacer * 2;
+    padding-inline: $spacer * 0.5;
+  }
+
+  .sidebar-menu-flyout .sidebar-menu-button__text {
+    display: grid;
+  }
+
+  .sidebar-menu-flyout .sidebar-menu-badge {
+    display: flex !important;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:hover {
+    background: transparent;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace[aria-expanded="true"] {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:focus-visible {
+    background: transparent;
+    outline: 0;
+    box-shadow: none;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account {
+    padding: 0;
+    overflow: visible;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:hover {
+    background: transparent;
+  }
+
+  [data-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-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-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--lg {
+    height: $spacer * 2;
+    padding: 0;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton {
+    justify-content: center;
+  }
+
+  [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton__line {
+    display: none;
+  }
+}

package/scss/components/sidebar/_identity.scss

@@ -0,0 +1,71 @@
+.sidebar-brand-mark {
+  display: inline-grid;
+  place-items: center;
+  width: $spacer * 2;
+  height: $spacer * 2;
+  flex: 0 0 auto;
+  border-radius: var(--bs-border-radius);
+}
+
+.sidebar-brand-mark [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+}
+
+.sidebar-brand-mark--primary {
+  color: var(--moo-sidebar);
+  background: var(--moo-sidebar-foreground);
+}
+
+.sidebar-brand-mark--muted {
+  color: var(--moo-sidebar-foreground);
+  border: var(--bs-border-width) solid var(--moo-sidebar-border);
+  background: var(--moo-sidebar-accent);
+}
+
+.sidebar-footer .sidebar-account-menu {
+  width: auto;
+  min-width: var(--moo-dropdown-sidebar-min-width);
+  padding: $spacer * 0.25;
+  border-radius: var(--bs-border-radius-lg);
+  box-shadow: var(--bs-box-shadow);
+}
+
+.sidebar-account-menu__header {
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.5;
+  min-width: 0;
+  padding: $spacer * 0.375 $spacer * 0.25;
+}
+
+.sidebar-account-menu__item {
+  min-height: $spacer * 2;
+  padding: $spacer * 0.375 $spacer * 0.5;
+  line-height: $line-height-sm;
+  border-radius: var(--bs-border-radius);
+}
+
+.sidebar-account-menu__divider {
+  margin: $spacer * 0.25 0;
+}
+
+.sidebar-account-menu__identity {
+  display: grid;
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.sidebar-account-menu__name {
+  overflow: hidden;
+  font-weight: $font-weight-medium;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-account-menu__email {
+  overflow: hidden;
+  color: var(--moo-muted-foreground);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/scss/components/sidebar/_menus.scss

@@ -0,0 +1,219 @@
+.sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sidebar-menu-item {
+  position: relative;
+}
+
+.sidebar-menu-item:has(> .sidebar-menu-action) > .sidebar-menu-button {
+  padding-inline-end: $spacer * 2.5;
+}
+
+.sidebar-menu-button {
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.5;
+  width: 100%;
+  min-width: 0;
+  height: $spacer * 2;
+  padding-inline: $spacer * 0.5;
+  overflow: hidden;
+  color: var(--moo-sidebar-foreground);
+  font-size: $font-size-base;
+  text-align: start;
+  text-decoration: none;
+  border: 0;
+  border-radius: var(--bs-border-radius);
+  background: transparent;
+}
+
+.sidebar-menu-button:hover {
+  color: var(--moo-sidebar-foreground);
+  background: var(--moo-sidebar-accent);
+}
+
+.sidebar-menu-button--account[aria-expanded="true"] {
+  color: var(--moo-sidebar-foreground);
+  background: var(--moo-sidebar-accent);
+}
+
+.sidebar-menu-button--account[aria-expanded="true"] .sidebar-menu-button__end [data-icon] {
+  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;
+}
+
+.sidebar-menu-item--account > .sidebar-menu-button--account {
+  height: $spacer * 3;
+  min-height: $spacer * 3;
+  padding: $spacer * 0.5;
+}
+
+.sidebar-menu-button--static:hover {
+  background: transparent;
+}
+
+.sidebar-menu-button[aria-current="page"] {
+  font-weight: $font-weight-medium;
+  background: var(--moo-sidebar-accent);
+}
+
+.sidebar-content:has(.sidebar-menu:is(:hover, :focus-within)) .sidebar-menu-button[aria-current="page"]:not(:hover):not(:focus-visible),
+.sidebar-content:has(.sidebar-menu-button:not([aria-current="page"]):is(:hover, :focus-visible)) .sidebar-menu-button[aria-current="page"]:not(:hover):not(:focus-visible) {
+  background: transparent;
+}
+
+.sidebar-menu-button--lg {
+  height: $spacer * 3;
+  padding: $spacer * 0.5;
+}
+
+.sidebar-menu-button__lead {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidebar-menu-button__lead [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+}
+
+.sidebar-menu-button[aria-current="page"] .sidebar-menu-button__lead [data-icon] {
+  color: var(--moo-sidebar-foreground);
+}
+
+.sidebar-menu-button__text {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.sidebar-menu-button__title {
+  overflow: hidden;
+  font-size: $font-size-base;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-menu-button--lg .sidebar-menu-button__title {
+  font-weight: $font-weight-medium;
+}
+
+.sidebar-menu-button__subtitle {
+  overflow: hidden;
+  color: var(--moo-muted-foreground);
+  font-size: $font-size-base * 0.857;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-menu-button__end {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  margin-inline-start: auto;
+}
+
+.sidebar-menu-button__end [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+  color: var(--moo-muted-foreground);
+}
+
+.sidebar-menu-button--disclosure[aria-expanded="true"] .sidebar-menu-button__end [data-icon] {
+  transform: rotate(90deg);
+}
+
+.sidebar-menu-button__end [data-icon] {
+  transition: transform 0.15s ease;
+}
+
+.sidebar-menu-sub {
+  gap: 0;
+  margin: 0;
+  margin-inline-start: $spacer * 0.5 + $font-size-base * 0.5;
+  padding-inline-start: $spacer * 0.5;
+  border-inline-start: var(--bs-border-width) solid var(--moo-border);
+  list-style: none;
+}
+
+.sidebar-menu-sub-button {
+  height: $spacer * 1.75;
+  font-size: $font-size-base * 0.929;
+}
+
+.sidebar-menu-sub-item {
+  position: relative;
+}
+
+.sidebar-menu-action {
+  position: absolute;
+  inset-inline-end: $spacer * 0.25;
+  inset-block: 0;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+}
+
+.sidebar-menu-action:has(> [data-popper-placement]) {
+  z-index: 2;
+}
+
+.sidebar-menu-action > button {
+  color: var(--moo-muted-foreground);
+}
+
+.sidebar-menu-action > button:hover {
+  color: var(--moo-sidebar-foreground);
+}
+
+.sidebar-group-action {
+  position: absolute;
+  z-index: 1;
+  top: $spacer * 0.75;
+  inset-inline-end: $spacer * 0.5;
+}
+
+.sidebar-menu-badge {
+  position: absolute;
+  inset-inline-end: $spacer * 0.25;
+  inset-block: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.sidebar-menu-item:has(> .sidebar-menu-badge) > .sidebar-menu-button {
+  padding-inline-end: $spacer * 2.5;
+}
+
+.sidebar-menu-sub-item:has(> .sidebar-menu-badge) > .sidebar-menu-button {
+  padding-inline-end: $spacer * 2.5;
+}
+
+.sidebar-menu-item:has(> .sidebar-menu-action) > .sidebar-menu-badge {
+  inset-inline-end: $spacer * 2;
+}
+
+.sidebar-menu-item:has(> .sidebar-menu-action):has(> .sidebar-menu-badge) > .sidebar-menu-button {
+  padding-inline-end: $spacer * 4.5;
+}

package/scss/foundations/_backdrop.scss

@@ -0,0 +1,102 @@
+@mixin moo-overlay-backdrop-appearance {
+  --#{$prefix}backdrop-opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+  opacity: 1;
+  color: transparent;
+  background-color: transparent;
+
+  &.fade,
+  &.fade:not(.show) {
+    opacity: 1;
+  }
+
+  &.show {
+    transition: none;
+  }
+
+  &.fade:not(.show) {
+    color: var(--bs-body-color, currentcolor);
+    transition: color var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out;
+  }
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    opacity: 0;
+    background-color: var(--moo-overlay-backdrop-bg, #{$moo-overlay-backdrop-bg});
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    animation: moo-overlay-backdrop-exit var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out both;
+  }
+}
+
+@mixin moo-overlay-backdrop-shown {
+  &::before {
+    animation: moo-overlay-backdrop-enter var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out both;
+  }
+}
+
+@mixin moo-overlay-backdrop-reduced-motion {
+  transition: none;
+
+  &::before {
+    animation: none;
+  }
+}
+
+@keyframes moo-overlay-backdrop-enter {
+  from {
+    opacity: 0;
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+  }
+
+  to {
+    opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+    -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+    backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+  }
+}
+
+@keyframes moo-overlay-backdrop-exit {
+  from {
+    opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+    -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+    backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+  }
+
+  to {
+    opacity: 0;
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+  }
+}
+
+.modal-backdrop,
+.offcanvas-backdrop {
+  @include moo-overlay-backdrop-appearance;
+}
+
+.modal-backdrop.show,
+.offcanvas-backdrop.show {
+  @include moo-overlay-backdrop-shown;
+}
+
+@mixin moo-overlay-backdrop-scoped {
+  .modal-backdrop,
+  .offcanvas-backdrop {
+    @include moo-overlay-backdrop-appearance;
+  }
+
+  .modal-backdrop.show,
+  .offcanvas-backdrop.show {
+    @include moo-overlay-backdrop-shown;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-backdrop,
+  .offcanvas-backdrop {
+    @include moo-overlay-backdrop-reduced-motion;
+  }
+}

package/scss/foundations/_focus.scss

@@ -0,0 +1,83 @@
+.form-label,
+.form-check-label {
+  user-select: none;
+}
+
+:is(.btn, a, button, summary, [tabindex]):not(input, textarea, select):focus-visible,
+:is(.form-control, .form-select, .form-check-input):focus-visible {
+  border-color: var(--moo-ring);
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.btn:focus-visible:hover,
+.btn.show:focus-visible {
+  border-color: var(--bs-btn-hover-border-color);
+  box-shadow: none;
+}
+
+.form-control:focus:not(:focus-visible),
+.form-select:focus:not(:focus-visible) {
+  border-color: var(--moo-border);
+  box-shadow: none;
+}
+
+.page-link:focus:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+
+.page-item:not(.active) > .page-link:focus:not(:focus-visible) {
+  color: var(--bs-pagination-color);
+  background-color: var(--bs-pagination-bg);
+  border-color: var(--bs-pagination-border-color);
+}
+
+.form-control.is-invalid,
+.form-control.is-invalid:focus,
+.was-validated .form-control:invalid,
+.was-validated .form-control:invalid:focus,
+.form-select.is-invalid,
+.form-select.is-invalid:focus,
+.was-validated .form-select:invalid,
+.was-validated .form-select:invalid:focus {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+.btn-check:focus:not(:focus-visible) + .btn {
+  outline: 0;
+  box-shadow: none;
+}
+
+.btn-check:focus-visible + .btn {
+  border-color: var(--moo-ring);
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.input-group > .dropdown-toggle[aria-expanded="true"]:focus-visible {
+  box-shadow: none;
+}
+
+.combobox-chips:focus-within {
+  border-color: var(--moo-ring);
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.input-group:has(> .form-control:focus):not(:has(> .form-control[type="file"])) {
+  border-color: var(--moo-ring);
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select).is-invalid),
+.was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select):invalid) {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+.input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select).is-invalid,
+.was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select):invalid {
+  box-shadow: none;
+}

package/scss/foundations/_globals.scss

@@ -0,0 +1,5 @@
+@import "../utilities/scroll_fade_primitives";
+
+@keyframes moo-spinner-rotate {
+  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
+}

package/scss/foundations/_scope.scss

@@ -0,0 +1,26 @@
+@scope (.moo-ui) to (:where(.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"])) {
+  @import "../components";
+  /* Focus and keyboard navigation */
+  @import "../foundations/focus";
+  /* Scroll utilities */
+  @import "../utilities/scroll_fade";
+  /* Application layout */
+  @import "../layouts/app";
+  @import "../layouts/page_grid";
+  /* Form themes */
+  @import "../themes/forms";
+  /* Overlay backdrops */
+  @include moo-overlay-backdrop-scoped;
+  /* Typography */
+  :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
+    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
+    font-family: var(--moo-heading-font-family, var(--bs-body-font-family));
+  }
+  :is(small, .small) {
+    font-size: var(--moo-small-font-size);
+  }
+  p {
+    margin-top: var(--moo-paragraph-margin-top);
+    margin-bottom: var(--moo-paragraph-margin-bottom);
+  }
+}

package/scss/layouts/_app.scss

@@ -0,0 +1,75 @@
+
+@import "app/sidebar/base";
+@import "app/sidebar/default";
+@import "app/sidebar/floating";
+@import "app/sidebar/inset";
+
+.wrapper[data-layout="app"] {
+  display: flex;
+  width: 100%;
+  height: 100svh;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.wrapper[data-layout="app"][data-shell-mode="contained"] {
+  min-height: 0;
+  height: 34rem;
+  overflow: hidden;
+  border: var(--bs-border-width) solid var(--moo-border);
+  border-radius: var(--bs-border-radius-xl);
+}
+
+.wrapper[data-layout="app"] > [data-slot="page"] {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.wrapper[data-layout="app"] > [data-slot="page"] > header,
+.wrapper[data-layout="app"] > [data-slot="page"] > main,
+.wrapper[data-layout="app"] > [data-slot="page"] > footer {
+  flex: 0 0 auto;
+}
+
+.wrapper[data-layout="app"] > [data-slot="page"] > main {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.wrapper[data-layout="app"] > [data-slot="page"] > main > :is(
+  .container,
+  .container-sm,
+  .container-md,
+  .container-lg,
+  .container-xl,
+  .container-xxl,
+  .container-fluid
+) {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+@include media-breakpoint-down(lg) {
+  .wrapper[data-layout="app"][data-shell-mode="contained"] {
+    flex-direction: column;
+    height: auto;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] {
+    overflow: visible;
+  }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] > main {
+    overflow: visible;
+  }
+}