layered-ui-rails 0.2.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 25f7ed58266ba42853fdb266805b9f8daa8f69531bae482a13e5355e9868ba5e
-  data.tar.gz: 4dcd71073bf9335ef288d849e0754d3104ee750f3f049a1369537a303af39db2
+  metadata.gz: cc3ae5046f628257f567d0091f79d21571fce6d511357bbe0569deb2a124d219
+  data.tar.gz: 11fd650054e679921f8e25f8c688fa8f6d87605c94b118a70a37e24f8494907a
 SHA512:
-  metadata.gz: 32269b207610271eee8e2fd2c6aab706ac0c51b04d325f7e670543165ec13898ff6417e4ff966bd5bf2b3e85a692d73a7489eca18d34a873d1d7b77cf2d5ac6f
-  data.tar.gz: 9db4d1270d00b1cde0b5c6f406585efb7aa6334ddcfb9a8a64f3f75d46e05c2b82e4d20bb1e8f3064fdb47b04c55ce7f423abaf0b0a306f608a129fb4c542872
+  metadata.gz: cd23b2dc4c6686d2af8922bb10333ca4d7b8210ca6d7f1cc3ec03c162b246dbc960203ee4751c01d6d8d06e90f8f0dd214fa445bfe58eb7a3b35bf646485a0ff
+  data.tar.gz: 43177db0adfbe3aae755e6efdea98ede80b14400f9c36162f3eaeef9d0dfec48c4b3a85e5cd4c287776dab3a8750d88e73612a48ca462438f6799c7d21103408

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.2.2] - 2026-04-03
+
+### Added
+
+- Collapsible surface variants (`.l-ui-surface--collapsible`, `.l-ui-surface--collapsible-active`) using native `<details>`/`<summary>` for WCAG 2.2 AA accessible disclosure
+- `.l-ui-surface--sm` compact surface variant with smaller padding and summary text
+- `h4` base style (Manrope bold, `text-sm`)
+
+### Changed
+
+- Form inputs now use 16px (`text-base`) font size by default, preventing Safari auto-zoom on iOS without relying on a `!important` hack
+
+### Fixed
+
+- CSS `@apply` ordering now follows the documented convention (layout, spacing, typography, colours, effects) in `code`, `tabs__tab`, and `l-ui-scroll-to-bottom`
+
+## [0.2.1] - 2026-04-01
+
+### Changed
+
+- `tailwindcss-rails` promoted from development dependency to runtime dependency
+- `layered:ui:create_overrides` generator Tier 3 section now includes commented examples for `.l-ui-header__logo` and `.l-ui-header__icon` size overrides
+- Documentation for logo and icon styling overrides, pointing to `layered_ui_overrides.css`
+
 ## [0.2.0] - 2026-03-31
 
 ### Added

data/README.md

@@ -139,6 +139,8 @@ For per-request logos (e.g. per-tenant branding), use `content_for` because the
 <% end %>
 ```
 
+To adjust the size of the logo or header icon, override `.l-ui-header__logo` or `.l-ui-header__icon` in `layered_ui_overrides.css` (created by `bin/rails generate layered:ui:create_overrides`). Commented examples are included in the Tier 3 section of that file.
+
 For per-request icons, set instance variables - the engine renders `<link>` and `<img>` tags that only need a URL to vary:
 
 ```ruby

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

@@ -102,6 +102,10 @@
     @apply heading;
   }
 
+  h4 {
+    @apply heading text-sm;
+  }
+
   p {
     @apply mt-0
            text-sm text-foreground-muted leading-relaxed;
@@ -120,8 +124,8 @@
   code {
     font-size: 0.8125rem;
     line-height: 1.25rem;
-    @apply text-foreground-muted
-           whitespace-pre overflow-x-auto;
+    @apply whitespace-pre overflow-x-auto
+           text-foreground-muted;
   }
 }
 
@@ -809,7 +813,7 @@ pre.l-ui-surface {
   @apply m-0 overflow-auto;
 
   > code {
-    background: transparent;
+    @apply bg-transparent;
   }
 }
 
@@ -818,6 +822,53 @@ pre.l-ui-surface {
          bg-surface-active;
 }
 
+.l-ui-surface--collapsible {
+  @apply surface
+         bg-surface;
+}
+
+.l-ui-surface--collapsible-active {
+  @apply surface
+         bg-surface-active;
+}
+
+.l-ui-surface--collapsible,
+.l-ui-surface--collapsible-active {
+  &[open] > .l-ui-surface__summary .l-ui-surface__chevron {
+    @apply rotate-90;
+  }
+}
+
+.l-ui-surface--sm {
+  @apply p-3;
+
+  .l-ui-surface__summary {
+    @apply text-sm font-semibold;
+  }
+
+  .l-ui-surface__content {
+    @apply pt-3;
+  }
+}
+
+.l-ui-surface__summary {
+  @apply flex items-center justify-between
+         font-bold
+         list-none cursor-pointer focus-ring;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.l-ui-surface__chevron {
+  @apply transition-transform duration-200;
+}
+
+.l-ui-surface__content {
+  @apply pt-4;
+}
+
 /* Form */
 
 .l-ui-form {
@@ -856,7 +907,7 @@ pre.l-ui-surface {
 @utility form__field {
   @apply block
          w-full px-3 py-2.5 min-h-[44px]
-         text-sm font-inter
+         text-base font-inter
          text-foreground
          border border-border-control rounded-sm
          focus-ring;
@@ -868,8 +919,7 @@ pre.l-ui-surface {
 }
 
 .field_with_errors .l-ui-form__field {
-  @apply text-sm
-         border-2 border-error-bg bg-error-bg/10;
+  @apply border-2 border-error-bg bg-error-bg/10;
 }
 
 .l-ui-form__field-error {
@@ -997,11 +1047,10 @@ pre.l-ui-surface {
 }
 
 @utility tabs__tab {
-  @apply min-h-[44px]
+  @apply -mb-px min-h-[44px]
          text-sm font-medium
          text-foreground-muted
          border-b-2 border-transparent
-         -mb-px
          cursor-pointer
          focus-ring
          transition-colors;
@@ -1503,10 +1552,8 @@ pre.l-ui-surface {
 
 .l-ui-scroll-to-bottom {
   @apply
-    sticky bottom-2
-    mx-auto -mt-9
-    flex items-center justify-center
-    h-9 w-9
+    sticky bottom-2 flex items-center justify-center
+    mx-auto -mt-9 h-9 w-9
     rounded-full
     cursor-pointer
     bg-button-primary-bg/60 text-button-primary-text shadow-lg backdrop-blur-xs
@@ -1594,13 +1641,6 @@ pre.l-ui-surface {
 
 /* Safari */
 @media (max-width: 767px) {
-  /* Prevent Safari auto-zoom on input focus */
-  input,
-  textarea,
-  select {
-    font-size: 16px !important;
-  }
-
   /* iOS Safari ignores overflow:hidden on body; position:fixed is required */
   .l-ui-scroll-lock {
     position: fixed;

data/lib/generators/layered/ui/create_overrides_generator.rb

@@ -100,6 +100,23 @@ module Layered
               --backdrop: 0 0% 0%;
             }
             */
+
+            /* ----------------------------------------------------------------
+             * Tier 3 - Component overrides
+             *
+             * Override individual component styles. Uncomment and adjust as needed.
+             * Examples: adjust logo or icon height to suit your brand images.
+             * ---------------------------------------------------------------- */
+
+            /*
+            .l-ui-header__logo {
+              @apply h-7.5 w-auto;
+            }
+
+            .l-ui-header__icon {
+              @apply h-7.5 w-auto;
+            }
+            */
           CSS
         end
       end

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.2.0"
+    VERSION = "0.2.2"
   end
 end

data/lib/layered/ui.rb

@@ -1,3 +1,4 @@
+require "tailwindcss-rails"
 require "layered/ui/version"
 require "layered/ui/engine"
 

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.2
 platform: ruby
 authors:
 - layered.ai
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-03-31 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -24,6 +23,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '8.0'
+- !ruby/object:Gem::Dependency
+  name: tailwindcss-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
 - !ruby/object:Gem::Dependency
   name: devise
   requirement: !ruby/object:Gem::Requirement
@@ -122,20 +135,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.0'
-- !ruby/object:Gem::Dependency
-  name: tailwindcss-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4.0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4.0'
 - !ruby/object:Gem::Dependency
   name: turbo-rails
   requirement: !ruby/object:Gem::Requirement
@@ -265,8 +264,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.11
-signing_key:
+rubygems_version: 4.0.6
 specification_version: 4
 summary: Open source, minimalist, responsive, accessible UI system with light and
   dark theme support.