maquina-components 0.5.1 → 0.6.0

data/app/assets/stylesheets/date_picker.css

@@ -8,165 +8,175 @@
  * - date-picker (root container)
  *   - trigger (button with popovertarget)
  *   - popover (native popover with calendar)
+ *
+ * Cascade order in this file (full contract documented in form.css):
+ *   1. base      [data-component="date-picker"], [data-date-picker-part="…"]
+ *   2. sizes     :where([data-size="sm"|"lg"]) [data-date-picker-part="trigger"]
+ *   3. variants  :where([data-full-width]) …
+ *   4. states    […]:where(:hover, :focus-visible, :disabled, [aria-expanded],
+ *                          :has(input:invalid))
+ *   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.)
+ *
+ * This file must be imported after calendar.css: the "calendar inside popover"
+ * rule below strips the calendar's own border, and at a flat 0,1,0 only source
+ * order decides that. See engine.css.
  */
 
-/* ===== Root Container ===== */
-[data-component="date-picker"] {
-  position: relative;
-  display: inline-block;
-}
+@layer components {
+  /* ===== Root Container ===== */
+  [data-component="date-picker"] {
+    position: relative;
+    display: inline-block;
+  }
 
-/* ===== Trigger Button ===== */
-[data-date-picker-part="trigger"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.5rem;
-  width: 100%;
-  min-width: 200px;
-  @apply h-9 px-3 py-2 text-sm rounded-md;
-  border: 1px solid var(--input);
-  background-color: var(--background);
-  color: var(--foreground);
-  cursor: pointer;
-  text-align: left;
-  @apply transition-colors duration-150;
-}
+  /* ===== Trigger Button ===== */
+  [data-date-picker-part="trigger"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.5rem;
+    width: 100%;
+    min-width: 200px;
+    @apply h-9 px-3 py-2 text-sm;
+    border-radius: var(--date-picker-radius, var(--control-radius, 0.375rem));
+    border: 1px solid var(--input);
+    background-color: var(--control-fill, var(--background));
+    color: var(--foreground);
+    cursor: pointer;
+    text-align: left;
+    @apply transition-colors duration-150;
+  }
 
-[data-date-picker-part="trigger"]:hover:not(:disabled) {
-  background-color: var(--accent);
-}
+  [data-date-picker-part="trigger"] svg {
+    @apply size-4 shrink-0;
+    color: var(--muted-foreground);
+  }
 
-[data-date-picker-part="trigger"]:focus-visible {
-  @apply outline-none;
-  border-color: var(--ring);
-  box-shadow: 0 0 0 2px var(--background),
-              0 0 0 4px var(--ring);
-}
+  /* ===== Trigger Sizes ===== */
+  :where([data-component="date-picker"][data-size="sm"]) [data-date-picker-part="trigger"] {
+    @apply h-8 px-2 py-1 text-xs;
+    min-width: 160px;
+  }
 
-[data-date-picker-part="trigger"]:disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
+  :where([data-component="date-picker"][data-size="sm"]) [data-date-picker-part="trigger"] svg {
+    @apply size-3.5;
+  }
 
-[data-date-picker-part="trigger"] svg {
-  @apply size-4 shrink-0;
-  color: var(--muted-foreground);
-}
+  :where([data-component="date-picker"][data-size="lg"]) [data-date-picker-part="trigger"] {
+    @apply h-11 px-4 py-3 text-base;
+    min-width: 240px;
+  }
 
-/* Placeholder state */
-[data-date-picker-part="trigger"]:has([data-date-picker-part="placeholder-indicator"]) {
-  color: var(--muted-foreground);
-}
+  :where([data-component="date-picker"][data-size="lg"]) [data-date-picker-part="trigger"] svg {
+    @apply size-5;
+  }
 
-/* ===== Popover ===== */
-[data-date-picker-part="popover"] {
-  @apply p-0 rounded-lg border;
-  background-color: var(--background);
-  border-color: var(--border);
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-              0 4px 6px -4px rgb(0 0 0 / 0.1);
-
-  /* Reset default popover styles */
-  margin: 0;
-  overflow: visible;
-
-  /* Position below trigger */
-  position-area: bottom span-right;
-  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
-  margin-top: 0.25rem;
-
-  /* Entry animation */
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  transition: opacity 150ms ease-out,
-              transform 150ms ease-out;
-}
+  /* ===== Full width variant ===== */
+  [data-component="date-picker"]:where([data-full-width]) {
+    display: block;
+    width: 100%;
+  }
 
-/* Closed state - for exit animation */
-[data-date-picker-part="popover"]:not(:popover-open) {
-  opacity: 0;
-  transform: translateY(-0.5rem) scale(0.95);
-}
+  :where([data-component="date-picker"][data-full-width]) [data-date-picker-part="trigger"] {
+    width: 100%;
+  }
 
-/* Entry animation starting state */
-@starting-style {
-  [data-date-picker-part="popover"]:popover-open {
-    opacity: 0;
-    transform: translateY(-0.5rem) scale(0.95);
+  /* ===== Trigger States ===== */
+
+  /* Placeholder state */
+  [data-date-picker-part="trigger"]:where(:has([data-date-picker-part="placeholder-indicator"])) {
+    color: var(--muted-foreground);
   }
-}
 
-/* Backdrop */
-[data-date-picker-part="popover"]::backdrop {
-  background-color: transparent;
-}
+  [data-date-picker-part="trigger"]:where(:hover:not(:disabled)) {
+    background-color: var(--accent-hover, var(--accent));
+  }
 
-/* ===== Calendar inside popover adjustments ===== */
-[data-date-picker-part="popover"] [data-component="calendar"] {
-  border: none;
-  box-shadow: none;
-}
+  [data-date-picker-part="trigger"]:where([aria-expanded="true"]) {
+    border-color: var(--ring);
+  }
 
-/* ===== Trigger aria-expanded state ===== */
-[data-date-picker-part="trigger"][aria-expanded="true"] {
-  border-color: var(--ring);
-}
+  [data-date-picker-part="trigger"]:where(:focus-visible) {
+    border-color: var(--ring);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, var(--ring));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-/* ===== Size Variants ===== */
-[data-component="date-picker"][data-size="sm"] [data-date-picker-part="trigger"] {
-  @apply h-8 px-2 py-1 text-xs;
-  min-width: 160px;
-}
+  [data-date-picker-part="trigger"]:where(:disabled) {
+    @apply opacity-50 cursor-not-allowed;
+  }
 
-[data-component="date-picker"][data-size="sm"] [data-date-picker-part="trigger"] svg {
-  @apply size-3.5;
-}
+  /* Error state — the root :has() drives the trigger */
+  :where([data-component="date-picker"]:has(input:invalid), [data-component="date-picker"]:has(input[aria-invalid="true"])) [data-date-picker-part="trigger"] {
+    border-color: var(--destructive);
+  }
 
-[data-component="date-picker"][data-size="lg"] [data-date-picker-part="trigger"] {
-  @apply h-11 px-4 py-3 text-base;
-  min-width: 240px;
-}
+  :where([data-component="date-picker"]:has(input:invalid), [data-component="date-picker"]:has(input[aria-invalid="true"])) [data-date-picker-part="trigger"]:where(:focus-visible) {
+    --focus-ring-color: var(--destructive);
+  }
 
-[data-component="date-picker"][data-size="lg"] [data-date-picker-part="trigger"] svg {
-  @apply size-5;
-}
+  /* ===== Popover ===== */
+  [data-date-picker-part="popover"] {
+    @apply p-0 border;
+    border-radius: var(--date-picker-popover-radius, var(--surface-radius, 0.5rem));
+    /* A popover is above the page by definition, so it paints --popover */
+    background-color: var(--popover, var(--background));
+    border-color: var(--border);
+    box-shadow: var(--date-picker-popover-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))));
+
+    /* Reset default popover styles */
+    margin: 0;
+    overflow: visible;
+
+    /* Position below trigger */
+    position-area: bottom span-right;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    margin-top: 0.25rem;
 
-/* ===== Full width variant ===== */
-[data-component="date-picker"][data-full-width] {
-  display: block;
-  width: 100%;
-}
+    /* Entry animation */
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: opacity 150ms ease-out,
+                transform 150ms ease-out;
+  }
 
-[data-component="date-picker"][data-full-width] [data-date-picker-part="trigger"] {
-  width: 100%;
-}
+  /* Closed state - for exit animation */
+  [data-date-picker-part="popover"]:where(:not(:popover-open)) {
+    opacity: 0;
+    transform: translateY(-0.5rem) scale(0.95);
+  }
 
-/* ===== Error state ===== */
-[data-component="date-picker"]:has(input:invalid),
-[data-component="date-picker"]:has(input[aria-invalid="true"]) {
-  [data-date-picker-part="trigger"] {
-    border-color: var(--destructive);
+  /* Entry animation starting state */
+  @starting-style {
+    [data-date-picker-part="popover"]:where(:popover-open) {
+      opacity: 0;
+      transform: translateY(-0.5rem) scale(0.95);
+    }
   }
 
-  [data-date-picker-part="trigger"]:focus-visible {
-    box-shadow: 0 0 0 2px var(--background),
-                0 0 0 4px var(--destructive);
+  /* Backdrop */
+  [data-date-picker-part="popover"]::backdrop {
+    background-color: transparent;
   }
-}
 
-/* ===== Fallback for browsers without anchor positioning ===== */
-@supports not (position-area: bottom) {
-  [data-date-picker-part="popover"] {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: 0.25rem;
+  /* ===== Calendar inside popover adjustments ===== */
+  :where([data-date-picker-part="popover"]) [data-component="calendar"] {
+    border: none;
+    box-shadow: var(--elevation-none, 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.
- */
+  /* ===== Fallback for browsers without anchor positioning ===== */
+  @supports not (position-area: bottom) {
+    [data-date-picker-part="popover"] {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      margin-top: 0.25rem;
+    }
+  }
+}

data/app/assets/stylesheets/drawer.css

@@ -1,135 +1,168 @@
 /* ===== Drawer Component Styles ===== */
-
-/* ===== Provider (Wrapper) ===== */
-[data-component="drawer"] {
-  @apply flex w-full;
-}
-
-/* ===== Drawer Root ===== */
-[data-drawer-part="root"] {
-  @apply block text-foreground;
-}
-
-/* Prevent transitions on initial load */
-[data-drawer-part="root"].drawer-loading,
-[data-drawer-part="root"].drawer-loading * {
-  transition: none !important;
-}
-
-/* ===== Drawer Backdrop (overlay) ===== */
-[data-drawer-part="backdrop"] {
-  @apply fixed inset-0 z-40 hidden bg-black opacity-0;
-  transition: opacity 300ms;
-}
-
-[data-drawer-part="backdrop"][data-state="visible"] {
-  @apply block opacity-60;
-}
-
-/* ===== Drawer Panel (fixed positioned) ===== */
-[data-drawer-part="panel"] {
-  @apply fixed inset-y-0 z-50 flex h-full w-80 flex-col;
-  @apply bg-background shadow-lg;
-  transition: right 300ms ease-in-out, left 300ms ease-in-out;
-}
-
-[data-drawer-part="root"][data-side="left"] [data-drawer-part="panel"] {
-  @apply left-0;
-  right: auto;
-}
-
-[data-drawer-part="root"][data-side="right"] [data-drawer-part="panel"] {
-  @apply right-0;
-  left: auto;
-}
-
-/* Closed state - slide out */
-[data-drawer-part="root"][data-side="left"][data-state="closed"] [data-drawer-part="panel"] {
-  @apply -translate-x-full;
-}
-
-[data-drawer-part="root"][data-side="right"][data-state="closed"] [data-drawer-part="panel"] {
-  @apply translate-x-full;
-}
-
-/* ===== Drawer Inner Content Wrapper ===== */
-[data-drawer-part="inner"] {
-  @apply flex h-full w-full flex-col;
+/*
+ * Cascade order in this file (full contract documented in form.css):
+ *   1. base      [data-component="drawer"], [data-drawer-part="…"]
+ *   2. sizes     — none
+ *   3. variants  :where([data-drawer-part="root"][data-side="…"]) …
+ *   4. states    […]:where(:hover, :focus-visible, [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.)
+ *
+ * The one exception is the body scroll lock at the bottom of this file: see the
+ * comment there. It is intentionally NOT in the layer.
+ */
+
+@layer components {
+  /* ===== Provider (Wrapper) ===== */
+  [data-component="drawer"] {
+    @apply flex w-full;
+  }
+
+  /* ===== Drawer Root ===== */
+  [data-drawer-part="root"] {
+    @apply block text-foreground;
+  }
+
+  /* Prevent transitions on initial load */
+  [data-drawer-part="root"]:where(.drawer-loading),
+  :where([data-drawer-part="root"].drawer-loading) * {
+    transition: none !important;
+  }
+
+  /* ===== Drawer Backdrop (overlay) ===== */
+  [data-drawer-part="backdrop"] {
+    @apply fixed inset-0 z-40 hidden bg-black opacity-0;
+    transition: opacity 300ms;
+  }
+
+  [data-drawer-part="backdrop"]:where([data-state="visible"]) {
+    @apply block opacity-60;
+  }
+
+  /* ===== Drawer Panel (fixed positioned) ===== */
+  [data-drawer-part="panel"] {
+    @apply fixed inset-y-0 z-50 flex h-full w-80 flex-col;
+    @apply bg-background;
+    box-shadow: var(--drawer-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))));
+    transition: right 300ms ease-in-out, left 300ms ease-in-out;
+  }
+
+  :where([data-drawer-part="root"][data-side="left"]) [data-drawer-part="panel"] {
+    @apply left-0;
+    right: auto;
+  }
+
+  :where([data-drawer-part="root"][data-side="right"]) [data-drawer-part="panel"] {
+    @apply right-0;
+    left: auto;
+  }
+
+  /* Closed state - slide out */
+  :where([data-drawer-part="root"][data-side="left"][data-state="closed"]) [data-drawer-part="panel"] {
+    @apply -translate-x-full;
+  }
+
+  :where([data-drawer-part="root"][data-side="right"][data-state="closed"]) [data-drawer-part="panel"] {
+    @apply translate-x-full;
+  }
+
+  /* ===== Drawer Inner Content Wrapper ===== */
+  [data-drawer-part="inner"] {
+    @apply flex h-full w-full flex-col;
+  }
+
+  /* ===== Drawer Header ===== */
+  [data-drawer-part="header"] {
+    @apply flex shrink-0 items-center justify-between gap-2 border-b px-4 py-3;
+    border-color: var(--border);
+  }
+
+  [data-drawer-part="header-content"] {
+    @apply flex-1;
+  }
+
+  /* ===== Drawer Content (scrollable area) ===== */
+  [data-drawer-part="content"] {
+    @apply flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-4;
+  }
+
+  /* ===== Drawer Footer ===== */
+  [data-drawer-part="footer"] {
+    @apply flex shrink-0 flex-col gap-2 border-t p-4;
+    border-color: var(--border);
+  }
+
+  /* ===== Drawer Trigger ===== */
+  [data-drawer-part="trigger"]:where(:hover) {
+    background-color: var(--accent-hover, var(--accent));
+    color: var(--accent-foreground);
+  }
+
+  /* ===== Drawer Title ===== */
+  [data-drawer-part="title"] {
+    @apply text-lg font-semibold;
+  }
+
+  /* ===== Drawer Description ===== */
+  [data-drawer-part="description"] {
+    @apply text-sm text-muted-foreground;
+  }
+
+  /* ===== Drawer Close Button ===== */
+  [data-drawer-part="close"] {
+    @apply inline-flex items-center justify-center p-1;
+    @apply transition-colors;
+    border-radius: var(--drawer-close-radius, var(--control-radius, 0.375rem));
+    color: var(--foreground);
+  }
+
+  [data-drawer-part="close"] svg {
+    @apply size-4;
+  }
+
+  [data-drawer-part="close"]:where(:hover) {
+    background-color: var(--accent-hover, var(--accent));
+    color: var(--accent-foreground);
+  }
+
+  /* outline, not a ring: the drawer panel clips box-shadow rings */
+  [data-drawer-part="close"]:where(: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);
+  }
+
+  /* ===== Drawer Section ===== */
+  [data-drawer-part="section"] {
+    @apply flex flex-col gap-2;
+  }
+
+  /* ===== Drawer Separator ===== */
+  [data-drawer-part="separator"] {
+    @apply mx-4 my-2 w-auto;
+    background-color: var(--border);
+  }
 }
 
 /* ===== Body Scroll Lock ===== */
-/* Shared by drawer_controller and sidebar_controller: the controllers set
-   the data attribute and the --maquina-scroll-lock-top offset on <body>;
-   all styling lives here. */
+/*
+ * Shared by drawer_controller and sidebar_controller: the controllers set
+ * the data attribute and the --maquina-scroll-lock-top offset on <body>;
+ * all styling lives here.
+ *
+ * PUBLIC CONTRACT — this is the only engine rule outside @layer components.
+ * It is not component appearance, it is a functional lock: if a host's own
+ * unlayered `body { position: … }` beat it, the page would scroll behind an
+ * open drawer and the restored scroll position would be wrong. Keeping it
+ * unlayered means it wins the way it did before 0.6.0. Nothing else in the
+ * engine claims that privilege.
+ */
 body[data-maquina-scroll-locked] {
   position: fixed;
   top: var(--maquina-scroll-lock-top, 0px);
   width: 100%;
   overflow: hidden;
 }
-
-/* ===== Drawer Header ===== */
-[data-drawer-part="header"] {
-  @apply flex shrink-0 items-center justify-between gap-2 border-b px-4 py-3;
-  border-color: var(--border);
-}
-
-[data-drawer-part="header-content"] {
-  @apply flex-1;
-}
-
-/* ===== Drawer Content (scrollable area) ===== */
-[data-drawer-part="content"] {
-  @apply flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-4;
-}
-
-/* ===== Drawer Footer ===== */
-[data-drawer-part="footer"] {
-  @apply flex shrink-0 flex-col gap-2 border-t p-4;
-  border-color: var(--border);
-}
-
-/* ===== Drawer Trigger ===== */
-
-[data-drawer-part="trigger"]:hover {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
-
-/* ===== Drawer Title ===== */
-[data-drawer-part="title"] {
-  @apply text-lg font-semibold;
-}
-
-/* ===== Drawer Description ===== */
-[data-drawer-part="description"] {
-  @apply text-sm text-muted-foreground;
-}
-
-/* ===== Drawer Close Button ===== */
-[data-drawer-part="close"] {
-  @apply inline-flex items-center justify-center rounded-md p-1;
-  @apply outline-hidden ring-ring focus-visible:ring-2;
-  @apply transition-colors;
-  color: var(--foreground);
-}
-
-[data-drawer-part="close"]:hover {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
-
-[data-drawer-part="close"] svg {
-  @apply size-4;
-}
-
-/* ===== Drawer Section ===== */
-[data-drawer-part="section"] {
-  @apply flex flex-col gap-2;
-}
-
-/* ===== Drawer Separator ===== */
-[data-drawer-part="separator"] {
-  @apply mx-4 my-2 w-auto;
-  background-color: var(--border);
-}