@brandsync/wc 1.16.0 → 1.18.0

package/dist/collection/components/bs-command-palette/bs-command-palette.css

@@ -0,0 +1,214 @@
+:host {
+  display: contents;
+  --bs-command-palette-width: 640px;
+  --bs-command-palette-top: 12vh;
+  --bs-command-palette-max-height: 60vh;
+  --bs-command-palette-radius: var(--bs-border-radius-150);
+  --bs-command-palette-bg: var(--bs-surface-base);
+  /* Figma "elevation/level 4": 0 8px 16px in --bs-elevation-higher (12% black in light mode, 25% in dark mode). */
+  --bs-command-palette-shadow: 0 var(--bs-shadow-position-100) var(--bs-shadow-blur-200) 0 var(--bs-elevation-higher);
+  --bs-command-palette-overlay: var(--bs-surface-overlay);
+  --bs-command-palette-footer-bg: var(--bs-surface-container);
+  --bs-command-palette-divider-color: var(--bs-border-default);
+  --bs-command-palette-header-border-color: var(--bs-border-neutral-container);
+  --bs-command-palette-header-color: var(--bs-text-muted);
+  --bs-command-palette-hint-color: var(--bs-text-secondary);
+  --bs-command-palette-z-index: var(--bs-z-index-modal);
+}
+
+.bs-command-palette {
+  box-sizing: border-box;
+  width: min(var(--bs-command-palette-width), calc(100vw - 2 * var(--bs-spacing-200)));
+  max-width: none;
+  max-height: none;
+  margin: var(--bs-command-palette-top) auto auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--bs-text-default);
+  overflow: visible;
+  z-index: var(--bs-command-palette-z-index);
+}
+
+.bs-command-palette::backdrop {
+  background: var(--bs-command-palette-overlay, var(--bs-surface-overlay));
+}
+
+.bs-command-palette__panel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: clip;
+  border-radius: var(--bs-command-palette-radius);
+  background: var(--bs-command-palette-bg);
+  box-shadow: var(--bs-command-palette-shadow);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .bs-command-palette[open] .bs-command-palette__panel {
+    animation: bs-command-palette-in 120ms ease-out;
+  }
+}
+
+@keyframes bs-command-palette-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+.bs-command-palette__search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-150);
+}
+
+.bs-command-palette__field {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.bs-command-palette__field bs-input {
+  width: 100%;
+}
+
+.bs-command-palette__scope {
+  flex: none;
+}
+
+/* Figma "Shortcut": right 9px, vertically centred in the 44px field. */
+.bs-command-palette__esc {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--bs-spacing-150) + 9px);
+  transform: translateY(-50%);
+  display: inline-flex;
+  pointer-events: none;
+}
+
+.bs-command-palette__divider {
+  height: 1px;
+  background: var(--bs-command-palette-divider-color);
+}
+
+.bs-command-palette__results {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-100);
+  max-height: var(--bs-command-palette-max-height);
+  overflow-y: auto;
+}
+
+.bs-command-palette__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-command-palette__section {
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-command-palette__section-header {
+  padding: var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);
+  border-bottom: 1px solid var(--bs-command-palette-header-border-color);
+  color: var(--bs-command-palette-header-color);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-command-palette__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-300) var(--bs-spacing-200);
+  color: var(--bs-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-command-palette__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-300) var(--bs-spacing-200);
+  text-align: center;
+}
+
+.bs-command-palette__empty-icon {
+  width: 32px;
+  height: 32px;
+  color: var(--bs-icon-default);
+}
+
+.bs-command-palette__empty-heading {
+  color: var(--bs-text-default);
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: 24px;
+}
+
+.bs-command-palette__empty-description {
+  color: var(--bs-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-command-palette__link {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--bs-border-info);
+  background: none;
+  color: var(--bs-text-link);
+  font: inherit;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.bs-command-palette__link:focus-visible {
+  outline: 2px solid var(--bs-border-info);
+  outline-offset: 2px;
+}
+
+.bs-command-palette__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-200);
+  padding: 10px var(--bs-spacing-200);
+  background: var(--bs-command-palette-footer-bg);
+}
+
+.bs-command-palette__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  color: var(--bs-command-palette-hint-color);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.bs-command-palette__spacer {
+  flex: 1 1 0;
+}
+
+.bs-command-palette__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}