senren-ui 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d99681351df1dad873d945bf82b3070b3f8393c9d14b3ca65917262e6258ef6c
-  data.tar.gz: b487d9ac589b1d9ba2c304a5f53e4d93064b321d76e97a43ccfa1b9909a44b58
+  metadata.gz: c822ae4c548e611bba93a0ffd7654a881b4626173e3a85898e8221318aca6f2e
+  data.tar.gz: 48b9d43cf61a38d652f5e993e5baff8d5bff3514b381ee4eeafce95dad7f1113
 SHA512:
-  metadata.gz: f383e88dea3c90da1f1f93831bdf26c4bc5e00e1c63ffeb8ae53031d7c7e38c8afbaa30c445839cdbf8ad346acf247dcd04ae597c01b23704837daeb4eb4c2bf
-  data.tar.gz: 54e1f4ad10351c05906cdf1f864160cd3a0555e1698c0fa4944a728752cd97560300a9bae40a337a214a39d19eae87a3620fd4690e412d689b9430d022df0662
+  metadata.gz: cb02d352ef3be737cc00be01c8178874d6b9409c7e54da22917d2d6c4dbe1be0e3baa948bfabce77e5f18241284097bd254b520845ab71b5d1d4d01f573d4e64
+  data.tar.gz: edcb1633812058eba68a7014f7239cddf4df698dccc8371c3d968c73e6cbd0913453d7fb9fee00e791e12e4c1080a9b31f1c1db76b3ac42b069606975d07d684

data/CHANGELOG.md

@@ -7,6 +7,117 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 v0.x is a pre-stable line: minor bumps may break things; patch bumps are
 bug fixes only.
 
+## [0.3.0] — 2026-09-01
+
+### Breaking
+
+- **`ButtonComponent` no longer emits `type="button"` by default.** The
+  attribute is omitted, so a button inside a form submits it, which is what
+  plain HTML does and what everyone expects. The old default silently swallowed
+  submits: a form's own submit button did nothing, with no error anywhere to
+  explain it. The new default fails the other way, and loudly — a trigger that
+  should not submit now has to say so.
+
+  **Migrate:** pass `type: :button` to any button that must not submit — overlay
+  triggers, menu triggers, a dialog's Cancel. Everything inside a form that is
+  meant to submit needs no change and starts working. Buttons outside a form
+  are unaffected either way.
+
+  ```erb
+  <%= render(Senren::ButtonComponent.new(type: :button)) { "Open dialog" } %>
+  ```
+
+### Fixed
+
+- Every component now merges a caller's `class:` and `data:` instead of
+  dropping them. Splatting `**html_attrs` after the computed values replaced
+  them outright, so `class:` erased the component's own variant and size
+  styling and `data:` erased its `data-senren-component` marker.
+- For the eight wrapper components — dialog, alert dialog, sheet, popover,
+  dropdown menu, context menu, hover card, tooltip — a caller's class now lands
+  on the panel, which is the element they style, not on the empty root, where it
+  sat in the DOM doing nothing.
+
+  This makes the extension point reachable; it does not make it resolve
+  conflicts. `class_name: "max-w-sm"` on a dialog emits
+  `class="max-w-lg max-w-sm"` and both declarations stay live, so which one
+  applies is decided by the order Tailwind emits them, not by the order of the
+  attribute. Measured against a real build: `max-w-sm` wins (narrowing works),
+  `max-w-2xl` loses (widening is a silent no-op). Use Tailwind's important
+  modifier — `class_name: "max-w-2xl!"` — for an override that does not depend
+  on emit order.
+- `data-controller` and `data-action` are appended rather than substituted, so
+  attaching your own Stimulus controller to a Senren component no longer unbinds
+  the component's own.
+- A caller's `data-controller` or `data-action` that repeated one of the
+  component's own tokens was appended rather than deduplicated:
+  `data: { controller: "a senren--popover" }` produced
+  `"a senren--popover senren--popover"`. Stimulus reads that list literally, so
+  the controller connected twice and every action fired twice — a toggle opened
+  and immediately closed. Tokens are deduplicated individually now.
+- `data:` written with String keys (`data: { "action" => ... }`) is merged the
+  same as Symbol keys. The Symbol-only read meant a dropdown item passing a
+  String key lost close-on-click and arrow-key handling.
+- A dropdown item's `class:` is merged rather than substituted. Losing the hover
+  style was cosmetic; losing `focus:bg-` removed the only indication a keyboard
+  user has of where they are in the menu.
+- Sheet's scrolling body no longer clips focus rings.
+- Dialog, sheet, and the invite-member dialog close on an overlay click.
+- `method:` on a dropdown item reaches Turbo. It was passed to `link_to` as a
+  rails-ujs option, which Rails 7 dropped, so it had rendered an inert `method`
+  attribute since the library began targeting Rails 7.1.
+- Card footer spacing, and pagination now wraps.
+- `CartComponent` accepted `remove_url:` per item, normalised it, and wrote it
+  nowhere. Removal is client-side and dispatches `senren--cart:removed` for the
+  application to act on, so the URL was the one thing the listener needed and
+  the only thing it could not get. It is emitted as `data-remove-url` on the
+  line and carried in the event detail, omitted entirely when not supplied, and
+  passed through `safe_url` like every other URL the library renders.
+- `senren_themes.css` shipped with its ERB examples unrendered, so the header
+  comment showed `<%%=` where it means `<%=`. The assertion guarding against that
+  named a single file, so the property held exactly where someone had thought to
+  look; it now runs over everything the generator writes.
+
+### Documentation
+
+- The palette presets shipped in 0.2.0 with no mention in the README, the docs,
+  or the generated conventions file. All three now cover them, including the
+  load-order constraint: `senren_themes.css` must be linked after `senren.css`
+  or the theme silently does nothing.
+
+### Internal
+
+- ERB linting names every linter it runs. Thirteen were running against nine
+  named in the config; eight formatting linters had been on by default and
+  unrecorded. A test now fails if an upgrade adds a fourteenth.
+- `bin/ci` and the GitHub workflow call `erb_lint` rather than the deprecated
+  `erblint` shim.
+- json bumped to 2.21.2 for CVE-2026-71847.
+- Herb now lints the markup, and the 32 offenses it found in shipped templates
+  are fixed. It was adopted after a developer reported warnings in their editor
+  that none of this project's gates produced — RuboCop covered the Ruby, Biome
+  the Stimulus controllers, erb_lint the ERB structure, and the HTML itself had
+  no linter at all. Pinned to 0.10.3 in `.herb.yml`, and wired into `bin/ci`,
+  `bin/lint-fix` and the GitHub workflow.
+
+  Most of what it found is invisible in the rendered page but visible in the
+  editor of anyone who installs these components, since `senren:add` copies them
+  into their repository. Fifteen component roots moved from
+  `<div <%= tag.attributes(**root_attrs(...)) %>>` to `tag.div(...) do`, which
+  is what the overlays already used; seven conditional boolean attributes moved
+  from `<%= "hidden" unless expanded %>` to `<% unless expanded %>hidden<% end %>`;
+  three raw `<img>` tags became `image_tag`; breadcrumb stopped writing its whole
+  `<nav>` once per branch; and an empty `aria-activedescendant` is gone.
+
+  Nothing changes visually, but the markup string is not identical: rendering
+  all 64 components before and after produces 35 differing lines — 26 of them
+  whitespace and indentation, 6 the attribute order and self-closing slash that
+  `image_tag` emits, 2 the `href` moving to the front of an `<a>`, and 1 the
+  removed empty attribute. If you assert on exact markup anywhere, those
+  snapshots need regenerating. If you have already installed these components,
+  nothing in your application changes at all — the new markup arrives only if
+  you re-run `senren:add --force`.
+
 ## [0.2.0] — 2026-08-02
 
 A hardening release. Most of it came out of an adversarial review of the whole

data/CONTRIBUTING.md

@@ -35,6 +35,7 @@ bin/matrix                            # unit tests on every supported Rails
 bundle exec rubocop
 bundle exec bundle-audit check --update
 bun run controllers:check
+bin/lint-fix                          # auto-fix RuboCop, ERB lint, controller JS
 ```
 
 `bin/system` needs no setup: it uses a system Chrome and

data/README.md

@@ -53,6 +53,33 @@ bin/rails senren:add button card badge alert form input \
 bracketed Rake task form, `bin/rails 'senren:add[button,card]'`, remains
 supported for backward compatibility.
 
+## Palettes
+
+The install writes two stylesheets. `senren.css` is the token set every
+component renders against; `senren_themes.css` is optional and adds five
+alternate palettes.
+
+```erb
+<%= stylesheet_link_tag "senren" %>
+<%= stylesheet_link_tag "senren_themes" %>   <%# after senren.css %>
+```
+
+```erb
+<html data-senren-theme="rose">
+```
+
+`rose`, `slate`, `indigo`, `emerald`, `amber` — or omit the attribute for the
+default, Spring Garden. Order matters: `:root` and `[data-senren-theme="rose"]`
+have equal specificity, so the file that loads last wins. Reversed, nothing
+errors and the page quietly renders in the default palette.
+
+A theme is a re-declaration of the same tokens and nothing else. No component
+reads the attribute, so a sixth palette is a copied CSS block — no component
+change, no build step, no configuration. Switch at runtime with
+`document.documentElement.dataset.senrenTheme = "slate"`.
+
+Details and the token table: [docs/visual_style.md](docs/visual_style.md).
+
 ## Daily commands
 
 ```bash
@@ -235,6 +262,7 @@ bin/performance                  # local payload/performance budgets
 bun run controllers:check        # lint + syntax check for templates/controllers/*.js
 bun run controllers:lint:fix     # auto-fix lint issues for controllers
 bundle exec rake test:system     # Stimulus/system tests
+bin/lint-fix                     # auto-fix RuboCop, ERB lint, and controller JS
 ```
 
 ## Contributing

data/docs/visual_style.md

@@ -37,6 +37,86 @@ tokens are available for documentation, examples, and branded surfaces.
 | `--senren-palette-iris` | secondary visual accent |
 | `--senren-palette-paper` | warm neutral surface |
 
+## Palette Presets
+
+`senren.css` declares Spring Garden in `:root`. That is the default and needs no
+attribute. `senren_themes.css` adds five alternates, each one a re-declaration
+of the same token table:
+
+| `data-senren-theme` | Reads as |
+| --- | --- |
+| *(omitted)* | Spring Garden — warm paper, pine ink, garden green |
+| `rose` | warm pink, low contrast |
+| `slate` | neutral grey, high contrast |
+| `indigo` | cool blue-violet |
+| `emerald` | cool green |
+| `amber` | warm gold |
+
+```erb
+<%= stylesheet_link_tag "senren" %>
+<%= stylesheet_link_tag "senren_themes" %>
+```
+
+```erb
+<html data-senren-theme="rose">
+```
+
+**Load `senren_themes.css` after `senren.css`.** `:root` and
+`[data-senren-theme="rose"]` are equal specificity, so the later rule wins and
+source order is the whole mechanism. Reversed, both files load, the attribute is
+on `<html>`, nothing errors, and the page renders in the default palette — the
+one failure mode of this feature, and it looks like the theme file was never
+installed.
+
+The attribute goes on `<html>`, not on `<body>` or a wrapper, so it composes
+with the existing `.dark` class instead of replacing it. Light/dark stays
+orthogonal to palette: each preset ships both blocks.
+
+No component knows themes exist. They read `hsl(var(--senren-*))` and inherit
+whatever is in scope, which is why a sixth palette is a copied CSS block and
+nothing else — no component to touch, no build step, no configuration.
+
+Switching at runtime is one attribute write:
+
+```js
+document.documentElement.dataset.senrenTheme = "slate"
+```
+
+## Overriding a Component's Classes
+
+`class_name:` and `class:` are both merged into the element the component
+styles. Merged, not resolved — the component's own class stays in the list:
+
+```erb
+<%= render Senren::DialogComponent.new(class_name: "max-w-sm") %>
+<!-- panel renders class="… max-w-lg max-w-sm …" -->
+```
+
+Two `max-w-*` declarations with identical specificity, so the winner is whichever
+Tailwind emits later in the stylesheet. The order of the HTML attribute is not an
+input to that. Tailwind emits the named scale alphabetically, which measured
+against a real build means:
+
+| You pass | Against dialog's `max-w-lg` | Result |
+| --- | --- | --- |
+| `max-w-sm` | `sm` emitted after `lg` | applies |
+| `max-w-2xl` | `2xl` emitted before `lg` | **silently ignored** |
+
+Nothing about either class tells you which you are getting. For an override that
+does not depend on emit order, use Tailwind's important modifier:
+
+```erb
+<%= render Senren::DialogComponent.new(class_name: "max-w-2xl!") %>
+```
+
+This applies to any pair from one utility family — `w-`, `h-`, `p-`, `z-`,
+`text-`, `bg-`. It is not specific to widths. Senren does not ship a
+class-conflict resolver; adding one means a `tailwind_merge` dependency, which
+the library has so far chosen not to take.
+
+Classes from families the component does not use need no modifier — there is
+nothing to conflict with.
+
 ## Component Rules
 
 - Prefer semantic tokens over raw color utilities.

data/lib/generators/senren/install/install_generator.rb

@@ -30,6 +30,9 @@ module Senren
       def copy_base_files
         template 'base_component.rb.tt', 'app/components/senren/base_component.rb'
         template 'senren.css.tt',                'app/assets/stylesheets/senren.css'
+        # Optional: link it only if you want the palette presets. senren.css
+        # alone gives you the default, so this file costs nothing until used.
+        template 'senren_themes.css.tt',         'app/assets/stylesheets/senren_themes.css'
         template 'conventions.md.tt',            '.senren/conventions.md'
         template 'installed_components.yml.tt',  '.senren/installed_components.yml'
       end

data/lib/generators/senren/install/templates/base_component.rb.tt

@@ -34,25 +34,51 @@ module Senren
       # Splatting html_attrs after a computed `data:` used to overwrite it
       # wholesale, so any component given a `data:` hash silently lost its
       # data-senren-component marker. MaskedInput hit this on every render.
-      data = (html_attrs[:data] || {})
-             .merge(extra.delete(:data) || {})
-             .merge(senren_component: senren_component_name)
+      data = merge_data(caller_data, extra.delete(:data), { senren_component: senren_component_name })
 
       # `class` had exactly the same defect and it was never fixed alongside
       # `data`. Every Rails tag helper accepts `class:`, so it is the first
       # thing anyone types — and splatting html_attrs replaced the computed
       # value outright, erasing the component's variant and size styling with
-      # no warning. It is merged like any other caller-supplied class instead,
-      # last so it still wins where the two genuinely conflict.
+      # no warning. It is merged like any other caller-supplied class instead.
+      #
+      # Merged, not resolved, and the distinction matters. See merge_classes.
       tag_class = merge_classes(
         classes,
         self.class::VARIANTS[@variant],
         self.class::SIZES[@size],
         @class_name,
         extra.delete(:class),
-        html_attrs[:class]
+        caller_class
       )
-      { class: tag_class, data: data, **html_attrs.except(:data, :class), **extra }
+      { class: tag_class, data: data, **html_attrs_without_class_and_data, **extra }
+    end
+
+    # For components whose root is a wrapper and whose styling lives on an inner
+    # element -- every overlay: the panel is what gets positioned, the root just
+    # hosts the controller.
+    #
+    # Same merging as root_attrs, minus VARIANTS and SIZES. Passing those to the
+    # root of a sheet applied `translate-x-full` there, and a transformed
+    # ancestor becomes the containing block for its `position: fixed`
+    # descendants -- so the panel was positioned against the shifted root and
+    # rendered off-screen. It opened; you just could not see it.
+    def wrapper_attrs(*classes, **extra)
+      data = merge_data(caller_data, extra.delete(:data), { senren_component: senren_component_name })
+      tag_class = merge_classes(classes, extra.delete(:class))
+
+      { class: tag_class.presence, data: data, **html_attrs_without_class_and_data, **extra }.compact
+    end
+
+    # The class list for the element a wrapper component actually styles.
+    #
+    # For an overlay the caller means the panel: `class_name: "max-w-2xl"` on a
+    # dialog is a request to widen the dialog, not to widen an invisible
+    # wrapper. Putting it on the root left it in the DOM doing nothing, which is
+    # harder to debug than dropping it -- the class is right there and the panel
+    # is still max-w-lg.
+    def panel_class(*classes)
+      merge_classes(classes, @class_name, caller_class)
     end
 
     def senren_component_name
@@ -81,6 +107,43 @@ module Senren
 
     private
 
+    # Callers write `data: { controller: "x" }` and `data: { "controller" => "x" }`
+    # interchangeably, and Rails renders both the same, so the merge has to see
+    # both the same. Reading with dig(:symbol) missed the String form entirely:
+    # the append never ran and the tag builder kept the caller's value alone,
+    # which for data-action removed the component's own close-on-click and
+    # arrow-key handling.
+    #
+    # `controller` and `action` are space-separated lists in Stimulus, so a
+    # caller's value is appended rather than substituted -- attaching your own
+    # controller to a Senren component must not unbind the component's.
+    APPENDABLE_DATA = %i[controller action].freeze
+
+    def merge_data(*sources)
+      sources.compact.map { |h| h.transform_keys(&:to_sym) }.reduce({}) do |acc, incoming|
+        acc.merge(incoming) do |key, old, new|
+          # Split before uniq. Deduplicating the two whole strings only catches an
+        # exact repeat: `data: { controller: "a senren--popover" }` on a popover
+        # produced "a senren--popover senren--popover", and Stimulus reads that
+        # list literally -- same controller connected twice on one element, every
+        # action firing twice, so a toggle opens and immediately closes.
+        APPENDABLE_DATA.include?(key) ? [old, new].map(&:to_s).join(' ').split.uniq.join(' ') : new
+        end
+      end
+    end
+
+    def caller_class
+      html_attrs[:class] || html_attrs['class']
+    end
+
+    def caller_data
+      html_attrs[:data] || html_attrs['data']
+    end
+
+    def html_attrs_without_class_and_data
+      html_attrs.reject { |k, _| %w[class data].include?(k.to_s) }
+    end
+
     def safe_url(value, fallback: '#', protocols: SAFE_URL_PROTOCOLS)
       url = value.to_s.strip
       return fallback if url.empty?
@@ -119,6 +182,33 @@ module Senren
       raise ArgumentError, "Unknown #{label}: #{value.inspect}. Allowed: #{table.keys.join(', ')}"
     end
 
+    # Concatenation, not conflict resolution — and the caller's class going last
+    # in the attribute does not make it win.
+    #
+    # `class="max-w-lg max-w-2xl"` leaves both declarations live. Which applies
+    # is decided by the order the two rules appear in the stylesheet, because
+    # their specificity is identical; the order of the attribute is not an input
+    # to that at all. Tailwind emits the named scale alphabetically, so measured
+    # against a real build:
+    #
+    #   dialog base max-w-lg + class_name: "max-w-sm"  -> sm wins   (works)
+    #   dialog base max-w-lg + class_name: "max-w-2xl" -> lg wins   (silent no-op)
+    #
+    # Narrowing happens to work and widening happens not to, and nothing about
+    # either class says which you are getting. Any pair drawn from one utility
+    # family has this property.
+    #
+    # Resolving it properly means knowing which Tailwind utilities conflict,
+    # which is irregular enough (`text-sm` and `text-red-500` share a prefix and
+    # are different families) that a partial implementation would silently drop
+    # a component's own styling — a worse failure than the one it replaces. That
+    # is what tailwind_merge is for, and taking the dependency is a decision
+    # this library has not made.
+    #
+    # Until it does, the deterministic override is Tailwind's own important
+    # modifier, which beats source order rather than depending on it:
+    #
+    #   render Senren::DialogComponent.new(class_name: "max-w-2xl!")
     def merge_classes(*sources)
       sources.flatten.map { |s| s.to_s.strip }.reject(&:empty?).join(' ')
     end

data/lib/generators/senren/install/templates/conventions.md.tt

@@ -42,6 +42,47 @@ and obey it strictly.
    # NOT app/components
    ```
 
+9. **Do not pass `type:` to a button inside a form.** `ButtonComponent`
+   omits the attribute, so the browser's own rule applies and the button
+   submits, exactly as plain HTML does. Pass `type: :button` only for a
+   control that must *not* submit — a dialog, sheet, or menu trigger.
+   ```erb
+   <%%= form_with url: sessions_path do %>
+     <%%= render(Senren::ButtonComponent.new(variant: :primary)) { "Sign in" } %>
+   <%% end %>
+
+   <%%= render(Senren::ButtonComponent.new(type: :button)) { "Open dialog" } %>
+   ```
+
+10. **Load `senren_themes.css` after `senren.css`.** The install writes both.
+    `senren.css` declares the token set in `:root`; `senren_themes.css`
+    redeclares it under `[data-senren-theme="..."]` for the `rose`, `slate`,
+    `indigo`, `emerald`, and `amber` presets. The two selectors have equal
+    specificity, so source order decides which wins. In the wrong order every
+    file still loads, the attribute is still on `<html>`, nothing errors — and
+    the page renders in the default palette.
+    ```erb
+    <%%= stylesheet_link_tag "senren" %>
+    <%%= stylesheet_link_tag "senren_themes" %>
+
+    <html data-senren-theme="rose">   <%%# omit for the default palette %>
+    ```
+    The attribute belongs on `<html>` so it composes with `.dark` rather than
+    replacing it. Add a palette by copying a block and changing values; no
+    component reads the theme, so none needs editing.
+
+11. **`class:` is merged, not resolved.** Passing `class_name: "max-w-sm"` to a
+    dialog produces `class="… max-w-lg max-w-sm …"` — the component's own class
+    is still there. Both have the same specificity, so the winner is decided by
+    which one Tailwind emits later in the stylesheet, **not** by the order in
+    the attribute. Narrowing a dialog works; widening it silently does not.
+    When overriding a utility the component already uses, add Tailwind's
+    important modifier:
+    ```erb
+    <%%= render Senren::DialogComponent.new(class_name: "max-w-2xl!") %>
+    ```
+    Classes from families the component does not use need no modifier.
+
 ## File ownership
 
 | Path                                | Owned by         |