maquina-components 0.5.0 → 0.6.0

data/app/assets/stylesheets/badge.css

@@ -1,145 +1,150 @@
 /* ===== Badge Component Styles ===== */
-/* 
+/*
  * Badge component for status indicators, tags, counts, and labels.
  * Uses data attributes for styling to avoid inline utility classes.
  * Fully compatible with dark mode and supports icons.
+ *
+ * Cascade order in this file (full contract documented in form.css):
+ *   1. base      [data-component="badge"]
+ *   2. sizes     [data-component="badge"]:where([data-size="…"])
+ *   3. variants  [data-component="badge"]:where([data-variant="…"])
+ *   4. states    :where(:hover, :focus-visible, :active, :disabled)
+ *   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.)
  */
 
-/* ===== Base Badge Styles ===== */
-[data-component="badge"] {
-  /* Layout */
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  @apply gap-1 rounded-md border border-transparent font-medium leading-none;
-  
-  /* Transitions */
-  @apply transition-[background-color,border-color,color,opacity] duration-150;
-}
-
-/* ===== Icon Support ===== */
-[data-component="badge"] svg {
-  /* Scales with font size using em */
-  width: 0.875em;
-  height: 0.875em;
-  @apply shrink-0 pointer-events-none;
-}
-
-/* ===== Size Variants ===== */
-
-/* Small size - compact badges for inline use */
-[data-component="badge"][data-size="sm"] {
-  @apply text-xs px-2 py-0.5 h-5;
-}
-
-/* Medium size - default, balanced size */
-[data-component="badge"][data-size="md"] {
-  @apply text-sm px-2.5 py-1 h-6;
-}
-
-/* Large size - prominent badges */
-[data-component="badge"][data-size="lg"] {
-  @apply text-sm px-3 py-1.5 h-7;
-}
-
-/* ===== Visual Variants ===== */
-
-/* Default variant - muted appearance */
-[data-component="badge"][data-variant="default"] {
-  background-color: var(--muted);
-  color: var(--muted-foreground);
-}
-
-[data-component="badge"][data-variant="default"]:hover {
-  @apply opacity-90;
-}
-
-/* Primary variant - brand color */
-[data-component="badge"][data-variant="primary"] {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-}
-
-[data-component="badge"][data-variant="primary"]:hover {
-  @apply opacity-90;
-}
-
-/* Secondary variant - subtle appearance */
-[data-component="badge"][data-variant="secondary"] {
-  background-color: var(--secondary);
-  color: var(--secondary-foreground);
-}
-
-[data-component="badge"][data-variant="secondary"]:hover {
-  @apply opacity-90;
-}
-
-/* Destructive variant - errors, deletions */
-[data-component="badge"][data-variant="destructive"] {
-  background-color: var(--destructive);
-  color: var(--destructive-foreground);
+@layer components {
+  /* ===== Base Badge Styles ===== */
+  [data-component="badge"] {
+    /* Layout */
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    @apply gap-1 border border-transparent leading-none;
+    border-radius: var(--badge-radius, var(--control-radius, 0.375rem));
+    font-weight: var(--label-weight, 500);
+
+    /* Transitions */
+    @apply transition-[background-color,border-color,color,opacity] duration-150;
+  }
+
+  /* ===== Icon Support ===== */
+  [data-component="badge"] svg {
+    /* Scales with font size using em */
+    width: 0.875em;
+    height: 0.875em;
+    @apply shrink-0 pointer-events-none;
+  }
+
+  /* ===== Size Variants ===== */
+
+  /* Small size - compact badges for inline use */
+  [data-component="badge"]:where([data-size="sm"]) {
+    @apply text-xs px-2 py-0.5 h-5;
+  }
+
+  /* Medium size - default, balanced size */
+  [data-component="badge"]:where([data-size="md"]) {
+    @apply text-sm px-2.5 py-1 h-6;
+  }
+
+  /* Large size - prominent badges */
+  [data-component="badge"]:where([data-size="lg"]) {
+    @apply text-sm px-3 py-1.5 h-7;
+  }
+
+  /* ===== Visual Variants ===== */
+
+  /* Default variant - muted appearance */
+  [data-component="badge"]:where([data-variant="default"]) {
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+  }
+
+  /* Primary variant - brand color */
+  [data-component="badge"]:where([data-variant="primary"]) {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  /* Secondary variant - subtle appearance */
+  [data-component="badge"]:where([data-variant="secondary"]) {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+
+  /* Destructive variant - errors, deletions */
+  [data-component="badge"]:where([data-variant="destructive"]) {
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+  }
+
+  /* Success variant - positive status */
+  [data-component="badge"]:where([data-variant="success"]) {
+    background-color: var(--success, oklch(0.627 0.194 149.214));
+    color: var(--success-foreground, oklch(0.985 0 0));
+  }
+
+  /* Warning variant - caution status */
+  [data-component="badge"]:where([data-variant="warning"]) {
+    background-color: var(--warning, oklch(0.769 0.188 70.08));
+    color: var(--warning-foreground, oklch(0.216 0.006 56.043));
+  }
+
+  /* Info variant - informational status.
+     --info has no engine default on purpose: undefined falls back to the neutral
+     default treatment, never to --primary (which would make an informational
+     badge read as a brand call to action). */
+  [data-component="badge"]:where([data-variant="info"]) {
+    background-color: var(--info, var(--muted));
+    color: var(--info-foreground, var(--muted-foreground));
+  }
+
+  /* Outline variant - transparent with border */
+  [data-component="badge"]:where([data-variant="outline"]) {
+    @apply bg-transparent;
+    color: var(--foreground);
+    border-color: var(--border);
+  }
+
+  /* ===== Interactive States (when used as link/button) ===== */
+
+  /* Hover - solid variants just soften */
+  [data-component="badge"]:where(
+      [data-variant="default"]:hover,
+      [data-variant="primary"]:hover,
+      [data-variant="secondary"]:hover,
+      [data-variant="destructive"]:hover,
+      [data-variant="success"]:hover,
+      [data-variant="warning"]:hover,
+      [data-variant="info"]:hover
+    ) {
+    @apply opacity-90;
+  }
+
+  /* Hover - the outline variant fills instead */
+  [data-component="badge"]:where([data-variant="outline"]:hover) {
+    background-color: var(--accent-hover, var(--accent));
+    color: var(--accent-foreground);
+  }
+
+  /* Focus state for keyboard navigation */
+  [data-component="badge"]:where(a:focus-visible, button:focus-visible) {
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, var(--ring));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
+
+  /* Active/pressed state */
+  [data-component="badge"]:where(a:active, button:active) {
+    @apply scale-[0.98];
+  }
+
+  /* Disabled state (if used as button) */
+  [data-component="badge"]:where(button:disabled) {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  }
 }
-
-[data-component="badge"][data-variant="destructive"]:hover {
-  @apply opacity-90;
-}
-
-/* Success variant - positive status */
-[data-component="badge"][data-variant="success"] {
-  background-color: var(--success);
-  color: var(--success-foreground);
-}
-
-[data-component="badge"][data-variant="success"]:hover {
-  @apply opacity-90;
-}
-
-/* Warning variant - caution status */
-[data-component="badge"][data-variant="warning"] {
-  background-color: var(--warning);
-  color: var(--warning-foreground);
-}
-
-[data-component="badge"][data-variant="warning"]:hover {
-  @apply opacity-90;
-}
-
-/* Outline variant - transparent with border */
-[data-component="badge"][data-variant="outline"] {
-  @apply bg-transparent;
-  color: var(--foreground);
-  border-color: var(--border);
-}
-
-[data-component="badge"][data-variant="outline"]:hover {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
-
-/* ===== Interactive States (when used as link/button) ===== */
-
-/* Focus state for keyboard navigation */
-a[data-component="badge"]:focus-visible,
-button[data-component="badge"]:focus-visible {
-  @apply outline-none;
-  box-shadow: 0 0 0 2px var(--background),
-              0 0 0 4px var(--border);
-}
-
-/* Active/pressed state */
-a[data-component="badge"]:active,
-button[data-component="badge"]:active {
-  @apply scale-[0.98];
-}
-
-/* Disabled state (if used as button) */
-button[data-component="badge"]:disabled {
-  @apply opacity-50 cursor-not-allowed pointer-events-none;
-}
-
-/* ===== 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.
- */

data/app/assets/stylesheets/breadcrumbs.css

@@ -1,186 +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;
-}
+  /* ===== 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;
-}
+  /* Compact variant */
+  :where([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;
-}
+  /* ===== Breadcrumb Item ===== */
+  [data-breadcrumb-part="item"] {
+    @apply inline-flex items-center;
+  }
 
-/* Hidden state for responsive collapsing */
-[data-breadcrumb-part="item"].hidden {
-  @apply hidden;
-}
+  /* Hidden state for responsive collapsing */
+  [data-breadcrumb-part="item"]:where(.hidden) {
+    @apply hidden;
+  }
 
-/* ===== 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);
-}
+  /* ===== 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"]:hover {
-  color: var(--foreground);
-  @apply underline;
-}
+  /* Link with icon */
+  [data-breadcrumb-part="link"] svg {
+    @apply size-3.5 shrink-0;
+  }
 
-[data-breadcrumb-part="link"]:focus-visible {
-  @apply outline-none underline;
-  color: var(--foreground);
-}
+  [data-breadcrumb-part="link"] svg:where(:first-child) {
+    @apply mr-1.5;
+  }
 
-/* Link with icon */
-[data-breadcrumb-part="link"] svg {
-  @apply size-3.5 shrink-0;
-}
+  [data-breadcrumb-part="link"]:where(:hover) {
+    color: var(--foreground);
+    @apply underline;
+  }
 
-[data-breadcrumb-part="link"] svg:first-child {
-  @apply mr-1.5;
-}
+  [data-breadcrumb-part="link"]:where(:focus-visible) {
+    @apply outline-none underline;
+    color: var(--foreground);
+  }
 
-/* ===== Breadcrumb Page (current) ===== */
-[data-breadcrumb-part="page"] {
-  @apply inline-flex items-center;
-  @apply text-sm font-medium;
-  color: var(--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);
+  }
 
-/* Page with icon */
-[data-breadcrumb-part="page"] svg {
-  @apply size-3.5 shrink-0;
-}
+  /* Page with icon */
+  [data-breadcrumb-part="page"] svg {
+    @apply size-3.5 shrink-0;
+  }
 
-[data-breadcrumb-part="page"] svg:first-child {
-  @apply mr-1.5;
-}
+  [data-breadcrumb-part="page"] svg:where(:first-child) {
+    @apply mr-1.5;
+  }
 
-/* ===== Breadcrumb Separator ===== */
-[data-breadcrumb-part="separator"] {
-  @apply inline-flex items-center;
-  color: var(--muted-foreground);
-}
+  /* ===== Breadcrumb Separator ===== */
+  [data-breadcrumb-part="separator"] {
+    @apply inline-flex items-center;
+    color: var(--muted-foreground);
+  }
 
-[data-breadcrumb-part="separator"] svg {
-  @apply size-3.5 shrink-0;
-}
+  [data-breadcrumb-part="separator"] svg {
+    @apply size-3.5 shrink-0;
+  }
 
-/* Hidden state for responsive collapsing */
-[data-breadcrumb-part="separator"].hidden {
-  @apply hidden;
-}
+  /* Hidden state for responsive collapsing */
+  [data-breadcrumb-part="separator"]:where(.hidden) {
+    @apply hidden;
+  }
 
-/* ===== Breadcrumb Ellipsis ===== */
-[data-breadcrumb-part="ellipsis"] {
-  @apply inline-flex size-9 items-center justify-center;
-  color: var(--muted-foreground);
-}
+  /* ===== Breadcrumb Ellipsis ===== */
+  [data-breadcrumb-part="ellipsis"] {
+    @apply inline-flex size-9 items-center justify-center;
+    color: var(--muted-foreground);
+    cursor: pointer;
+  }
 
-[data-breadcrumb-part="ellipsis"] svg {
-  @apply size-4 shrink-0;
-}
+  [data-breadcrumb-part="ellipsis"] svg {
+    @apply size-4 shrink-0;
+  }
 
-/* Ellipsis as dropdown trigger */
-[data-breadcrumb-part="ellipsis"][data-state="open"],
-[data-breadcrumb-part="ellipsis"]:hover {
-  color: var(--foreground);
-}
+  /* Ellipsis as dropdown trigger */
+  [data-breadcrumb-part="ellipsis"]:where([data-state="open"], :hover) {
+    color: var(--foreground);
+  }
 
-/* ===== 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;
-}
+  /* ===== 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;
+    }
+  }
 
-/* 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;
-}
+  /* ===== 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;
+  }
 
-/* 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;
-}
+  /* 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;
+  }
 
-[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;
-}
+  /* 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;
+  }
 
-/* Items hidden by Stimulus controller */
-[data-controller="breadcrumb"] [data-breadcrumb-target="item"].hidden,
-[data-controller="breadcrumb"] [data-breadcrumb-target="ellipsisSeparator"].hidden {
-  @apply hidden;
-}
+  :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;
+  }
 
-/* Ellipsis shown by Stimulus controller */
-[data-controller="breadcrumb"] [data-breadcrumb-target="ellipsis"]:not(.hidden) {
-  @apply inline-flex;
-}
+  /* 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;
+  }
 
-/* ===== Mobile Adjustments ===== */
-@media (max-width: 640px) {
-  [data-breadcrumb-part="list"] {
-    @apply gap-1;
+  /* Ellipsis shown by Stimulus controller */
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-target="ellipsis"]:where(:not(.hidden)) {
+    @apply inline-flex;
   }
 
-  /* 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;
+  /* ===== Mobile Adjustments ===== */
+  @media (max-width: 640px) {
+    [data-breadcrumb-part="list"] {
+      @apply gap-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;
+    }
   }
-}
 
-/* ===== Variants ===== */
+  /* ===== Separator Variants ===== */
 
-/* Slash separator variant */
-[data-component="breadcrumbs"][data-separator="slash"] [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="slash"] [data-breadcrumb-part="separator"] svg {
-  @apply hidden;
-}
+  :where([data-component="breadcrumbs"][data-separator="slash"]) [data-breadcrumb-part="separator"] svg {
+    @apply hidden;
+  }
 
-/* Dot separator variant */
-[data-component="breadcrumbs"][data-separator="dot"] [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;
+  }
 
-[data-component="breadcrumbs"][data-separator="dot"] [data-breadcrumb-part="separator"] svg {
-  @apply hidden;
-}
+  :where([data-component="breadcrumbs"][data-separator="dot"]) [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;
-}
+  /* 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;
+  }
 }