@visitwonders/assembly 0.10.1 → 0.12.0

package/dist/form/multi-combobox.css

@@ -0,0 +1,422 @@
+/* src/form/multi-combobox.css */
+/* ===================================
+ * MultiComboBox Component
+ * Multi-select with chips + typeahead
+ * =================================== */
+
+.multi-combobox_e1a041f66 {
+  display: inline-flex;
+  width: 100%;
+}
+
+/* Visually-hidden aria-live region for screen-reader announcements. */
+.multi-combobox-sr-only_e1a041f66 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ===================================
+ * Trigger wrapper — input-like surface that also holds the chips.
+ * Fixed height so adding chips doesn't resize the trigger (which
+ * would in turn make floating-ui reposition the popover — visible
+ * as a "jumping" dropdown on every pick).
+ * =================================== */
+
+.multi-combobox_e1a041f66 .multi-combobox-trigger_e1a041f66 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--input-height-md);
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg);
+  padding: 0 var(--spacing-1);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.multi-combobox_e1a041f66 .multi-combobox-trigger_e1a041f66:hover:not([data-disabled="true"]) {
+  border-color: var(--color-border-control-hover);
+}
+
+.multi-combobox_e1a041f66 .multi-combobox-trigger_e1a041f66:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* ===================================
+ * Chips row — wraps chips inline with the input.
+ * =================================== */
+
+.multi-combobox-chips_e1a041f66 {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  padding: 0 var(--spacing-1);
+  overflow: hidden;
+}
+
+/* ===================================
+ * Chip
+ * =================================== */
+
+.multi-combobox-chip_e1a041f66 {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 180px;
+  padding: 2px 4px 2px var(--spacing-2);
+  background-color: var(--color-bg-neutral-subtle);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-13);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+}
+
+.multi-combobox-chip-label_e1a041f66 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-combobox-chip-remove_e1a041f66 {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-fast);
+}
+
+.multi-combobox-chip-remove_e1a041f66:hover {
+  color: var(--color-text-critical);
+}
+
+.multi-combobox-more_e1a041f66 {
+  font-size: var(--font-size-13);
+  color: var(--color-text-tertiary);
+  padding: 0 var(--spacing-1);
+  white-space: nowrap;
+}
+
+/* ===================================
+ * Input
+ * =================================== */
+
+.multi-combobox-input_e1a041f66 {
+  flex: 1;
+  min-width: 80px;
+  height: var(--spacing-7);
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  text-overflow: ellipsis;
+}
+
+.multi-combobox-input_e1a041f66,
+.multi-combobox-input_e1a041f66:focus,
+.multi-combobox-input_e1a041f66:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.multi-combobox-input_e1a041f66::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.multi-combobox-input_e1a041f66:disabled {
+  cursor: not-allowed;
+}
+
+/* ===================================
+ * Clear + Chevron
+ * =================================== */
+
+.multi-combobox-clear_e1a041f66,
+.multi-combobox-chevron_e1a041f66 {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0 2px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-fast);
+  align-self: center;
+}
+
+.multi-combobox-clear_e1a041f66:hover,
+.multi-combobox-chevron_e1a041f66:hover:not(:disabled) {
+  color: var(--color-text);
+}
+
+.multi-combobox-chevron_e1a041f66 {
+  margin-right: var(--spacing-1);
+  transition:
+    transform var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.multi-combobox_e1a041f66[data-open="true"] .multi-combobox-chevron_e1a041f66 {
+  transform: rotate(180deg);
+}
+
+.multi-combobox-chevron_e1a041f66:disabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* ===================================
+ * Invalid state
+ * =================================== */
+
+.multi-combobox_e1a041f66[data-invalid="true"] .multi-combobox-trigger_e1a041f66 {
+  border-color: var(--color-border-critical);
+}
+
+.multi-combobox_e1a041f66[data-invalid="true"] .multi-combobox-trigger_e1a041f66:focus-within {
+  border-color: var(--color-border-critical);
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* ===================================
+ * Disabled state
+ * =================================== */
+
+.multi-combobox_e1a041f66[data-disabled="true"] .multi-combobox-trigger_e1a041f66 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+.multi-combobox_e1a041f66[data-disabled="true"] .multi-combobox-input_e1a041f66 {
+  color: var(--color-text-disabled);
+}
+
+/* ===================================
+ * Popover content
+ * =================================== */
+
+.multi-combobox-popover-content_e1a041f66 {
+  min-width: 240px;
+  max-height: min(320px, 40vh);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+  /* Anchor the open-scale animation to the top-left edge (where the
+   * popover meets the trigger with @side="bottom" @align="start"),
+   * so it appears to emerge from the trigger rather than inflate from
+   * its own centre. */
+  transform-origin: top left;
+}
+
+.multi-combobox-listbox_e1a041f66 {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--spacing-2) var(--spacing-1);
+  /* Keep the active row comfortably away from the scroll edges when
+   * keyboard nav brings it into view (scrollIntoView({ block: 'nearest' })). */
+  scroll-padding-block: var(--spacing-2);
+}
+
+/* ===================================
+ * Empty / Loading state
+ * =================================== */
+
+.multi-combobox-empty_e1a041f66,
+.multi-combobox-loading_e1a041f66 {
+  padding: var(--spacing-3);
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-13);
+}
+
+/* ===================================
+ * Groups
+ * =================================== */
+
+.multi-combobox-group_e1a041f66:not(:first-child) {
+  border-top: 1px solid var(--color-border-subtle);
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-1);
+}
+
+.multi-combobox-group-heading_e1a041f66 {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-1);
+  font-size: var(--font-size-11);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ===================================
+ * Create row
+ * =================================== */
+
+.multi-combobox-create_e1a041f66 {
+  border-top: 1px solid var(--color-border-subtle);
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-2);
+  color: var(--color-text-accent);
+  font-weight: var(--font-weight-medium);
+}
+
+.multi-combobox-create-icon_e1a041f66 {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: var(--font-size-md);
+  line-height: 1;
+}
+
+/* ===================================
+ * Options
+ * =================================== */
+
+.multi-combobox-option_e1a041f66 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-13);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--transition-fast);
+}
+
+/* When a description is present, the content block becomes two-line;
+ * switch alignment so the checkbox aligns with the first line (label),
+ * not the visual centre between the two lines. */
+.multi-combobox-option_e1a041f66:has(.multi-combobox-option-description_e1a041f66) {
+  align-items: flex-start;
+}
+
+.multi-combobox-option_e1a041f66:hover:not([data-disabled="true"]) {
+  background-color: var(--color-bg-neutral-subtle);
+}
+
+.multi-combobox-option_e1a041f66[data-active="true"]:not([data-disabled="true"]) {
+  background-color: var(--color-bg-neutral-subtle);
+}
+
+.multi-combobox-option_e1a041f66[data-disabled="true"] {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.multi-combobox-option-content_e1a041f66 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.multi-combobox-option-label_e1a041f66 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-combobox-option-description_e1a041f66 {
+  display: block;
+  font-size: var(--font-size-11);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ===================================
+ * Match highlight
+ * =================================== */
+
+.multi-combobox-mark_e1a041f66 {
+  background: transparent;
+  color: inherit;
+  font-weight: var(--font-weight-bold);
+  padding: 0;
+}
+
+/* ===================================
+ * Checkbox indicator (trailing, Stripe-style)
+ * =================================== */
+
+.multi-combobox-checkbox_e1a041f66 {
+  flex-shrink: 0;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-surface);
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast);
+}
+
+/* Align with the first line of content when a description pushes the
+ * option to two lines. Without this it would center between lines. */
+.multi-combobox-option_e1a041f66:has(.multi-combobox-option-description_e1a041f66)
+  .multi-combobox-checkbox_e1a041f66 {
+  margin-top: 2px;
+}
+
+.multi-combobox-checkbox_e1a041f66[data-checked="true"] {
+  background-color: var(--color-bg-fill-accent);
+  border-color: var(--color-bg-fill-accent);
+}
+
+.multi-combobox-checkbox_e1a041f66[data-checked="true"]::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 1px;
+  width: 4px;
+  height: 9px;
+  border: solid var(--color-text-on-accent);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}