maquina-components 0.5.1 → 0.6.0

data/app/assets/stylesheets/combobox.css

@@ -16,238 +16,255 @@
  *       - label (section heading)
  *       - separator (divider)
  *     - empty (no results message)
+ *
+ * Cascade order in this file (full contract documented in form.css):
+ *   1. base      [data-component="combobox"], [data-combobox-part="…"]
+ *   2. sizes     [data-combobox-part="content"]:where([data-width="…"])
+ *   3. variants  :where([data-align="…"], [data-has-value="false"])
+ *   4. states    […]:where(:hover, :focus, [data-selected], [aria-disabled], [hidden])
+ *   5. dark      — none; dark-mode differences are tokens (see tokens.css)
+ * Every rule is flattened to 0,1,0 with :where() and lives in
+ * @layer components, so a caller's utility class wins and source order is
+ * the only tie-breaker. (Rules whose target is a bare element read 0,1,1 — an
+ * element selector cannot be zeroed away.) @keyframes sit outside the layer:
+ * they take no part in the cascade.
+ *
+ * The trigger carries data-component="button" (it is where the trigger's
+ * justify-content and min-width have to beat the button base), so this file
+ * must be imported after form.css. See engine.css.
  */
 
-/* ===== Root Container ===== */
-[data-component="combobox"] {
-  position: relative;
-  display: inline-block;
-}
-
-/* ===== Trigger Button ===== */
-/* Trigger uses button component styles via data-component="button" */
-[data-combobox-part="trigger"] {
-  @apply justify-between gap-2;
-  min-width: 200px;
-}
-
-[data-combobox-part="trigger"] [data-combobox-target="label"] {
-  @apply truncate text-left flex-1;
-}
-
-/* Placeholder state */
-[data-combobox-part="trigger"][data-has-value="false"] [data-combobox-target="label"] {
-  color: var(--muted-foreground);
-}
-
-/* Icon styling */
-[data-combobox-part="trigger"] > svg {
-  @apply size-4 shrink-0 opacity-50;
-}
-
-/* ===== Content (Popover) ===== */
-[data-combobox-part="content"] {
-  background-color: var(--popover, var(--background));
-  color: var(--popover-foreground, var(--foreground));
-  border-color: var(--border);
-  @apply rounded-md border p-0 shadow-md outline-none;
-  @apply min-w-[200px];
-
-  /* Reset popover defaults - positioning below (anchor CSS) or in JS fallback */
-  margin: 0;
-  padding: 0;
-  inset: unset;
-}
+@layer components {
+  /* ===== Root Container ===== */
+  [data-component="combobox"] {
+    position: relative;
+    display: inline-block;
+  }
 
-/* ===== Anchor Positioning (modern browsers) ===== */
-/* Places the top-layer popover declaratively; combobox_controller skips its
-   measured fallback when these features are supported. flip-block flips the
-   popover above the trigger when there is no room below — something the JS
-   fallback never did. */
-@supports (anchor-name: --a) and (position-area: block-end) {
+  /* ===== Trigger Button ===== */
+  /* Trigger uses button component styles via data-component="button" */
   [data-combobox-part="trigger"] {
-    anchor-name: --maquina-combobox;
+    @apply justify-between gap-2;
+    min-width: 200px;
   }
 
-  [data-combobox-part="content"] {
-    position: fixed;
-    position-anchor: --maquina-combobox;
-    margin-block-start: 4px;
-    position-try-fallbacks: flip-block;
+  :where([data-combobox-part="trigger"]) [data-combobox-target="label"] {
+    @apply truncate text-left flex-1;
   }
 
-  [data-combobox-part="content"][data-align="start"] {
-    position-area: block-end span-inline-end;
+  /* Icon styling */
+  :where([data-combobox-part="trigger"]) > svg {
+    @apply size-4 shrink-0 opacity-50;
   }
 
-  [data-combobox-part="content"][data-align="center"] {
-    position-area: block-end;
+  /* Placeholder state */
+  :where([data-combobox-part="trigger"][data-has-value="false"]) [data-combobox-target="label"] {
+    color: var(--muted-foreground);
   }
 
-  [data-combobox-part="content"][data-align="end"] {
-    position-area: block-end span-inline-start;
+  /* ===== Content (Popover) ===== */
+  [data-combobox-part="content"] {
+    background-color: var(--popover, var(--background));
+    color: var(--popover-foreground, var(--foreground));
+    border-color: var(--border);
+    @apply border p-0 outline-none;
+    border-radius: var(--combobox-radius, var(--surface-radius, 0.5rem));
+    box-shadow: var(--combobox-shadow, var(--elevation-overlay, var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))));
+    @apply min-w-[200px];
+
+    /* Reset popover defaults - positioning below (anchor CSS) or in JS fallback */
+    margin: 0;
+    padding: 0;
+    inset: unset;
   }
 
-  [data-combobox-part="content"][data-width="default"] {
-    width: auto;
-    min-width: max(200px, anchor-size(inline));
+  /* ===== Anchor Positioning (modern browsers) ===== */
+  /* Places the top-layer popover declaratively; combobox_controller skips its
+     measured fallback when these features are supported. flip-block flips the
+     popover above the trigger when there is no room below — something the JS
+     fallback never did. */
+  @supports (anchor-name: --a) and (position-area: block-end) {
+    [data-combobox-part="trigger"] {
+      anchor-name: --maquina-combobox;
+    }
+
+    [data-combobox-part="content"] {
+      position: fixed;
+      position-anchor: --maquina-combobox;
+      margin-block-start: 4px;
+      position-try-fallbacks: flip-block;
+    }
+
+    [data-combobox-part="content"]:where([data-align="start"]) {
+      position-area: block-end span-inline-end;
+    }
+
+    [data-combobox-part="content"]:where([data-align="center"]) {
+      position-area: block-end;
+    }
+
+    [data-combobox-part="content"]:where([data-align="end"]) {
+      position-area: block-end span-inline-start;
+    }
+
+    [data-combobox-part="content"]:where([data-width="default"]) {
+      width: auto;
+      min-width: max(200px, anchor-size(inline));
+    }
   }
-}
-
-/* Width variants */
-[data-combobox-part="content"][data-width="sm"] {
-  @apply w-40;
-}
 
-[data-combobox-part="content"][data-width="default"] {
-  @apply w-[200px];
-}
+  /* Width variants */
+  [data-combobox-part="content"]:where([data-width="sm"]) {
+    @apply w-40;
+  }
 
-[data-combobox-part="content"][data-width="md"] {
-  @apply w-56;
-}
+  [data-combobox-part="content"]:where([data-width="default"]) {
+    @apply w-[200px];
+  }
 
-[data-combobox-part="content"][data-width="lg"] {
-  @apply w-72;
-}
+  [data-combobox-part="content"]:where([data-width="md"]) {
+    @apply w-56;
+  }
 
-[data-combobox-part="content"][data-width="full"] {
-  @apply w-full;
-}
+  [data-combobox-part="content"]:where([data-width="lg"]) {
+    @apply w-72;
+  }
 
-/* Alignment is handled by JavaScript for proper popover positioning */
+  [data-combobox-part="content"]:where([data-width="full"]) {
+    @apply w-full;
+  }
 
-/* Animation */
-[data-combobox-part="content"]:popover-open {
-  animation: combobox-in 150ms ease-out;
-}
+  /* Animation */
+  [data-combobox-part="content"]:where(:popover-open) {
+    animation: combobox-in 150ms ease-out;
+  }
 
-@keyframes combobox-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
+  /* ===== Search Input ===== */
+  [data-combobox-part="input-wrapper"] {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border);
+    @apply px-3 gap-2;
   }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
+
+  :where([data-combobox-part="input-wrapper"]) > svg {
+    @apply size-4 shrink-0 opacity-50;
   }
-}
 
-/* ===== Search Input ===== */
-[data-combobox-part="input-wrapper"] {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--border);
-  @apply px-3 gap-2;
-}
+  [data-combobox-part="input"] {
+    background-color: transparent;
+    color: var(--foreground);
+    @apply flex h-10 w-full py-3 text-sm outline-none;
+    @apply placeholder:text-muted-foreground;
+    @apply disabled:cursor-not-allowed disabled:opacity-50;
+  }
 
-[data-combobox-part="input-wrapper"] > svg {
-  @apply size-4 shrink-0 opacity-50;
-}
+  /* ===== Options List ===== */
+  [data-combobox-part="list"] {
+    @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
+  }
 
-[data-combobox-part="input"] {
-  background-color: transparent;
-  color: var(--foreground);
-  @apply flex h-10 w-full py-3 text-sm outline-none;
-  @apply placeholder:text-muted-foreground;
-  @apply disabled:cursor-not-allowed disabled:opacity-50;
-}
+  /* ===== Option Item ===== */
+  [data-combobox-part="option"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: default;
+    user-select: none;
+    color: var(--popover-foreground, var(--foreground));
+    @apply gap-2 py-1.5 text-sm outline-none transition-colors;
+    border-radius: var(--combobox-item-radius, var(--control-radius, 0.375rem));
+    @apply pl-8 pr-2; /* Space for check icon on left */
+  }
 
-/* ===== Options List ===== */
-[data-combobox-part="list"] {
-  @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
-}
+  /* ----- Option states ----- */
 
-/* ===== Option Item ===== */
-[data-combobox-part="option"] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: default;
-  user-select: none;
-  color: var(--popover-foreground, var(--foreground));
-  @apply gap-2 rounded-sm py-1.5 text-sm outline-none transition-colors;
-  @apply pl-8 pr-2; /* Space for check icon on left */
-}
+  /* Hover state */
+  [data-combobox-part="option"]:where(:hover:not([aria-disabled="true"])) {
+    background-color: var(--accent-hover, var(--accent));
+    color: var(--accent-foreground);
+    cursor: pointer;
+  }
 
-/* Hover state */
-[data-combobox-part="option"]:hover:not([aria-disabled="true"]) {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-  cursor: pointer;
-}
+  /* Focus state (keyboard navigation) */
+  [data-combobox-part="option"]:where(:focus) {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
 
-/* Focus state (keyboard navigation) */
-[data-combobox-part="option"]:focus {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
+  /* Selected state */
+  [data-combobox-part="option"]:where([data-selected="true"]) {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
 
-/* Selected state */
-[data-combobox-part="option"][data-selected="true"] {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
+  /* Disabled state */
+  [data-combobox-part="option"]:where([aria-disabled="true"]) {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  }
 
-/* Disabled state */
-[data-combobox-part="option"][aria-disabled="true"] {
-  @apply opacity-50 cursor-not-allowed pointer-events-none;
-}
+  /* Hidden state (filtered out) */
+  [data-combobox-part="option"]:where([hidden]) {
+    display: none;
+  }
 
-/* Hidden state (filtered out) */
-[data-combobox-part="option"][hidden] {
-  display: none;
-}
+  /* Check indicator */
+  [data-combobox-part="check"] {
+    position: absolute;
+    left: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @apply size-4;
+  }
 
-/* Check indicator */
-[data-combobox-part="check"] {
-  position: absolute;
-  left: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  @apply size-4;
-}
+  [data-combobox-part="check"] svg {
+    @apply size-4;
+  }
 
-[data-combobox-part="check"].invisible {
-  visibility: hidden;
-}
+  [data-combobox-part="check"]:where(.invisible) {
+    visibility: hidden;
+  }
 
-[data-combobox-part="check"] svg {
-  @apply size-4;
-}
+  /* ===== Empty State ===== */
+  [data-combobox-part="empty"] {
+    @apply py-6 text-center text-sm;
+    color: var(--muted-foreground);
+  }
 
-/* ===== Empty State ===== */
-[data-combobox-part="empty"] {
-  @apply py-6 text-center text-sm;
-  color: var(--muted-foreground);
-}
+  [data-combobox-part="empty"]:where([hidden]) {
+    display: none;
+  }
 
-[data-combobox-part="empty"][hidden] {
-  display: none;
-}
+  /* ===== Group ===== */
+  [data-combobox-part="group"] {
+    display: flex;
+    flex-direction: column;
+  }
 
-/* ===== Group ===== */
-[data-combobox-part="group"] {
-  display: flex;
-  flex-direction: column;
-}
+  /* ===== Label ===== */
+  [data-combobox-part="label"] {
+    @apply px-2 py-1.5 text-xs;
+    font-weight: var(--label-weight, 500);
+    color: var(--muted-foreground);
+  }
 
-/* ===== Label ===== */
-[data-combobox-part="label"] {
-  @apply px-2 py-1.5 text-xs font-medium;
-  color: var(--muted-foreground);
+  /* ===== Separator ===== */
+  [data-combobox-part="separator"] {
+    @apply -mx-1 my-1 h-px;
+    background-color: var(--border);
+  }
 }
 
-/* ===== Separator ===== */
-[data-combobox-part="separator"] {
-  @apply -mx-1 my-1 h-px;
-  background-color: var(--border);
+/* ===== Keyframes ===== */
+/* Outside the layer: @keyframes are not cascade participants. */
+@keyframes combobox-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
-
-/* ===== Dark Mode ===== */
-/*
- * Dark mode is handled automatically through CSS variables.
- * The theme variables change based on the .dark class on html/body.
- * No additional dark mode styles needed here.
- */