layered-ui-rails 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a003a0587e54bd4fbe0c90372457e5e08d008c4b4a36e3757574fea3e683f89
-  data.tar.gz: 47ba6b7105c1edb3c65fde860452847f701acfd2d54fc01362e007d958db228c
+  metadata.gz: cc3ae5046f628257f567d0091f79d21571fce6d511357bbe0569deb2a124d219
+  data.tar.gz: 11fd650054e679921f8e25f8c688fa8f6d87605c94b118a70a37e24f8494907a
 SHA512:
-  metadata.gz: 1629e9ed5175072c80216c2d3d836df2d943ce87a450d07202eae959b477e8733e614ae51b8cdfcd25e648a3b3a2c84b87f6f48a2e3243a666673ca356e41073
-  data.tar.gz: 4bd348628ba07db55292296050018f60c040ff906a65624295c773def442d25dd881cd5df35462dad2093e2d287d302a00649828b92e92a11c021cc5488214a5
+  metadata.gz: cd23b2dc4c6686d2af8922bb10333ca4d7b8210ca6d7f1cc3ec03c162b246dbc960203ee4751c01d6d8d06e90f8f0dd214fa445bfe58eb7a3b35bf646485a0ff
+  data.tar.gz: 43177db0adfbe3aae755e6efdea98ede80b14400f9c36162f3eaeef9d0dfec48c4b3a85e5cd4c287776dab3a8750d88e73612a48ca462438f6799c7d21103408

data/CHANGELOG.md

@@ -2,7 +2,21 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
-## [Unreleased]
+## [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
 

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;
   }
 }
 
@@ -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/layered/ui/version.rb

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

metadata

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