RubyGems - senren-ui - Versions diffs - 0.2.0 → 0.3.0 - Mend

senren-ui 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

data/lib/generators/senren/install/templates/senren_themes.css.tt ADDED Viewed

@@ -0,0 +1,339 @@
+/*
+ * Senren UI - optional palette presets.
+ *
+ * Link this after senren.css and set data-senren-theme on <html> to switch:
+ *
+ *   <%%= stylesheet_link_tag "senren" %>
+ *   <%%= stylesheet_link_tag "senren_themes" %>
+ *
+ *   <html data-senren-theme="slate">
+ *
+ * Leave the attribute off for the default Spring Garden palette, which
+ * senren.css declares in :root.
+ *
+ * Every theme below is nothing but a re-declaration of the same token set that
+ * senren.css defines. No component is aware that themes exist: components read
+ * hsl(var(--senren-*)) and inherit whatever is in scope. Adding your own theme
+ * means copying one of these blocks and changing the values — there is no
+ * component to touch and no build step to run.
+ *
+ * Scoping: [data-senren-theme] on <html>, so it composes with the existing
+ * .dark class rather than replacing it. Each theme therefore ships a light and
+ * a dark block, and light/dark stays orthogonal to the palette choice.
+ *
+ * `senren` is the default and needs no block: it is what senren.css already
+ * declares in :root and .dark.
+ *
+ * test/themes_test.rb asserts every theme here declares the complete token set,
+ * so a palette cannot ship with a variable quietly missing.
+ */
+/* ── slate ────────────────────────────────────────────────────────────────
+   Cool neutrals, near-black primary, tight radius. The restrained look most
+   developer tools converge on. */
+[data-senren-theme="slate"] {
+  --senren-background: 0 0% 100%;
+  --senren-foreground: 222 47% 11%;
+  --senren-muted: 210 40% 96%;
+  --senren-muted-foreground: 215 16% 47%;
+  --senren-card: 0 0% 100%;
+  --senren-card-foreground: 222 47% 11%;
+  --senren-popover: 0 0% 100%;
+  --senren-popover-foreground: 222 47% 11%;
+  --senren-border: 214 32% 91%;
+  --senren-input: 214 32% 91%;
+  --senren-ring: 222 47% 11%;
+  --senren-primary: 222 47% 11%;
+  --senren-primary-foreground: 210 40% 98%;
+  --senren-secondary: 210 40% 96%;
+  --senren-secondary-foreground: 222 47% 11%;
+  --senren-accent: 210 40% 94%;
+  --senren-accent-foreground: 222 47% 11%;
+  --senren-destructive: 0 72% 51%;
+  --senren-destructive-foreground: 210 40% 98%;
+  --senren-success: 142 71% 36%;
+  --senren-success-foreground: 210 40% 98%;
+  --senren-warning: 38 92% 50%;
+  --senren-warning-foreground: 222 47% 11%;
+  --senren-radius: 0.375rem;
+  --senren-palette-sky: 217 91% 60%;
+  --senren-palette-sakura: 330 81% 60%;
+  --senren-palette-pond: 199 89% 48%;
+  --senren-palette-leaf: 142 71% 45%;
+  --senren-palette-iris: 258 90% 66%;
+  --senren-palette-paper: 210 40% 98%;
+}
+.dark[data-senren-theme="slate"] {
+  --senren-background: 222 47% 7%;
+  --senren-foreground: 210 40% 98%;
+  --senren-muted: 217 33% 17%;
+  --senren-muted-foreground: 215 20% 65%;
+  --senren-card: 222 47% 9%;
+  --senren-card-foreground: 210 40% 98%;
+  --senren-popover: 222 47% 9%;
+  --senren-popover-foreground: 210 40% 98%;
+  --senren-border: 217 33% 20%;
+  --senren-input: 217 33% 20%;
+  --senren-ring: 213 27% 84%;
+  --senren-primary: 210 40% 98%;
+  --senren-primary-foreground: 222 47% 11%;
+  --senren-secondary: 217 33% 17%;
+  --senren-secondary-foreground: 210 40% 98%;
+  --senren-accent: 217 33% 20%;
+  --senren-accent-foreground: 210 40% 98%;
+  --senren-destructive: 0 63% 46%;
+  --senren-destructive-foreground: 210 40% 98%;
+  --senren-success: 142 60% 40%;
+  --senren-success-foreground: 210 40% 98%;
+  --senren-warning: 38 85% 52%;
+  --senren-warning-foreground: 222 47% 11%;
+}
+/* ── indigo ───────────────────────────────────────────────────────────────
+   The default of a great many B2B products: white surfaces, indigo action
+   colour, cool grey text. */
+[data-senren-theme="indigo"] {
+  --senren-background: 0 0% 100%;
+  --senren-foreground: 224 71% 4%;
+  --senren-muted: 220 14% 96%;
+  --senren-muted-foreground: 220 9% 46%;
+  --senren-card: 0 0% 100%;
+  --senren-card-foreground: 224 71% 4%;
+  --senren-popover: 0 0% 100%;
+  --senren-popover-foreground: 224 71% 4%;
+  --senren-border: 220 13% 91%;
+  --senren-input: 220 13% 91%;
+  --senren-ring: 239 84% 67%;
+  --senren-primary: 243 75% 59%;
+  --senren-primary-foreground: 0 0% 100%;
+  --senren-secondary: 226 100% 97%;
+  --senren-secondary-foreground: 243 75% 40%;
+  --senren-accent: 226 100% 94%;
+  --senren-accent-foreground: 243 75% 40%;
+  --senren-destructive: 0 84% 60%;
+  --senren-destructive-foreground: 0 0% 100%;
+  --senren-success: 160 84% 32%;
+  --senren-success-foreground: 0 0% 100%;
+  --senren-warning: 32 95% 52%;
+  --senren-warning-foreground: 224 71% 4%;
+  --senren-radius: 0.5rem;
+  --senren-palette-sky: 217 91% 60%;
+  --senren-palette-sakura: 330 81% 70%;
+  --senren-palette-pond: 199 89% 60%;
+  --senren-palette-leaf: 160 84% 39%;
+  --senren-palette-iris: 243 75% 59%;
+  --senren-palette-paper: 220 14% 96%;
+}
+.dark[data-senren-theme="indigo"] {
+  --senren-background: 229 42% 8%;
+  --senren-foreground: 220 14% 96%;
+  --senren-muted: 229 30% 16%;
+  --senren-muted-foreground: 218 11% 65%;
+  --senren-card: 229 40% 11%;
+  --senren-card-foreground: 220 14% 96%;
+  --senren-popover: 229 40% 11%;
+  --senren-popover-foreground: 220 14% 96%;
+  --senren-border: 229 25% 22%;
+  --senren-input: 229 25% 22%;
+  --senren-ring: 239 84% 72%;
+  --senren-primary: 239 84% 70%;
+  --senren-primary-foreground: 229 42% 8%;
+  --senren-secondary: 229 30% 18%;
+  --senren-secondary-foreground: 226 100% 88%;
+  --senren-accent: 229 30% 22%;
+  --senren-accent-foreground: 226 100% 92%;
+  --senren-destructive: 0 72% 55%;
+  --senren-destructive-foreground: 0 0% 100%;
+  --senren-success: 160 70% 42%;
+  --senren-success-foreground: 229 42% 8%;
+  --senren-warning: 32 90% 58%;
+  --senren-warning-foreground: 229 42% 8%;
+}
+/* ── emerald ──────────────────────────────────────────────────────────────
+   Green action colour on soft neutrals, with a generous radius. Common in
+   finance, health, and sustainability products. */
+[data-senren-theme="emerald"] {
+  --senren-background: 150 20% 99%;
+  --senren-foreground: 160 40% 10%;
+  --senren-muted: 150 24% 95%;
+  --senren-muted-foreground: 160 12% 42%;
+  --senren-card: 0 0% 100%;
+  --senren-card-foreground: 160 40% 10%;
+  --senren-popover: 0 0% 100%;
+  --senren-popover-foreground: 160 40% 10%;
+  --senren-border: 152 22% 88%;
+  --senren-input: 152 22% 88%;
+  --senren-ring: 160 84% 39%;
+  --senren-primary: 160 84% 30%;
+  --senren-primary-foreground: 150 30% 98%;
+  --senren-secondary: 152 45% 92%;
+  --senren-secondary-foreground: 160 60% 20%;
+  --senren-accent: 168 60% 90%;
+  --senren-accent-foreground: 168 70% 18%;
+  --senren-destructive: 0 74% 50%;
+  --senren-destructive-foreground: 150 30% 98%;
+  --senren-success: 160 84% 32%;
+  --senren-success-foreground: 150 30% 98%;
+  --senren-warning: 40 95% 50%;
+  --senren-warning-foreground: 160 40% 10%;
+  --senren-radius: 0.75rem;
+  --senren-palette-sky: 190 80% 45%;
+  --senren-palette-sakura: 340 70% 82%;
+  --senren-palette-pond: 172 66% 78%;
+  --senren-palette-leaf: 145 63% 49%;
+  --senren-palette-iris: 250 60% 78%;
+  --senren-palette-paper: 150 24% 95%;
+}
+.dark[data-senren-theme="emerald"] {
+  --senren-background: 165 40% 6%;
+  --senren-foreground: 150 24% 95%;
+  --senren-muted: 165 28% 14%;
+  --senren-muted-foreground: 152 14% 62%;
+  --senren-card: 165 38% 9%;
+  --senren-card-foreground: 150 24% 95%;
+  --senren-popover: 165 38% 9%;
+  --senren-popover-foreground: 150 24% 95%;
+  --senren-border: 165 22% 20%;
+  --senren-input: 165 22% 20%;
+  --senren-ring: 160 84% 45%;
+  --senren-primary: 158 74% 44%;
+  --senren-primary-foreground: 165 40% 6%;
+  --senren-secondary: 165 28% 16%;
+  --senren-secondary-foreground: 152 45% 88%;
+  --senren-accent: 168 40% 20%;
+  --senren-accent-foreground: 168 60% 88%;
+  --senren-destructive: 0 66% 52%;
+  --senren-destructive-foreground: 150 30% 98%;
+  --senren-success: 158 70% 42%;
+  --senren-success-foreground: 165 40% 6%;
+  --senren-warning: 40 88% 56%;
+  --senren-warning-foreground: 165 40% 6%;
+}
+/* ── rose ─────────────────────────────────────────────────────────────────
+   Warm neutrals and a soft pink action colour, with the roundest corners of
+   the set. The consumer-facing end of SaaS. */
+[data-senren-theme="rose"] {
+  --senren-background: 20 40% 99%;
+  --senren-foreground: 340 30% 12%;
+  --senren-muted: 20 30% 96%;
+  --senren-muted-foreground: 340 8% 46%;
+  --senren-card: 0 0% 100%;
+  --senren-card-foreground: 340 30% 12%;
+  --senren-popover: 0 0% 100%;
+  --senren-popover-foreground: 340 30% 12%;
+  --senren-border: 20 25% 90%;
+  --senren-input: 20 25% 90%;
+  --senren-ring: 347 77% 60%;
+  --senren-primary: 347 77% 50%;
+  --senren-primary-foreground: 20 40% 99%;
+  --senren-secondary: 350 80% 95%;
+  --senren-secondary-foreground: 347 70% 32%;
+  --senren-accent: 350 80% 92%;
+  --senren-accent-foreground: 347 70% 30%;
+  --senren-destructive: 0 78% 52%;
+  --senren-destructive-foreground: 20 40% 99%;
+  --senren-success: 150 62% 36%;
+  --senren-success-foreground: 20 40% 99%;
+  --senren-warning: 35 95% 55%;
+  --senren-warning-foreground: 340 30% 12%;
+  --senren-radius: 1rem;
+  --senren-palette-sky: 205 85% 58%;
+  --senren-palette-sakura: 350 85% 84%;
+  --senren-palette-pond: 190 70% 82%;
+  --senren-palette-leaf: 140 55% 55%;
+  --senren-palette-iris: 280 70% 78%;
+  --senren-palette-paper: 20 30% 96%;
+}
+.dark[data-senren-theme="rose"] {
+  --senren-background: 340 22% 8%;
+  --senren-foreground: 20 30% 96%;
+  --senren-muted: 340 16% 16%;
+  --senren-muted-foreground: 340 8% 64%;
+  --senren-card: 340 20% 11%;
+  --senren-card-foreground: 20 30% 96%;
+  --senren-popover: 340 20% 11%;
+  --senren-popover-foreground: 20 30% 96%;
+  --senren-border: 340 14% 22%;
+  --senren-input: 340 14% 22%;
+  --senren-ring: 347 77% 66%;
+  --senren-primary: 347 82% 62%;
+  --senren-primary-foreground: 340 22% 8%;
+  --senren-secondary: 340 16% 18%;
+  --senren-secondary-foreground: 350 80% 90%;
+  --senren-accent: 340 20% 24%;
+  --senren-accent-foreground: 350 80% 90%;
+  --senren-destructive: 0 70% 55%;
+  --senren-destructive-foreground: 20 40% 99%;
+  --senren-success: 150 55% 44%;
+  --senren-success-foreground: 340 22% 8%;
+  --senren-warning: 35 90% 60%;
+  --senren-warning-foreground: 340 22% 8%;
+}
+/* ── amber ────────────────────────────────────────────────────────────────
+   Sand-toned neutrals, amber action colour, near-square corners. The
+   document-and-workspace look. */
+[data-senren-theme="amber"] {
+  --senren-background: 40 30% 98%;
+  --senren-foreground: 30 25% 12%;
+  --senren-muted: 40 24% 94%;
+  --senren-muted-foreground: 32 10% 44%;
+  --senren-card: 40 40% 99%;
+  --senren-card-foreground: 30 25% 12%;
+  --senren-popover: 40 40% 99%;
+  --senren-popover-foreground: 30 25% 12%;
+  --senren-border: 36 20% 87%;
+  --senren-input: 36 20% 87%;
+  --senren-ring: 32 95% 44%;
+  --senren-primary: 30 30% 16%;
+  --senren-primary-foreground: 40 30% 98%;
+  --senren-secondary: 40 60% 90%;
+  --senren-secondary-foreground: 30 40% 20%;
+  --senren-accent: 38 80% 88%;
+  --senren-accent-foreground: 30 45% 20%;
+  --senren-destructive: 4 74% 48%;
+  --senren-destructive-foreground: 40 30% 98%;
+  --senren-success: 140 55% 34%;
+  --senren-success-foreground: 40 30% 98%;
+  --senren-warning: 32 95% 46%;
+  --senren-warning-foreground: 40 30% 98%;
+  --senren-radius: 0.25rem;
+  --senren-palette-sky: 200 75% 50%;
+  --senren-palette-sakura: 20 80% 82%;
+  --senren-palette-pond: 190 60% 80%;
+  --senren-palette-leaf: 100 45% 50%;
+  --senren-palette-iris: 265 55% 74%;
+  --senren-palette-paper: 40 24% 94%;
+}
+.dark[data-senren-theme="amber"] {
+  --senren-background: 30 18% 8%;
+  --senren-foreground: 40 24% 94%;
+  --senren-muted: 30 14% 15%;
+  --senren-muted-foreground: 36 10% 62%;
+  --senren-card: 30 16% 11%;
+  --senren-card-foreground: 40 24% 94%;
+  --senren-popover: 30 16% 11%;
+  --senren-popover-foreground: 40 24% 94%;
+  --senren-border: 30 12% 21%;
+  --senren-input: 30 12% 21%;
+  --senren-ring: 32 95% 55%;
+  --senren-primary: 36 90% 58%;
+  --senren-primary-foreground: 30 25% 10%;
+  --senren-secondary: 30 14% 17%;
+  --senren-secondary-foreground: 40 60% 86%;
+  --senren-accent: 32 30% 22%;
+  --senren-accent-foreground: 38 80% 86%;
+  --senren-destructive: 4 68% 52%;
+  --senren-destructive-foreground: 40 30% 98%;
+  --senren-success: 140 50% 42%;
+  --senren-success-foreground: 30 18% 8%;
+  --senren-warning: 32 90% 56%;
+  --senren-warning-foreground: 30 18% 8%;
+}

data/lib/senren/rails/agent_rules_writer.rb CHANGED Viewed

@@ -106,6 +106,9 @@ module Senren
             publishes every file under an asset path, so component `.rb` and
             `.html.erb` source is precompiled into `public/assets` and served
             over HTTP. Put sidecar assets in `app/components/assets` instead.
+          - A button inside a form needs no `type:`. ButtonComponent omits the
+            attribute so the browser submits, as plain HTML does. Pass
+            `type: :button` only for a trigger that must not submit.
           ## Important Files

data/lib/senren/rails/version.rb CHANGED Viewed

@@ -2,6 +2,6 @@
 module Senren
   module Rails
-    VERSION = '0.2.0'
+    VERSION = '0.3.0'
   end
 end

data/templates/components/accordion/accordion_component.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<div <%= tag.attributes(**root_attrs("divide-y divide-[hsl(var(--senren-border))] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))]", data: { controller: "senren--accordion", "senren--accordion-multiple-value": multiple? })) %>>
+<%= tag.div(**root_attrs("divide-y divide-[hsl(var(--senren-border))] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))]", data: { controller: "senren--accordion", "senren--accordion-multiple-value": multiple? })) do %>
   <% items.each_with_index do |item, index| %>
     <% expanded = open_item?(item, index) %>
     <section>
@@ -8,9 +8,9 @@
           <span aria-hidden="true" class="text-[hsl(var(--senren-muted-foreground))]">+</span>
         </button>
       </h3>
-      <div id="<%= item[:id] %>-panel" data-senren--accordion-target="panel" data-panel-id="<%= item[:id] %>" <%= "hidden" unless expanded %> class="px-4 pb-4 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]">
+      <div id="<%= item[:id] %>-panel" data-senren--accordion-target="panel" data-panel-id="<%= item[:id] %>" <% unless expanded %>hidden<% end %> class="px-4 pb-4 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]">
         <%= item[:content].presence || content %>
       </div>
     </section>
   <% end %>
-</div>
+<% end %>

data/templates/components/alert_dialog/alert_dialog_component.html.erb CHANGED Viewed

@@ -1,4 +1,7 @@
-<div data-controller="senren--alert-dialog" data-senren-component="alert_dialog" id="<%= dom_id %>">
+<%# Root goes through root_attrs so a caller's class: and data: reach it.
+    Hand-writing these attributes dropped both -- which is why a Stimulus
+    value could not be set from the server. %>
+<%= tag.div(**wrapper_attrs(id: dom_id, data: { controller: "senren--alert-dialog" })) do %>
   <% if trigger? %>
     <span data-action="click->senren--alert-dialog#open" data-senren--alert-dialog-target="trigger">
       <%= trigger %>
@@ -15,7 +18,7 @@
   <div data-senren--alert-dialog-target="panel" hidden
        role="alertdialog" aria-modal="true" aria-labelledby="<%= dom_id %>-title" aria-describedby="<%= dom_id %>-desc"
        tabindex="-1"
-       class="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-6 shadow-lg">
+       class="<%= panel_class("fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-6 shadow-lg") %>">
     <% if title? %>
       <h2 id="<%= dom_id %>-title" class="text-lg font-semibold"><%= title %></h2>
     <% end %>
@@ -31,4 +34,4 @@
       <% end %>
     </div>
   </div>
-</div>
+<% end %>

data/templates/components/alert_dialog/alert_dialog_component.rb CHANGED Viewed

@@ -1,6 +1,10 @@
 # frozen_string_literal: true
 module Senren
+  # Unlike Dialog and Sheet, this does not close when the overlay is clicked.
+  # An alert dialog exists to make someone choose, and dismissing it by
+  # clicking beside it is indistinguishable from choosing Cancel by accident.
+  # Escape still closes it, because a keyboard user needs a way out.
   class AlertDialogComponent < BaseComponent
     renders_one :trigger
     renders_one :title

data/templates/components/api_key_field/api_key_field_component.html.erb CHANGED Viewed

@@ -4,7 +4,7 @@
   <% else %>
     <label class="block text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= label %></label>
     <div class="flex flex-col gap-2 sm:flex-row">
-      <input type="password" readonly aria-label="<%= label %>" value="<%= value %>" data-senren--api-key-field-target="input" class="h-10 min-w-0 flex-1 rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-muted)/0.35)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+      <input type="password" readonly autocomplete="off" aria-label="<%= label %>" value="<%= value %>" data-senren--api-key-field-target="input" class="h-10 min-w-0 flex-1 rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-muted)/0.35)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
       <button type="button" data-senren--api-key-field-target="revealButton" data-action="click->senren--api-key-field#toggle" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] px-3 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]"><%= reveal_label %></button>
       <button type="button" data-action="click->senren--api-key-field#copy" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-3 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90"><%= copy_label %></button>
     </div>

data/templates/components/breadcrumb/breadcrumb_component.html.erb CHANGED Viewed

@@ -1,5 +1,9 @@
-<% if items.any? %>
-  <nav <%= tag.attributes(**root_attrs("text-sm text-[hsl(var(--senren-muted-foreground))]", aria: { label: label })) %>>
+<%# The <nav> is outside the branch on purpose. It used to be written twice,
+    once per branch, with the same root_attrs call duplicated -- so a change to
+    the root had to be made in two places and the empty case was one edit away
+    from silently losing its aria-label. %>
+<%= tag.nav(**root_attrs("text-sm text-[hsl(var(--senren-muted-foreground))]", aria: { label: label })) do %>
+  <% if items.any? %>
     <ol class="flex flex-wrap items-center gap-2">
       <% items.each_with_index do |item, index| %>
         <% current = index == items.length - 1 || item[:href].blank? %>
@@ -15,9 +19,7 @@
         </li>
       <% end %>
     </ol>
-  </nav>
-<% else %>
-  <nav <%= tag.attributes(**root_attrs("text-sm text-[hsl(var(--senren-muted-foreground))]", aria: { label: label })) %>>
+  <% else %>
     <%= content %>
-  </nav>
+  <% end %>
 <% end %>

data/templates/components/button/button_component.html.erb CHANGED Viewed

@@ -1,6 +1,6 @@
 <% base = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-(--senren-radius) font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed" %>
 <% if as == :a %>
-  <%= tag.a content, **root_attrs(base, href: safe_url(href)) %>
+  <%= tag.a content, href: safe_url(href), **root_attrs(base) %>
 <% else %>
   <%= tag.button content, **root_attrs(base, type: type) %>
 <% end %>

data/templates/components/button/button_component.rb CHANGED Viewed

@@ -17,7 +17,33 @@ module Senren
       lg: 'h-12 px-6 text-base'
     }.freeze
-    def initialize(variant: :default, size: :md, type: 'button', as: :button, href: nil, class_name: nil, **html)
+    # FOR AI AGENTS AND HUMANS -- how `type` behaves, and why it changed.
+    #
+    # `type:` defaults to nil, so the attribute is omitted and the browser's own
+    # rule applies: a <button> inside a <form> submits it, one outside a form
+    # does nothing. Write what you would write in plain HTML; it behaves the
+    # same.
+    #
+    #   <%= form_with url: sessions_path do %>
+    #     <%= render(Senren::ButtonComponent.new(variant: :primary)) { "Sign in" } %>
+    #   <% end %>                                     # submits, as HTML says
+    #
+    #   <%= render(Senren::ButtonComponent.new(type: :button)) { "Open" } %>
+    #                                                 # a trigger: say so
+    #
+    # This used to default to "button", which silently overrode the platform. A
+    # button rendered inside a form did nothing when clicked -- no submit, no
+    # navigation, nothing in the console -- and that is what users reported:
+    # "I click submit and it does not redirect". Every auth example this library
+    # ships had the bug, so anyone copying a snippet inherited it.
+    #
+    # The trade is deliberate. The old default failed silently; this one fails
+    # loudly, by submitting a form you did not mean to submit. A visible wrong
+    # is cheaper to find than an invisible nothing.
+    #
+    # Agents: writing a form? Do not pass `type:` at all. Writing a trigger for
+    # a dialog, sheet, or menu, which must not submit? Pass `type: :button`.
+    def initialize(variant: :default, size: :md, type: nil, as: :button, href: nil, class_name: nil, **html)
       super(variant: variant, size: size, class_name: class_name, **html)
       @type = type
       @as   = href ? :a : as

data/templates/components/calendar/calendar_component.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<div <%= tag.attributes(**root_attrs("w-72 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))]", data: { controller: "senren--calendar" })) %>>
+<%= tag.div(**root_attrs("w-72 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))]", data: { controller: "senren--calendar" })) do %>
   <% if name.present? %>
     <input type="hidden" name="<%= name %>" value="<%= selected&.iso8601 %>" data-senren--calendar-target="value">
   <% end %>
@@ -18,4 +18,4 @@
       </button>
     <% end %>
   </div>
-</div>
+<% end %>

data/templates/components/card/card_component.html.erb CHANGED Viewed

@@ -2,12 +2,10 @@
   <% if header? %>
     <div class="flex flex-col space-y-1.5 p-6 border-b border-[hsl(var(--senren-border))]"><%= header %></div>
   <% end %>
-  <% if body? %>
-    <div class="p-6"><%= body %></div>
-  <% else %>
-    <div class="p-6"><%= content %></div>
-  <% end %>
+  <%# One <div>, not the same one in both branches: the padding is the card's, %>
+  <%# and duplicating the element meant a change to it had to be made twice. %>
+  <div class="p-6"><%= body? ? body : content %></div>
   <% if footer? %>
-    <div class="flex items-center p-6 pt-0 border-t border-[hsl(var(--senren-border))]"><%= footer %></div>
+    <div class="flex items-center gap-2 p-6 border-t border-[hsl(var(--senren-border))]"><%= footer %></div>
   <% end %>
 <% end %>

data/templates/components/carousel/carousel_component.html.erb CHANGED Viewed

@@ -6,7 +6,7 @@
       <% slides.each_with_index do |slide, index| %>
         <article data-senren--carousel-target="slide" data-index="<%= index %>" class="<%= index.zero? ? '' : 'hidden' %>">
           <% if slide[:image_url].present? %>
-            <img src="<%= slide[:image_url] %>" alt="<%= slide[:alt] || slide[:title] %>" class="aspect-video w-full object-cover">
+            <%= image_tag slide[:image_url], alt: slide[:alt] || slide[:title], class: "aspect-video w-full object-cover" %>
           <% else %>
             <div class="relative flex aspect-video items-end overflow-hidden bg-[hsl(var(--senren-muted)/0.45)] p-6">
               <svg aria-hidden="true" viewBox="0 0 960 540" preserveAspectRatio="none" class="absolute inset-0 h-full w-full">

data/templates/components/cart/cart_component.html.erb CHANGED Viewed

@@ -12,9 +12,15 @@
         <li class="flex items-center gap-3 px-4 py-3"
             data-senren--cart-target="line"
             data-line-id="<%= item[:id] %>"
+            <%# Emitted so the `removed` event can carry it. The component
+                accepted remove_url: and normalised it, then never wrote it
+                anywhere -- an advertised input that reached nothing, so the
+                consumer listening for the event had no way to learn where to
+                send the delete. %>
+            <% if item[:remove_url].present? %>data-remove-url="<%= safe_url(item[:remove_url]) %>"<% end %>
             data-price-cents="<%= item[:price_cents] %>">
           <% if (image = safe_media_url(item[:image_url])) %>
-            <img src="<%= image %>" alt="" loading="lazy" class="h-12 w-12 shrink-0 rounded-(--senren-radius) object-cover">
+            <%= image_tag image, alt: "", loading: "lazy", class: "h-12 w-12 shrink-0 rounded-(--senren-radius) object-cover" %>
           <% else %>
             <div class="h-12 w-12 shrink-0 rounded-(--senren-radius) bg-[hsl(var(--senren-muted)/0.5)]" aria-hidden="true"></div>
           <% end %>

data/templates/components/clipboard/clipboard_component.html.erb CHANGED Viewed

@@ -1,7 +1,7 @@
-<div <%= tag.attributes(**root_attrs("inline-flex items-center gap-2", data: { controller: "senren--clipboard", "senren--clipboard-copied-label-value": copied_label })) %>>
-  <input type="text" readonly aria-label="<%= label %>" value="<%= value %>" data-senren--clipboard-target="source" class="h-10 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.4)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))]">
+<%= tag.div(**root_attrs("inline-flex items-center gap-2", data: { controller: "senren--clipboard", "senren--clipboard-copied-label-value": copied_label })) do %>
+  <input type="text" readonly autocomplete="off" aria-label="<%= label %>" value="<%= value %>" data-senren--clipboard-target="source" class="h-10 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.4)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))]">
   <button type="button" data-senren--clipboard-target="button" data-action="click->senren--clipboard#copy" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-3 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90">
     <%= label %>
   </button>
   <span class="sr-only" aria-live="polite" data-senren--clipboard-target="status"></span>
-</div>
+<% end %>

data/templates/components/collapsible/collapsible_component.html.erb CHANGED Viewed

@@ -1,9 +1,9 @@
-<div <%= tag.attributes(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))]", data: { controller: "senren--collapsible" })) %>>
+<%= tag.div(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))]", data: { controller: "senren--collapsible" })) do %>
   <button type="button" class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium text-[hsl(var(--senren-card-foreground))]" aria-expanded="<%= open? %>" data-senren--collapsible-target="trigger" data-action="click->senren--collapsible#toggle">
     <span><%= trigger || title %></span>
     <span aria-hidden="true" class="text-[hsl(var(--senren-muted-foreground))]">+</span>
   </button>
-  <div data-senren--collapsible-target="panel" <%= "hidden" unless open? %> class="border-t border-[hsl(var(--senren-border))] px-4 py-3 text-sm text-[hsl(var(--senren-muted-foreground))]">
+  <div data-senren--collapsible-target="panel" <% unless open? %>hidden<% end %> class="border-t border-[hsl(var(--senren-border))] px-4 py-3 text-sm text-[hsl(var(--senren-muted-foreground))]">
     <%= body || content %>
   </div>
-</div>
+<% end %>

data/templates/components/combobox/combobox_component.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<div <%= tag.attributes(**root_attrs("relative w-full", data: { controller: "senren--combobox" })) %>>
+<%= tag.div(**root_attrs("relative w-full", data: { controller: "senren--combobox" })) do %>
   <input type="hidden" name="<%= name %>" value="<%= value %>" data-senren--combobox-target="value">
   <button type="button" class="group flex h-10 w-full cursor-pointer items-center justify-between rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] px-3 text-left text-sm text-[hsl(var(--senren-foreground))] transition-colors hover:bg-[hsl(var(--senren-muted)/0.35)] <%= self.class::VARIANTS[variant] %>" aria-haspopup="listbox" aria-expanded="false" data-state="closed" data-senren--combobox-target="button" data-action="click->senren--combobox#toggle">
     <span data-senren--combobox-target="label"><%= selected_label || placeholder %></span>
@@ -7,7 +7,7 @@
     </svg>
   </button>
   <div data-senren--combobox-target="panel" hidden class="absolute z-50 mt-2 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] p-2 shadow-md">
-    <input type="text" placeholder="<%= placeholder %>" data-senren--combobox-target="search" data-action="input->senren--combobox#filter keydown->senren--combobox#onKey" class="mb-2 h-9 w-full rounded-md border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-2 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+    <input type="text" autocomplete="off" placeholder="<%= placeholder %>" data-senren--combobox-target="search" data-action="input->senren--combobox#filter keydown->senren--combobox#onKey" class="mb-2 h-9 w-full rounded-md border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-2 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
     <div role="listbox" class="max-h-56 overflow-auto">
       <% options.each do |option| %>
         <button type="button" role="option" data-senren--combobox-target="option" data-value="<%= option[:value] %>" data-label="<%= option[:label] %>" data-action="click->senren--combobox#choose" class="block w-full cursor-pointer rounded-md px-2 py-2 text-left text-sm text-[hsl(var(--senren-popover-foreground))] hover:bg-[hsl(var(--senren-accent))]">
@@ -16,4 +16,4 @@
       <% end %>
     </div>
   </div>
-</div>
+<% end %>

data/templates/components/command/command_component.html.erb CHANGED Viewed

@@ -4,7 +4,7 @@
   <% else %>
     <label for="<%= dom_id %>-input" class="sr-only"><%= label %></label>
     <div class="border-b border-[hsl(var(--senren-border))] p-2">
-      <input id="<%= dom_id %>-input" type="search" autocomplete="off" placeholder="<%= placeholder %>" aria-label="<%= label %>" aria-controls="<%= dom_id %>-list" aria-activedescendant="" data-senren--command-target="input" data-action="input->senren--command#filter keydown->senren--command#onKey" class="h-10 w-full rounded-(--senren-radius) bg-[hsl(var(--senren-background))] px-3 text-sm text-[hsl(var(--senren-foreground))] outline-none placeholder:text-[hsl(var(--senren-muted-foreground))] focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+      <input id="<%= dom_id %>-input" type="search" autocomplete="off" placeholder="<%= placeholder %>" aria-label="<%= label %>" aria-controls="<%= dom_id %>-list" data-senren--command-target="input" data-action="input->senren--command#filter keydown->senren--command#onKey" class="h-10 w-full rounded-(--senren-radius) bg-[hsl(var(--senren-background))] px-3 text-sm text-[hsl(var(--senren-foreground))] outline-none placeholder:text-[hsl(var(--senren-muted-foreground))] focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
     </div>
     <div id="<%= dom_id %>-list" role="listbox" aria-label="<%= label %>" data-senren--command-target="list" class="max-h-72 overflow-y-auto p-1.5">
       <% items.each_with_index do |item, index| %>

data/templates/components/context_menu/context_menu_component.html.erb CHANGED Viewed

@@ -1,11 +1,14 @@
-<div data-controller="senren--context-menu" class="relative" data-senren-component="context_menu">
+<%# Root goes through root_attrs so a caller's class: and data: reach it.
+    Hand-writing these attributes dropped both -- which is why a Stimulus
+    value could not be set from the server. %>
+<%= tag.div(**wrapper_attrs("relative", data: { controller: "senren--context-menu" })) do %>
   <div data-senren--context-menu-target="trigger" data-action="contextmenu->senren--context-menu#open">
     <%= trigger %>
   </div>
   <div data-senren--context-menu-target="menu" role="menu" hidden
-       class="absolute z-50 w-56 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-1 shadow-md">
+       class="<%= panel_class("absolute z-50 w-56 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-1 shadow-md") %>">
     <% items.each do |it| %>
       <%= it %>
     <% end %>
   </div>
-</div>
+<% end %>