@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.6 → 0.1.7

package/src/styles/components/navigation/sidebar.css

@@ -0,0 +1,807 @@
+/* Sidebar Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Sidebar Component CSS Variables */
+:root {
+  /* Sidebar Base Variables */
+  --sidebar-font-size: var(--cs-fonts-primary-sizes-sm);
+  --sidebar-font-weight: var(--cs-fonts-primary-weights-medium);
+  --sidebar-line-height: var(--cs-fonts-primary-line-heights-tight);
+  --sidebar-letter-spacing: var(--cs-fonts-primary-letter-spacing-normal);
+
+  /* Sidebar Color Variables */
+  --sidebar-color-primary: var(--cs-colors-text-primary);
+  --sidebar-color-secondary: var(--cs-colors-text-secondary);
+  --sidebar-color-muted: var(--cs-colors-text-muted);
+  --sidebar-color-disabled: var(--cs-colors-text-muted);
+  --sidebar-color-active: var(--cs-colors-primary-500);
+  --sidebar-color-hover: var(--cs-colors-interactive-hover);
+
+  /* Sidebar Spacing Variables */
+  --sidebar-padding-y: var(--cs-spacing-scale-sm);
+  --sidebar-padding-x: var(--cs-spacing-scale-md);
+  --sidebar-margin: var(--cs-spacing-scale-xs);
+  --sidebar-item-spacing: var(--cs-spacing-scale-xs);
+  --sidebar-group-spacing: var(--cs-spacing-scale-md);
+
+  /* Sidebar State Variables */
+  --sidebar-transition: var(--cs-transitions-properties-transform);
+  --sidebar-border-radius: var(--cs-border-radius-lg);
+  --sidebar-border-width: var(--cs-border-width-sm);
+  --sidebar-shadow: var(--cs-shadows-lg);
+
+  /* Sidebar Focus Variables */
+  --sidebar-focus-ring-width: var(--cs-accessibility-focus-ring-width);
+  --sidebar-focus-ring-offset: var(--cs-accessibility-focus-ring-offset);
+  --sidebar-focus-ring-color: var(--cs-accessibility-focus-ring-color);
+  --sidebar-focus-outline-offset: var(--cs-accessibility-outline-offset);
+
+  /* Sidebar Icon Variables */
+  --sidebar-icon-size: var(--cs-fonts-primary-sizes-lg);
+  --sidebar-icon-spacing: var(--cs-spacing-scale-sm);
+  --sidebar-badge-spacing: var(--cs-spacing-scale-sm);
+
+  /* Sidebar Layout Variables */
+  --sidebar-width: var(--cs-spacing-scale-4xl);
+  --sidebar-width-collapsed: var(--cs-spacing-scale-xl);
+  --sidebar-width-mobile: 100%;
+  --sidebar-z-index: 100;
+  
+  /* Sidebar Interactive State Variables */
+  --sidebar-hover-transform: translateX(var(--cs-spacing-scale-xs));
+  --sidebar-hover-shadow: var(--cs-shadows-md);
+  --sidebar-focus-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --sidebar-focus-offset: var(--cs-spacing-scale-xs);
+  --sidebar-active-transform: translateX(0);
+  --sidebar-active-shadow: var(--cs-shadows-sm);
+  --sidebar-focus-ring-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --sidebar-focus-ring-offset: var(--cs-spacing-scale-xs);
+  
+  /* Sidebar High Contrast Variables */
+  --sidebar-high-contrast-border-width: var(--cs-spacing-scale-xs);
+  
+  /* Sidebar Responsive Variables */
+  --sidebar-mobile-font-size: var(--cs-fonts-primary-sizes-xs);
+  --sidebar-mobile-padding-y: var(--cs-spacing-scale-xs);
+  --sidebar-mobile-padding-x: var(--cs-spacing-scale-sm);
+  --sidebar-container-font-size: var(--cs-fonts-primary-sizes-sm);
+  
+  /* Sidebar Showcase Variables */
+  --sidebar-showcase-gap: var(--cs-spacing-scale-md);
+  --sidebar-variant-showcase-gap: var(--cs-spacing-scale-md);
+  --sidebar-variant-section-gap: var(--cs-spacing-scale-sm);
+  --sidebar-variant-title-size: var(--cs-fonts-primary-sizes-lg);
+  --sidebar-variant-title-weight: var(--cs-fonts-primary-weights-semibold);
+  --sidebar-variant-grid-gap: var(--cs-spacing-scale-sm);
+  --sidebar-variant-description-size: var(--cs-fonts-primary-sizes-sm);
+  --sidebar-variant-description-color: var(--cs-colors-text-muted);
+  --sidebar-state-showcase-gap: var(--cs-spacing-scale-md);
+  --sidebar-state-description-size: var(--cs-fonts-primary-sizes-sm);
+  --sidebar-state-description-color: var(--cs-colors-text-muted);
+  --sidebar-responsive-showcase-gap: var(--cs-spacing-scale-md);
+  --sidebar-responsive-description-size: var(--cs-fonts-primary-sizes-sm);
+  --sidebar-responsive-description-color: var(--cs-colors-text-muted);
+  --sidebar-responsive-grid-gap: var(--cs-spacing-scale-md);
+  --sidebar-responsive-title-size: var(--cs-fonts-primary-sizes-md);
+  --sidebar-responsive-title-weight: var(--cs-fonts-primary-weights-medium);
+  --sidebar-responsive-column-gap: var(--cs-spacing-scale-sm);
+}
+
+/* Base Sidebar Styles */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar-width);
+  height: 100vh;
+  background-color: var(--cs-colors-surface-background);
+  border-right: var(--sidebar-border-width) solid var(--cs-colors-border);
+  box-shadow: var(--sidebar-shadow);
+  transition: var(--sidebar-transition);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--sidebar-z-index);
+  overflow: hidden;
+}
+
+/* Sidebar States */
+.sidebar--collapsed {
+  width: var(--sidebar-width-collapsed);
+}
+
+.sidebar--mobile {
+  width: var(--sidebar-width-mobile);
+  transform: translateX(-100%);
+}
+
+.sidebar--mobile.sidebar--open {
+  transform: translateX(0);
+}
+
+/* Sidebar Theme Variants */
+.sidebar--semantic {
+  background-color: var(--cs-colors-surface-background);
+  border-color: var(--cs-colors-border);
+  transition: all var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar--semantic {
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+/* Sidebar Header */
+.sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--cs-spacing-scale-md);
+  border-bottom: var(--sidebar-border-width) solid var(--cs-colors-border);
+  background-color: var(--cs-colors-surface-surface);
+  min-height: var(--cs-spacing-scale-xl);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__header {
+  border-bottom-color: var(--cs-modes-dark-colors-border);
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+}
+
+.sidebar__header--collapsed {
+  justify-content: center;
+  padding: var(--cs-spacing-scale-sm);
+}
+
+.sidebar__logo {
+  display: flex;
+  align-items: center;
+  gap: var(--sidebar-icon-spacing);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--sidebar-color-primary);
+  text-decoration: none;
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__logo {
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+.sidebar__logo--collapsed {
+  justify-content: center;
+}
+
+.sidebar__logo-text {
+  font-size: var(--cs-fonts-primary-sizes-lg);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sidebar__logo-text--collapsed {
+  display: none;
+}
+
+.sidebar__logo-icon {
+  width: var(--sidebar-icon-size);
+  height: var(--sidebar-icon-size);
+  flex-shrink: 0;
+}
+
+/* Sidebar Toggle Button */
+.sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cs-spacing-scale-2xl);
+  height: var(--cs-spacing-scale-2xl);
+  border: none;
+  background: none;
+  color: var(--sidebar-color-secondary);
+  cursor: pointer;
+  border-radius: var(--cs-border-radius-md);
+  transition: var(--sidebar-transition);
+}
+
+.sidebar__toggle:hover {
+  background-color: var(--sidebar-color-hover);
+  color: var(--sidebar-color-primary);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__toggle {
+  color: var(--cs-modes-dark-colors-text-secondary);
+}
+
+.dark .sidebar__toggle:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+.sidebar__toggle--collapsed {
+  transform: rotate(180deg);
+}
+
+.sidebar__toggle-icon {
+  width: var(--cs-spacing-scale-md);
+  height: var(--cs-spacing-scale-md);
+}
+
+/* Sidebar Navigation */
+.sidebar__nav {
+  flex: 1;
+  padding: var(--sidebar-padding-y) 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.sidebar__nav--collapsed {
+  padding: var(--cs-spacing-scale-xs) 0;
+}
+
+/* Sidebar Group */
+.sidebar__group {
+  margin-bottom: var(--sidebar-group-spacing);
+}
+
+.sidebar__group--collapsed {
+  margin-bottom: var(--cs-spacing-scale-sm);
+}
+
+.sidebar__group-title {
+  padding: var(--cs-spacing-scale-xs) var(--sidebar-padding-x);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--sidebar-color-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--cs-fonts-primary-letter-spacing-wide);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__group-title {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+.sidebar__group-title--collapsed {
+  display: none;
+}
+
+/* Sidebar Item Styles */
+.sidebar__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--cs-spacing-scale-sm) var(--sidebar-padding-x);
+  font-size: var(--sidebar-font-size);
+  font-weight: var(--sidebar-font-weight);
+  line-height: var(--sidebar-line-height);
+  letter-spacing: var(--sidebar-letter-spacing);
+  color: var(--sidebar-color-primary);
+  text-decoration: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: var(--sidebar-transition);
+  text-align: left;
+  position: relative;
+}
+
+.sidebar__item:hover {
+  background-color: var(--sidebar-color-hover);
+  color: var(--sidebar-color-primary);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__item {
+  color: var(--cs-modes-dark-colors-text-primary);
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+}
+
+.dark .sidebar__item:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+.sidebar__item:focus {
+  outline: var(--sidebar-focus-ring-width) solid var(--sidebar-focus-ring-color);
+  outline-offset: var(--sidebar-focus-ring-offset);
+}
+
+.sidebar__item:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.sidebar__item--active {
+  background-color: var(--sidebar-color-active);
+  color: var(--cs-colors-surface-background);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+.sidebar__item--active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--cs-spacing-scale-xs);
+  background-color: var(--cs-colors-surface-background);
+}
+
+.sidebar__item--disabled {
+  color: var(--sidebar-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--cs-accessibility-disabled-opacity);
+}
+
+.sidebar__item--disabled:hover {
+  background-color: transparent;
+  color: var(--sidebar-color-disabled);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__item--active {
+  background-color: var(--cs-modes-dark-colors-primary-500);
+  color: var(--cs-modes-dark-colors-text-inverse);
+}
+
+.dark .sidebar__item--active::before {
+  background-color: var(--cs-modes-dark-colors-text-inverse);
+}
+
+.dark .sidebar__item--disabled {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+/* Sidebar Item Elements */
+.sidebar__item-icon {
+  width: var(--sidebar-icon-size);
+  height: var(--sidebar-icon-size);
+  margin-right: var(--sidebar-icon-spacing);
+  flex-shrink: 0;
+}
+
+.sidebar__item-icon--collapsed {
+  margin-right: 0;
+}
+
+.sidebar__item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar__item-label--collapsed {
+  display: none;
+}
+
+.sidebar__item-badge {
+  margin-left: var(--sidebar-badge-spacing);
+  flex-shrink: 0;
+}
+
+.sidebar__item-badge--collapsed {
+  display: none;
+}
+
+.sidebar__item-description {
+  display: block;
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  color: var(--sidebar-color-muted);
+  margin-top: var(--cs-spacing-scale-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__item-description {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+.sidebar__item-description--collapsed {
+  display: none;
+}
+
+/* Sidebar Item with Children */
+.sidebar__item--has-children {
+  position: relative;
+}
+
+.sidebar__item--has-children::after {
+  content: '';
+  width: var(--cs-spacing-scale-sm);
+  height: var(--cs-spacing-scale-sm);
+  border-right: var(--cs-border-width-focus) solid currentColor;
+  border-bottom: var(--cs-border-width-focus) solid currentColor;
+  transform: rotate(-45deg);
+  margin-left: auto;
+  transition: var(--sidebar-transition);
+}
+
+.sidebar__item--has-children--collapsed::after {
+  display: none;
+}
+
+.sidebar__item--has-children--expanded::after {
+  transform: rotate(45deg);
+}
+
+/* Sidebar Submenu */
+.sidebar__submenu {
+  background-color: var(--cs-colors-surface-surface);
+  border-left: var(--sidebar-border-width) solid var(--cs-colors-border);
+  margin-left: var(--cs-spacing-scale-md);
+  overflow: hidden;
+  transition: var(--sidebar-transition);
+  max-height: 0;
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__submenu {
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  border-left-color: var(--cs-modes-dark-colors-border);
+}
+
+.sidebar__submenu--expanded {
+  max-height: calc(var(--cs-spacing-scale-6xl) * 8.333);
+}
+
+.sidebar__submenu--collapsed {
+  display: none;
+}
+
+/* Sidebar Divider */
+.sidebar__divider {
+  height: var(--sidebar-border-width);
+  background-color: var(--cs-colors-border);
+  margin: var(--cs-spacing-scale-sm) var(--sidebar-padding-x);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__divider {
+  background-color: var(--cs-modes-dark-colors-border);
+}
+
+.sidebar__divider--collapsed {
+  margin: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-sm);
+}
+
+/* Sidebar Footer */
+.sidebar__footer {
+  padding: var(--cs-spacing-scale-sm) var(--sidebar-padding-x);
+  border-top: var(--sidebar-border-width) solid var(--cs-colors-border);
+  background-color: var(--cs-colors-surface-surface);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  color: var(--sidebar-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__footer {
+  border-top-color: var(--cs-modes-dark-colors-border);
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+.sidebar__footer--collapsed {
+  display: none;
+}
+
+/* Sidebar Overlay (Mobile) */
+.sidebar__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, var(--cs-colors-alpha-medium));
+  z-index: calc(var(--sidebar-z-index) - 1);
+  opacity: 0;
+  visibility: hidden;
+  transition: var(--sidebar-transition);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .sidebar__overlay {
+  background-color: rgba(0, 0, 0, var(--cs-colors-alpha-high));
+}
+
+.sidebar__overlay--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Sidebar Responsive Behavior */
+@media (max-width: var(--cs-breakpoints-tablet)) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+  
+  .sidebar--open {
+    transform: translateX(0);
+  }
+  
+  .sidebar__overlay--visible {
+    display: block;
+  }
+}
+
+@media (max-width: var(--cs-breakpoints-mobile)) {
+  .sidebar {
+    width: 100%;
+    font-size: var(--sidebar-mobile-font-size, var(--cs-fonts-primary-sizes-xs));
+    padding: var(--sidebar-mobile-padding-y, var(--cs-spacing-scale-xs)) var(--sidebar-mobile-padding-x, var(--cs-spacing-scale-sm));
+  }
+  
+  .sidebar__header {
+    min-height: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-lg));
+  }
+  
+  .sidebar__logo-text {
+    font-size: var(--cs-fonts-primary-sizes-base);
+  }
+}
+
+/* Container Queries for Adaptive Layouts */
+@container (min-width: var(--cs-breakpoints-tablet)) {
+  .sidebar {
+    font-size: var(--sidebar-container-font-size, var(--cs-fonts-primary-sizes-sm));
+  }
+}
+
+/* Sidebar Focus Management */
+.sidebar__item:focus-visible {
+  outline: var(--sidebar-focus-ring-width) solid var(--sidebar-focus-ring-color);
+  outline-offset: var(--sidebar-focus-ring-offset);
+}
+
+/* Sidebar Accessibility */
+.sidebar[role="navigation"] {
+  /* Ensure proper navigation role styling */
+}
+
+.sidebar__item[role="menuitem"] {
+  /* Ensure proper menuitem role styling */
+}
+
+.sidebar__item[aria-expanded="true"]::after {
+  transform: rotate(45deg);
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .sidebar {
+    border-width: var(--sidebar-high-contrast-border-width);
+  }
+  
+  .sidebar__item {
+    border-width: var(--sidebar-high-contrast-border-width);
+  }
+  
+  .sidebar__submenu {
+    border-left-width: var(--sidebar-high-contrast-border-width);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .sidebar {
+    transition: none;
+  }
+  
+  .sidebar__item {
+    transition: none;
+  }
+  
+  .sidebar__item[tabindex]:hover,
+  .sidebar__item[role="button"]:hover,
+  .sidebar__item[role="link"]:hover {
+    transform: none;
+  }
+  
+  .sidebar--collapsed {
+    animation: none;
+  }
+  
+  .sidebar--mobile {
+    animation: none;
+  }
+  
+  .sidebar--mobile.sidebar--open {
+    animation: none;
+  }
+}
+
+/* Sidebar Interactive States - Following Gold Standard Pattern */
+.sidebar__item[tabindex]:hover,
+.sidebar__item[role="button"]:hover,
+.sidebar__item[role="link"]:hover {
+  transform: var(--sidebar-hover-transform, translateX(4px));
+  box-shadow: var(--sidebar-hover-shadow, var(--cs-shadows-md));
+}
+
+.sidebar__item[tabindex]:active,
+.sidebar__item[role="button"]:active,
+.sidebar__item[role="link"]:active {
+  transform: var(--sidebar-active-transform, translateX(0));
+  box-shadow: var(--sidebar-active-shadow, var(--cs-shadows-sm));
+}
+
+/* Sidebar Animation */
+.sidebar__item {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.sidebar__item:hover {
+  transform: translateX(var(--cs-spacing-scale-xs));
+}
+
+.sidebar__item:active {
+  transform: translateX(0);
+}
+
+/* Sidebar Collapse Animation */
+.sidebar {
+  transform-origin: left center;
+}
+
+.sidebar--collapsed {
+  animation: sidebarCollapse var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease-out);
+}
+
+@keyframes sidebarCollapse {
+  from {
+    width: var(--sidebar-width);
+  }
+  to {
+    width: var(--sidebar-width-collapsed);
+  }
+}
+
+/* Sidebar Mobile Slide Animation */
+.sidebar--mobile {
+  animation: sidebarSlideOut var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease-out);
+}
+
+.sidebar--mobile.sidebar--open {
+  animation: sidebarSlideIn var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease-out);
+}
+
+@keyframes sidebarSlideIn {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes sidebarSlideOut {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+/* Storybook Showcase Styles - Following Gold Standard Pattern */
+/* Sidebar Showcase Layout */
+.sidebar-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sidebar-showcase-gap, var(--cs-spacing-scale-md));
+  align-items: center;
+}
+
+/* Sidebar Variant Showcase */
+.sidebar-variant-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-variant-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.sidebar-variant-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-variant-section-gap, var(--cs-spacing-scale-sm));
+}
+
+.sidebar-variant-title {
+  font-size: var(--sidebar-variant-title-size, var(--cs-fonts-primary-sizes-lg));
+  font-weight: var(--sidebar-variant-title-weight, var(--cs-fonts-primary-weights-semibold));
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.sidebar-variant-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sidebar-variant-grid-gap, var(--cs-spacing-scale-sm));
+}
+
+.sidebar-variant-description {
+  font-size: var(--sidebar-variant-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--sidebar-variant-description-color, var(--cs-colors-text-muted));
+}
+
+/* Sidebar State Showcase */
+.sidebar-state-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-state-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.sidebar-state-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cs-spacing-scale-sm);
+}
+
+.sidebar-state-description {
+  font-size: var(--sidebar-state-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--sidebar-state-description-color, var(--cs-colors-text-muted));
+}
+
+/* Sidebar Interactive Showcase */
+.sidebar-interactive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+}
+
+.sidebar-interactive-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cs-spacing-scale-sm);
+}
+
+.sidebar-interactive-description {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-colors-text-muted);
+}
+
+/* Sidebar Responsive Showcase */
+.sidebar-responsive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-responsive-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.sidebar-responsive-description {
+  font-size: var(--sidebar-responsive-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--sidebar-responsive-description-color, var(--cs-colors-text-muted));
+  margin-bottom: var(--cs-spacing-scale-sm);
+}
+
+.sidebar-responsive-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--sidebar-responsive-grid-gap, var(--cs-spacing-scale-md));
+  width: 100%;
+  max-width: var(--cs-spacing-scale-6xl);
+}
+
+.sidebar-responsive-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-responsive-column-gap, var(--cs-spacing-scale-sm));
+}
+
+.sidebar-responsive-title {
+  font-size: var(--sidebar-responsive-title-size, var(--cs-fonts-primary-sizes-md));
+  font-weight: var(--sidebar-responsive-title-weight, var(--cs-fonts-primary-weights-medium));
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+/* Responsive Design for Showcase */
+@media (min-width: var(--cs-breakpoints-tablet)) {
+  .sidebar-responsive-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}