@countermeasure-platform/web-components 1.2.1-dev.6.1 → 1.2.2-dev.7.1

package/dist/styles/sidebar.css

@@ -19,6 +19,8 @@
    ----------------------------------------------------------------------------- */
 .sidebar {
   width: var(--sidebar-width);
+  height: 100%;
+  min-height: 0;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -33,6 +35,10 @@
   width: var(--sidebar-width);
 }
 
+.sidebar--default {
+  width: var(--sidebar-width);
+}
+
 /* Boost z-index when app-switcher is open so panel appears above everything */
 .sidebar:has(.app-switcher--open) {
   z-index: 300;
@@ -53,6 +59,26 @@
   gap: 0.5rem;
 }
 
+.sidebar__brand {
+  display: inline-flex;
+  min-width: 0;
+  padding: 0;
+  color: var(--color-text);
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+}
+
+button.sidebar__brand {
+  cursor: pointer;
+}
+
+.sidebar__brand:focus-visible {
+  outline: 2px solid var(--color-primary, hsl(var(--primary)));
+  outline-offset: 4px;
+  border-radius: 0.375rem;
+}
+
 /* Sidebar Collapse Button */
 .sidebar__collapse-btn {
   display: flex;
@@ -76,6 +102,39 @@
   border-color: var(--color-border);
 }
 
+.sidebar__collapse-btn svg {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
+.sidebar__collapse-btn--edge {
+  position: absolute;
+  top: 28px;
+  right: 0;
+  z-index: 10;
+  width: 24px;
+  height: 24px;
+  border-color: var(--color-border);
+  border-radius: 9999px;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
+  opacity: 0;
+  transform: translateX(50%);
+  transition:
+    opacity 0.2s,
+    color 0.15s,
+    background 0.15s,
+    transform 0.2s;
+}
+
+.sidebar:hover .sidebar__collapse-btn--edge,
+.sidebar__collapse-btn--edge:focus-visible,
+.sidebar__collapse-btn--edge[data-visible='true'] {
+  opacity: 1;
+}
+
 .sidebar__collapse-icon--expand {
   display: none;
 }
@@ -92,6 +151,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  min-height: 0;
   overflow-y: auto;
 }
 
@@ -483,6 +543,32 @@
   flex-shrink: 0;
 }
 
+.sidebar__badge--primary,
+.sidebar__badge--default {
+  background: var(--color-surface-hover);
+  color: var(--color-text-muted);
+}
+
+.sidebar__badge--amber,
+.sidebar__badge--warning {
+  background: rgb(245 158 11 / 12%);
+  color: #fbbf24;
+  border-color: rgb(245 158 11 / 32%);
+}
+
+.sidebar__badge--cyan {
+  background: rgb(34 211 238 / 12%);
+  color: #67e8f9;
+  border-color: rgb(34 211 238 / 32%);
+}
+
+.sidebar__badge--rose,
+.sidebar__badge--error {
+  background: rgb(244 63 94 / 12%);
+  color: #fb7185;
+  border-color: rgb(244 63 94 / 32%);
+}
+
 .sidebar__badge:empty {
   display: none;
 }
@@ -935,6 +1021,14 @@
   gap: 0.25rem;
 }
 
+.sidebar--collapsed .cmm-brand-lockup {
+  justify-content: center;
+}
+
+.sidebar--collapsed .cmm-brand-lockup__wordmark {
+  display: none;
+}
+
 .sidebar--collapsed .sidebar__footer-action {
   justify-content: center;
   padding: 0.5rem;
@@ -1045,6 +1139,399 @@
   opacity: 1;
 }
 
+/* -----------------------------------------------------------------------------
+   CounterMeasure Product Sidebar Variant
+   ----------------------------------------------------------------------------- */
+.sidebar--product,
+.sidebar--analyst-console,
+.sidebar--security,
+.sidebar--admin {
+  --cmm-sidebar-bg: var(--sidebar-bg, rgb(20 20 26 / 70%));
+  --cmm-sidebar-border: var(--sidebar-border, rgb(255 255 255 / 6%));
+  --cmm-sidebar-hover: var(--sidebar-hover, rgb(255 255 255 / 4%));
+  --cmm-sidebar-active: var(--sidebar-active, rgb(255 255 255 / 6%));
+  --cmm-sidebar-divider: var(--sidebar-divider, rgb(255 255 255 / 8%));
+  --cmm-sidebar-divider-fade: var(--sidebar-divider-fade, rgb(255 255 255 / 2%));
+  --cmm-sidebar-text: var(--color-foreground-secondary, rgb(255 255 255 / 70%));
+  --cmm-sidebar-text-muted: var(--color-foreground-tertiary, rgb(255 255 255 / 50%));
+  --cmm-sidebar-text-active: var(--color-foreground, var(--color-text));
+  --cmm-sidebar-primary: var(--color-accent-primary, #ff7a00);
+  --cmm-sidebar-primary-alpha: var(--color-primary-alpha, rgb(255 122 0 / 15%));
+  --cmm-sidebar-primary-border: var(--color-primary-border, rgb(255 122 0 / 15%));
+  --cmm-sidebar-shadow-glow: var(--shadow-glow, 0 0 12px rgb(255 122 0 / 15%));
+  --cmm-sidebar-width: var(--spacing-sidebar, 264px);
+  --cmm-sidebar-collapsed-width: var(--spacing-sidebar-collapsed, 64px);
+  width: var(--cmm-sidebar-width);
+  background: var(--cmm-sidebar-bg);
+  border-right-color: var(--cmm-sidebar-border);
+  -webkit-backdrop-filter: blur(60px);
+  backdrop-filter: blur(60px);
+  overflow: visible;
+}
+
+.sidebar--product::before,
+.sidebar--analyst-console::before,
+.sidebar--security::before,
+.sidebar--admin::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto;
+  height: 8rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, rgb(255 122 0 / 3%), transparent);
+  z-index: -1;
+}
+
+.sidebar--product .sidebar__header,
+.sidebar--analyst-console .sidebar__header,
+.sidebar--security .sidebar__header,
+.sidebar--admin .sidebar__header {
+  min-height: 3.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 0;
+}
+
+.sidebar--product .sidebar__header-row,
+.sidebar--analyst-console .sidebar__header-row,
+.sidebar--security .sidebar__header-row,
+.sidebar--admin .sidebar__header-row {
+  min-height: 2rem;
+}
+
+.sidebar--product .cmm-brand-lockup,
+.sidebar--analyst-console .cmm-brand-lockup,
+.sidebar--security .cmm-brand-lockup,
+.sidebar--admin .cmm-brand-lockup {
+  gap: 0.75rem;
+}
+
+.sidebar--product .cmm-brand-lockup__wordmark,
+.sidebar--analyst-console .cmm-brand-lockup__wordmark,
+.sidebar--security .cmm-brand-lockup__wordmark,
+.sidebar--admin .cmm-brand-lockup__wordmark {
+  font-size: 0.8125rem;
+  letter-spacing: 0.1em;
+}
+
+.sidebar--product .sidebar__collapse-btn--edge,
+.sidebar--analyst-console .sidebar__collapse-btn--edge,
+.sidebar--security .sidebar__collapse-btn--edge,
+.sidebar--admin .sidebar__collapse-btn--edge {
+  top: 1.85rem;
+  width: 2rem;
+  height: 2rem;
+  background: var(--cmm-sidebar-bg);
+  border-color: var(--cmm-sidebar-border);
+  color: var(--cmm-sidebar-text);
+  box-shadow: 0 6px 18px rgb(0 0 0 / 30%);
+}
+
+.sidebar--product .sidebar__collapse-btn--edge:hover,
+.sidebar--analyst-console .sidebar__collapse-btn--edge:hover,
+.sidebar--security .sidebar__collapse-btn--edge:hover,
+.sidebar--admin .sidebar__collapse-btn--edge:hover {
+  color: var(--cmm-sidebar-text-active);
+  background: var(--cmm-sidebar-hover);
+}
+
+.sidebar--product .sidebar__body,
+.sidebar--analyst-console .sidebar__body,
+.sidebar--security .sidebar__body,
+.sidebar--admin .sidebar__body {
+  gap: 1.25rem;
+  padding: 0 0.75rem 0.75rem;
+}
+
+.sidebar--product .sidebar__section,
+.sidebar--analyst-console .sidebar__section,
+.sidebar--security .sidebar__section,
+.sidebar--admin .sidebar__section {
+  gap: 1px;
+  margin-top: 0;
+}
+
+.sidebar--product .sidebar__section + .sidebar__section,
+.sidebar--analyst-console .sidebar__section + .sidebar__section,
+.sidebar--security .sidebar__section + .sidebar__section,
+.sidebar--admin .sidebar__section + .sidebar__section {
+  margin-top: 0;
+}
+
+.sidebar--product .sidebar__section-label,
+.sidebar--analyst-console .sidebar__section-label,
+.sidebar--security .sidebar__section-label,
+.sidebar--admin .sidebar__section-label {
+  gap: 0.625rem;
+  margin-bottom: 0.375rem;
+  padding: 0 0.75rem 0.375rem;
+  color: var(--cmm-sidebar-text-muted);
+  font-size: 0.625rem;
+  letter-spacing: 0.32em;
+  line-height: 1.25;
+  opacity: 1;
+}
+
+.sidebar--product .sidebar__section-label::after,
+.sidebar--analyst-console .sidebar__section-label::after,
+.sidebar--security .sidebar__section-label::after,
+.sidebar--admin .sidebar__section-label::after {
+  background: linear-gradient(90deg, var(--cmm-sidebar-divider), var(--cmm-sidebar-divider-fade));
+}
+
+.sidebar--product .sidebar__item,
+.sidebar--analyst-console .sidebar__item,
+.sidebar--security .sidebar__item,
+.sidebar--admin .sidebar__item {
+  min-height: 2.5rem;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  color: var(--cmm-sidebar-text);
+  font-size: 0.8125rem;
+  line-height: 1;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+}
+
+.sidebar--product .sidebar__item::before,
+.sidebar--analyst-console .sidebar__item::before,
+.sidebar--security .sidebar__item::before,
+.sidebar--admin .sidebar__item::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 2.5px;
+  height: 0;
+  transform: translateY(-50%);
+  border-radius: 9999px;
+  background: var(--cmm-sidebar-primary);
+  transition:
+    height 0.15s,
+    box-shadow 0.15s;
+}
+
+.sidebar--product .sidebar__item:hover,
+.sidebar--analyst-console .sidebar__item:hover,
+.sidebar--security .sidebar__item:hover,
+.sidebar--admin .sidebar__item:hover {
+  color: var(--cmm-sidebar-text-active);
+  background: var(--cmm-sidebar-hover);
+}
+
+.sidebar--product .sidebar__item--active,
+.sidebar--analyst-console .sidebar__item--active,
+.sidebar--security .sidebar__item--active,
+.sidebar--admin .sidebar__item--active {
+  color: var(--cmm-sidebar-text-active);
+  background: var(--cmm-sidebar-active);
+  border-color: var(--cmm-sidebar-primary-border);
+}
+
+.sidebar--product .sidebar__item--active::before,
+.sidebar--analyst-console .sidebar__item--active::before,
+.sidebar--security .sidebar__item--active::before,
+.sidebar--admin .sidebar__item--active::before {
+  height: 1rem;
+  box-shadow: var(--cmm-sidebar-shadow-glow);
+}
+
+.sidebar--product .sidebar__item-icon,
+.sidebar--analyst-console .sidebar__item-icon,
+.sidebar--security .sidebar__item-icon,
+.sidebar--admin .sidebar__item-icon {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  color: currentColor;
+}
+
+.sidebar--product .sidebar__item--active .sidebar__item-icon,
+.sidebar--analyst-console .sidebar__item--active .sidebar__item-icon,
+.sidebar--security .sidebar__item--active .sidebar__item-icon,
+.sidebar--admin .sidebar__item--active .sidebar__item-icon {
+  color: var(--cmm-sidebar-primary);
+}
+
+.sidebar--product .sidebar__item-label,
+.sidebar--analyst-console .sidebar__item-label,
+.sidebar--security .sidebar__item-label,
+.sidebar--admin .sidebar__item-label {
+  transition:
+    color 0.15s,
+    transform 0.15s;
+}
+
+.sidebar--product .sidebar__item:hover .sidebar__item-label,
+.sidebar--analyst-console .sidebar__item:hover .sidebar__item-label,
+.sidebar--security .sidebar__item:hover .sidebar__item-label,
+.sidebar--admin .sidebar__item:hover .sidebar__item-label {
+  transform: translateX(0.125rem);
+}
+
+.sidebar--product .sidebar__badge,
+.sidebar--analyst-console .sidebar__badge,
+.sidebar--security .sidebar__badge,
+.sidebar--admin .sidebar__badge {
+  min-width: 1.25rem;
+  height: 1rem;
+  padding: 0 0.375rem;
+  border: 1px solid currentColor;
+  border-radius: 0.25rem;
+  font-size: 0.5625rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.sidebar--product .sidebar__badge--primary,
+.sidebar--analyst-console .sidebar__badge--primary,
+.sidebar--security .sidebar__badge--primary,
+.sidebar--admin .sidebar__badge--primary {
+  background: rgb(255 122 0 / 12%);
+  color: var(--cmm-sidebar-primary);
+  border-color: var(--cmm-sidebar-primary-border);
+}
+
+.sidebar--product .sidebar__footer,
+.sidebar--analyst-console .sidebar__footer,
+.sidebar--security .sidebar__footer,
+.sidebar--admin .sidebar__footer {
+  padding: 0.625rem 0.75rem 0.75rem;
+  border-top-color: var(--cmm-sidebar-divider);
+}
+
+.sidebar--product .sidebar__footer-name,
+.sidebar--analyst-console .sidebar__footer-name,
+.sidebar--security .sidebar__footer-name,
+.sidebar--admin .sidebar__footer-name {
+  color: var(--cmm-sidebar-text);
+}
+
+.sidebar--product.sidebar--collapsed,
+.sidebar--analyst-console.sidebar--collapsed,
+.sidebar--security.sidebar--collapsed,
+.sidebar--admin.sidebar--collapsed {
+  width: var(--cmm-sidebar-collapsed-width);
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__header,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__header,
+.sidebar--security.sidebar--collapsed .sidebar__header,
+.sidebar--admin.sidebar--collapsed .sidebar__header {
+  padding: 0.75rem 0.5rem;
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__body,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__body,
+.sidebar--security.sidebar--collapsed .sidebar__body,
+.sidebar--admin.sidebar--collapsed .sidebar__body {
+  gap: 0.5rem;
+  padding: 0 0.5rem 0.5rem;
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__section,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__section,
+.sidebar--security.sidebar--collapsed .sidebar__section,
+.sidebar--admin.sidebar--collapsed .sidebar__section {
+  align-items: center;
+  gap: 1px;
+  margin-top: 0;
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__item,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__item,
+.sidebar--security.sidebar--collapsed .sidebar__item,
+.sidebar--admin.sidebar--collapsed .sidebar__item {
+  width: 2.5rem;
+  height: 2.5rem;
+  min-height: 2.5rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  margin: 0;
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__item::before,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__item::before,
+.sidebar--security.sidebar--collapsed .sidebar__item::before,
+.sidebar--admin.sidebar--collapsed .sidebar__item::before {
+  display: none;
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__item[data-badge-visible='true']::before,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__item[data-badge-visible='true']::before,
+.sidebar--security.sidebar--collapsed .sidebar__item[data-badge-visible='true']::before,
+.sidebar--admin.sidebar--collapsed .sidebar__item[data-badge-visible='true']::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0.375rem;
+  right: 0.375rem;
+  left: auto;
+  width: 0.375rem;
+  height: 0.375rem;
+  transform: none;
+  border-radius: 9999px;
+  background: var(--cmm-sidebar-primary);
+  box-shadow: 0 0 0 1px var(--cmm-sidebar-bg);
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='amber']::before,
+.sidebar--product.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='warning']::before,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='amber']::before,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='warning']::before,
+.sidebar--security.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='amber']::before,
+.sidebar--security.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='warning']::before,
+.sidebar--admin.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='amber']::before,
+.sidebar--admin.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='warning']::before {
+  background: #fbbf24;
+  box-shadow:
+    0 0 0 1px var(--cmm-sidebar-bg),
+    0 0 8px rgb(245 158 11 / 35%);
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='cyan']::before,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='cyan']::before,
+.sidebar--security.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='cyan']::before,
+.sidebar--admin.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='cyan']::before {
+  background: #67e8f9;
+  box-shadow:
+    0 0 0 1px var(--cmm-sidebar-bg),
+    0 0 8px rgb(34 211 238 / 35%);
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='rose']::before,
+.sidebar--product.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='error']::before,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='rose']::before,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='error']::before,
+.sidebar--security.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='rose']::before,
+.sidebar--security.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='error']::before,
+.sidebar--admin.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='rose']::before,
+.sidebar--admin.sidebar--collapsed .sidebar__item[data-badge-visible='true'][data-badge-tone='error']::before {
+  background: #fb7185;
+  box-shadow:
+    0 0 0 1px var(--cmm-sidebar-bg),
+    0 0 8px rgb(244 63 94 / 35%);
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__item--active,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__item--active,
+.sidebar--security.sidebar--collapsed .sidebar__item--active,
+.sidebar--admin.sidebar--collapsed .sidebar__item--active {
+  color: var(--cmm-sidebar-primary);
+  background: var(--cmm-sidebar-primary-alpha);
+  border-color: transparent;
+}
+
+.sidebar--product.sidebar--collapsed .sidebar__collapse-btn--edge,
+.sidebar--analyst-console.sidebar--collapsed .sidebar__collapse-btn--edge,
+.sidebar--security.sidebar--collapsed .sidebar__collapse-btn--edge,
+.sidebar--admin.sidebar--collapsed .sidebar__collapse-btn--edge {
+  top: 3rem;
+}
+
 /* -----------------------------------------------------------------------------
    Mobile Responsive Styles
    ----------------------------------------------------------------------------- */
@@ -1176,6 +1663,14 @@
     align-items: center;
   }
 
+  .sidebar--collapsed .cmm-brand-lockup {
+    justify-content: flex-start;
+  }
+
+  .sidebar--collapsed .cmm-brand-lockup__wordmark {
+    display: inline-flex;
+  }
+
   /* Reset storage collapsed nav on mobile */
   .sidebar--storage.sidebar--collapsed .storage-sidebar__org {
     display: flex;