@brandsync/wc 1.15.0 → 1.17.0

package/dist/collection/components/bs-global-search/bs-global-search.css

@@ -0,0 +1,115 @@
+:host {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  width: var(--bs-global-search-width);
+  max-width: 100%;
+  --bs-global-search-width: 480px;
+  --bs-global-search-panel-radius: var(--bs-border-radius-100);
+  --bs-global-search-panel-padding: var(--bs-spacing-100);
+  --bs-global-search-gap: var(--bs-spacing-100);
+  --bs-global-search-panel-bg: var(--bs-surface-base);
+  /* Figma "elevation/level 3": 0 4px 8px in --bs-elevation-high, which is 10% black in light mode and
+     30% black in dark mode, so the shadow strengthens on dark surfaces automatically. */
+  --bs-global-search-shadow: 0 var(--bs-shadow-position-50) var(--bs-shadow-blur-100) 0 var(--bs-elevation-high);
+  /* No dedicated search layer; a dropdown sits at the dropdown layer. */
+  --bs-global-search-z-index: var(--bs-z-index-dropdown);
+  --bs-global-search-divider-color: var(--bs-border-default);
+  --bs-global-search-header-border-color: var(--bs-border-neutral-container);
+  --bs-global-search-header-color: var(--bs-text-muted);
+  --bs-global-search-hint-color: var(--bs-text-secondary);
+}
+
+.bs-global-search {
+  position: relative;
+}
+
+.bs-global-search__field bs-input {
+  width: 100%;
+}
+
+.bs-global-search__panel {
+  position: absolute;
+  top: calc(100% + var(--bs-global-search-gap));
+  left: 0;
+  right: 0;
+  z-index: var(--bs-global-search-z-index);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-global-search-gap);
+  padding: var(--bs-global-search-panel-padding);
+  overflow: clip;
+  border-radius: var(--bs-global-search-panel-radius);
+  background: var(--bs-global-search-panel-bg);
+  box-shadow: var(--bs-global-search-shadow);
+}
+
+.bs-global-search__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-global-search-gap);
+}
+
+.bs-global-search__section {
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-global-search__section-header {
+  padding: var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);
+  border-bottom: 1px solid var(--bs-global-search-header-border-color);
+  color: var(--bs-global-search-header-color);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-global-search__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-200);
+  padding: var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);
+  border-top: 1px solid var(--bs-global-search-divider-color);
+}
+
+.bs-global-search__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  color: var(--bs-global-search-hint-color);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.bs-global-search__spacer {
+  flex: 1 1 0;
+}
+
+/* 44px hit target around a 32px button. */
+.bs-global-search__action {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  cursor: pointer;
+}
+
+.bs-global-search__text-button {
+  --bs-button-height-sm: 32px;
+  --bs-button-padding-x-sm: var(--bs-spacing-150);
+  --bs-button-radius: var(--bs-border-radius-100);
+  --bs-button-subtle-color: var(--bs-text-default);
+}
+
+.bs-global-search__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}