layered-ui-rails 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +28 -1
- data/app/assets/images/layered_ui/icon_discord.svg +3 -0
- data/app/assets/images/layered_ui/icon_github.svg +3 -0
- data/app/assets/images/layered_ui/icon_globe.svg +5 -0
- data/app/assets/images/layered_ui/icon_linkedin.svg +3 -0
- data/app/assets/images/layered_ui/icon_mail.svg +3 -0
- data/app/assets/images/layered_ui/icon_x.svg +3 -0
- data/app/assets/tailwind/layered/ui/styles.css +60 -20
- data/lib/layered/ui/version.rb +1 -1
- metadata +7 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 75dcf9f79fab9aaea203cbb53005e0f554ba9251fd9b82fdd0ea34f34759bbf6
|
|
4
|
+
data.tar.gz: 7ce2c60f5c4c5e51e17ab495d793b5e743ad12db337aa8e1aff64d334cd39195
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1f1bfb59cba7edc8b7ab8486d6748d2a27fbb3f3faec78e1e4a0334cfb35a3ba6368e09ad1a3927933f993e9447aefd5ffa8bf51717905da3f4030fbb55aef54
|
|
7
|
+
data.tar.gz: c492959e4df4584ad21de616221b8b0b6698c4cd33d4856c36d750d85f3edebea6afc205d7535145a705cdd83e89b2c4c50fc41ed018fc5cb641b19ac53123e8
|
data/CHANGELOG.md
CHANGED
|
@@ -2,7 +2,34 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Unreleased
|
|
6
|
+
|
|
7
|
+
## [0.2.3] - 2026-04-06
|
|
8
|
+
|
|
9
|
+
### Added
|
|
10
|
+
|
|
11
|
+
- Social icon SVGs (globe, GitHub, X, LinkedIn, Discord, mail) bundled in the gem for reuse by host apps
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Pagy pagination links still showing underline despite previous fix - broadened page link exclusion to all `l-ui-` classes and added explicit `no-underline` to pagination items
|
|
16
|
+
|
|
17
|
+
## [0.2.2] - 2026-04-03
|
|
18
|
+
|
|
19
|
+
### Added
|
|
20
|
+
|
|
21
|
+
- Collapsible surface variants (`.l-ui-surface--collapsible`, `.l-ui-surface--collapsible-active`) using native `<details>`/`<summary>` for WCAG 2.2 AA accessible disclosure
|
|
22
|
+
- `.l-ui-surface--sm` compact surface variant with smaller padding and summary text
|
|
23
|
+
- `h4` base style (Manrope bold, `text-sm`)
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
|
|
27
|
+
- Form inputs now use 16px (`text-base`) font size by default, preventing Safari auto-zoom on iOS without relying on a `!important` hack
|
|
28
|
+
|
|
29
|
+
### Fixed
|
|
30
|
+
|
|
31
|
+
- Pagination links no longer inherit underline from global page link styles
|
|
32
|
+
- CSS `@apply` ordering now follows the documented convention (layout, spacing, typography, colours, effects) in `code`, `tabs__tab`, and `l-ui-scroll-to-bottom`
|
|
6
33
|
|
|
7
34
|
## [0.2.1] - 2026-04-01
|
|
8
35
|
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03ZM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z" />
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
|
|
3
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.6 9h16.8M3.6 15h16.8" />
|
|
4
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9Z" />
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z" />
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0-8.953 5.468a1.5 1.5 0 0 1-1.594 0L2.25 6.75" />
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z" />
|
|
3
|
+
</svg>
|
|
@@ -102,6 +102,10 @@
|
|
|
102
102
|
@apply heading;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
+
h4 {
|
|
106
|
+
@apply heading text-sm;
|
|
107
|
+
}
|
|
108
|
+
|
|
105
109
|
p {
|
|
106
110
|
@apply mt-0
|
|
107
111
|
text-sm text-foreground-muted leading-relaxed;
|
|
@@ -120,8 +124,8 @@
|
|
|
120
124
|
code {
|
|
121
125
|
font-size: 0.8125rem;
|
|
122
126
|
line-height: 1.25rem;
|
|
123
|
-
@apply
|
|
124
|
-
|
|
127
|
+
@apply whitespace-pre overflow-x-auto
|
|
128
|
+
text-foreground-muted;
|
|
125
129
|
}
|
|
126
130
|
}
|
|
127
131
|
|
|
@@ -434,7 +438,7 @@
|
|
|
434
438
|
@apply page;
|
|
435
439
|
}
|
|
436
440
|
|
|
437
|
-
.l-ui-page a:not([class*="l-ui-
|
|
441
|
+
.l-ui-page a:not([class*="l-ui-"]) {
|
|
438
442
|
@apply underline
|
|
439
443
|
text-foreground hover:text-foreground-muted
|
|
440
444
|
focus-ring rounded-sm;
|
|
@@ -818,6 +822,53 @@ pre.l-ui-surface {
|
|
|
818
822
|
bg-surface-active;
|
|
819
823
|
}
|
|
820
824
|
|
|
825
|
+
.l-ui-surface--collapsible {
|
|
826
|
+
@apply surface
|
|
827
|
+
bg-surface;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
.l-ui-surface--collapsible-active {
|
|
831
|
+
@apply surface
|
|
832
|
+
bg-surface-active;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
.l-ui-surface--collapsible,
|
|
836
|
+
.l-ui-surface--collapsible-active {
|
|
837
|
+
&[open] > .l-ui-surface__summary .l-ui-surface__chevron {
|
|
838
|
+
@apply rotate-90;
|
|
839
|
+
}
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
.l-ui-surface--sm {
|
|
843
|
+
@apply p-3;
|
|
844
|
+
|
|
845
|
+
.l-ui-surface__summary {
|
|
846
|
+
@apply text-sm font-semibold;
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
.l-ui-surface__content {
|
|
850
|
+
@apply pt-3;
|
|
851
|
+
}
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
.l-ui-surface__summary {
|
|
855
|
+
@apply flex items-center justify-between
|
|
856
|
+
font-bold
|
|
857
|
+
list-none cursor-pointer focus-ring;
|
|
858
|
+
|
|
859
|
+
&::-webkit-details-marker {
|
|
860
|
+
display: none;
|
|
861
|
+
}
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
.l-ui-surface__chevron {
|
|
865
|
+
@apply transition-transform duration-200;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
.l-ui-surface__content {
|
|
869
|
+
@apply pt-4;
|
|
870
|
+
}
|
|
871
|
+
|
|
821
872
|
/* Form */
|
|
822
873
|
|
|
823
874
|
.l-ui-form {
|
|
@@ -856,7 +907,7 @@ pre.l-ui-surface {
|
|
|
856
907
|
@utility form__field {
|
|
857
908
|
@apply block
|
|
858
909
|
w-full px-3 py-2.5 min-h-[44px]
|
|
859
|
-
text-
|
|
910
|
+
text-base font-inter
|
|
860
911
|
text-foreground
|
|
861
912
|
border border-border-control rounded-sm
|
|
862
913
|
focus-ring;
|
|
@@ -868,8 +919,7 @@ pre.l-ui-surface {
|
|
|
868
919
|
}
|
|
869
920
|
|
|
870
921
|
.field_with_errors .l-ui-form__field {
|
|
871
|
-
@apply
|
|
872
|
-
border-2 border-error-bg bg-error-bg/10;
|
|
922
|
+
@apply border-2 border-error-bg bg-error-bg/10;
|
|
873
923
|
}
|
|
874
924
|
|
|
875
925
|
.l-ui-form__field-error {
|
|
@@ -997,11 +1047,10 @@ pre.l-ui-surface {
|
|
|
997
1047
|
}
|
|
998
1048
|
|
|
999
1049
|
@utility tabs__tab {
|
|
1000
|
-
@apply min-h-[44px]
|
|
1050
|
+
@apply -mb-px min-h-[44px]
|
|
1001
1051
|
text-sm font-medium
|
|
1002
1052
|
text-foreground-muted
|
|
1003
1053
|
border-b-2 border-transparent
|
|
1004
|
-
-mb-px
|
|
1005
1054
|
cursor-pointer
|
|
1006
1055
|
focus-ring
|
|
1007
1056
|
transition-colors;
|
|
@@ -1172,7 +1221,7 @@ pre.l-ui-surface {
|
|
|
1172
1221
|
|
|
1173
1222
|
.l-ui-container--pagy .pagy.series-nav a,
|
|
1174
1223
|
.l-ui-container--pagy .pagy.series-nav span {
|
|
1175
|
-
@apply pagination__item;
|
|
1224
|
+
@apply pagination__item no-underline;
|
|
1176
1225
|
}
|
|
1177
1226
|
|
|
1178
1227
|
.l-ui-container--pagy .pagy.series-nav a[aria-current="page"] {
|
|
@@ -1503,10 +1552,8 @@ pre.l-ui-surface {
|
|
|
1503
1552
|
|
|
1504
1553
|
.l-ui-scroll-to-bottom {
|
|
1505
1554
|
@apply
|
|
1506
|
-
sticky bottom-2
|
|
1507
|
-
mx-auto -mt-9
|
|
1508
|
-
flex items-center justify-center
|
|
1509
|
-
h-9 w-9
|
|
1555
|
+
sticky bottom-2 flex items-center justify-center
|
|
1556
|
+
mx-auto -mt-9 h-9 w-9
|
|
1510
1557
|
rounded-full
|
|
1511
1558
|
cursor-pointer
|
|
1512
1559
|
bg-button-primary-bg/60 text-button-primary-text shadow-lg backdrop-blur-xs
|
|
@@ -1594,13 +1641,6 @@ pre.l-ui-surface {
|
|
|
1594
1641
|
|
|
1595
1642
|
/* Safari */
|
|
1596
1643
|
@media (max-width: 767px) {
|
|
1597
|
-
/* Prevent Safari auto-zoom on input focus */
|
|
1598
|
-
input,
|
|
1599
|
-
textarea,
|
|
1600
|
-
select {
|
|
1601
|
-
font-size: 16px !important;
|
|
1602
|
-
}
|
|
1603
|
-
|
|
1604
1644
|
/* iOS Safari ignores overflow:hidden on body; position:fixed is required */
|
|
1605
1645
|
.l-ui-scroll-lock {
|
|
1606
1646
|
position: fixed;
|
data/lib/layered/ui/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: layered-ui-rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- layered.ai
|
|
@@ -174,10 +174,16 @@ files:
|
|
|
174
174
|
- app/assets/images/layered_ui/icon_chevron_right.svg
|
|
175
175
|
- app/assets/images/layered_ui/icon_close.svg
|
|
176
176
|
- app/assets/images/layered_ui/icon_dark.svg
|
|
177
|
+
- app/assets/images/layered_ui/icon_discord.svg
|
|
178
|
+
- app/assets/images/layered_ui/icon_github.svg
|
|
179
|
+
- app/assets/images/layered_ui/icon_globe.svg
|
|
177
180
|
- app/assets/images/layered_ui/icon_hamburger.svg
|
|
178
181
|
- app/assets/images/layered_ui/icon_light.svg
|
|
182
|
+
- app/assets/images/layered_ui/icon_linkedin.svg
|
|
183
|
+
- app/assets/images/layered_ui/icon_mail.svg
|
|
179
184
|
- app/assets/images/layered_ui/icon_moon.svg
|
|
180
185
|
- app/assets/images/layered_ui/icon_sun.svg
|
|
186
|
+
- app/assets/images/layered_ui/icon_x.svg
|
|
181
187
|
- app/assets/images/layered_ui/logo_dark.svg
|
|
182
188
|
- app/assets/images/layered_ui/logo_light.svg
|
|
183
189
|
- app/assets/images/layered_ui/panel_icon_dark.svg
|