Catalog widget styling: styled_module!, merge_attributes, auth utility CSS

Catalog widget styling: styled_module!, merge_attributes, auth utility CSS

#23 in Riparion/arium — merged 2026-06-01

Summary

Three independent threads, bundled because they all surfaced while chasing the "catalog widgets render unstyled" symptom in a downstream consumer:

  1. styled_module! macro + merge_attributes adoption across catalog widgets. The const-asset/css-module declaration was duplicated in every widget, and several widgets (Card, Input, Label, Badge, Pagination, AlertDialog, Checkbox) emitted two class= attributes when a caller passed class:. The HTML parser silently dropped one, so caller-supplied utility classes vanished. The macro collapses the duplicated declaration; merge_attributes guarantees exactly one composed class attribute.
  2. auth_utility.css for global .auth-form / .auth-field / .auth-label / .auth-error / .auth-success / .auth-submit rules. These class names are referenced as literal strings throughout the auth + admin screens (AccountSettings, AuditLog, password-reset, MFA, tokens) but no CSS file defined them. Result: orphan classes, default block flow, broken vertical spacing on every page that used them. Added in both arium-dioxus (pinned via AuthStylesheets) and arium-leptos (added to the include_str! bundle in auth_stylesheets::bundle()).
  3. MfaSetup embedded mode keeps card chrome, drops the dead back-link. The previous embedded: true path inlined border:none;box-shadow:none;background:none; onto its inner Card — fine when MFA was nested inside another Card, broken when it was a sibling panel (the common case on account screens). Narrows embedded to "skip the centering shell"; keeps the card chrome; removes the redundant "Back to account" link that pointed to the screen the embedded user was already on.

Test plan

  • Local dx serve in a downstream consumer that mounts AccountSettings and MfaSetup { embedded: true } as siblings: confirm the Account-settings card and the Two-factor-auth card both render with border + background, no card-in-a-card nesting, vertical spacing between sections, and no broken "Back to account" link.
  • cargo clippy -p arium-dioxus --features ui,mfa -- -D warnings -A clippy::too_many_arguments (clean locally).
  • cargo clippy -p arium-leptos --features ui,mfa (clean locally).
  • Confirm a LoginPanel instance with a caller-supplied class: prop renders a single composed class= attribute in SSR HTML.

🤖 Generated with Claude Code

Last updated 2026-06-02