maquina-components 0.5.1 → 0.6.0

data/app/assets/stylesheets/breadcrumbs.css

@@ -1,207 +1,224 @@
 /* ===== Breadcrumbs Component Styles ===== */
 /* Comprehensive CSS using data-attribute selectors */
 /* Uses @apply for theme-customizable properties */
+/*
+ * Cascade order in this file (full contract documented in form.css):
+ *   1. base      [data-component="breadcrumbs"], [data-breadcrumb-part="…"]
+ *   2. sizes     :where([data-component="breadcrumbs"][data-size="sm"]) …
+ *   3. variants  :where([data-component="breadcrumbs"][data-separator="…"]) …
+ *   4. states    […]:where(:hover, :focus-visible, [data-state="open"], .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 or a
+ * pseudo-element read 0,1,1 — an element selector cannot be zeroed away.)
+ *
+ * Imported LAST, after dropdown_menu.css: the overflow popover below has to
+ * beat dropdown_menu.css's `position: absolute`, and since every rule is now a
+ * flat 0,1,0 that is decided by import order alone (it used to lean on a
+ * doubled attribute selector). See engine.css.
+ */
+
+@layer components {
+  /* ===== Breadcrumbs Container (nav) ===== */
+  [data-component="breadcrumbs"] {
+    /* Container has no default styles - allows flexible placement */
+  }
 
-/* ===== Breadcrumbs Container (nav) ===== */
-[data-component="breadcrumbs"] {
-  /* Container has no default styles - allows flexible placement */
-}
-
-/* ===== Breadcrumbs List ===== */
-[data-breadcrumb-part="list"] {
-  @apply flex flex-wrap items-center gap-1.5;
-  @apply text-sm break-words;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-/* Compact variant */
-[data-component="breadcrumbs"][data-size="sm"] [data-breadcrumb-part="list"] {
-  @apply gap-1 text-xs;
-}
-
-/* ===== Breadcrumb Item ===== */
-[data-breadcrumb-part="item"] {
-  @apply inline-flex items-center;
-}
-
-/* Hidden state for responsive collapsing */
-[data-breadcrumb-part="item"].hidden {
-  @apply hidden;
-}
+  /* ===== Breadcrumbs List ===== */
+  [data-breadcrumb-part="list"] {
+    @apply flex flex-wrap items-center gap-1.5;
+    @apply text-sm break-words;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
 
-/* ===== Breadcrumb Link ===== */
-[data-breadcrumb-part="link"] {
-  @apply inline-flex items-center;
-  @apply text-sm font-medium;
-  @apply underline-offset-4;
-  @apply transition-colors;
-  color: var(--muted-foreground);
-}
+  /* Compact variant */
+  :where([data-component="breadcrumbs"][data-size="sm"]) [data-breadcrumb-part="list"] {
+    @apply gap-1 text-xs;
+  }
 
-[data-breadcrumb-part="link"]:hover {
-  color: var(--foreground);
-  @apply underline;
-}
+  /* ===== Breadcrumb Item ===== */
+  [data-breadcrumb-part="item"] {
+    @apply inline-flex items-center;
+  }
 
-[data-breadcrumb-part="link"]:focus-visible {
-  @apply outline-none underline;
-  color: var(--foreground);
-}
+  /* Hidden state for responsive collapsing */
+  [data-breadcrumb-part="item"]:where(.hidden) {
+    @apply hidden;
+  }
 
-/* Link with icon */
-[data-breadcrumb-part="link"] svg {
-  @apply size-3.5 shrink-0;
-}
+  /* ===== Breadcrumb Link ===== */
+  [data-breadcrumb-part="link"] {
+    @apply inline-flex items-center;
+    @apply text-sm;
+    font-weight: var(--label-weight, 500);
+    @apply underline-offset-4;
+    @apply transition-colors;
+    color: var(--muted-foreground);
+  }
 
-[data-breadcrumb-part="link"] svg:first-child {
-  @apply mr-1.5;
-}
+  /* Link with icon */
+  [data-breadcrumb-part="link"] svg {
+    @apply size-3.5 shrink-0;
+  }
 
-/* ===== Breadcrumb Page (current) ===== */
-[data-breadcrumb-part="page"] {
-  @apply inline-flex items-center;
-  @apply text-sm font-medium;
-  color: var(--foreground);
-}
+  [data-breadcrumb-part="link"] svg:where(:first-child) {
+    @apply mr-1.5;
+  }
 
-/* Page with icon */
-[data-breadcrumb-part="page"] svg {
-  @apply size-3.5 shrink-0;
-}
+  [data-breadcrumb-part="link"]:where(:hover) {
+    color: var(--foreground);
+    @apply underline;
+  }
 
-[data-breadcrumb-part="page"] svg:first-child {
-  @apply mr-1.5;
-}
+  [data-breadcrumb-part="link"]:where(:focus-visible) {
+    @apply outline-none underline;
+    color: var(--foreground);
+  }
 
-/* ===== Breadcrumb Separator ===== */
-[data-breadcrumb-part="separator"] {
-  @apply inline-flex items-center;
-  color: var(--muted-foreground);
-}
+  /* ===== Breadcrumb Page (current) ===== */
+  [data-breadcrumb-part="page"] {
+    @apply inline-flex items-center;
+    @apply text-sm;
+    font-weight: var(--label-weight, 500);
+    color: var(--foreground);
+  }
 
-[data-breadcrumb-part="separator"] svg {
-  @apply size-3.5 shrink-0;
-}
+  /* Page with icon */
+  [data-breadcrumb-part="page"] svg {
+    @apply size-3.5 shrink-0;
+  }
 
-/* Hidden state for responsive collapsing */
-[data-breadcrumb-part="separator"].hidden {
-  @apply hidden;
-}
+  [data-breadcrumb-part="page"] svg:where(:first-child) {
+    @apply mr-1.5;
+  }
 
-/* ===== Breadcrumb Ellipsis ===== */
-[data-breadcrumb-part="ellipsis"] {
-  @apply inline-flex size-9 items-center justify-center;
-  color: var(--muted-foreground);
-  cursor: pointer;
-}
+  /* ===== Breadcrumb Separator ===== */
+  [data-breadcrumb-part="separator"] {
+    @apply inline-flex items-center;
+    color: var(--muted-foreground);
+  }
 
-[data-breadcrumb-part="ellipsis"] svg {
-  @apply size-4 shrink-0;
-}
+  [data-breadcrumb-part="separator"] svg {
+    @apply size-3.5 shrink-0;
+  }
 
-/* Ellipsis as dropdown trigger */
-[data-breadcrumb-part="ellipsis"][data-state="open"],
-[data-breadcrumb-part="ellipsis"]:hover {
-  color: var(--foreground);
-}
+  /* Hidden state for responsive collapsing */
+  [data-breadcrumb-part="separator"]:where(.hidden) {
+    @apply hidden;
+  }
 
-/* ===== Overflow Dropdown (top-layer popover) ===== */
-/* Visual styling comes from dropdown_menu.css via data-dropdown-menu-part.
-   Anchor positioning places the popover in modern browsers;
-   breadcrumb_controller falls back to measured coordinates elsewhere.
-   The doubled attribute selector outranks dropdown_menu.css's
-   position: absolute regardless of import order. */
-@supports (anchor-name: --a) and (position-area: block-end) {
+  /* ===== Breadcrumb Ellipsis ===== */
   [data-breadcrumb-part="ellipsis"] {
-    anchor-name: --maquina-breadcrumbs;
+    @apply inline-flex size-9 items-center justify-center;
+    color: var(--muted-foreground);
+    cursor: pointer;
   }
 
-  [data-breadcrumb-part="dropdown"][data-dropdown-menu-part="content"] {
-    position: fixed;
-    position-anchor: --maquina-breadcrumbs;
-    position-area: block-end span-inline-end;
-    margin-block-start: 4px;
-    position-try-fallbacks: flip-block;
+  [data-breadcrumb-part="ellipsis"] svg {
+    @apply size-4 shrink-0;
   }
-}
 
-/* ===== Responsive Behavior ===== */
-/* Force nowrap when responsive controller is active so scrollWidth detects overflow */
-[data-controller="breadcrumb"] [data-breadcrumb-part="list"] {
-  @apply flex-nowrap overflow-hidden;
-}
+  /* Ellipsis as dropdown trigger */
+  [data-breadcrumb-part="ellipsis"]:where([data-state="open"], :hover) {
+    color: var(--foreground);
+  }
 
-/* Items must not shrink or wrap text, otherwise flex compresses them and scrollWidth never exceeds clientWidth */
-[data-controller="breadcrumb"] [data-breadcrumb-part="item"],
-[data-controller="breadcrumb"] [data-breadcrumb-part="separator"] {
-  @apply shrink-0 whitespace-nowrap;
-}
+  /* ===== Overflow Dropdown (top-layer popover) ===== */
+  /* Visual styling comes from dropdown_menu.css via data-dropdown-menu-part.
+     Anchor positioning places the popover in modern browsers;
+     breadcrumb_controller falls back to measured coordinates elsewhere. */
+  @supports (anchor-name: --a) and (position-area: block-end) {
+    [data-breadcrumb-part="ellipsis"] {
+      anchor-name: --maquina-breadcrumbs;
+    }
+
+    [data-breadcrumb-part="dropdown"]:where([data-dropdown-menu-part="content"]) {
+      position: fixed;
+      position-anchor: --maquina-breadcrumbs;
+      position-area: block-end span-inline-end;
+      margin-block-start: 4px;
+      position-try-fallbacks: flip-block;
+    }
+  }
 
-/* Allow the last item (current page) to truncate gracefully instead of hard-clipping */
-[data-controller="breadcrumb"] [data-breadcrumb-part="item"]:last-child {
-  @apply shrink min-w-0 overflow-hidden;
-  text-overflow: ellipsis;
-}
+  /* ===== Responsive Behavior ===== */
+  /* Force nowrap when responsive controller is active so scrollWidth detects overflow */
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-part="list"] {
+    @apply flex-nowrap overflow-hidden;
+  }
 
-[data-controller="breadcrumb"] [data-breadcrumb-part="item"]:last-child [data-breadcrumb-part="page"],
-[data-controller="breadcrumb"] [data-breadcrumb-part="item"]:last-child [data-breadcrumb-part="link"] {
-  @apply overflow-hidden;
-  text-overflow: ellipsis;
-}
+  /* Items must not shrink or wrap text, otherwise flex compresses them and scrollWidth never exceeds clientWidth */
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-part="item"],
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-part="separator"] {
+    @apply shrink-0 whitespace-nowrap;
+  }
 
-/* Items hidden by Stimulus controller */
-[data-controller="breadcrumb"] [data-breadcrumb-target="item"].hidden,
-[data-controller="breadcrumb"] [data-breadcrumb-target="ellipsisSeparator"].hidden {
-  @apply hidden;
-}
+  /* Allow the last item (current page) to truncate gracefully instead of hard-clipping */
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-part="item"]:where(:last-child) {
+    @apply shrink min-w-0 overflow-hidden;
+    text-overflow: ellipsis;
+  }
 
-/* Ellipsis shown by Stimulus controller */
-[data-controller="breadcrumb"] [data-breadcrumb-target="ellipsis"]:not(.hidden) {
-  @apply inline-flex;
-}
+  :where([data-controller="breadcrumb"] [data-breadcrumb-part="item"]:last-child) :is([data-breadcrumb-part="page"], [data-breadcrumb-part="link"]) {
+    @apply overflow-hidden;
+    text-overflow: ellipsis;
+  }
 
-/* ===== Mobile Adjustments ===== */
-@media (max-width: 640px) {
-  [data-breadcrumb-part="list"] {
-    @apply gap-1;
+  /* Items hidden by Stimulus controller */
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-target="item"]:where(.hidden),
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-target="ellipsisSeparator"]:where(.hidden) {
+    @apply hidden;
   }
 
-  /* Hide middle items on very small screens by default */
-  [data-component="breadcrumbs"][data-auto-collapse] [data-breadcrumb-part="item"]:not(:first-child):not(:last-child) {
-    @apply hidden sm:inline-flex;
+  /* Ellipsis shown by Stimulus controller */
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-target="ellipsis"]:where(:not(.hidden)) {
+    @apply inline-flex;
   }
-}
 
-/* ===== Variants ===== */
+  /* ===== Mobile Adjustments ===== */
+  @media (max-width: 640px) {
+    [data-breadcrumb-part="list"] {
+      @apply gap-1;
+    }
 
-/* Slash separator variant */
-[data-component="breadcrumbs"][data-separator="slash"] [data-breadcrumb-part="separator"]::before {
-  content: "/";
-  @apply px-1;
-}
+    /* Hide middle items on very small screens by default */
+    :where([data-component="breadcrumbs"][data-auto-collapse]) [data-breadcrumb-part="item"]:where(:not(:first-child):not(:last-child)) {
+      @apply hidden sm:inline-flex;
+    }
+  }
 
-[data-component="breadcrumbs"][data-separator="slash"] [data-breadcrumb-part="separator"] svg {
-  @apply hidden;
-}
+  /* ===== Separator Variants ===== */
 
-/* Dot separator variant */
-[data-component="breadcrumbs"][data-separator="dot"] [data-breadcrumb-part="separator"]::before {
-  content: "•";
-  @apply px-1;
-}
+  /* Slash separator variant */
+  :where([data-component="breadcrumbs"][data-separator="slash"]) [data-breadcrumb-part="separator"]::before {
+    content: "/";
+    @apply px-1;
+  }
 
-[data-component="breadcrumbs"][data-separator="dot"] [data-breadcrumb-part="separator"] svg {
-  @apply hidden;
-}
+  :where([data-component="breadcrumbs"][data-separator="slash"]) [data-breadcrumb-part="separator"] svg {
+    @apply hidden;
+  }
 
-/* Arrow separator variant */
-[data-component="breadcrumbs"][data-separator="arrow"] [data-breadcrumb-part="separator"]::before {
-  content: "→";
-  @apply px-1;
-}
+  /* Dot separator variant */
+  :where([data-component="breadcrumbs"][data-separator="dot"]) [data-breadcrumb-part="separator"]::before {
+    content: "•";
+    @apply px-1;
+  }
+
+  :where([data-component="breadcrumbs"][data-separator="dot"]) [data-breadcrumb-part="separator"] svg {
+    @apply hidden;
+  }
+
+  /* Arrow separator variant */
+  :where([data-component="breadcrumbs"][data-separator="arrow"]) [data-breadcrumb-part="separator"]::before {
+    content: "→";
+    @apply px-1;
+  }
 
-[data-component="breadcrumbs"][data-separator="arrow"] [data-breadcrumb-part="separator"] svg {
-  @apply hidden;
+  :where([data-component="breadcrumbs"][data-separator="arrow"]) [data-breadcrumb-part="separator"] svg {
+    @apply hidden;
+  }
 }