layered-ui-rails 0.10.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b9fe544e3cfcfc260bba58a205ada774ffcb1154b48b86fb406d25c189da5b77
-  data.tar.gz: 8d66cf1556700d9c26867ab59aa2d989bfd17f924ea1b7ec7be9cc3feb4626c5
+  metadata.gz: 8bc7d9b4d6a4db2e8d1c172e0ab8d6cce9c7788318e17a601c8bb580c69ab44e
+  data.tar.gz: ac1fcd4473946402b0842173c42c06c9a6bac43befe32168bc9fd4977b5c25e2
 SHA512:
-  metadata.gz: 5a2aa85d87740cdf751526101c052155edf16f04136fbb164a70d30a1535bd1b68f82ccec6b333f7c001d8a8a7174868cd5f594d1613d0dd470d5f876bf28d2f
-  data.tar.gz: 33f34e0b13bd3ba0494722ffe41142cbfb3c94cd0da47a6a79bc423a9926928e332586def1e1d669b5c806f6f4fb828da14778197f0349d55e79c626071ec9c2
+  metadata.gz: c3312e94ff32e031ba9c2090d8429c18f211df5bcf518c01ec210b351617d7ef1404c327f0d45faa5d0bbe6c9d4aa60dab72fcaba5ed64de904fa47f8f963448
+  data.tar.gz: efb9d118bbbccab38a8c35a7af50420b9486bb4e7eabf5f1d976b52531ac2316d13b499face9c3969482a52528de1453ad0528dc5a7ae60e4a8c6f4f91cf370f

data/.claude/skills/layered-ui-rails/references/CSS.md

@@ -30,6 +30,7 @@ Modifiers (combine with a standalone variant above):
 
 ```
 .l-ui-button--full            Full-width (e.g. l-ui-button--primary l-ui-button--full)
+.l-ui-button--small           Compact 32px-tall variant (e.g. l-ui-button--primary l-ui-button--small)
 ```
 
 Any button variant is automatically styled as disabled when the `disabled` HTML attribute is present - no extra class needed.
@@ -268,6 +269,11 @@ WCAG 2.2 AA table pattern:
 .l-ui-message__body                  Message content
 .l-ui-message__footer                Metadata footer
 .l-ui-message__timestamp             Timestamp
+
+.l-ui-stream-fade                    Fade-in for streamed chunks as they arrive (0.5s ease-out)
+.l-ui-stream-fade-word               Per-word staggered fade-in for completed responses
+                                     (0.5s ease-out; set --i to the word index for a 25ms
+                                     stagger, capped at 1s)
 ```
 
 ## Markdown
@@ -279,6 +285,7 @@ WCAG 2.2 AA table pattern:
 ## Icon sizes
 
 ```
+.l-ui-icon--xs    16px (4x4)
 .l-ui-icon--sm    20px (5x5)
 .l-ui-icon--md    24px (6x6)
 .l-ui-icon--lg    28px (7x7)

data/.claude/skills/layered-ui-rails/references/HELPERS.md

@@ -220,7 +220,7 @@ Renders a complete form with all fields, error summary, and submit button via th
 
 Field options:
 - `attribute` (Symbol) - model attribute
-- `as` (Symbol, optional) - field type; auto-detected from column type. Supported: `:string`, `:text`, `:email`, `:number`, `:date`, `:datetime`, `:select`, `:checkbox`, `:hidden`
+- `as` (Symbol, optional) - field type; auto-detected from column type. Supported: `:string`, `:text`, `:email`, `:password`, `:number`, `:date`, `:datetime`, `:select`, `:checkbox`, `:hidden`
 - `label` (String, optional) - custom label text; defaults to humanised attribute
 - `required` (Boolean, optional) - marks field as required; default false
 - `hint` (String, optional) - help text below the field

data/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
+## [0.12.0] - 2026-05-08
+
+### Added
+
+- `l-ui-button--small` modifier for a compact 32px-tall button variant (combine with any button colour variant)
+- `l-ui-icon--xs` icon size (16px) alongside existing `--sm`/`--md`/`--lg`
+
+### Changed
+
+- Header navigation spacing tightened: `.l-ui-header__navigation` now uses `gap-4`, and the theme toggle absorbs the trailing `-mr-3`
+- Default `Register`/`Login` header buttons use `l-ui-button--outline`/`--primary` with `l-ui-button--small`
+- `l-ui-stream-fade` animation is now opacity-only (no Y-axis translation)
+
+## [0.11.0] - 2026-05-07
+
+### Added
+
+- `l-ui-stream-fade` animation classes for fading in streamed chat output token-by-token
+- `:password` form field type support in `l_ui_form` for `password_field` inputs via `as: :password`
+
+### Changed
+
+- Form fields now have an explicit background colour
+
 ## [0.10.0] - 2026-05-03
 
 ### Added

data/app/assets/tailwind/layered/ui/styles.css

@@ -514,7 +514,7 @@
 
 .l-ui-header__navigation {
   @apply flex items-center
-         gap-1 -mr-3;
+         gap-4;
 }
 
 .l-ui-header__icon {
@@ -560,7 +560,7 @@
 /* Theme */
 
 .l-ui-theme-toggle {
-  @apply -mr-0;
+  @apply -mr-3;
 }
 
 .l-ui-theme-toggle__icon--light {
@@ -581,6 +581,11 @@
 
 /* Icon */
 
+.l-ui-icon--xs {
+  @apply w-4 h-4
+         dark:invert;
+}
+
 .l-ui-icon--sm {
   @apply w-5 h-5
          dark:invert;
@@ -884,6 +889,12 @@
          transition-colors;
 }
 
+.l-ui-button--small {
+  @apply gap-1
+         px-3 min-h-[32px]
+         text-xs;
+}
+
 [class*="l-ui-button--"]:disabled,
 .l-ui-button:disabled {
   @apply opacity-50
@@ -934,8 +945,7 @@
 /* Surface */
 
 @utility surface {
-  @apply block
-         p-4
+  @apply p-4
          rounded-sm overflow-x-auto;
 }
 
@@ -1061,7 +1071,7 @@ pre.l-ui-surface {
          w-full px-3 py-2.5 min-h-[44px]
          /* text-base at mobile; text-sm at md+ */
          text-base font-inter
-         text-foreground
+         bg-background text-foreground
          border border-border-control rounded-sm
          focus-ring;
 
@@ -1792,19 +1802,26 @@ pre.l-ui-surface {
   animation-delay: 0.3s;
 }
 
-/* Token fade-in */
+/* Stream fade-in */
+
+@keyframes l-ui-stream-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
 
-@keyframes l-ui-token-fade-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
+.l-ui-stream-fade {
+  animation: l-ui-stream-fade-in 0.5s ease-out both;
 }
 
-.l-ui-token-fade {
-  animation: l-ui-token-fade-in 1s ease-out both;
+.l-ui-stream-fade-word {
+  display: inline-block;
+  animation: l-ui-stream-fade-in 0.5s ease-out both;
+  animation-delay: min(calc(var(--i, 0) * 25ms), 1s);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .l-ui-token-fade {
+  .l-ui-stream-fade,
+  .l-ui-stream-fade-word {
     animation: none;
   }
 }

data/app/helpers/layered/ui/form_helper.rb

@@ -1,7 +1,7 @@
 module Layered
   module Ui
     module FormHelper
-      FIELD_TYPES = %i[string text email number date datetime select checkbox hidden].freeze
+      FIELD_TYPES = %i[string text email password number date datetime select checkbox hidden].freeze
 
       # Renders a complete form with all fields, error summary,
       # and submit button.

data/app/views/layouts/layered_ui/_header.html.erb

@@ -23,11 +23,11 @@
 
       <% unless l_ui_user_signed_in? %>
         <% if respond_to?(:new_user_registration_path) %>
-          <%= link_to "Register", main_app.new_user_registration_path, class: "l-ui-button" %>
+          <%= link_to "Register", main_app.new_user_registration_path, class: "l-ui-button--outline l-ui-button--small" %>
         <% end %>
 
         <% if respond_to?(:new_user_session_path) %>
-          <%= link_to "Login", main_app.new_user_session_path, class: "l-ui-button" %>
+          <%= link_to "Login", main_app.new_user_session_path, class: "l-ui-button--primary l-ui-button--small" %>
         <% end %>
       <% end %>
 

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.10.0"
+    VERSION = "0.12.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.10.0
+  version: 0.12.0
 platform: ruby
 authors:
 - layered.ai