maquina-components 0.7.0 → 0.7.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce8aead4098ab0b2b83aed60c45ffbcca78f03f8e800f43259a6a51f32f36e5d
-  data.tar.gz: e58baf4a3a6ce7dcd8c0b8cce1166b5afe9d21ced6751574195ab29d76329625
+  metadata.gz: 870cc289944a0b16196e5e259398cbdabf0ca1dd998bf2a178967898a3d1a57e
+  data.tar.gz: db3daba76341084ee6e096fd2186cebdcf594b6faee992be2c9e62e4b5781eed
 SHA512:
-  metadata.gz: '03008f285333b7b4f7cc066a10f55366629b683c7518458ac3187ffff2e6e1fb93a8850f9225b16d98fc0e14bedcc8ccef5759ee628acc4865964b90daf54661'
-  data.tar.gz: 9ad4bb8c6d2b9ed0d0595d9571bb7d471e1fe6aaa4c3c294e0b58b6e2550a5d6f42fdbc5b3a077e44fb10ead2394e75cf07350edb884dd229663c15961b75201
+  metadata.gz: a1934e3230c028e772cbaf0a0276a21fbb6f8ea406e76c355fdfc29587b445619a717a2d7f69a388a65afbcdef5236e59495072192845993a3079c944b0ca59c
+  data.tar.gz: 6c29f68c06d96157c4402ff03f1594aac41a748480d464c678bd995d10aa49ba055f759674786d666a1fb8b0f146fc76243a95171b146c88e82aa88d42df644c

data/README.md

@@ -165,7 +165,8 @@ bin/rails maquina:doctor
 ```
 
 It scans your CSS, views and JavaScript and prints file:line for every pattern
-the new release changes, grouped `BREAKING` / `REVIEW` / `CLEANUP`. It is
+the new release changes, grouped `BREAKING` / `REVIEW` / `CLEANUP`, each tagged
+with the release it came from. It is
 advisory: it never edits anything and never fails a build. See
 [docs/upgrading.md](docs/upgrading.md) for what changed and how to keep the
 previous look.

data/app/assets/stylesheets/date_picker.css

@@ -113,11 +113,11 @@
   }
 
   /* 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);
+  :where([data-component="date-picker"]:has(input:user-invalid), [data-component="date-picker"]:has(input[aria-invalid="true"])) [data-date-picker-part="trigger"] {
+    border-color: var(--destructive-border, var(--destructive));
   }
 
-  :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) {
+  :where([data-component="date-picker"]:has(input:user-invalid), [data-component="date-picker"]:has(input[aria-invalid="true"])) [data-date-picker-part="trigger"]:where(:focus-visible) {
     --focus-ring-color: var(--destructive);
   }
 

data/app/assets/stylesheets/form.css

@@ -154,9 +154,15 @@
 
   /* Invalid/error state — the destructive halo is themeable through
      --focus-ring-color, which the :focus-visible rule above also reads. */
-  [data-component="input"]:where([aria-invalid="true"], :invalid:not(:placeholder-shown)) {
+  [data-component="input"]:where([aria-invalid="true"], :user-invalid) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
+    border-color: var(--destructive-border, var(--destructive));
+  }
+
+  /* The destructive halo is a focus affordance, not a resting one: painting an
+     outline on an unfocused field doubles the border and reads as a second
+     error. Gated to match the :focus-visible rule above. */
+  [data-component="input"]:where([aria-invalid="true"], :user-invalid):where(:focus-visible) {
     outline-width: var(--focus-ring-width, 3px);
     outline-style: var(--focus-ring-style, solid);
     outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
@@ -206,9 +212,15 @@
     @apply cursor-not-allowed opacity-50;
   }
 
-  [data-component="textarea"]:where([aria-invalid="true"], :invalid:not(:placeholder-shown)) {
+  [data-component="textarea"]:where([aria-invalid="true"], :user-invalid) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
+    border-color: var(--destructive-border, var(--destructive));
+  }
+
+  /* The destructive halo is a focus affordance, not a resting one: painting an
+     outline on an unfocused field doubles the border and reads as a second
+     error. Gated to match the :focus-visible rule above. */
+  [data-component="textarea"]:where([aria-invalid="true"], :user-invalid):where(:focus-visible) {
     outline-width: var(--focus-ring-width, 3px);
     outline-style: var(--focus-ring-style, solid);
     outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
@@ -273,7 +285,7 @@
 
   [data-component="select"]:where([aria-invalid="true"]) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
+    border-color: var(--destructive-border, var(--destructive));
   }
 
   /* ===================================================================
@@ -355,7 +367,7 @@
 
   [data-component="checkbox"]:where([aria-invalid="true"]) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
+    border-color: var(--destructive-border, var(--destructive));
     outline-width: var(--focus-ring-width, 3px);
     outline-style: var(--focus-ring-style, solid);
     outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
@@ -653,7 +665,11 @@
   [data-form-part="error"] {
     @apply text-sm;
     font-weight: var(--label-weight, 500);
-    color: var(--destructive-foreground);
+    /* Error text sits on the page, not on a destructive fill, so it is the one
+       place --destructive-foreground is the wrong role. Which of the pair is
+       readable as text depends on the host palette's convention, so it routes
+       through its own token: see docs/theming.md. */
+    color: var(--destructive-text, var(--destructive-foreground));
   }
 
   /* Rails error wrapper compatibility */
@@ -665,7 +681,12 @@
   :where(.field_with_errors) [data-component="textarea"],
   :where(.field_with_errors) [data-component="select"] {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
+    border-color: var(--destructive-border, var(--destructive));
+  }
+
+  :where(.field_with_errors) [data-component="input"]:where(:focus-visible),
+  :where(.field_with_errors) [data-component="textarea"]:where(:focus-visible),
+  :where(.field_with_errors) [data-component="select"]:where(:focus-visible) {
     outline-width: var(--focus-ring-width, 3px);
     outline-style: var(--focus-ring-style, solid);
     outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));

data/app/javascript/controllers/dropdown_menu_controller.js

@@ -62,12 +62,57 @@ export default class extends Controller {
     // Add event listeners
     this.addEventListeners()
 
-    // Focus first item after animation
+    // Measure after the paint, not here: dataset.state was just set and the
+    // content is still laid out at its pre-open box in this tick.
     requestAnimationFrame(() => {
+      this.positionContent()
       this.focusFirstItem()
     })
   }
 
+  // The placement the author asked for, captured before we ever overwrite it.
+  // Memoised on first read, which happens on the first open() -- i.e. while
+  // data-side is still whatever the partial rendered.
+  get authoredSide() {
+    if (this._authoredSide === undefined) {
+      this._authoredSide = (this.hasContentTarget && this.contentTarget.dataset.side) || "bottom"
+    }
+
+    return this._authoredSide
+  }
+
+  // Flip the menu above the trigger when it would otherwise open past the
+  // bottom of the viewport. CSS already styles every side; nothing was ever
+  // choosing one from geometry.
+  positionContent() {
+    if (!this.hasContentTarget) return
+
+    const content = this.contentTarget
+    const side = this.authoredSide
+
+    // Always re-measure from the authored placement. Without this reset a menu
+    // flipped once in a short window stays flipped after the window grows.
+    content.dataset.side = side
+
+    // Only the block axis flips; left/right placements are deliberate.
+    if (side !== "bottom" && side !== "top") return
+
+    const trigger = this.hasTriggerTarget ? this.triggerTarget : this.element
+    const triggerRect = trigger.getBoundingClientRect()
+    const gap = 4 // matches the mt-1 / mb-1 in dropdown_menu.css
+    const needed = content.getBoundingClientRect().height + gap
+    const roomBelow = window.innerHeight - triggerRect.bottom
+    const roomAbove = triggerRect.top
+
+    // Flip only when the other side genuinely fits. Flipping into a space that
+    // is also too small trades one clipped menu for another.
+    if (side === "bottom" && needed > roomBelow && needed <= roomAbove) {
+      content.dataset.side = "top"
+    } else if (side === "top" && needed > roomAbove && needed <= roomBelow) {
+      content.dataset.side = "bottom"
+    }
+  }
+
   close() {
     if (!this.openValue || !this.hasContentTarget) return
 

data/app/javascript/controllers/menu_button_controller.js

@@ -55,6 +55,44 @@ export default class extends Controller {
     this.contentTarget.hidden = false
 
     this.addEventListeners()
+
+    // Measure after the paint: the content is still at its pre-open box here.
+    requestAnimationFrame(() => this.positionContent())
+  }
+
+  // The placement the author asked for, read before we ever overwrite it.
+  get authoredSide() {
+    if (this._authoredSide === undefined) {
+      this._authoredSide = (this.hasContentTarget && this.contentTarget.dataset.side) || "bottom"
+    }
+
+    return this._authoredSide
+  }
+
+  // Flip above the button when the menu would open past the bottom of the
+  // viewport and there is room above. Mirrors dropdown_menu_controller.
+  positionContent() {
+    if (!this.hasContentTarget || !this.hasButtonTarget) return
+
+    const content = this.contentTarget
+    const side = this.authoredSide
+
+    // Reset first, so a menu flipped in a short window unflips once it grows.
+    content.dataset.side = side
+
+    if (side !== "bottom" && side !== "top") return
+
+    const buttonRect = this.buttonTarget.getBoundingClientRect()
+    const gap = 4 // matches the calc(100% + 4px) offsets in menu_button.css
+    const needed = content.getBoundingClientRect().height + gap
+    const roomBelow = window.innerHeight - buttonRect.bottom
+    const roomAbove = buttonRect.top
+
+    if (side === "bottom" && needed > roomBelow && needed <= roomAbove) {
+      content.dataset.side = "top"
+    } else if (side === "top" && needed > roomAbove && needed <= roomBelow) {
+      content.dataset.side = "bottom"
+    }
   }
 
   close() {

data/app/views/components/alert/_description.html.erb

@@ -2,5 +2,5 @@
 <% merged_data = merge_component_data(html_options, alert_part: :description) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/alert/_title.html.erb

@@ -2,5 +2,5 @@
 <% merged_data = merge_component_data(html_options, alert_part: :title) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/card/_description.html.erb

@@ -2,5 +2,5 @@
 <% merged_data = merge_component_data(html_options, card_part: :description) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/card/_title.html.erb

@@ -5,5 +5,5 @@
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/combobox/_label.html.erb

@@ -4,5 +4,5 @@
   ) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/drawer/_description.html.erb

@@ -2,5 +2,5 @@
 <% merged_data = merge_component_data(html_options, drawer_part: :description) %>
 
 <%= content_tag tag, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/drawer/_title.html.erb

@@ -2,5 +2,5 @@
 <% merged_data = merge_component_data(html_options, drawer_part: :title) %>
 
 <%= content_tag tag, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/sidebar/_menu_badge.html.erb

@@ -6,5 +6,5 @@
     sidebar_part: "menu-badge"
   ) %>
 <%= content_tag :span, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content || yield %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/table/_caption.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options, table_part: :caption) %>
 <%= content_tag :caption, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content || yield %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/table/_cell.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options, table_part: :cell) %>
 <%= content_tag :td, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content || yield %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/table/_head.html.erb

@@ -4,5 +4,5 @@
   html_options[:scope] = scope if scope
 %>
 <%= content_tag :th, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content || yield %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/toast/_description.html.erb

@@ -4,5 +4,5 @@
   ) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content %>
+  <%= text.presence || content || yield %>
 <% end %>

data/app/views/components/toast/_title.html.erb

@@ -4,5 +4,5 @@
   ) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || content %>
+  <%= text.presence || content || yield %>
 <% end %>

data/lib/generators/maquina_components/install/templates/shape_state_tokens.css.tt

@@ -20,11 +20,11 @@
      accent. Set them to your own blue (or to var(--primary)) if you prefer. */
   --info: oklch(0.93 0.04 240);
   --info-foreground: oklch(0.4 0.12 250);
+}
 
-  .dark {
-    --info: oklch(0.34 0.07 250);
-    --info-foreground: oklch(0.88 0.06 240);
-  }
+.dark {
+  --info: oklch(0.34 0.07 250);
+  --info-foreground: oklch(0.88 0.06 240);
 }
 
 /* -------------------------------------------------------------------------

data/lib/generators/maquina_components/install/templates/theme.css.tt

@@ -76,58 +76,61 @@
   --sidebar-accent-foreground: oklch(0.145 0 0);
   --sidebar-border: oklch(0.88 0 0);
   --sidebar-ring: oklch(0.645 0.246 16);
+}
 
-  /* Dark Mode */
-  .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
+/* Dark Mode
+   Put the `dark` class on <html>. This block must stay at the top level: nested
+   inside :root it compiles to `:root .dark`, which never matches <html> itself,
+   and the @theme bindings below resolve against <html>. */
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
 
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
 
-    --popover: oklch(0.269 0 0);
-    --popover-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
 
-    --primary: oklch(0.712 0.194 13);
-    --primary-foreground: oklch(0.15 0.052 13);
+  --primary: oklch(0.712 0.194 13);
+  --primary-foreground: oklch(0.15 0.052 13);
 
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
 
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
 
-    --accent: oklch(0.371 0 0);
-    --accent-foreground: oklch(0.985 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
 
-    --success: oklch(0.32 0.06 168);
-    --success-foreground: oklch(0.82 0.06 168);
+  --success: oklch(0.32 0.06 168);
+  --success-foreground: oklch(0.82 0.06 168);
 
-    --warning: oklch(0.36 0.06 55);
-    --warning-foreground: oklch(0.86 0.06 55);
+  --warning: oklch(0.36 0.06 55);
+  --warning-foreground: oklch(0.86 0.06 55);
 
-    --destructive: oklch(0.34 0.07 8);
-    --destructive-foreground: oklch(0.88 0.06 8);
+  --destructive: oklch(0.34 0.07 8);
+  --destructive-foreground: oklch(0.88 0.06 8);
 
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.455 0.188 13);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.455 0.188 13);
 
-    --chart-1: oklch(0.712 0.194 13);
-    --chart-2: oklch(0.72 0.09 168);
-    --chart-3: oklch(0.78 0.09 55);
-    --chart-4: oklch(0.645 0.246 16);
-    --chart-5: oklch(0.58 0.13 8);
+  --chart-1: oklch(0.712 0.194 13);
+  --chart-2: oklch(0.72 0.09 168);
+  --chart-3: oklch(0.78 0.09 55);
+  --chart-4: oklch(0.645 0.246 16);
+  --chart-5: oklch(0.58 0.13 8);
 
-    --sidebar: oklch(0.14 0 0);
-    --sidebar-foreground: oklch(0.9 0 0);
-    --sidebar-primary: oklch(0.712 0.194 13);
-    --sidebar-primary-foreground: oklch(0.15 0.052 13);
-    --sidebar-accent: oklch(0.22 0 0);
-    --sidebar-accent-foreground: oklch(0.95 0 0);
-    --sidebar-border: oklch(1 0 0 / 12%);
-    --sidebar-ring: oklch(0.455 0.188 13);
-  }
+  --sidebar: oklch(0.14 0 0);
+  --sidebar-foreground: oklch(0.9 0 0);
+  --sidebar-primary: oklch(0.712 0.194 13);
+  --sidebar-primary-foreground: oklch(0.15 0.052 13);
+  --sidebar-accent: oklch(0.22 0 0);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(1 0 0 / 12%);
+  --sidebar-ring: oklch(0.455 0.188 13);
 }
 
 /* Tailwind Theme Bindings

data/lib/maquina_components/doctor.rb

@@ -4,19 +4,22 @@ module MaquinaComponents
   # Migration scanner behind `rake maquina:doctor`.
   #
   # Run inside a consuming app, it looks for the app's own CSS/view/JS patterns
-  # that 0.6.0 makes redundant or outright breaks, and prints file:line plus a
-  # suggested replacement for each. Advisory only: it never edits anything and
-  # never fails a build.
+  # that a maquina release makes redundant or outright breaks, and prints
+  # file:line plus a suggested replacement for each. Advisory only: it never
+  # edits anything and never fails a build.
+  #
+  # Findings carry the release that introduced them, so the report stays useful
+  # across upgrades rather than describing a single migration.
   #
   # Plain Ruby on purpose - no Rails, no extra gems - so it can also be run
   # against a directory from the engine's own repo.
   class Doctor
-    Finding = Struct.new(:path, :line, :source, :severity, :rule, :suggestion)
+    Finding = Struct.new(:path, :line, :source, :severity, :rule, :suggestion, :version)
 
     SEVERITIES = {
-      breaking: "BREAKING     - stops working in 0.6.0",
-      review: "REVIEW       - still works, but 0.6.0 gives you a token for it",
-      cleanup: "CLEANUP      - probably unnecessary in 0.6.0"
+      breaking: "BREAKING     - stops working after upgrading",
+      review: "REVIEW       - still works, but there is now a token for it",
+      cleanup: "CLEANUP      - probably unnecessary now"
     }.freeze
 
     CSS_GLOBS = [
@@ -54,6 +57,41 @@ module MaquinaComponents
     RADIUS_DECL = /(?:border-radius\s*:|@apply[^;{}]*\brounded(?:-[a-z0-9\[\].\/-]+)?\b)/
     SHADOW_DECL = /(?:box-shadow\s*:|@apply[^;{}]*\b(?:shadow|ring)(?:-[a-z0-9\[\].\/-]+)?\b)/
     FOCUS_SELECTOR = /:focus(-visible|-within)?\b/
+    # A bare `.dark` in a selector list; `&.dark` (which compiles to :root.dark)
+    # is fine and does not match.
+    BARE_DARK_SELECTOR = /(?:\A|,)\s*\.dark\s*(?:,|\z)/
+    ROOT_SELECTOR = /\A(?::root|html)\z/
+
+    # 0.7.1 -----------------------------------------------------------------
+    # The destructive pair plus the surface it lands on, read out of a host
+    # theme. Lightness alone cannot separate the two shipped palette
+    # conventions -- a tint palette's dark block has the same shape as a
+    # shadcn palette's light block -- so the check measures the symptom
+    # (error text disappearing into its own card) instead. See docs/theming.md.
+    DESTRUCTIVE_DECL = /\A--(destructive|destructive-foreground|card|background)\s*:\s*(.+)\z/m
+    OKLCH_LIGHTNESS = /oklch\(\s*([0-9.]+)(%?)/
+    # Oklch lightness gap below which text is effectively invisible on its
+    # surface. A proxy for a contrast ratio, deliberately conservative: this
+    # rule is BREAKING, so it must not fire on a merely low-contrast palette.
+    CONTRAST_FLOOR = 0.25
+    # Only :root / .dark / @theme declare a palette; a component-level override
+    # of the same name is not a statement about the app's convention.
+    THEME_SCOPE = /\A(:root|html|:where\(:root\)|\.dark|html\.dark|\[data-theme[^\]]*\]|)\s*\z/
+
+    ERROR_PART = /data-form-part=["']error["']|form_part:\s*[:"']error/
+    FIELD_WITH_ERRORS = /field_with_errors/
+    ARIA_INVALID = /aria-invalid|aria:\s*\{[^}]*\binvalid\b|\baria_invalid\b/
+    HANDROLLED_ERROR_COLOR = /\btext-destructive\b|\btext-red-\d/
+
+    # A form field, raw or through a Rails helper. Matched against a bounded
+    # window rather than a line: helper calls routinely span five or six lines,
+    # and a per-line regex would silently miss almost every real one.
+    FIELD_OPENER = /<(?:input|textarea)\b|\bf\.(?:text_field|text_area|email_field|password_field|number_field|url_field|telephone_field|phone_field|search_field|date_field)\b/
+    FIELD_COMPONENT = /data-component=["'](?:input|textarea)["']|component:\s*[:"'](?:input|textarea)["']?/
+    FIELD_REQUIRED = /\brequired\b/
+    FIELD_PLACEHOLDER = /\bplaceholder\b/
+
+    DROPDOWN_FLIP_HINT = /dataset\.side|["']data-side["']|setAttribute\(\s*["']data-side["']/
 
     attr_reader :root, :findings, :scanned_files
 
@@ -61,12 +99,25 @@ module MaquinaComponents
       @root = File.expand_path(root.to_s)
       @findings = []
       @scanned_files = 0
+      # Cross-file state: some 0.7.1 rules are conclusions about the whole app,
+      # not about one line, so they are evaluated after the scan.
+      @destructive_tokens = {}
+      @aria_invalid_seen = false
+      @error_sites = []
     end
 
     def run
       each_file(CSS_GLOBS) { |path| scan_css(path) }
-      each_file(VIEW_GLOBS) { |path| scan_markup(path) }
-      each_file(JS_GLOBS) { |path| scan_markup(path) }
+      each_file(VIEW_GLOBS) { |path|
+        scan_markup(path)
+        scan_form_fields(path)
+      }
+      each_file(JS_GLOBS) { |path|
+        scan_markup(path)
+        scan_javascript(path)
+      }
+      check_destructive_palette
+      check_invalid_without_aria
       self
     end
 
@@ -81,7 +132,7 @@ module MaquinaComponents
       out << ""
 
       if findings.empty?
-        out << "No at-risk patterns found. Nothing to migrate for 0.6.0."
+        out << "No at-risk patterns found. Nothing to migrate."
         out << ""
         return out.join("\n")
       end
@@ -93,7 +144,7 @@ module MaquinaComponents
         out << "#{heading} (#{group.size})"
         out << "-" * 72
         group.each do |finding|
-          out << "  #{relative(finding.path)}:#{finding.line}  [#{finding.rule}]"
+          out << "  #{relative(finding.path)}:#{finding.line}  [#{finding.rule}] (#{finding.version})"
           out << "    #{finding.source}"
           finding.suggestion.each_line { |line| out << "    -> #{line.chomp}" }
           out << ""
@@ -101,7 +152,7 @@ module MaquinaComponents
       end
 
       out << "Summary: " + SEVERITIES.keys.map { |s| "#{findings_for(s).size} #{s}" }.join(", ")
-      out << "Advisory only - nothing was changed. See the 0.6.0 upgrade notes for the full token list."
+      out << "Advisory only - nothing was changed. See docs/upgrading.md for the release notes behind each rule."
       out << ""
       out.join("\n")
     end
@@ -124,8 +175,8 @@ module MaquinaComponents
         end
     end
 
-    def add(path, index, source, severity, rule, suggestion)
-      findings << Finding.new(path, index + 1, squash(source), severity, rule, suggestion)
+    def add(path, index, source, severity, rule, suggestion, version = "0.6.0")
+      findings << Finding.new(path, index + 1, squash(source), severity, rule, suggestion, version)
     end
 
     # Multi-line selectors read better as one line in a report.
@@ -149,7 +200,10 @@ module MaquinaComponents
           selector = buffer.strip
           buffer = +""
           at_rule = selector.start_with?("@")
-          check_selector(path, index, selector, in_layer?(stack)) unless at_rule
+          unless at_rule
+            check_selector(path, index, selector, in_layer?(stack))
+            check_nested_dark(path, index, selector, stack)
+          end
           stack.push(selector)
         when "}"
           check_declaration(path, index, buffer.strip, stack)
@@ -178,6 +232,10 @@ module MaquinaComponents
       return if declaration.empty?
 
       chain = selector_chain(stack)
+      # Palette tokens live on :root / .dark, never on a component selector, so
+      # they have to be captured before the component guard below discards them.
+      capture_destructive_token(path, index, declaration, chain)
+
       return unless component_selector?(chain)
 
       if RADIUS_DECL.match?(declaration)
@@ -230,6 +288,24 @@ module MaquinaComponents
       end
     end
 
+    # `.dark` nested in `:root` compiles to `:root .dark`, a descendant of
+    # <html>, so `<html class="dark">` never matches it. And the @theme
+    # bindings resolve against <html>, so moving the class to <body> does not
+    # help either: dark mode silently never applies. The 0.7.1 installer
+    # shipped its palette this way.
+    def check_nested_dark(path, index, selector, stack)
+      return unless BARE_DARK_SELECTOR.match?(selector)
+      return unless stack.any? { |ancestor| ROOT_SELECTOR.match?(ancestor) }
+
+      add(path, index, selector, :breaking, "nested-dark-block",
+        "This .dark block is nested inside :root, so it compiles to `:root .dark` and\n" \
+        "never matches <html class=\"dark\">: dark mode does not apply. Move it out to\n" \
+        "the top level, after the closing brace of :root:\n" \
+        "  :root { ... }\n" \
+        "  .dark { ... }",
+        "0.7.2")
+    end
+
     # Checks that read the same in CSS, ERB and JS.
     def scan_shared(path, index, line)
       if PRESENCE_ACTIVE.match?(line)
@@ -257,6 +333,22 @@ module MaquinaComponents
       read(path).each_with_index do |line, index|
         scan_shared(path, index, line)
 
+        # Cross-file signals for check_invalid_without_aria.
+        @aria_invalid_seen ||= ARIA_INVALID.match?(line)
+        if ERROR_PART.match?(line) || FIELD_WITH_ERRORS.match?(line)
+          @error_sites << {path: path, index: index, source: squash(line)}
+        end
+
+        if ERROR_PART.match?(line) && HANDROLLED_ERROR_COLOR.match?(line)
+          add(path, index, line, :cleanup, "destructive-error-workaround",
+            "This restates the error color by hand on top of the engine's part.\n" \
+            "0.7.1 gives that color its own token, so the part is legible under\n" \
+            "either palette convention:\n" \
+            "  :root { --destructive-text: var(--destructive); }\n" \
+            "Then drop the utility and let [data-form-part=\"error\"] paint itself.",
+            "0.7.1")
+        end
+
         next unless line.include?("data-component=") || line =~ /component:\s*[:"']/
 
         if /\b(?:rounded|shadow)(?:-[a-z0-9\[\].\/-]+)?\b/.match?(line)
@@ -267,6 +359,133 @@ module MaquinaComponents
       end
     end
 
+    # ----- 0.7.1 checks -------------------------------------------------
+
+    # Records --destructive / --destructive-foreground per theme scope. The
+    # engine ships two opposite conventions for this pair (a pale tint with a
+    # dark readable foreground, and a saturated fill with a near-white one),
+    # and only the app's own theme says which one its components are sitting in.
+    def capture_destructive_token(path, index, declaration, chain)
+      match = DESTRUCTIVE_DECL.match(declaration.strip)
+      return unless match
+      return unless THEME_SCOPE.match?(chain.to_s.strip)
+
+      name = match[1]
+      scope = /\.dark\b/.match?(chain.to_s) ? "dark" : "light"
+
+      @destructive_tokens[scope] ||= {}
+      @destructive_tokens[scope][name] ||= {value: match[2].strip, path: path, index: index}
+    end
+
+    # First component of an oklch() color, normalised to 0..1. Returns nil for
+    # any other color space -- an unparseable value must not be guessed at.
+    def oklch_lightness(value)
+      match = OKLCH_LIGHTNESS.match(value.to_s)
+      return nil unless match
+
+      lightness = match[1].to_f
+      (match[2] == "%") ? lightness / 100.0 : lightness
+    end
+
+    def check_destructive_palette
+      @destructive_tokens.each do |scope, tokens|
+        foreground = tokens["destructive-foreground"]
+        base = tokens["destructive"]
+        surface = tokens["card"] || tokens["background"]
+        next unless foreground && base && surface
+
+        foreground_lightness = oklch_lightness(foreground[:value])
+        surface_lightness = oklch_lightness(surface[:value])
+        next unless foreground_lightness && surface_lightness
+
+        # [data-form-part="error"] paints --destructive-foreground on the card.
+        # Under the installer's palette that is the dark readable red and this
+        # gap is wide; under a shadcn-style palette it is the near-white
+        # on-fill color and the text vanishes.
+        next unless (foreground_lightness - surface_lightness).abs < CONTRAST_FLOOR
+
+        add(foreground[:path], foreground[:index], "--destructive-foreground: #{foreground[:value]}",
+          :breaking, "destructive-error-invisible",
+          "In this #{scope} palette --destructive-foreground is the color that sits ON\n" \
+          "a destructive fill, not on the page. [data-form-part=\"error\"] paints it\n" \
+          "as body text on --#{tokens["card"] ? "card" : "background"}, where it is all but invisible\n" \
+          "(oklch lightness #{foreground_lightness.round(3)} against #{surface_lightness.round(3)}).\n" \
+          "0.7.1 routes that color through its own token. Add to your #{scope} block:\n" \
+          "  --destructive-text: var(--destructive);\n" \
+          "  --destructive-border: var(--destructive);",
+          "0.7.1")
+      end
+    end
+
+    # An app that never sets aria-invalid is getting its error border from the
+    # CSS :invalid fallback. 0.7.1 narrows that to :user-invalid so a pristine
+    # required field stops painting red, which also means an app relying on the
+    # old behaviour loses the border it was depending on.
+    def check_invalid_without_aria
+      return if @aria_invalid_seen || @error_sites.empty?
+
+      site = @error_sites.first
+      add(site[:path], site[:index], site[:source], :breaking, "invalid-styling-without-aria",
+        "This app renders form errors (#{@error_sites.size} site#{"s" unless @error_sites.size == 1})\n" \
+        "but never sets aria-invalid, so the destructive border is coming from the\n" \
+        "CSS :invalid fallback. 0.7.1 replaces that with :user-invalid, which only\n" \
+        "matches after the reader has interacted with the field -- a server-rendered\n" \
+        "error on an untouched form will no longer paint a border.\n" \
+        "Drive the state explicitly on the input:\n" \
+        "  aria: { invalid: model.errors[:field].any? }",
+        "0.7.1")
+    end
+
+    # Scans a view for form fields across their whole tag, not line by line.
+    def scan_form_fields(path)
+      source = File.read(path)
+
+      source.to_enum(:scan, FIELD_OPENER).each do
+        match = Regexp.last_match
+        window = field_window(source, match.begin(0))
+        next unless FIELD_COMPONENT.match?(window)
+        next unless FIELD_REQUIRED.match?(window)
+        next if FIELD_PLACEHOLDER.match?(window)
+
+        index = source[0...match.begin(0)].count("\n")
+        add(path, index, window, :review, "required-without-placeholder",
+          "Before 0.7.1 a required field with no placeholder matched\n" \
+          ":invalid:not(:placeholder-shown) from first paint, so it rendered the\n" \
+          "error state before the reader touched it -- with no aria-invalid, so\n" \
+          "screen readers were told nothing. 0.7.1 keys the error state on\n" \
+          ":user-invalid instead, and the premature red goes away on upgrade.\n" \
+          "Nothing to change here unless you were relying on it; drive real errors\n" \
+          "with aria-invalid.",
+          "0.7.1")
+      end
+    rescue ArgumentError, Errno::ENOENT
+      nil
+    end
+
+    # From the opener to the end of the tag or ERB expression that contains it,
+    # bounded so a malformed template cannot swallow the rest of the file.
+    def field_window(source, start)
+      slice = source[start, 500].to_s
+      terminator = slice.index("%>") || slice.index(">") || slice.length
+      slice[0, terminator + 2]
+    end
+
+    def scan_javascript(path)
+      source = File.read(path)
+      return unless source.include?("getBoundingClientRect")
+      return unless DROPDOWN_FLIP_HINT.match?(source)
+
+      index = source[0...source.index("getBoundingClientRect")].count("\n")
+      add(path, index, "getBoundingClientRect + data-side", :cleanup, "app-level-dropdown-flip",
+        "This looks like an app-level dropdown collision/flip controller. 0.7.1\n" \
+        "measures on open and sets data-side itself, for both the dropdown menu\n" \
+        "and the menu button, so the workaround can go.\n" \
+        "Delete it and let the engine place the menu.",
+        "0.7.1")
+    rescue ArgumentError, Errno::ENOENT
+      nil
+    end
+
     def read(path)
       File.readlines(path)
     rescue ArgumentError, Errno::ENOENT

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.7.0"
+  VERSION = "0.7.2"
 end

data/lib/tasks/maquina_components_tasks.rake

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 namespace :maquina do
-  desc "Scan this app's CSS/views/JS for patterns that maquina-components 0.6.0 changes (advisory, always exits 0)"
+  desc "Scan this app's CSS/views/JS for patterns a maquina-components release changes (advisory, always exits 0)"
   task :doctor, [:path] do |_task, args|
     require_relative "../maquina_components/doctor"
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maquina-components
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.7.2
 platform: ruby
 authors:
 - Mario Alberto Chávez