@salesmind-ai/design-system 0.6.0 → 0.7.0

package/dist/nav/index.css

@@ -537,589 +537,20 @@
     background: var(--fallback-surface);
   }
 }
-
-/* src/components/Navbar/Navbar.css */
-.ds-navbar__mobile-overlay {
-  position: fixed;
-  top: 64px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--void-base);
-  border-top: 1px solid var(--rim-light-bottom);
-  z-index: var(--z-modal);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-}
-.ds-navbar__mobile-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding: var(--space-4);
-  min-height: 100%;
-}
-.ds-navbar__mobile-nav-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-2);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-secondary);
-  text-decoration: none;
-  background: none;
-  border: none;
-  border-radius: var(--radius-button);
-  cursor: pointer;
-  white-space: nowrap;
-  hyphens: none;
-  word-break: normal;
-  overflow-wrap: normal;
-  width: 100%;
-  text-align: left;
-  transition: color var(--transition-fast), background var(--transition-fast);
-}
-.ds-navbar__mobile-nav-item:hover,
-.ds-navbar__mobile-nav-item:focus-visible {
-  color: var(--text-primary);
-  background: var(--glass-base-hover);
-}
-.ds-navbar__mobile-nav-item--active {
-  color: var(--text-primary);
-}
-.ds-navbar__mobile-separator {
-  height: 1px;
-  background: var(--rim-light-bottom);
-  margin: var(--space-2) 0;
-}
-.ds-navbar__mobile-actions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  padding: var(--space-4) 0 0;
-  margin-top: auto;
-}
-.ds-navbar__mobile-subnav {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-@media (prefers-reduced-motion: reduce) {
-  .ds-navbar__mobile-overlay {
-    transition: none;
-  }
-}
-
-/* src/components/LayoutPrimitives/LayoutPrimitives.css */
-.ds-box {
-  display: block;
-  box-sizing: border-box;
-  min-width: 0;
-}
-.ds-stack {
-  display: flex;
-  flex-direction: column;
-}
-.ds-stack--horizontal {
-  flex-direction: row;
-}
-.ds-grid {
-  display: grid;
-}
-.ds-grid--cols-1 {
-  grid-template-columns: repeat(1, 1fr);
-}
-.ds-grid--cols-2 {
-  grid-template-columns: repeat(1, 1fr);
-}
-@media (min-width: 640px) {
-  .ds-grid--cols-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-.ds-grid--cols-3 {
-  grid-template-columns: repeat(1, 1fr);
-}
-@media (min-width: 640px) {
-  .ds-grid--cols-3 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (min-width: 1024px) {
-  .ds-grid--cols-3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-.ds-grid--cols-4 {
-  grid-template-columns: repeat(1, 1fr);
-}
-@media (min-width: 640px) {
-  .ds-grid--cols-4 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (min-width: 1024px) {
-  .ds-grid--cols-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-.ds-grid--cols-5 {
-  grid-template-columns: repeat(1, 1fr);
-}
-@media (min-width: 640px) {
-  .ds-grid--cols-5 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (min-width: 768px) {
-  .ds-grid--cols-5 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-@media (min-width: 1280px) {
-  .ds-grid--cols-5 {
-    grid-template-columns: repeat(5, 1fr);
-  }
-}
-.ds-grid--cols-6 {
-  grid-template-columns: repeat(1, 1fr);
-}
-@media (min-width: 640px) {
-  .ds-grid--cols-6 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (min-width: 768px) {
-  .ds-grid--cols-6 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-@media (min-width: 1280px) {
-  .ds-grid--cols-6 {
-    grid-template-columns: repeat(6, 1fr);
-  }
-}
-@media (min-width: 1920px) {
-  .ds-grid--cols-3:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-@media (min-width: 2560px) {
-  .ds-grid--cols-2:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .ds-grid--cols-3:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  .ds-grid--cols-4:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(5, 1fr);
-  }
-  .ds-grid--cols-5:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(6, 1fr);
-  }
-  .ds-grid--cols-6:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(8, 1fr);
-  }
-}
-@media (min-width: 3840px) {
-  .ds-grid--cols-2:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .ds-grid--cols-3:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(5, 1fr);
-  }
-  .ds-grid--cols-4:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(6, 1fr);
-  }
-  .ds-grid--cols-5:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(8, 1fr);
-  }
-  .ds-grid--cols-6:not(.ds-grid--fixed) {
-    grid-template-columns: repeat(10, 1fr);
-  }
-}
-:root {
-  --container-default-max: 1200px;
-}
-@media (min-width: 1537px) {
-  :root {
-    --container-default-max: 1400px;
-  }
-}
-@media (min-width: 1921px) {
-  :root {
-    --container-default-max: 1600px;
-  }
-}
-@media (min-width: 2561px) {
-  :root {
-    --container-default-max: 1920px;
-  }
-}
-.ds-container {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: var(--container-padding-x, var(--space-4));
-  padding-right: var(--container-padding-x, var(--space-4));
-}
-@media (min-width: 1537px) {
-  .ds-container {
-    --container-padding-x: var(--space-6);
-  }
-}
-@media (min-width: 2561px) {
-  .ds-container {
-    --container-padding-x: var(--space-8);
+@media (max-width: 320px) {
+  .ds-navbar-v2__container {
+    padding: var(--space-2) var(--space-2);
   }
-}
-.ds-section-block {
-  position: relative;
-}
-.ds-section-block--none {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.ds-section-block--sm {
-  padding-top: var(--space-8, 2rem);
-  padding-bottom: var(--space-8, 2rem);
-}
-.ds-section-block--md {
-  padding-top: var(--space-16, 4rem);
-  padding-bottom: var(--space-16, 4rem);
-}
-@media (min-width: 768px) {
-  .ds-section-block--md {
-    padding-top: var(--space-24, 6rem);
-    padding-bottom: var(--space-24, 6rem);
+  .ds-navbar-v2__hamburger {
+    padding: var(--space-1);
+    min-width: 2.5rem;
+    min-height: 2.5rem;
   }
 }
-.ds-section-block--lg {
-  padding-top: var(--space-24, 6rem);
-  padding-bottom: var(--space-24, 6rem);
-}
-@media (min-width: 768px) {
-  .ds-section-block--lg {
-    padding-top: var(--space-32, 8rem);
-    padding-bottom: var(--space-32, 8rem);
-  }
-}
-.ds-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-/* src/components/Navbar/NavbarMegaMenu.css */
-.ds-navbar-mega-menu {
-  position: static;
-}
-.ds-navbar-mega-menu--floating {
-  position: relative;
-}
-.ds-navbar-mega-menu__trigger {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-2) 0;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-secondary);
-  background: none;
-  border: none;
-  cursor: pointer;
-  white-space: nowrap;
-  hyphens: none;
-  word-break: normal;
-  overflow-wrap: normal;
-  transition: color var(--transition-fast);
-}
-.ds-navbar-mega-menu__trigger:hover,
-.ds-navbar-mega-menu__trigger[aria-expanded=true] {
-  color: var(--text-primary);
-}
-.ds-navbar-mega-menu__chevron {
-  display: inline-flex;
-  align-items: center;
-  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-.ds-navbar-mega-menu__chevron[data-state=open] {
-  transform: rotate(180deg);
-}
-.ds-navbar-mega-menu__content {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  width: 100%;
-  background: var(--void-base);
-  backdrop-filter: blur(24px) saturate(180%);
-  -webkit-backdrop-filter: blur(24px) saturate(180%);
-  border-bottom: 1px solid var(--rim-light-bottom);
-  box-shadow: var(--shadow-xl), 0 0 0 1px var(--rim-light-bottom);
-  padding: var(--space-8) 0;
-  z-index: var(--z-dropdown);
-  transform-origin: top center;
-  overflow: hidden;
-  opacity: 0;
-  transform: translateY(-8px) scale(0.995);
-  visibility: hidden;
-  pointer-events: none;
-  transition:
-    opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
-    transform 0.15s cubic-bezier(0.4, 0, 1, 1),
-    visibility 0s 0.15s;
-}
-.ds-navbar-mega-menu__content[data-state=open] {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  visibility: visible;
-  pointer-events: auto;
-  transition:
-    opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
-    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
-    visibility 0s 0s;
-}
-.ds-navbar-mega-menu__content::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background:
-    linear-gradient(
-      90deg,
-      transparent 0%,
-      var(--rim-light-top) 20%,
-      var(--rim-light-hover-top) 50%,
-      var(--rim-light-top) 80%,
-      transparent 100%);
-  opacity: 0.8;
-  pointer-events: none;
-}
-.ds-navbar-mega-menu__content--floating {
-  left: 50%;
-  right: auto;
-  width: max-content;
-  min-width: 200px;
-  max-width: 90vw;
-  padding: var(--space-4);
-  border: 1px solid var(--rim-light-bottom);
-  border-radius: var(--radius-card);
-  transform-origin: top center;
-}
-.ds-navbar-mega-menu__content--floating[data-state=closed] {
-  transform: translateX(-50%) translateY(-8px) scale(0.995);
-}
-.ds-navbar-mega-menu__content--floating[data-state=open] {
-  transform: translateX(-50%) translateY(0) scale(1);
-}
-.ds-navbar-mega-menu__content--floating::before {
-  display: none;
-}
-.ds-navbar-mega-menu__section {
-  opacity: 0;
-  transform: translateY(8px);
-  filter: blur(4px);
-  transition:
-    opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
-    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
-    filter 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section,
-[data-state=open] > .ds-layout-container > .ds-grid > .ds-navbar-mega-menu__section,
-[data-state=open] > .ds-navbar-mega-menu__section,
-[data-state=open] > .ds-grid > .ds-navbar-mega-menu__section {
-  opacity: 1;
-  transform: translateY(0);
-  filter: blur(0);
-}
-[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(1),
-[data-state=open] > .ds-layout-container > .ds-grid > .ds-navbar-mega-menu__section:nth-child(1),
-[data-state=open] > .ds-navbar-mega-menu__section:nth-child(1),
-[data-state=open] > .ds-grid > .ds-navbar-mega-menu__section:nth-child(1) {
-  transition-delay: 60ms;
-}
-[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(2),
-[data-state=open] > .ds-layout-container > .ds-grid > .ds-navbar-mega-menu__section:nth-child(2),
-[data-state=open] > .ds-navbar-mega-menu__section:nth-child(2),
-[data-state=open] > .ds-grid > .ds-navbar-mega-menu__section:nth-child(2) {
-  transition-delay: 100ms;
-}
-[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(3),
-[data-state=open] > .ds-layout-container > .ds-grid > .ds-navbar-mega-menu__section:nth-child(3),
-[data-state=open] > .ds-navbar-mega-menu__section:nth-child(3),
-[data-state=open] > .ds-grid > .ds-navbar-mega-menu__section:nth-child(3) {
-  transition-delay: 140ms;
-}
-[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(4),
-[data-state=open] > .ds-layout-container > .ds-grid > .ds-navbar-mega-menu__section:nth-child(4),
-[data-state=open] > .ds-navbar-mega-menu__section:nth-child(4),
-[data-state=open] > .ds-grid > .ds-navbar-mega-menu__section:nth-child(4) {
-  transition-delay: 180ms;
-}
-[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(5),
-[data-state=open] > .ds-layout-container > .ds-grid > .ds-navbar-mega-menu__section:nth-child(5),
-[data-state=open] > .ds-navbar-mega-menu__section:nth-child(5),
-[data-state=open] > .ds-grid > .ds-navbar-mega-menu__section:nth-child(5) {
-  transition-delay: 220ms;
-}
-[data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(6),
-[data-state=open] > .ds-layout-container > .ds-grid > .ds-navbar-mega-menu__section:nth-child(6),
-[data-state=open] > .ds-navbar-mega-menu__section:nth-child(6),
-[data-state=open] > .ds-grid > .ds-navbar-mega-menu__section:nth-child(6) {
-  transition-delay: 260ms;
-}
-[data-state=closed] .ds-navbar-mega-menu__section {
-  opacity: 0;
-  transition:
-    opacity 0.1s,
-    transform 0s 0.1s,
-    filter 0s 0.1s;
-}
-.ds-navbar-mega-menu__section-heading {
-  margin-bottom: var(--space-3);
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-bold);
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-wider);
-}
-.ds-navbar-mega-menu__section-items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-.ds-navbar-mega-menu__item-wrapper {
-  opacity: 0;
-  transform: translateY(8px);
-  filter: blur(4px);
-  transition:
-    opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
-    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
-    filter 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-[data-state=open] .ds-navbar-mega-menu__item-wrapper {
-  opacity: 1;
-  transform: translateY(0);
-  filter: blur(0);
-}
-[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(1) {
-  transition-delay: 80ms;
-}
-[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(2) {
-  transition-delay: 120ms;
-}
-[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(3) {
-  transition-delay: 160ms;
-}
-[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(4) {
-  transition-delay: 200ms;
-}
-[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(5) {
-  transition-delay: 240ms;
-}
-[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(6) {
-  transition-delay: 280ms;
-}
-[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(7) {
-  transition-delay: 320ms;
-}
-[data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(8) {
-  transition-delay: 360ms;
-}
-[data-state=closed] .ds-navbar-mega-menu__item-wrapper {
-  opacity: 0;
-  transition:
-    opacity 0.1s,
-    transform 0s 0.1s,
-    filter 0s 0.1s;
-}
-.ds-navbar-mega-menu__item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-3);
-  padding: var(--space-3);
-  border-radius: var(--radius-button);
-  text-decoration: none;
-  cursor: pointer;
-  transition: background var(--transition-fast), box-shadow var(--transition-fast);
-}
-.ds-navbar-mega-menu__item:hover,
-.ds-navbar-mega-menu__item--active {
-  background: var(--glass-base-hover);
-  box-shadow: inset 0 0 0 1px var(--rim-light-bottom);
-}
-.ds-navbar-mega-menu__item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  border-radius: calc(var(--radius-button) - 2px);
-  background: var(--glass-base-active);
-  color: rgba(var(--accent-rgb), 1);
-  transition:
-    background var(--transition-fast),
-    color var(--transition-fast),
-    box-shadow var(--transition-fast);
-}
-.ds-navbar-mega-menu__item:hover .ds-navbar-mega-menu__item-icon,
-.ds-navbar-mega-menu__item--active .ds-navbar-mega-menu__item-icon {
-  background: rgba(var(--accent-rgb), 0.15);
-  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.1);
-}
-.ds-navbar-mega-menu__item-text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-0-5);
-  min-width: 0;
-}
-.ds-navbar-mega-menu__item-label {
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-primary);
-  transition: color var(--transition-fast);
-}
-.ds-navbar-mega-menu__item:hover .ds-navbar-mega-menu__item-label,
-.ds-navbar-mega-menu__item--active .ds-navbar-mega-menu__item-label {
-  color: rgba(var(--accent-rgb), 1);
-}
-.ds-navbar-mega-menu__item-description {
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  color: var(--text-tertiary);
-  line-height: var(--line-height-relaxed);
-}
-:root[data-theme=light] .ds-navbar-mega-menu__content,
-:root[data-theme=light-contrast] .ds-navbar-mega-menu__content {
-  box-shadow: var(--shadow-sm), 0 0 0 1px var(--rim-light-bottom);
-}
-@media (prefers-reduced-motion: reduce) {
-  .ds-navbar-mega-menu__content {
-    transition: none;
-  }
-  .ds-navbar-mega-menu__chevron {
-    transition: none;
-  }
-  .ds-navbar-mega-menu__section {
-    transition: none;
-  }
-  .ds-navbar-mega-menu__item-wrapper {
-    transition: none;
+@media (prefers-contrast: more) {
+  .ds-navbar-v2--scrolled .ds-navbar-v2__container {
+    background: rgba(10, 10, 10, 0.98);
+    backdrop-filter: blur(32px);
   }
 }
 
@@ -1536,6 +967,8 @@
   color: var(--text-tertiary);
   transition: color var(--transition-fast), opacity var(--transition-fast);
   opacity: 0.7;
+  min-width: 44px;
+  min-height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1743,6 +1176,21 @@
     transition: none;
   }
 }
+@media (max-width: 767px) {
+  .ds-footer {
+    overflow-x: hidden;
+  }
+  .ds-footer__link,
+  .ds-footer__legal-link,
+  .ds-footer__socials a,
+  .ds-footer__socials button {
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
 
 /* src/components/LocaleDropdown/LocaleDropdown.css */
 .ds-locale-dropdown {