@usefragments/ui 1.0.0

package/src/components/Sidebar/Sidebar.module.scss

@@ -0,0 +1,650 @@
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+
+// Local component tokens
+$fui-sidebar-indicator-width: 2px !default;
+$fui-sidebar-indicator-height: 1.143rem !default; // 16px
+$fui-sidebar-rail-width: 1.143rem !default; // 16px
+$fui-sidebar-rail-indicator-width: 4px !default;
+$fui-sidebar-rail-indicator-height: 2.857rem !default; // 40px
+$fui-sidebar-rail-indicator-height-hover: 4rem !default; // 56px
+
+.root {
+  --fui-sidebar-row-height: var(--fui-sidebar-item-height, #{$fui-sidebar-item-height});
+  --fui-sidebar-row-radius: var(--fui-radius-md, #{$fui-radius-md});
+  // 8px: de-facto sidebar gutter, 1px above the 7px space-1 grid step.
+  --fui-sidebar-row-gap: 0.571rem;
+  --fui-sidebar-row-padding-x: 0.571rem;
+  --fui-sidebar-icon-size: var(--fui-icon-md, #{$fui-icon-md});
+  --fui-sidebar-muted: var(
+    --fui-sidebar-item-color,
+    var(--fui-text-secondary, #{$fui-text-secondary})
+  );
+  --fui-sidebar-faint: var(
+    --fui-sidebar-item-icon-color,
+    var(--fui-text-tertiary, #{$fui-text-tertiary})
+  );
+  --fui-sidebar-hover-bg: var(--fui-sidebar-item-hover-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+  --fui-sidebar-active-bg: var(
+    --fui-sidebar-item-active-bg,
+    var(--fui-bg-active, #{$fui-bg-active})
+  );
+  --fui-sidebar-active-border: var(--fui-sidebar-item-active-border, transparent);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar-width);
+  height: 100%;
+  max-height: 100vh;
+  background: var(--fui-sidebar-bg, var(--fui-bg-primary, #{$fui-bg-primary}));
+  border-inline-end: 1px solid
+    var(--fui-sidebar-border, var(--fui-border-default, #{$fui-border-default}));
+  transition: width var(--fui-transition-normal, $fui-transition-normal);
+  overflow: hidden;
+  flex-shrink: 0;
+
+  // Prevent flash on mobile before JS hydrates
+  @include below-md {
+    &:not(.mobile) {
+      position: fixed;
+      transform: translateX(-100%);
+    }
+  }
+}
+
+.positionRight {
+  border-inline-start: 1px solid
+    var(--fui-sidebar-border, var(--fui-border-default, #{$fui-border-default}));
+  border-inline-end: 0;
+}
+
+.collapsed {
+  width: var(--sidebar-effective-collapsed-width, var(--sidebar-collapsed-width));
+
+  .header,
+  .nav,
+  .footer {
+    padding: var(--fui-space-1, $fui-space-1);
+  }
+
+  .header,
+  .footer {
+    justify-content: center;
+  }
+
+  .sectionLabel {
+    @include visually-hidden;
+  }
+
+  .itemLabel,
+  .itemBadge,
+  .itemChevron {
+    display: none;
+  }
+
+  .item {
+    justify-content: center;
+    padding: 0;
+    min-height: var(--fui-sidebar-row-height);
+  }
+
+  .itemIcon {
+    margin: 0;
+  }
+  .collapseToggle {
+    margin: 0 auto;
+  }
+}
+
+.collapsedNoIcons,
+.offcanvasCollapsed {
+  .header,
+  .nav,
+  .footer {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .collapseToggleFloating {
+    visibility: visible;
+    pointer-events: auto;
+  }
+}
+
+.collapsedNoIcons {
+  overflow: visible;
+}
+
+.offcanvasCollapsed {
+  width: 0;
+  overflow: visible;
+
+  .rail {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+.mobile {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 51;
+  transform: translateX(-100%);
+  transition: transform var(--fui-transition-normal, $fui-transition-normal);
+  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+
+  &.positionRight {
+    left: auto;
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  &[data-state="open"] {
+    transform: translateX(0);
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.429rem;
+  padding: 0.857rem 0.857rem 0.714rem;
+  flex-shrink: 0;
+  min-height: 3rem;
+}
+
+.nav {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0.286rem 0.571rem 0.857rem;
+}
+
+.navScrollArea {
+  flex: 1;
+  min-height: 0;
+}
+
+.section:not(:first-child) {
+  margin-top: 1.286rem;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.286rem;
+  min-height: 1.714rem;
+  padding: 0 0.571rem 0.286rem;
+}
+
+.sectionTrigger {
+  flex: 1;
+}
+
+// Override section-label-text inheritance — sidebar groups read as quiet
+// title-case headings, not shouty all-caps labels.
+.sectionLabel {
+  @include section-label-text;
+  flex: 1;
+  min-width: 0;
+  font-size: 0.857rem;
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  text-transform: none;
+  letter-spacing: 0;
+  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+  color: var(--fui-sidebar-faint);
+}
+
+.sectionActionWrapper {
+  flex-shrink: 0;
+}
+
+.sectionAction {
+  @include button-reset;
+  @include interactive-base;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.714rem;
+  height: 1.714rem;
+  border-radius: var(--fui-sidebar-row-radius);
+  color: var(--fui-sidebar-faint);
+
+  &:hover {
+    background-color: var(--fui-sidebar-hover-bg);
+    color: var(--fui-text-secondary, $fui-text-secondary);
+  }
+
+  svg {
+    width: var(--fui-sidebar-icon-size);
+    height: var(--fui-sidebar-icon-size);
+  }
+}
+
+.sectionList,
+.submenu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.143rem;
+}
+
+.sectionCollapsible .sectionTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.286rem;
+  width: 100%;
+  min-height: 1.714rem;
+  padding: 0;
+  border-radius: var(--fui-sidebar-row-radius);
+  background: transparent;
+
+  &:hover {
+    background-color: transparent;
+
+    .sectionLabel {
+      color: var(--fui-text-secondary, $fui-text-secondary);
+    }
+
+    svg {
+      color: var(--fui-text-secondary, $fui-text-secondary);
+    }
+  }
+
+  // Trailing caret reads as a quiet disclosure twistie.
+  svg {
+    width: 10px;
+    height: 10px;
+    color: var(--fui-sidebar-faint);
+  }
+}
+
+.itemWrapper,
+.subItemWrapper,
+.submenuWrapper {
+  list-style: none;
+}
+
+.itemWrapper {
+  width: 100%;
+}
+
+.item {
+  @include button-reset;
+  @include interactive-base;
+  @include text-base;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--fui-sidebar-row-gap);
+  padding: 0 var(--fui-sidebar-row-padding-x);
+  border: 1px solid transparent;
+  border-radius: var(--fui-sidebar-row-radius);
+  color: var(--fui-sidebar-muted);
+  text-decoration: none;
+  min-height: var(--fui-sidebar-row-height);
+  font-weight: var(--fui-font-weight-normal, $fui-font-weight-normal);
+  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+  outline-offset: -1px;
+  transition:
+    background-color var(--fui-transition-fast, $fui-transition-fast),
+    border-color var(--fui-transition-fast, $fui-transition-fast),
+    color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover:not(.itemDisabled) {
+    background-color: var(--fui-sidebar-hover-bg);
+    color: var(--fui-sidebar-item-hover-color, var(--fui-text-primary, #{$fui-text-primary}));
+    text-decoration: none;
+  }
+
+  &:active:not(.itemDisabled) {
+    background-color: var(--fui-sidebar-active-bg);
+  }
+}
+
+// Alpha-overlay active state reads as a depression on any surface,
+// adapting cleanly across light and dark themes.
+.itemActive {
+  background-color: var(--fui-sidebar-active-bg);
+  border-color: var(--fui-sidebar-active-border);
+  color: var(--fui-sidebar-item-active-color, var(--fui-text-primary, #{$fui-text-primary}));
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: -0.571rem;
+    top: 0.286rem;
+    bottom: 0.286rem;
+    width: 2px;
+    border-radius: 0 2px 2px 0;
+    background: var(
+      --fui-sidebar-item-active-indicator,
+      var(--fui-color-accent, #{$fui-color-accent})
+    );
+  }
+
+  &:hover,
+  &:active {
+    background-color: var(--fui-sidebar-active-bg) !important;
+    border-color: var(--fui-sidebar-active-border) !important;
+    color: var(
+      --fui-sidebar-item-active-color,
+      var(--fui-text-primary, #{$fui-text-primary})
+    ) !important;
+    text-decoration: none;
+  }
+
+  .itemIcon {
+    color: inherit;
+  }
+}
+
+.itemDisabled,
+.subItemDisabled {
+  opacity: 0.46;
+  cursor: not-allowed;
+}
+
+.itemIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fui-sidebar-icon-size);
+  height: var(--fui-sidebar-icon-size);
+  flex-shrink: 0;
+  color: var(--fui-sidebar-faint);
+
+  svg {
+    width: var(--fui-sidebar-icon-size);
+    height: var(--fui-sidebar-icon-size);
+  }
+
+  .item:hover:not(.itemDisabled) & {
+    color: var(--fui-sidebar-muted);
+  }
+
+  .itemActive & {
+    color: var(--fui-sidebar-item-active-color, var(--fui-text-primary, #{$fui-text-primary}));
+  }
+}
+
+.itemLabel {
+  flex: 1;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 0.071rem;
+}
+
+.itemBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.itemChevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fui-sidebar-icon-size);
+  height: var(--fui-sidebar-icon-size);
+  flex-shrink: 0;
+  transition: transform var(--fui-transition-fast, $fui-transition-fast);
+
+  svg {
+    width: var(--fui-sidebar-icon-size);
+    height: var(--fui-sidebar-icon-size);
+  }
+}
+
+.itemExpanded .itemChevron {
+  transform: rotate(90deg);
+}
+
+.submenu {
+  padding-left: 1.714rem;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height var(--fui-transition-normal, $fui-transition-normal);
+}
+
+.itemExpanded + .submenuWrapper .submenu {
+  max-height: 500px;
+}
+
+.subItem {
+  @include button-reset;
+  @include interactive-base;
+  @include text-base;
+
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--fui-sidebar-row-padding-x);
+  border-radius: var(--fui-sidebar-row-radius);
+  color: var(--fui-sidebar-muted);
+  text-decoration: none;
+  min-height: var(--fui-sidebar-row-height);
+  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: $fui-sidebar-indicator-width;
+    height: $fui-sidebar-indicator-height;
+    background-color: transparent;
+    border-radius: var(--fui-radius-full, $fui-radius-full);
+    transition: background-color var(--fui-transition-fast, $fui-transition-fast);
+  }
+
+  &:hover:not(.subItemDisabled) {
+    background-color: var(--fui-sidebar-hover-bg);
+    color: var(--fui-sidebar-item-hover-color, var(--fui-text-primary, #{$fui-text-primary}));
+    text-decoration: none;
+  }
+
+  &:active:not(.subItemDisabled) {
+    background-color: var(--fui-sidebar-active-bg);
+  }
+}
+
+.subItemActive {
+  color: var(--fui-sidebar-item-active-color, var(--fui-text-primary, #{$fui-text-primary}));
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+
+  &::before {
+    background-color: var(
+      --fui-sidebar-item-active-indicator,
+      var(--fui-border-strong, #{$fui-border-strong})
+    );
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.571rem;
+  padding: 0.857rem;
+  margin-top: auto;
+  flex-shrink: 0;
+  border-top: 1px solid
+    var(
+      --fui-sidebar-footer-border,
+      color-mix(in srgb, var(--fui-border-default, #{$fui-border-default}) 58%, transparent)
+    );
+}
+
+.trigger {
+  @include button-reset;
+  @include interactive-base;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $fui-touch-lg;
+  height: $fui-touch-lg;
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  color: var(--fui-text-primary, $fui-text-primary);
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  svg {
+    width: $fui-icon-xl;
+    height: $fui-icon-xl;
+  }
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: var(--fui-backdrop, $fui-backdrop);
+  opacity: 0;
+  transition: opacity var(--fui-transition-normal, $fui-transition-normal);
+
+  &[data-state="open"] {
+    opacity: 1;
+  }
+}
+
+.collapseToggle {
+  @include button-reset;
+  @include interactive-base;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $fui-touch-md;
+  height: $fui-touch-md;
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  margin-left: auto;
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
+  svg {
+    width: $fui-icon-lg;
+    height: $fui-icon-lg;
+  }
+}
+
+.collapseToggleFloating {
+  position: absolute;
+  top: var(--fui-space-3, $fui-space-3);
+  left: calc(100% + var(--fui-space-2, $fui-space-2));
+  z-index: 20;
+  margin: 0;
+  background-color: var(--fui-bg-primary, $fui-bg-primary);
+  border: 1px solid var(--fui-border, $fui-border);
+  box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
+
+  .positionRight & {
+    left: auto;
+    right: calc(100% + var(--fui-space-2, $fui-space-2));
+  }
+}
+
+.rail {
+  @include button-reset;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: $fui-sidebar-rail-width;
+  height: 100%;
+  z-index: 10;
+
+  .positionRight & {
+    right: auto;
+    left: 0;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: $fui-sidebar-rail-indicator-width;
+    width: $fui-sidebar-rail-indicator-width;
+    height: $fui-sidebar-rail-indicator-height;
+    border-radius: var(--fui-radius-full, $fui-radius-full);
+    background-color: var(--fui-border, $fui-border);
+    opacity: 0;
+    transition:
+      opacity var(--fui-transition-fast, $fui-transition-fast),
+      background-color var(--fui-transition-fast, $fui-transition-fast),
+      height var(--fui-transition-fast, $fui-transition-fast);
+
+    .positionRight & {
+      right: auto;
+      left: $fui-sidebar-rail-indicator-width;
+    }
+  }
+
+  &:hover::before,
+  &:focus-visible::before {
+    opacity: 1;
+    background-color: var(--fui-border-strong, $fui-border-strong);
+  }
+
+  &:hover::before {
+    height: $fui-sidebar-rail-indicator-height-hover;
+  }
+}
+
+.railCollapsed::before {
+  opacity: 0.7;
+}
+
+.menuSkeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-space-2, $fui-space-2);
+}
+
+.skeletonItem {
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: 0 var(--fui-space-2, $fui-space-2);
+  min-height: var(--fui-sidebar-item-height, $fui-sidebar-item-height);
+}
+
+.skeletonLabel {
+  flex: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root,
+  .mobile,
+  .overlay,
+  .submenu,
+  .itemChevron,
+  .rail::before,
+  .subItem::before {
+    transition: none;
+  }
+}