@visitwonders/assembly 0.1.0

package/dist/form/multi-select.css

@@ -0,0 +1,343 @@
+/* src/form/multi-select.css */
+/* ============================================================================
+   MultiSelect Component Styles
+   ============================================================================ */
+
+.multi-select_ed2d11911 {
+  display: inline-flex;
+  width: 100%;
+}
+
+/* ============================================================================
+   Trigger Wrapper
+   ============================================================================ */
+
+.multi-select_ed2d11911 .multi-select-trigger-wrapper_ed2d11911 {
+  display: flex;
+  width: 100%;
+}
+
+.multi-select_ed2d11911 .multi-select-trigger_ed2d11911 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  height: var(--input-height-md);
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-1) var(--spacing-2);
+  background-color: var(--color-bg);
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.multi-select_ed2d11911 .multi-select-trigger_ed2d11911:hover:not([aria-disabled="true"]) {
+  border-color: var(--color-border-control-hover);
+}
+
+.multi-select_ed2d11911 .multi-select-trigger_ed2d11911:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* ============================================================================
+   Invalid State
+   ============================================================================ */
+
+.multi-select_ed2d11911[data-invalid="true"] .multi-select-trigger_ed2d11911 {
+  border-color: var(--color-border-critical);
+}
+
+.multi-select_ed2d11911[data-invalid="true"] .multi-select-trigger_ed2d11911:focus-within {
+  border-color: var(--color-border-critical);
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* ============================================================================
+   Disabled State
+   ============================================================================ */
+
+.multi-select_ed2d11911[data-disabled="true"] .multi-select-trigger_ed2d11911 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+.multi-select_ed2d11911[data-disabled="true"] .multi-select-input_ed2d11911 {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.multi-select_ed2d11911[data-disabled="true"] .multi-select-chevron_ed2d11911 {
+  color: var(--color-text-disabled);
+}
+
+/* ============================================================================
+   Chips
+   ============================================================================ */
+
+.multi-select-chips_ed2d11911 {
+  display: flex;
+  gap: var(--spacing-1);
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.multi-select-more_ed2d11911 {
+  flex-shrink: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  padding: 0 var(--spacing-1);
+  white-space: nowrap;
+}
+
+/* Chip styling - prevent shrinking and add max-width */
+.multi-select-chips_ed2d11911 [data-test-tag] {
+  flex-shrink: 0;
+  max-width: 150px;
+}
+
+.multi-select-chips_ed2d11911 [data-test-tag] [data-test-tag-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ============================================================================
+   Search Input
+   ============================================================================ */
+
+.multi-select-input_ed2d11911 {
+  flex: 1;
+  min-width: 80px;
+  height: calc(var(--input-height-md) - var(--spacing-2) - var(--spacing-2));
+  border: none;
+  padding: 0 var(--spacing-1);
+  font-family: inherit;
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  background-color: transparent;
+  outline: none;
+  cursor: text;
+}
+
+.multi-select-input_ed2d11911:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.multi-select-input_ed2d11911::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.multi-select-input_ed2d11911:disabled {
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   Icons
+   ============================================================================ */
+
+.multi-select-icons_ed2d11911 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex-shrink: 0;
+  margin-left: auto;
+  padding-left: var(--spacing-1);
+}
+
+.multi-select-clear_ed2d11911 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 0;
+  background-color: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+}
+
+.multi-select-clear_ed2d11911:hover {
+  background-color: var(--color-bg-neutral-subtle);
+  color: var(--color-text);
+}
+
+.multi-select-clear_ed2d11911:focus {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.multi-select-chevron_ed2d11911 {
+  color: var(--color-text-tertiary);
+  transition: transform var(--transition-fast);
+}
+
+/* Rotate chevron when open */
+.multi-select_ed2d11911[data-open="true"] .multi-select-chevron_ed2d11911 {
+  transform: rotate(180deg);
+}
+
+/* ============================================================================
+   Popover Content
+   ============================================================================ */
+
+.multi-select-popover-content_ed2d11911 {
+  min-width: 200px;
+  max-height: 300px;
+  padding: var(--spacing-1);
+  overflow: hidden;
+}
+
+.multi-select-listbox_ed2d11911 {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+/* ============================================================================
+   Options
+   ============================================================================ */
+
+.multi-select-option_ed2d11911 {
+  display: flex;
+  align-items: center;
+  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-1-25);
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--transition-fast);
+}
+
+.multi-select-option_ed2d11911:hover:not([data-disabled="true"]) {
+  background-color: var(--color-bg-neutral-subtle);
+}
+
+.multi-select-option_ed2d11911[data-focused="true"]:not([data-disabled="true"]) {
+  background-color: var(--color-bg-neutral-subtle);
+}
+
+.multi-select-option_ed2d11911[data-disabled="true"] {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.multi-select-option-label_ed2d11911 {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ============================================================================
+   Checkbox Indicator
+   ============================================================================ */
+
+.multi-select-checkbox_ed2d11911 {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-surface);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.multi-select-option_ed2d11911:hover:not([data-disabled="true"]) .multi-select-checkbox_ed2d11911 {
+  border-color: var(--color-border-control-hover);
+}
+
+.multi-select-option_ed2d11911[data-selected="true"] .multi-select-checkbox_ed2d11911 {
+  background-color: var(--color-bg-fill-accent);
+  border-color: var(--color-bg-fill-accent);
+}
+
+.multi-select-option_ed2d11911[data-selected="true"]:hover:not([data-disabled="true"])
+  .multi-select-checkbox_ed2d11911 {
+  background-color: var(--color-bg-fill-accent-hover);
+  border-color: var(--color-bg-fill-accent-hover);
+}
+
+/* Checkmark for selected state */
+.multi-select-option_ed2d11911[data-selected="true"] .multi-select-checkbox_ed2d11911::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-text-on-accent);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-size: 80%;
+  mask-position: center;
+  mask-repeat: no-repeat;
+}
+
+.multi-select-option_ed2d11911[data-disabled="true"] .multi-select-checkbox_ed2d11911 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+.multi-select-option_ed2d11911[data-disabled="true"][data-selected="true"]
+  .multi-select-checkbox_ed2d11911 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+}
+
+.multi-select-option_ed2d11911[data-disabled="true"][data-selected="true"]
+  .multi-select-checkbox_ed2d11911::after {
+  background-color: var(--color-text-disabled);
+}
+
+/* ============================================================================
+   Option Groups
+   ============================================================================ */
+
+.multi-select-group_ed2d11911 {
+  display: flex;
+  flex-direction: column;
+}
+
+.multi-select-group_ed2d11911 + .multi-select-group_ed2d11911 {
+  border-top: 1px solid var(--color-border-subtle);
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-1);
+}
+
+.multi-select-group-label_ed2d11911 {
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-2);
+  font-size: var(--font-size-11);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  user-select: none;
+}
+
+/* ============================================================================
+   Empty State
+   ============================================================================ */
+
+.multi-select-empty_ed2d11911 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4) var(--spacing-3);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+}