maquina-components 0.5.1 → 0.6.0

data/app/assets/stylesheets/dropdown_menu.css

@@ -13,236 +13,249 @@
  *     - item (clickable action)
  *     - separator (divider)
  *     - shortcut (keyboard hint)
+ *
+ * Cascade order in this file (full contract documented in form.css):
+ *   1. base      [data-component="dropdown-menu"], [data-dropdown-menu-part="…"]
+ *   2. sizes     [data-dropdown-menu-part="content"]:where([data-width="…"])
+ *   3. variants  [data-dropdown-menu-part="item"]:where([data-variant="…"]),
+ *                content :where([data-align="…"], [data-side="…"])
+ *   4. states    […]:where(:hover, :focus, [disabled], [data-state="…"])
+ *   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", so this file must be imported
+ * after form.css. See engine.css.
  */
 
-/* ===== Root Container ===== */
-[data-component="dropdown-menu"] {
-  position: relative;
-  display: inline-block;
-}
-
-/* ===== Trigger Button ===== */
-/* Trigger uses button component styles via data-component="button" */
-/* Additional dropdown-specific styles */
-[data-component="dropdown-menu"] [data-dropdown-menu-target="trigger"] {
-  @apply gap-2;
-}
-
-/* Chevron icon rotation when open */
-[data-component="dropdown-menu"] [data-dropdown-menu-target="chevron"] {
-  @apply size-4 shrink-0 opacity-50 transition-transform duration-200;
-}
-
-[data-component="dropdown-menu"][data-state="open"] [data-dropdown-menu-target="chevron"] {
-  transform: rotate(180deg);
-}
-
-/* ===== Content Container ===== */
-[data-dropdown-menu-part="content"] {
-  position: absolute;
-  z-index: 50;
-  display: none;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: var(--popover, var(--background));
-  color: var(--popover-foreground, var(--foreground));
-  @apply min-w-[8rem] rounded-md border p-1 shadow-md;
-  border-color: var(--border);
-
-  /* Animation setup */
-  @apply transition-all duration-150 ease-out;
-}
+@layer components {
+  /* ===== Root Container ===== */
+  [data-component="dropdown-menu"] {
+    position: relative;
+    display: inline-block;
+  }
 
-/* Visible state */
-[data-dropdown-menu-part="content"][data-state="open"] {
-  display: flex;
-}
+  /* ===== Trigger Button ===== */
+  /* Trigger uses button component styles via data-component="button" */
+  /* Additional dropdown-specific styles */
+  :where([data-component="dropdown-menu"]) [data-dropdown-menu-target="trigger"] {
+    @apply gap-2;
+  }
 
-/* Animation states */
-[data-dropdown-menu-part="content"][data-state="open"] {
-  animation: dropdown-menu-in 150ms ease-out;
-}
+  /* Chevron icon rotation when open */
+  :where([data-component="dropdown-menu"]) [data-dropdown-menu-target="chevron"] {
+    @apply size-4 shrink-0 opacity-50 transition-transform duration-200;
+  }
 
-[data-dropdown-menu-part="content"][data-state="closing"] {
-  display: flex;
-  animation: dropdown-menu-out 100ms ease-in forwards;
-}
+  :where([data-component="dropdown-menu"][data-state="open"]) [data-dropdown-menu-target="chevron"] {
+    transform: rotate(180deg);
+  }
 
-@keyframes dropdown-menu-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
+  /* ===== Content Container ===== */
+  [data-dropdown-menu-part="content"] {
+    position: absolute;
+    z-index: 50;
+    display: none;
+    flex-direction: column;
+    overflow: hidden;
+    background-color: var(--popover, var(--background));
+    color: var(--popover-foreground, var(--foreground));
+    @apply min-w-[8rem] border p-1;
+    border-radius: var(--dropdown-menu-radius, var(--surface-radius, 0.5rem));
+    box-shadow: var(--dropdown-menu-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))));
+    border-color: var(--border);
+
+    /* Animation setup */
+    @apply transition-all duration-150 ease-out;
   }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
+
+  /* ===== Width Variants ===== */
+  [data-dropdown-menu-part="content"]:where([data-width="default"]) {
+    @apply min-w-[8rem];
   }
-}
 
-@keyframes dropdown-menu-out {
-  from {
-    opacity: 1;
-    transform: scale(1) translateY(0);
+  [data-dropdown-menu-part="content"]:where([data-width="sm"]) {
+    @apply w-40;
   }
-  to {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
+
+  [data-dropdown-menu-part="content"]:where([data-width="md"]) {
+    @apply w-56;
   }
-}
 
-/* ===== Width Variants ===== */
-[data-dropdown-menu-part="content"][data-width="default"] {
-  @apply min-w-[8rem];
-}
+  [data-dropdown-menu-part="content"]:where([data-width="lg"]) {
+    @apply w-72;
+  }
 
-[data-dropdown-menu-part="content"][data-width="sm"] {
-  @apply w-40;
-}
+  /* ===== Alignment ===== */
+  [data-dropdown-menu-part="content"]:where([data-align="start"]) {
+    left: 0;
+  }
 
-[data-dropdown-menu-part="content"][data-width="md"] {
-  @apply w-56;
-}
+  [data-dropdown-menu-part="content"]:where([data-align="center"]) {
+    left: 50%;
+    transform: translateX(-50%);
+  }
 
-[data-dropdown-menu-part="content"][data-width="lg"] {
-  @apply w-72;
-}
+  [data-dropdown-menu-part="content"]:where([data-align="end"]) {
+    right: 0;
+  }
 
-/* ===== Alignment ===== */
-[data-dropdown-menu-part="content"][data-align="start"] {
-  left: 0;
-}
+  /* ===== Side Positioning ===== */
+  [data-dropdown-menu-part="content"]:where([data-side="bottom"]) {
+    top: 100%;
+    @apply mt-1;
+  }
 
-[data-dropdown-menu-part="content"][data-align="center"] {
-  left: 50%;
-  transform: translateX(-50%);
-}
+  [data-dropdown-menu-part="content"]:where([data-side="top"]) {
+    bottom: 100%;
+    @apply mb-1;
+  }
 
-[data-dropdown-menu-part="content"][data-align="center"][data-state="open"] {
-  animation: dropdown-menu-in-center 150ms ease-out;
-}
+  [data-dropdown-menu-part="content"]:where([data-side="left"]) {
+    right: 100%;
+    top: 0;
+    @apply mr-1;
+  }
 
-@keyframes dropdown-menu-in-center {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95) translateY(-4px);
+  [data-dropdown-menu-part="content"]:where([data-side="right"]) {
+    left: 100%;
+    top: 0;
+    @apply ml-1;
   }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) scale(1) translateY(0);
+
+  /* ===== Content States (open / closing) ===== */
+  [data-dropdown-menu-part="content"]:where([data-state="open"]) {
+    display: flex;
+    animation: dropdown-menu-in 150ms ease-out;
   }
-}
 
-[data-dropdown-menu-part="content"][data-align="end"] {
-  right: 0;
-}
+  [data-dropdown-menu-part="content"]:where([data-align="center"][data-state="open"]) {
+    animation: dropdown-menu-in-center 150ms ease-out;
+  }
 
-/* ===== Side Positioning ===== */
-[data-dropdown-menu-part="content"][data-side="bottom"] {
-  top: 100%;
-  @apply mt-1;
-}
+  [data-dropdown-menu-part="content"]:where([data-state="closing"]) {
+    display: flex;
+    animation: dropdown-menu-out 100ms ease-in forwards;
+  }
 
-[data-dropdown-menu-part="content"][data-side="top"] {
-  bottom: 100%;
-  @apply mb-1;
-}
+  /* ===== Menu Item ===== */
+  [data-dropdown-menu-part="item"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: default;
+    user-select: none;
+    color: var(--popover-foreground, var(--foreground));
+    @apply gap-2 px-2 py-1.5 text-sm outline-none transition-colors;
+    border-radius: var(--dropdown-menu-item-radius, var(--control-radius, 0.375rem));
+  }
 
-[data-dropdown-menu-part="content"][data-side="left"] {
-  right: 100%;
-  top: 0;
-  @apply mr-1;
-}
+  /* Reset link styles */
+  [data-dropdown-menu-part="item"]:where(a) {
+    text-decoration: none;
+    color: inherit;
+  }
 
-[data-dropdown-menu-part="content"][data-side="right"] {
-  left: 100%;
-  top: 0;
-  @apply ml-1;
-}
+  /* Icon support */
+  [data-dropdown-menu-part="item"] svg {
+    @apply size-4 shrink-0 pointer-events-none;
+  }
 
-/* ===== Menu Item ===== */
-[data-dropdown-menu-part="item"] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: default;
-  user-select: none;
-  color: var(--popover-foreground, var(--foreground));
-  @apply gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors;
-}
+  /* Destructive variant */
+  [data-dropdown-menu-part="item"]:where([data-variant="destructive"]) {
+    color: var(--destructive);
+  }
 
-/* Reset link styles */
-a[data-dropdown-menu-part="item"] {
-  text-decoration: none;
-  color: inherit;
-}
+  /* ----- Item states ----- */
+  [data-dropdown-menu-part="item"]:where(:hover:not([disabled]):not([aria-disabled="true"])) {
+    background-color: var(--accent-hover, var(--accent));
+    color: var(--accent-foreground);
+    cursor: pointer;
+  }
 
-/* Hover state */
-[data-dropdown-menu-part="item"]:hover:not([disabled]):not([aria-disabled="true"]) {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-  cursor: pointer;
-}
+  /* Focus state (keyboard navigation) */
+  [data-dropdown-menu-part="item"]:where(:focus) {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
 
-/* Focus state (keyboard navigation) */
-[data-dropdown-menu-part="item"]:focus {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
+  [data-dropdown-menu-part="item"]:where(
+      [data-variant="destructive"]:hover:not([disabled]):not([aria-disabled="true"]),
+      [data-variant="destructive"]:focus
+    ) {
+    background-color: var(--destructive-hover, var(--destructive));
+    color: var(--destructive-foreground);
+  }
 
-/* Disabled state */
-[data-dropdown-menu-part="item"][disabled],
-[data-dropdown-menu-part="item"][aria-disabled="true"] {
-  @apply opacity-50 cursor-not-allowed pointer-events-none;
-}
+  /* Disabled state */
+  [data-dropdown-menu-part="item"]:where([disabled], [aria-disabled="true"]) {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  }
 
-/* Destructive variant */
-[data-dropdown-menu-part="item"][data-variant="destructive"] {
-  color: var(--destructive);
-}
+  /* ===== Label ===== */
+  [data-dropdown-menu-part="label"] {
+    @apply px-2 py-1.5 text-sm font-semibold;
+    color: var(--foreground);
+  }
 
-[data-dropdown-menu-part="item"][data-variant="destructive"]:hover:not([disabled]):not([aria-disabled="true"]),
-[data-dropdown-menu-part="item"][data-variant="destructive"]:focus {
-  background-color: var(--destructive);
-  color: var(--destructive-foreground);
-}
+  /* Inset variant (aligns with items that have icons) */
+  [data-dropdown-menu-part="label"]:where([data-inset="true"]) {
+    @apply pl-8;
+  }
 
-/* Icon support */
-[data-dropdown-menu-part="item"] svg {
-  @apply size-4 shrink-0 pointer-events-none;
-}
+  /* ===== Separator ===== */
+  [data-dropdown-menu-part="separator"] {
+    @apply -mx-1 my-1 h-px;
+    background-color: var(--muted);
+  }
 
-/* ===== Label ===== */
-[data-dropdown-menu-part="label"] {
-  @apply px-2 py-1.5 text-sm font-semibold;
-  color: var(--foreground);
-}
+  /* ===== Group ===== */
+  [data-dropdown-menu-part="group"] {
+    display: flex;
+    flex-direction: column;
+  }
 
-/* Inset variant (aligns with items that have icons) */
-[data-dropdown-menu-part="label"][data-inset="true"] {
-  @apply pl-8;
+  /* ===== Shortcut ===== */
+  [data-dropdown-menu-part="shortcut"] {
+    @apply ml-auto text-xs tracking-widest;
+    color: var(--muted-foreground);
+  }
 }
 
-/* ===== Separator ===== */
-[data-dropdown-menu-part="separator"] {
-  @apply -mx-1 my-1 h-px;
-  background-color: var(--muted);
+/* ===== Keyframes ===== */
+/* Outside the layer: @keyframes are not cascade participants. */
+@keyframes dropdown-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 
-/* ===== Group ===== */
-[data-dropdown-menu-part="group"] {
-  display: flex;
-  flex-direction: column;
+@keyframes dropdown-menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
 }
 
-/* ===== Shortcut ===== */
-[data-dropdown-menu-part="shortcut"] {
-  @apply ml-auto text-xs tracking-widest;
-  color: var(--muted-foreground);
+@keyframes dropdown-menu-in-center {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) 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.
- */