@salesmind-ai/design-system 0.2.0 → 0.3.0

package/dist/core/index.css

@@ -1359,6 +1359,300 @@
   }
 }
 
+/* src/components/Select/Select.css */
+.ds-select__trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: none;
+  border-radius: var(--radius-button);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  background: var(--glass-base-active);
+  backdrop-filter: blur(20px) saturate(140%);
+  -webkit-backdrop-filter: blur(20px) saturate(140%);
+  box-shadow: var(--shadow-md), var(--shadow-inset-border-subtle);
+  transition:
+    background var(--transition-glass),
+    box-shadow var(--transition-glass),
+    color var(--transition-fast);
+}
+.ds-select__trigger[data-placeholder] {
+  color: var(--text-tertiary);
+}
+.ds-select__trigger:hover:not(:disabled) {
+  background: var(--glass-base-hover);
+}
+.ds-select__trigger-wrapper:hover:not(:has(:disabled)):not(:has([data-popup-open]))::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--rim-light-hover-top) 0%,
+      var(--rim-light-hover-bottom) 100%);
+}
+.ds-select__trigger:focus-visible {
+  background: var(--glass-base-hover);
+  box-shadow:
+    var(--shadow-md),
+    var(--glass-shadow-inner),
+    0 0 0 2px rgba(var(--accent-rgb), 0.2);
+}
+.ds-select__trigger[data-popup-open] {
+  background: var(--glass-base-hover);
+  box-shadow:
+    var(--shadow-lg),
+    var(--glass-shadow-inner),
+    0 0 0 2px rgba(var(--accent-rgb), 0.3);
+}
+.ds-select__trigger:focus:not(:focus-visible):not([data-popup-open]) {
+  box-shadow: var(--shadow-md), var(--shadow-inset-border-subtle);
+}
+.ds-select__trigger-wrapper:has(:focus-visible)::before {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(var(--accent-rgb), 0.25) 0%,
+      rgba(var(--accent-rgb), 0.05) 100%);
+}
+.ds-select__trigger-wrapper:has([data-popup-open])::before {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(var(--accent-rgb), 0.4) 0%,
+      rgba(var(--accent-rgb), 0.1) 100%);
+}
+.ds-select__trigger:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.ds-select__trigger-wrapper {
+  position: relative;
+  width: 100%;
+}
+.ds-select__trigger-wrapper::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-button);
+  padding: var(--space-px);
+  background:
+    linear-gradient(
+      180deg,
+      var(--rim-light-top) 0%,
+      var(--rim-light-bottom) 100%);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+  z-index: 1;
+  transition: background var(--transition-glass);
+}
+.ds-select__trigger--sm {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--font-size-xs);
+}
+.ds-select__trigger--lg {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-base);
+}
+.ds-select__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+.ds-select__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--text-tertiary);
+  transition: transform var(--transition-base);
+}
+.ds-select__trigger[data-popup-open] .ds-select__icon {
+  transform: rotate(180deg);
+  color: var(--text-secondary);
+}
+.ds-select__content {
+  min-width: var(--anchor-width, 180px);
+  max-height: 300px;
+  overflow-y: auto;
+  padding: var(--space-1);
+  border-radius: var(--radius-button);
+  outline: none;
+  background: var(--glass-base-active);
+  backdrop-filter: var(--glass-backdrop-heavy);
+  -webkit-backdrop-filter: var(--glass-backdrop-heavy);
+  border: 1px solid var(--rim-light-bottom);
+  box-shadow: var(--glass-shadow-elevated);
+  transform-origin: var(--transform-origin);
+  z-index: var(--z-dropdown);
+}
+.ds-select__content[data-open] {
+  animation: ds-select-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ds-select__content[data-closed] {
+  animation: ds-select-scale-out 150ms ease-in forwards;
+}
+.ds-select__content[data-starting-style] {
+  opacity: 0;
+  transform: scale(0.96) translateY(-4px);
+}
+.ds-select__content[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96) translateY(-4px);
+}
+@keyframes ds-select-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes ds-select-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+  }
+}
+.ds-select__list {
+  display: flex;
+  flex-direction: column;
+}
+.ds-select__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  border-radius: calc(var(--radius-button) - 4px);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.ds-select__item[data-highlighted] {
+  background: var(--glass-base-hover);
+  color: var(--text-primary);
+}
+.ds-select__item[data-selected] {
+  color: rgba(var(--accent-rgb), 1);
+}
+.ds-select__item[data-selected][data-highlighted] {
+  background: var(--glass-base-hover);
+  color: rgba(var(--accent-rgb), 1);
+}
+.ds-select__item[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  color: var(--text-disabled);
+}
+.ds-select__item-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: rgba(var(--accent-rgb), 1);
+}
+.ds-select__item:not([data-selected]) .ds-select__item-indicator {
+  visibility: hidden;
+}
+.ds-select__group {
+  padding: var(--space-1) 0;
+}
+.ds-select__group-label {
+  padding: var(--space-2) 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-wide);
+}
+.ds-select__separator {
+  height: 1px;
+  background: var(--rim-light-bottom);
+  margin: var(--space-1) 0;
+}
+.ds-select__content::-webkit-scrollbar {
+  width: 6px;
+}
+.ds-select__content::-webkit-scrollbar-track {
+  background: transparent;
+}
+.ds-select__content::-webkit-scrollbar-thumb {
+  background: var(--rim-light-bottom);
+  border-radius: 9999px;
+}
+.ds-select__content::-webkit-scrollbar-thumb:hover {
+  background: var(--surface-alpha-3);
+}
+@media (prefers-contrast: more) {
+  .ds-select__trigger {
+    background: var(--hc-surface-input);
+    border: 1px solid var(--hc-border);
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+  .ds-select__trigger-wrapper::before {
+    display: none;
+  }
+  .ds-select__trigger:focus-visible,
+  .ds-select__trigger[data-popup-open] {
+    border-color: rgba(var(--accent-rgb), 1);
+    box-shadow: none;
+  }
+  .ds-select__content {
+    background: var(--hc-surface);
+    border: 1px solid var(--hc-border);
+    backdrop-filter: none;
+  }
+  .ds-select__item[data-highlighted] {
+    background: var(--hc-highlight);
+    color: var(--hc-text);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-select__content[data-open] {
+    animation: none;
+  }
+  .ds-select__content[data-closed] {
+    animation: none;
+  }
+  .ds-select__icon {
+    transition: none;
+  }
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .ds-select__trigger {
+    background: var(--fallback-surface);
+  }
+  .ds-select__content {
+    background: var(--fallback-surface);
+  }
+}
+
 /* src/components/Dialog/Dialog.css */
 .ds-dialog__backdrop {
   position: fixed;
@@ -1972,8 +2266,9 @@
 .ds-dropdown-menu__content {
   min-width: 220px;
   padding: var(--space-1);
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
+  background: var(--glass-base-active);
+  backdrop-filter: var(--glass-backdrop-heavy);
+  -webkit-backdrop-filter: var(--glass-backdrop-heavy);
   border-radius: var(--radius-button);
   border: 1px solid var(--rim-light-bottom);
   box-shadow: var(--glass-shadow-elevated);