@wpmoo/ui 1.0.0-rc.2 → 1.0.0-rc.4

package/scss/components/sidebar/_collapsed.scss

@@ -0,0 +1,187 @@
+// Rail: a thin toggle strip straddling the sidebar's inline-end edge.
+.sidebar-rail {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 20;
+  width: $spacer;
+  padding: 0;
+  transform: translateX(50%);
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+[dir="rtl"] .sidebar-rail {
+  transform: translateX(-50%);
+}
+
+.sidebar-rail::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  width: var(--bs-border-width);
+  background: transparent;
+  transition: background 0.15s ease;
+}
+
+.sidebar-rail:hover::after {
+  background: var(--moo-sidebar-border);
+}
+
+// Collapsed-to-icon rail (desktop). Text, labels, and the rail's disclosure
+// chevrons hide; every remaining control centers on its icon.
+@include media-breakpoint-up(lg) {
+  .sidebar {
+    position: relative;
+  }
+
+  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
+    flex-basis: var(--moo-sidebar-width-icon);
+    width: var(--moo-sidebar-width-icon);
+  }
+
+  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar-inset {
+    position: relative;
+    z-index: 0;
+  }
+
+  [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-dropdown;
+  }
+
+  .sidebar-menu-flyout {
+    position: fixed;
+    z-index: $zindex-dropdown;
+    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: $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;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .sidebar-rail {
+    display: none;
+  }
+
+  // Contained demos stay inside their preview instead of becoming viewport drawers.
+  .sidebar-wrapper--contained {
+    flex-direction: column;
+    height: auto;
+    min-height: 34rem;
+    overflow: visible;
+  }
+
+  .sidebar-wrapper--contained .sidebar {
+    position: relative;
+    inset: auto;
+    flex: 0 0 auto;
+    width: 100%;
+    height: auto;
+    visibility: visible;
+    transform: none;
+  }
+
+  .sidebar-wrapper--contained .sidebar-inner {
+    height: auto;
+    max-height: none;
+  }
+}

package/scss/components/sidebar/_identity.scss

@@ -0,0 +1,72 @@
+// Leading brand/avatar tiles for the team switcher and user rows.
+.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/_inset.scss

@@ -0,0 +1,59 @@
+// Inset (content area) ---------------------------------------------------
+.sidebar-inset {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--bs-body-bg);
+}
+
+.sidebar-inset__header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.5;
+  height: $spacer * 4;
+  padding-inline: $spacer;
+  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+  background: var(--bs-body-bg);
+}
+
+.sidebar-inset__content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+// Inset variant: the sidebar itself stays flush; the main content becomes a
+// rounded, shadowed card with a gap around it, and the page background
+// switches to the sidebar's own surface color so the card reads as inset.
+// Collapsing to the icon rail restores the inline-start gap. Scoped to
+// desktop, matching how the mobile offcanvas drawer ignores variant.
+@include media-breakpoint-up(lg) {
+  .sidebar-wrapper:has(.sidebar[data-variant="inset"]) {
+    background: var(--moo-sidebar);
+  }
+
+  .sidebar-wrapper:has(.sidebar[data-variant="inset"]) .sidebar-inset {
+    margin: $spacer * 0.5;
+    margin-inline-start: 0;
+    border-radius: var(--bs-border-radius-xl);
+    box-shadow: var(--bs-box-shadow-sm);
+  }
+
+  .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"]) .sidebar-inset {
+    margin-inline-start: $spacer * 0.5;
+  }
+
+  // A right-side sidebar sits on the opposite edge, so the content card must
+  // flush against the end side instead of the start side.
+  .sidebar-wrapper:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
+    margin-inline-start: $spacer * 0.5;
+    margin-inline-end: 0;
+  }
+
+  .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
+    margin-inline-end: $spacer * 0.5;
+  }
+}

package/scss/components/sidebar/_layout.scss

@@ -0,0 +1,176 @@
+// Bootstrap has no native sidebar, so this owned sidebar selector namespace
+// styles the app-shell primitive (same precedent as the avatar component).
+// Geometry rides the $moo-sidebar-* Sass knobs; every color consumes a
+// runtime --moo-* token.
+
+.sidebar-wrapper {
+  --moo-sidebar-width: #{$moo-sidebar-width};
+  --moo-sidebar-width-icon: #{$moo-sidebar-width-icon};
+  display: flex;
+  width: 100%;
+  min-height: 100svh;
+}
+
+.sidebar-wrapper--contained {
+  min-height: 0;
+  height: 34rem;
+  overflow: hidden;
+  border: var(--bs-border-width) solid var(--moo-border);
+  border-radius: var(--bs-border-radius-xl);
+}
+
+// Sidebar column ---------------------------------------------------------
+.sidebar {
+  --bs-offcanvas-width: var(--moo-sidebar-width);
+  flex: 0 0 var(--moo-sidebar-width);
+  width: var(--moo-sidebar-width);
+  color: var(--moo-sidebar-foreground);
+}
+
+.sidebar[data-side="left"] .sidebar-inner {
+  border-inline-end: var(--bs-border-width) solid var(--moo-sidebar-border);
+}
+
+.sidebar[data-side="right"] {
+  order: 1;
+}
+
+.sidebar[data-side="right"] .sidebar-inner {
+  border-inline-start: var(--bs-border-width) solid var(--moo-sidebar-border);
+}
+
+// Floating variant: the surface detaches from the viewport edge with a
+// margin gap on every side and gains a full rounded border and shadow,
+// replacing the flush single-edge border the default variant uses. Scoped
+// to desktop, matching how the mobile offcanvas drawer ignores variant.
+@include media-breakpoint-up(lg) {
+  .sidebar {
+    transition: flex-basis 0.2s ease, width 0.2s ease;
+  }
+
+  .sidebar[data-variant="floating"] .sidebar-inner {
+    width: auto;
+    height: calc(100svh - #{$spacer});
+    max-height: calc(100svh - #{$spacer});
+    margin: $spacer * 0.5;
+    border: var(--bs-border-width) solid var(--moo-sidebar-border);
+    border-radius: var(--bs-border-radius-lg);
+    box-shadow: var(--bs-box-shadow-sm);
+  }
+
+  .sidebar-wrapper--contained .sidebar[data-variant="floating"] .sidebar-inner {
+    height: calc(100% - #{$spacer});
+    max-height: calc(100% - #{$spacer});
+  }
+
+  // At icon-rail width the detached card reads as floating mostly through
+  // elevation and breathing room, since the margin/border alone are hard to
+  // read at the base icon width; step up to Bootstrap's base shadow scale
+  // (still a shared token, no new value) and widen the column by the same
+  // margin the card's sides consume, so the icon rail itself keeps its full
+  // width instead of shrinking.
+  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] {
+    flex-basis: calc(var(--moo-sidebar-width-icon) + #{$spacer});
+    width: calc(var(--moo-sidebar-width-icon) + #{$spacer});
+  }
+
+  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
+    box-shadow: var(--bs-box-shadow);
+  }
+}
+
+.sidebar-inner {
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100svh;
+  max-height: 100svh;
+  background: var(--moo-sidebar);
+}
+
+.sidebar-wrapper--contained .sidebar-inner {
+  position: relative;
+  height: 100%;
+  max-height: 100%;
+}
+
+.sidebar-header,
+.sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
+  padding: $spacer * 0.5;
+}
+
+.sidebar-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: $spacer * 0.5;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sidebar-input {
+  width: 100%;
+  padding: $spacer * 0.25;
+}
+
+.sidebar-separator {
+  display: flex;
+}
+
+.sidebar-menu-skeleton {
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.25;
+  min-height: $spacer * 2;
+  padding-inline: $spacer * 0.5;
+}
+
+.sidebar-menu-skeleton__icon {
+  width: $spacer;
+  height: $spacer;
+}
+
+.sidebar-menu-skeleton__line {
+  flex: 1 1 auto;
+}
+
+.sidebar-group {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: $spacer * 0.5;
+}
+
+.sidebar-group-content {
+  display: block;
+}
+
+.sidebar-group-content--inline {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: $spacer * 0.25;
+}
+
+.sidebar-group-label {
+  display: flex;
+  align-items: center;
+  height: $spacer * 2;
+  padding-inline: $spacer * 0.5;
+  color: var(--moo-muted-foreground);
+  font-size: $font-size-base * 0.857;
+  font-weight: $font-weight-medium;
+}
+
+// Reserve room so a long label doesn't run under the absolutely positioned
+// group action button (see .sidebar-group-action below). A descendant match
+// covers both a group action placed directly in .sidebar-group and one
+// nested inside .sidebar-group-content alongside the label.
+.sidebar-group:has(.sidebar-group-action) .sidebar-group-label {
+  padding-inline-end: $spacer * 2.5;
+}