maquina-components 0.5.1 → 0.6.0

data/app/assets/stylesheets/calendar.css

@@ -11,212 +11,225 @@
  *   - grid (day buttons grid)
  *     - week (row)
  *       - day (button)
- */
-
-/* ===== Root Container ===== */
-[data-component="calendar"] {
-  --cell-size: 2rem;
-
-  @apply p-3 w-fit rounded-lg border;
-  background-color: var(--background);
-  border-color: var(--border);
-}
-
-/* ===== Header (Navigation) ===== */
-[data-calendar-part="header"] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  @apply mb-4;
-}
-
-[data-calendar-part="header"] button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--cell-size);
-  height: var(--cell-size);
-  @apply rounded-md;
-  border: none;
-  cursor: pointer;
-  background-color: transparent;
-  color: var(--foreground);
-  @apply transition-colors duration-150;
-}
-
-[data-calendar-part="header"] button:hover:not(:disabled) {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
-
-[data-calendar-part="header"] button:focus-visible {
-  @apply outline-none;
-  box-shadow: 0 0 0 2px var(--background),
-              0 0 0 4px var(--ring);
-}
-
-[data-calendar-part="header"] button:disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
-
-[data-calendar-part="header"] button svg {
-  @apply size-4 shrink-0;
-}
-
-[data-calendar-part="caption"] {
-  @apply text-sm font-medium select-none;
-  color: var(--foreground);
-}
-
-/* ===== Weekday Headers ===== */
-[data-calendar-part="weekdays"] {
-  display: grid;
-  grid-template-columns: repeat(7, var(--cell-size));
-  @apply mb-1;
-}
-
-[data-calendar-part="weekday"] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--cell-size);
-  height: var(--cell-size);
-  @apply text-xs font-normal select-none;
-  color: var(--muted-foreground);
-}
-
-/* ===== Calendar Grid ===== */
-[data-calendar-part="grid"] {
-  display: flex;
-  flex-direction: column;
-  @apply gap-1;
-}
-
-[data-calendar-part="week"] {
-  display: grid;
-  grid-template-columns: repeat(7, var(--cell-size));
-}
-
-/* ===== Day Button Base ===== */
-[data-calendar-part="day"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--cell-size);
-  height: var(--cell-size);
-  @apply text-sm font-normal rounded-md;
-  border: none;
-  cursor: pointer;
-  background-color: transparent;
-  color: var(--foreground);
-  @apply transition-colors duration-150;
-}
-
-/* ===== Day States ===== */
-
-/* Hover */
-[data-calendar-part="day"]:hover:not(:disabled):not([data-state]) {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
-
-/* Today */
-[data-calendar-part="day"][data-today] {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
-
-/* Selected (single mode) */
-[data-calendar-part="day"][data-state="selected"] {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  @apply rounded-md;
-}
-
-[data-calendar-part="day"][data-state="selected"]:hover {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-}
-
-/* Range Start */
-[data-calendar-part="day"][data-state="range-start"] {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  @apply rounded-l-md rounded-r-none;
-}
-
-/* Range End */
-[data-calendar-part="day"][data-state="range-end"] {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  @apply rounded-r-md rounded-l-none;
-}
-
-/* Range Middle */
-[data-calendar-part="day"][data-state="range-middle"] {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-  @apply rounded-none;
-}
-
-/* Today within selection - override background */
-[data-calendar-part="day"][data-today][data-state="selected"],
-[data-calendar-part="day"][data-today][data-state="range-start"],
-[data-calendar-part="day"][data-today][data-state="range-end"] {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-}
-
-[data-calendar-part="day"][data-today][data-state="range-middle"] {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
-
-/* Outside days (previous/next month) */
-[data-calendar-part="day"][data-outside] {
-  color: var(--muted-foreground);
-  @apply opacity-50;
-}
-
-[data-calendar-part="day"][data-outside][data-state="selected"],
-[data-calendar-part="day"][data-outside][data-state="range-start"],
-[data-calendar-part="day"][data-outside][data-state="range-end"] {
-  color: var(--primary-foreground);
-  @apply opacity-30;
-}
-
-[data-calendar-part="day"][data-outside][data-state="range-middle"] {
-  color: var(--accent-foreground);
-  @apply opacity-30;
-}
-
-/* Disabled */
-[data-calendar-part="day"]:disabled {
-  color: var(--muted-foreground);
-  @apply opacity-50 cursor-not-allowed;
-}
-
-/* Focus */
-[data-calendar-part="day"]:focus-visible {
-  @apply outline-none;
-  position: relative;
-  z-index: 10;
-  box-shadow: 0 0 0 2px var(--background),
-              0 0 0 4px var(--ring);
-}
-
-/* ===== Responsive Cell Sizes ===== */
-/*
- * Custom cell sizes can be set via --cell-size CSS variable:
- * style="--cell-size: 2.5rem;"
  *
- * Or with Tailwind classes:
- * css_classes: "[--cell-size:2.5rem] md:[--cell-size:3rem]"
+ * Cascade order in this file (full contract documented in form.css):
+ *   1. base      [data-component="calendar"], [data-calendar-part="…"]
+ *   2. sizes     — none (cell metrics come from --cell-size)
+ *   3. variants  [data-calendar-part="day"]:where([data-today], [data-state="…"], [data-outside])
+ *   4. states    […]:where(:hover, :focus-visible, :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 read 0,1,1 — an
+ * element selector cannot be zeroed away.)
+ *
+ * Note on the day cell: `:hover` deliberately sits after `[data-today]` and
+ * `[data-outside]`. Before flattening it out-specified them (0,4,0 vs 0,2,0);
+ * now only source order keeps that outcome.
+ *
+ * Custom cell sizes can be set via the --cell-size CSS variable:
+ *   style="--cell-size: 2.5rem;"
+ * or with Tailwind classes:
+ *   css_classes: "[--cell-size:2.5rem] md:[--cell-size:3rem]"
  */
 
-/* ===== 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.
- */
+@layer components {
+  /* ===== Root Container ===== */
+  [data-component="calendar"] {
+    --cell-size: 2rem;
+
+    @apply p-3 w-fit border;
+    border-radius: var(--calendar-radius, var(--surface-radius, 0.5rem));
+    /* A calendar panel sits above the page (standalone or inside a date-picker
+       popover), so it paints --popover rather than the page background. */
+    background-color: var(--popover, var(--background));
+    border-color: var(--border);
+  }
+
+  /* ===== Header (Navigation) ===== */
+  [data-calendar-part="header"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    @apply mb-4;
+  }
+
+  [data-calendar-part="header"] button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--cell-size);
+    height: var(--cell-size);
+    border-radius: var(--calendar-cell-radius, var(--control-radius, 0.375rem));
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+    color: var(--foreground);
+    @apply transition-colors duration-150;
+  }
+
+  [data-calendar-part="header"] button svg {
+    @apply size-4 shrink-0;
+  }
+
+  [data-calendar-part="header"] button:where(:hover:not(:disabled)) {
+    background-color: var(--accent-hover, var(--accent));
+    color: var(--accent-foreground);
+  }
+
+  [data-calendar-part="header"] button: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);
+  }
+
+  [data-calendar-part="header"] button:where(:disabled) {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  [data-calendar-part="caption"] {
+    @apply text-sm select-none;
+    font-weight: var(--label-weight, 500);
+    color: var(--foreground);
+  }
+
+  /* ===== Weekday Headers ===== */
+  [data-calendar-part="weekdays"] {
+    display: grid;
+    grid-template-columns: repeat(7, var(--cell-size));
+    @apply mb-1;
+  }
+
+  [data-calendar-part="weekday"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--cell-size);
+    height: var(--cell-size);
+    @apply text-xs font-normal select-none;
+    color: var(--muted-foreground);
+  }
+
+  /* ===== Calendar Grid ===== */
+  [data-calendar-part="grid"] {
+    display: flex;
+    flex-direction: column;
+    @apply gap-1;
+  }
+
+  [data-calendar-part="week"] {
+    display: grid;
+    grid-template-columns: repeat(7, var(--cell-size));
+  }
+
+  /* ===== Day Button Base ===== */
+  [data-calendar-part="day"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--cell-size);
+    height: var(--cell-size);
+    @apply text-sm font-normal;
+    border-radius: var(--calendar-cell-radius, var(--control-radius, 0.375rem));
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+    color: var(--foreground);
+    @apply transition-colors duration-150;
+  }
+
+  /* ===== Day Variants ===== */
+
+  /* Today */
+  [data-calendar-part="day"]:where([data-today]) {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  /* Selected (single mode) */
+  [data-calendar-part="day"]:where([data-state="selected"]) {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--calendar-cell-radius, var(--control-radius, 0.375rem));
+  }
+
+  /* Range Start */
+  [data-calendar-part="day"]:where([data-state="range-start"]) {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--calendar-cell-radius, var(--control-radius, 0.375rem)) 0 0
+                   var(--calendar-cell-radius, var(--control-radius, 0.375rem));
+  }
+
+  /* Range End */
+  [data-calendar-part="day"]:where([data-state="range-end"]) {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: 0 var(--calendar-cell-radius, var(--control-radius, 0.375rem))
+                   var(--calendar-cell-radius, var(--control-radius, 0.375rem)) 0;
+  }
+
+  /* Range Middle */
+  [data-calendar-part="day"]:where([data-state="range-middle"]) {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+    /* Structural: the middle of a joined range must have square edges */
+    border-radius: 0;
+  }
+
+  /* Today within selection - override background */
+  [data-calendar-part="day"]:where([data-today][data-state="selected"], [data-today][data-state="range-start"], [data-today][data-state="range-end"]) {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  [data-calendar-part="day"]:where([data-today][data-state="range-middle"]) {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  /* Outside days (previous/next month) */
+  [data-calendar-part="day"]:where([data-outside]) {
+    color: var(--muted-foreground);
+    @apply opacity-50;
+  }
+
+  [data-calendar-part="day"]:where([data-outside][data-state="selected"], [data-outside][data-state="range-start"], [data-outside][data-state="range-end"]) {
+    color: var(--primary-foreground);
+    @apply opacity-30;
+  }
+
+  [data-calendar-part="day"]:where([data-outside][data-state="range-middle"]) {
+    color: var(--accent-foreground);
+    @apply opacity-30;
+  }
+
+  /* ===== Day States ===== */
+
+  /* Hover — only for cells with no selection state of their own */
+  [data-calendar-part="day"]:where(:hover:not(:disabled):not([data-state])) {
+    background-color: var(--accent-hover, var(--accent));
+    color: var(--accent-foreground);
+  }
+
+  /* A selected cell keeps its fill on hover */
+  [data-calendar-part="day"]:where([data-state="selected"]:hover) {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  /* Disabled */
+  [data-calendar-part="day"]:where(:disabled) {
+    color: var(--muted-foreground);
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  /* Focus */
+  [data-calendar-part="day"]:where(:focus-visible) {
+    position: relative;
+    z-index: 10;
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, var(--ring));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
+}

data/app/assets/stylesheets/card.css

@@ -3,126 +3,132 @@
  * Card component for grouping related content with header, body, and footer.
  * Uses data attributes for styling to maintain consistency with other components.
  * Fully compatible with dark mode via CSS variables.
+ *
+ * Cascade order in this file (full contract documented in form.css):
+ *   1. base      [data-component="card"], [data-card-part="…"]
+ *   2. sizes     […]:where([data-size="…"])
+ *   3. variants  […]:where([data-layout="…"], [data-spacing="…"], [data-align="…"])
+ *   4. states    […]:where(a:hover, button:focus-visible, …)
+ *   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.)
  */
 
-/* ===== Base Card Styles ===== */
-[data-component="card"] {
-  display: flex;
-  flex-direction: column;
-  
-  /* Border & Radius */
-  @apply rounded-xl border shadow;
-  border-color: var(--border);
-  
-  /* Colors */
-  background-color: var(--card);
-  color: var(--card-foreground);
+@layer components {
+  /* ===== Base Card Styles ===== */
+  [data-component="card"] {
+    display: flex;
+    flex-direction: column;
+
+    /* Border, radius & elevation */
+    @apply border;
+    border-radius: var(--card-radius, var(--surface-radius, 0.5rem));
+    box-shadow: var(--card-shadow, var(--elevation-raised, var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))));
+    border-color: var(--border);
+
+    /* Colors */
+    background-color: var(--card);
+    color: var(--card-foreground);
+  }
+
+  /* ===== Card Header ===== */
+  :where([data-component="card"]) [data-card-part="header"] {
+    display: flex;
+    flex-direction: column;
+    @apply gap-1.5 p-6;
+  }
+
+  /* Header with row layout (when using action) */
+  :where([data-component="card"]) [data-card-part="header"]:where([data-layout="row"]) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    @apply gap-4;
+  }
+
+  /* ===== Card Title ===== */
+  :where([data-component="card"]) [data-card-part="title"] {
+    @apply text-lg font-semibold leading-none tracking-tight;
+  }
+
+  /* Small title variant (for compact headers) */
+  :where([data-component="card"]) [data-card-part="title"]:where([data-size="sm"]) {
+    @apply text-sm;
+    font-weight: var(--label-weight, 500);
+  }
+
+  /* ===== Card Description ===== */
+  :where([data-component="card"]) [data-card-part="description"] {
+    @apply text-sm;
+    color: var(--muted-foreground);
+  }
+
+  /* ===== Card Action ===== */
+  :where([data-component="card"]) [data-card-part="action"] {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    @apply gap-2;
+  }
+
+  /* ===== Card Content ===== */
+  :where([data-component="card"]) [data-card-part="content"] {
+    @apply p-6 pt-0;
+  }
+
+  /* Content with top padding (when no header) */
+  :where([data-component="card"]) [data-card-part="content"]:where([data-spacing="full"]) {
+    @apply pt-6;
+  }
+
+  /* ===== Card Footer ===== */
+  :where([data-component="card"]) [data-card-part="footer"] {
+    display: flex;
+    align-items: center;
+    @apply p-6 pt-0;
+  }
+
+  /* Footer with top padding (when no content) */
+  :where([data-component="card"]) [data-card-part="footer"]:where([data-spacing="full"]) {
+    @apply pt-6;
+  }
+
+  /* Footer alignment variants */
+  :where([data-component="card"]) [data-card-part="footer"]:where([data-align="between"]) {
+    justify-content: space-between;
+  }
+
+  :where([data-component="card"]) [data-card-part="footer"]:where([data-align="end"]) {
+    justify-content: flex-end;
+  }
+
+  :where([data-component="card"]) [data-card-part="footer"]:where([data-align="center"]) {
+    justify-content: center;
+  }
+
+  /* ===== Icon Support ===== */
+  :where([data-component="card"]) [data-card-part="header"] svg,
+  :where([data-component="card"]) [data-card-part="action"] svg {
+    @apply size-4 shrink-0;
+    color: var(--muted-foreground);
+  }
+
+  /* ===== Interactive Card (when used as link/button) ===== */
+  [data-component="card"]:where(a, button) {
+    text-decoration: none;
+    cursor: pointer;
+    @apply transition-[border-color,box-shadow] duration-150;
+  }
+
+  [data-component="card"]:where(a:hover, button:hover) {
+    border-color: var(--accent);
+  }
+
+  [data-component="card"]: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);
+  }
 }
-
-/* ===== Card Header ===== */
-[data-component="card"] [data-card-part="header"] {
-  display: flex;
-  flex-direction: column;
-  @apply gap-1.5 p-6;
-}
-
-/* Header with row layout (when using action) */
-[data-component="card"] [data-card-part="header"][data-layout="row"] {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  @apply gap-4;
-}
-
-/* ===== Card Title ===== */
-[data-component="card"] [data-card-part="title"] {
-  @apply text-lg font-semibold leading-none tracking-tight;
-}
-
-/* Small title variant (for compact headers) */
-[data-component="card"] [data-card-part="title"][data-size="sm"] {
-  @apply text-sm font-medium;
-}
-
-/* ===== Card Description ===== */
-[data-component="card"] [data-card-part="description"] {
-  @apply text-sm;
-  color: var(--muted-foreground);
-}
-
-/* ===== Card Action ===== */
-[data-component="card"] [data-card-part="action"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  @apply gap-2;
-}
-
-/* ===== Card Content ===== */
-[data-component="card"] [data-card-part="content"] {
-  @apply p-6 pt-0;
-}
-
-/* Content with top padding (when no header) */
-[data-component="card"] [data-card-part="content"][data-spacing="full"] {
-  @apply pt-6;
-}
-
-/* ===== Card Footer ===== */
-[data-component="card"] [data-card-part="footer"] {
-  display: flex;
-  align-items: center;
-  @apply p-6 pt-0;
-}
-
-/* Footer with top padding (when no content) */
-[data-component="card"] [data-card-part="footer"][data-spacing="full"] {
-  @apply pt-6;
-}
-
-/* Footer alignment variants */
-[data-component="card"] [data-card-part="footer"][data-align="between"] {
-  justify-content: space-between;
-}
-
-[data-component="card"] [data-card-part="footer"][data-align="end"] {
-  justify-content: flex-end;
-}
-
-[data-component="card"] [data-card-part="footer"][data-align="center"] {
-  justify-content: center;
-}
-
-/* ===== Icon Support ===== */
-[data-component="card"] [data-card-part="header"] svg,
-[data-component="card"] [data-card-part="action"] svg {
-  @apply size-4 shrink-0;
-  color: var(--muted-foreground);
-}
-
-/* ===== Interactive Card (when used as link/button) ===== */
-a[data-component="card"],
-button[data-component="card"] {
-  text-decoration: none;
-  cursor: pointer;
-  @apply transition-[border-color,box-shadow] duration-150;
-}
-
-a[data-component="card"]:hover,
-button[data-component="card"]:hover {
-  border-color: var(--accent);
-}
-
-a[data-component="card"]:focus-visible,
-button[data-component="card"]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--background),
-              0 0 0 4px var(--border);
-}
-
-/* ===== 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.
- */