layered-ui-rails 0.12.0 → 0.14.0

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.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/.claude/skills/layered-ui-rails/SKILL.md +5 -5
  3. data/.claude/skills/layered-ui-rails/references/CONTROLLERS.md +2 -2
  4. data/.claude/skills/layered-ui-rails/references/CSS.md +88 -56
  5. data/.claude/skills/layered-ui-rails/references/HELPERS.md +3 -3
  6. data/AGENTS.md +5 -5
  7. data/CHANGELOG.md +44 -5
  8. data/README.md +4 -2
  9. data/app/assets/images/layered_ui/logo_dark.svg +14 -24
  10. data/app/assets/images/layered_ui/logo_light.svg +14 -24
  11. data/app/assets/tailwind/layered/ui/styles.css +383 -427
  12. data/app/helpers/layered/ui/navigation_helper.rb +1 -1
  13. data/app/helpers/layered/ui/pagy_helper.rb +2 -2
  14. data/app/helpers/layered/ui/ransack_helper.rb +5 -5
  15. data/app/helpers/layered/ui/table_helper.rb +5 -5
  16. data/app/helpers/layered/ui/title_bar_helper.rb +1 -1
  17. data/app/javascript/layered_ui/controllers/l_ui/navigation_controller.js +9 -9
  18. data/app/javascript/layered_ui/controllers/l_ui/panel_controller.js +4 -4
  19. data/app/javascript/layered_ui/controllers/l_ui/search_form_controller.js +1 -1
  20. data/app/javascript/layered_ui/controllers/l_ui/tabs_controller.js +0 -2
  21. data/app/views/devise/confirmations/new.html.erb +5 -5
  22. data/app/views/devise/passwords/edit.html.erb +5 -5
  23. data/app/views/devise/passwords/new.html.erb +5 -5
  24. data/app/views/devise/registrations/new.html.erb +5 -5
  25. data/app/views/devise/sessions/new.html.erb +8 -8
  26. data/app/views/devise/shared/_links.html.erb +27 -27
  27. data/app/views/devise/unlocks/new.html.erb +5 -5
  28. data/app/views/layered/ui/managed_resource/_field_input.html.erb +11 -8
  29. data/app/views/layered_ui/shared/_form_errors.html.erb +3 -3
  30. data/app/views/layered_ui/shared/_search_select.html.erb +1 -1
  31. data/app/views/layouts/layered_ui/_header.html.erb +9 -9
  32. data/app/views/layouts/layered_ui/_navigation.html.erb +3 -3
  33. data/app/views/layouts/layered_ui/_notice.html.erb +1 -1
  34. data/app/views/layouts/layered_ui/_panel.html.erb +7 -5
  35. data/app/views/layouts/layered_ui/application.html.erb +1 -1
  36. data/lib/layered/ui/version.rb +1 -1
  37. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8bc7d9b4d6a4db2e8d1c172e0ab8d6cce9c7788318e17a601c8bb580c69ab44e
4
- data.tar.gz: ac1fcd4473946402b0842173c42c06c9a6bac43befe32168bc9fd4977b5c25e2
3
+ metadata.gz: dd3b300ca92cbb2d2bc81086f5bc641f5124ce17e9ee8bfe509bca379fea9a32
4
+ data.tar.gz: 4dd8fadd0855594730d434e48dcd3eee163c0d8c3859212cfcfaa67a3856ccdb
5
5
  SHA512:
6
- metadata.gz: c3312e94ff32e031ba9c2090d8429c18f211df5bcf518c01ec210b351617d7ef1404c327f0d45faa5d0bbe6c9d4aa60dab72fcaba5ed64de904fa47f8f963448
7
- data.tar.gz: efb9d118bbbccab38a8c35a7af50420b9486bb4e7eabf5f1d976b52531ac2316d13b499face9c3969482a52528de1453ad0528dc5a7ae60e4a8c6f4f91cf370f
6
+ metadata.gz: 4f55763d1411e9d97fba34b3d7cebf22642c7aed74679e9f4218bc6389145acf3f2a5503cabfa9d0157ddc7873f9b337be0d7821349e33c2283b710568a9b773
7
+ data.tar.gz: 0fd9a835309c100a8a15968a55843fd7d857fc941a0e77686881fa022d244add42addd67c3c76931fea6dd2c7565dc69df3cee45ee12a11cc78215cb57bdf85a
data/.claude/skills/layered-ui-rails/SKILL.md CHANGED
@@ -125,14 +125,14 @@ Key components:
125
125
 
126
126
  | Component | Key classes |
127
127
  |---|---|
128
- | Page layout | `.l-ui-page`, `--with-navigation`, `--vertically-centered`, `--width-constrained` |
128
+ | Page layout | `.l-ui-page`, `--with-navigation`, `__vertically-centered`, `__width-constrained` |
129
129
  | Buttons | `.l-ui-button`, `--primary`, `--outline`, `--outline-danger`, `--full`, `--icon` |
130
- | Surfaces | `.l-ui-surface`, `--active`, `--sm`, `--collapsible` |
130
+ | Surfaces | `.l-ui-surface`, `--highlighted`, `--sm`, `--collapsible`, `--collapsible-highlighted` |
131
131
  | Forms | `.l-ui-form`, `.l-ui-form__group`, `.l-ui-form__field`, `.l-ui-label`, `.l-ui-select` |
132
- | Tables | `.l-ui-table`, `.l-ui-table__header`, `.l-ui-table__cell`, `--primary`, `--action` |
132
+ | Tables | `.l-ui-table`, `.l-ui-table__header`, `.l-ui-table__cell`, `--primary`, `--action`, `.l-ui-table__action`, `--danger` |
133
133
  | Badges | `.l-ui-badge`, `--rounded`, `--default`, `--success`, `--warning`, `--danger` |
134
- | Notices | `.l-ui-notice--success`, `--warning`, `--error` |
135
- | Tabs | `.l-ui-tabs__list`, `.l-ui-tabs__tab`, `--active` |
134
+ | Notices | `.l-ui-notice` (base), `--success`, `--warning`, `--error` |
135
+ | Tabs | `.l-ui-tabs`, `.l-ui-tabs__list`, `.l-ui-tabs__tab`, `--active` |
136
136
  | Modal | `.l-ui-modal`, `.l-ui-modal__header`, `.l-ui-modal__body` |
137
137
 
138
138
  ## Stimulus controllers
data/.claude/skills/layered-ui-rails/references/CONTROLLERS.md CHANGED
@@ -56,7 +56,7 @@ Native `<dialog>` wrapper with focus trap, scroll lock, and focus restoration.
56
56
  <dialog data-l-ui--modal-target="dialog" class="l-ui-modal">
57
57
  <div class="l-ui-modal__header">
58
58
  <h2>Title</h2>
59
- <button data-action="click->l-ui--modal#close" class="l-ui-button--icon">
59
+ <button data-action="click->l-ui--modal#close" class="l-ui-button l-ui-button--icon">
60
60
  Close
61
61
  </button>
62
62
  </div>
@@ -82,7 +82,7 @@ Accessible tabbed interface with keyboard navigation.
82
82
  **Keyboard:** Arrow Left/Right, Home, End
83
83
 
84
84
  ```html
85
- <div data-controller="l-ui--tabs">
85
+ <div class="l-ui-tabs" data-controller="l-ui--tabs">
86
86
  <div role="tablist" class="l-ui-tabs__list">
87
87
  <button role="tab" data-l-ui--tabs-target="tab"
88
88
  data-action="click->l-ui--tabs#select keydown->l-ui--tabs#keydown"
data/.claude/skills/layered-ui-rails/references/CSS.md CHANGED
@@ -2,35 +2,49 @@
2
2
 
3
3
  All classes use the `l-ui-` prefix with BEM naming. Use these in host app views. Do not use raw Tailwind utilities for engine-provided patterns as they will not be generated by the host app's Tailwind build.
4
4
 
5
+ ## Naming conventions
6
+
7
+ Two patterns deviate from strict BEM by design - leave them in place rather than "fixing" them into elements:
8
+
9
+ **`*-container` shells.** Several blocks have a sibling `*-container` class (`l-ui-header-container`, `l-ui-navigation-container`, `l-ui-panel-container`, `l-ui-table-container`, `l-ui-pagy-container`, `l-ui-checkbox-container`, `l-ui-select-container`). These are positioning shells responsible for fixed/overlay placement, scroll boundaries, and click-outside scopes. They are treated as their own blocks rather than `__container` elements because they have distinct responsibilities from the inner block, are sometimes used independently in tests/docs, and several BEM dialects accept this. Use the `*-container` suffix consistently for any new shell of this kind.
10
+
11
+ **Bare-link styling.** `.l-ui-page` and `.l-ui-panel__body` style descendant `<a>` elements that do not already carry an `l-ui-` class:
12
+
13
+ ```css
14
+ .l-ui-page a:not([class*="l-ui-"]),
15
+ .l-ui-panel__body a:not([class*="l-ui-"]) { ... }
16
+ ```
17
+
18
+ This gives author-written links inside long-form content (Markdown, prose, ad-hoc views) consistent underline/colour treatment without forcing an explicit class on every link. Engine elements opt out automatically because their class names contain `l-ui-`. Side effect: any host-app class containing the substring `l-ui-` will also opt an `<a>` out of bare-link styling.
19
+
5
20
  ## Page layout
6
21
 
7
22
  ```
8
23
  .l-ui-page Main content wrapper with responsive padding
9
24
  .l-ui-page--with-navigation Left margin for sidebar on desktop
10
- .l-ui-page--vertically-centered Centred layout (e.g. login pages)
11
- .l-ui-page--width-constrained Max-width container
25
+ .l-ui-page__vertically-centered Centred layout element (e.g. login pages)
26
+ .l-ui-page__width-constrained Max-width container element
12
27
  ```
13
28
 
14
29
  ## Buttons
15
30
 
16
- Standalone variants (use one of these, not combined with each other):
31
+ Always combine the `l-ui-button` base class with a colour modifier (e.g. `l-ui-button l-ui-button--primary`):
17
32
 
18
33
  ```
19
- .l-ui-button Plain button with padding and focus ring
20
- .l-ui-button--primary Accent-coloured solid button
21
- .l-ui-button--danger Solid red button (for destructive actions)
22
- .l-ui-button--outline Bordered button
23
- .l-ui-button--outline-danger Red bordered button (for destructive actions)
24
- .l-ui-button--icon Icon-only button (fixed size, no text)
25
- .l-ui-button--navigation-toggle Mobile navigation toggle
26
- .l-ui-button--panel-close Panel close button
34
+ .l-ui-button Base class (required with the modifiers below)
35
+ .l-ui-button--primary Accent-coloured solid button
36
+ .l-ui-button--danger Solid red button (for destructive actions)
37
+ .l-ui-button--outline Bordered button
38
+ .l-ui-button--outline-danger Red bordered button (for destructive actions)
39
+ .l-ui-button--full Full-width (e.g. l-ui-button l-ui-button--primary l-ui-button--full)
40
+ .l-ui-button--small Compact 32px-tall variant
27
41
  ```
28
42
 
29
- Modifiers (combine with a standalone variant above):
43
+ Icon variants (combine with the `l-ui-button` base):
30
44
 
31
45
  ```
32
- .l-ui-button--full Full-width (e.g. l-ui-button--primary l-ui-button--full)
33
- .l-ui-button--small Compact 32px-tall variant (e.g. l-ui-button--primary l-ui-button--small)
46
+ .l-ui-button--icon Icon-only button (fixed size, no text)
47
+ .l-ui-button--navigation-toggle Mobile navigation toggle
34
48
  ```
35
49
 
36
50
  Any button variant is automatically styled as disabled when the `disabled` HTML attribute is present - no extra class needed.
@@ -39,12 +53,14 @@ For destructive actions use `l-ui-button--danger` (solid) or `l-ui-button--outli
39
53
 
40
54
  ## Surfaces
41
55
 
56
+ Always combine the `l-ui-surface` base class with any modifiers (e.g. `l-ui-surface l-ui-surface--highlighted`):
57
+
42
58
  ```
43
- .l-ui-surface Rounded, padded container
59
+ .l-ui-surface Base class (required with the modifiers below)
44
60
  .l-ui-surface--highlighted Darker background variant
45
61
  .l-ui-surface--sm Smaller padding
46
62
  .l-ui-surface--collapsible Wraps a <details> element
47
- .l-ui-surface--collapsible-highlighted Highlighted variant
63
+ .l-ui-surface--collapsible-highlighted Highlighted collapsible variant
48
64
  .l-ui-surface__summary Collapsible toggle (on <summary>)
49
65
  .l-ui-surface__chevron Chevron indicator (rotates on open)
50
66
  .l-ui-surface__content Collapsible content area
@@ -55,7 +71,7 @@ For destructive actions use `l-ui-button--danger` (solid) or `l-ui-button--outli
55
71
  ```
56
72
  .l-ui-form Form container
57
73
  .l-ui-form__group Vertical field group with spacing
58
- .l-ui-form__group--large-gap Larger spacing variant
74
+ .l-ui-form__group--large-gap Larger spacing modifier (combine with l-ui-form__group)
59
75
  .l-ui-form__field Input/textarea styling
60
76
  .l-ui-form__errors Error summary box
61
77
  .l-ui-form__errors-list Bulleted error list
@@ -65,15 +81,17 @@ For destructive actions use `l-ui-button--danger` (solid) or `l-ui-button--outli
65
81
  .l-ui-form__required Required indicator (*)
66
82
 
67
83
  .l-ui-label Form label
68
- .l-ui-label--checkbox Checkbox label variant
84
+
85
+ .l-ui-checkbox-container Checkbox row (input + label)
86
+ .l-ui-checkbox Checkbox input
87
+ .l-ui-checkbox-container__label Checkbox label element
69
88
 
70
89
  .l-ui-select Select dropdown
71
- .l-ui-select-wrapper Select wrapper (custom arrow)
90
+ .l-ui-select-container Select wrapper (custom arrow)
72
91
 
73
- .l-ui-search__inline Inline search form layout
92
+ .l-ui-search-inline Inline search form layout
74
93
 
75
- .l-ui-container--checkbox Checkbox container
76
- .l-ui-radio__group Radio button group
94
+ .l-ui-radio Radio button group
77
95
  .l-ui-radio__item Radio item wrapper
78
96
  .l-ui-radio__input Radio input element
79
97
  .l-ui-radio__label Radio label
@@ -90,34 +108,36 @@ For destructive actions use `l-ui-button--danger` (solid) or `l-ui-button--outli
90
108
  .l-ui-table__header <thead> row
91
109
  .l-ui-table__header-cell <th> cell
92
110
  .l-ui-table__header-cell--action Right-aligned action header
111
+ .l-ui-table__header-cell--sortable Marker class for sortable headers (no engine styles; host-app/JS hook)
93
112
  .l-ui-table__sort-link Sortable header link
94
113
  .l-ui-table__sort-indicator Sort direction indicator (arrow)
95
114
  .l-ui-table__body <tbody>
96
115
  .l-ui-table__cell Regular <td> cell
97
116
  .l-ui-table__cell--primary Bold cell (typically first column, use <th scope="row">)
98
117
  .l-ui-table__cell--action Right-aligned action cell
99
- .l-ui-table__action--danger Danger action link
100
- .l-ui-container--table Overflow wrapper for responsive tables
118
+ .l-ui-table__action Action link/button (inside a __cell--action)
119
+ .l-ui-table__action--danger Danger modifier (combine with l-ui-table__action)
120
+ .l-ui-table-container Overflow wrapper for responsive tables
101
121
  ```
102
122
 
103
123
  WCAG 2.2 AA table pattern:
104
124
 
105
125
  ```html
106
- <div class="l-ui-container--table">
126
+ <div class="l-ui-table-container">
107
127
  <table class="l-ui-table">
108
128
  <caption>Users</caption>
109
129
  <thead class="l-ui-table__header">
110
130
  <tr>
111
131
  <th scope="col" class="l-ui-table__header-cell">Name</th>
112
132
  <th scope="col" class="l-ui-table__header-cell">Email</th>
113
- <th scope="col" class="l-ui-table__header-cell--action">Actions</th>
133
+ <th scope="col" class="l-ui-table__header-cell l-ui-table__header-cell--action">Actions</th>
114
134
  </tr>
115
135
  </thead>
116
136
  <tbody class="l-ui-table__body">
117
137
  <tr>
118
- <th scope="row" class="l-ui-table__cell--primary">Alice</th>
138
+ <th scope="row" class="l-ui-table__cell l-ui-table__cell--primary">Alice</th>
119
139
  <td class="l-ui-table__cell">alice@example.com</td>
120
- <td class="l-ui-table__cell--action">
140
+ <td class="l-ui-table__cell l-ui-table__cell--action">
121
141
  <a href="/users/1/edit">Edit</a>
122
142
  </td>
123
143
  </tr>
@@ -128,7 +148,10 @@ WCAG 2.2 AA table pattern:
128
148
 
129
149
  ## Notices
130
150
 
151
+ Always combine the base block with one variant modifier (e.g. `class="l-ui-notice l-ui-notice--success"`).
152
+
131
153
  ```
154
+ .l-ui-notice Base notice (always required alongside a variant)
132
155
  .l-ui-notice--success Green success message
133
156
  .l-ui-notice--warning Yellow warning message
134
157
  .l-ui-notice--error Red error message
@@ -137,7 +160,7 @@ WCAG 2.2 AA table pattern:
137
160
  ## Badges
138
161
 
139
162
  ```
140
- .l-ui-badge Base badge
163
+ .l-ui-badge Base badge (required alongside a colour modifier)
141
164
  .l-ui-badge--rounded Pill shape
142
165
  .l-ui-badge--default Grey
143
166
  .l-ui-badge--success Green
@@ -145,12 +168,15 @@ WCAG 2.2 AA table pattern:
145
168
  .l-ui-badge--danger Red
146
169
  ```
147
170
 
171
+ Always combine the base block with a modifier, e.g. `<span class="l-ui-badge l-ui-badge--success">`.
172
+
148
173
  ## Tabs
149
174
 
150
175
  ```
176
+ .l-ui-tabs Tabs wrapper (data-controller="l-ui--tabs")
151
177
  .l-ui-tabs__list Tab list container (role="tablist")
152
- .l-ui-tabs__tab Tab button
153
- .l-ui-tabs__tab--active Active tab with accent border
178
+ .l-ui-tabs__tab Tab button (base class, required)
179
+ .l-ui-tabs__tab--active Active tab with accent border (combine with l-ui-tabs__tab)
154
180
  .l-ui-tabs__panel Tab panel content
155
181
  ```
156
182
 
@@ -174,7 +200,7 @@ WCAG 2.2 AA table pattern:
174
200
  ## Title bar
175
201
 
176
202
  ```
177
- .l-ui-title-bar Title bar wrapper used with .l-ui-container--spread
203
+ .l-ui-title-bar Title bar wrapper used with .l-ui-spread
178
204
  .l-ui-title-bar__content Breadcrumbs and title column
179
205
  .l-ui-title-bar__title Page title
180
206
  .l-ui-title-bar__actions Action area
@@ -193,21 +219,22 @@ WCAG 2.2 AA table pattern:
193
219
  ## Navigation
194
220
 
195
221
  ```
196
- .l-ui-container--navigation Sidebar container
197
- .l-ui-container--navigation.open Visible sidebar
198
- .l-ui-backdrop--navigation Overlay backdrop
199
- .l-ui-backdrop--navigation.open Visible backdrop
222
+ .l-ui-navigation-container Sidebar container
223
+ .l-ui-navigation-container--open Visible sidebar (toggled by Stimulus)
224
+ .l-ui-backdrop Base backdrop (always pair with a variant)
225
+ .l-ui-backdrop--navigation Navigation overlay (use with .l-ui-backdrop)
226
+ .l-ui-backdrop--open Visible backdrop (toggled by Stimulus)
200
227
  .l-ui-navigation Nav flexbox
201
228
  .l-ui-navigation__links Nav links list
202
- .l-ui-navigation__item Nav item
203
- .l-ui-navigation__item--active Active nav item (highlighted bg)
229
+ .l-ui-navigation__item Nav item (base class, required)
230
+ .l-ui-navigation__item--active Active nav item (combine with l-ui-navigation__item)
204
231
  .l-ui-navigation__item-icon Icon image inside a nav item
205
232
  .l-ui-navigation__item-icon-slot Wrapper for caller-supplied icon HTML (e.g. icon fonts)
206
233
  .l-ui-navigation__item-label Label span inside a nav item
207
234
  .l-ui-navigation__section Section group (li)
208
235
  .l-ui-navigation__section--has-heading Section that has a visible heading
209
236
  .l-ui-navigation__section--separated Section with top border separator
210
- .l-ui-navigation__section--collapsible Section with toggle button heading
237
+ .l-ui-navigation__section--collapsible Marker class for collapsible sections (no engine styles; host-app/JS hook)
211
238
  .l-ui-navigation__section-heading Plain section label (small, uppercase, muted)
212
239
  .l-ui-navigation__section-toggle Collapsible section heading (item-row sized button)
213
240
  .l-ui-navigation__section-chevron Toggle chevron (rotates when closed)
@@ -220,7 +247,7 @@ WCAG 2.2 AA table pattern:
220
247
  ## Header
221
248
 
222
249
  ```
223
- .l-ui-container--header Fixed header container
250
+ .l-ui-header-container Fixed header container
224
251
  .l-ui-header Header flexbox
225
252
  .l-ui-header__icon Header icon (responsive)
226
253
  .l-ui-header__icon--light Light theme icon
@@ -229,6 +256,7 @@ WCAG 2.2 AA table pattern:
229
256
  .l-ui-header__logo--light Light theme logo
230
257
  .l-ui-header__logo--dark Dark theme logo
231
258
  .l-ui-theme-toggle Theme toggle button
259
+ .l-ui-theme-toggle__icon Base toggle icon (always pair with a variant)
232
260
  .l-ui-theme-toggle__icon--light Sun icon (shown in dark mode)
233
261
  .l-ui-theme-toggle__icon--dark Moon icon (shown in light mode)
234
262
  ```
@@ -236,12 +264,14 @@ WCAG 2.2 AA table pattern:
236
264
  ## Panel
237
265
 
238
266
  ```
239
- .l-ui-container--panel Side panel container
240
- .l-ui-container--panel.open Visible panel
267
+ .l-ui-panel-container Side panel container
268
+ .l-ui-panel-container--open Visible panel (toggled by Stimulus)
241
269
  .l-ui-panel Panel flexbox
242
270
  .l-ui-panel__button Floating action button
243
271
  .l-ui-panel__button--dragging During drag
244
272
  .l-ui-panel__button--snapping Snapping to edge
273
+ .l-ui-panel__button--hidden Hidden when panel is open (toggled by Stimulus)
274
+ .l-ui-panel__close-button Panel close button (combine with l-ui-button l-ui-button--icon)
245
275
  .l-ui-panel__icon Panel button inline SVG icon
246
276
  .l-ui-panel__icon--light Panel button icon (light, for custom image override)
247
277
  .l-ui-panel__icon--dark Panel button icon (dark, for custom image override)
@@ -261,8 +291,8 @@ WCAG 2.2 AA table pattern:
261
291
  .l-ui-conversation__composer-input Textarea
262
292
  .l-ui-conversation__separator Date separator
263
293
 
264
- .l-ui-message Message wrapper
265
- .l-ui-message--sent Sent message (right-aligned)
294
+ .l-ui-message Message wrapper (required with --sent)
295
+ .l-ui-message--sent Sent message modifier (right-aligned; combine with l-ui-message)
266
296
  .l-ui-message__avatar User avatar
267
297
  .l-ui-message__bubble Message bubble
268
298
  .l-ui-message__author Author name
@@ -271,7 +301,7 @@ WCAG 2.2 AA table pattern:
271
301
  .l-ui-message__timestamp Timestamp
272
302
 
273
303
  .l-ui-stream-fade Fade-in for streamed chunks as they arrive (0.5s ease-out)
274
- .l-ui-stream-fade-word Per-word staggered fade-in for completed responses
304
+ .l-ui-stream-fade__word Per-word staggered fade-in for completed responses
275
305
  (0.5s ease-out; set --i to the word index for a 25ms
276
306
  stagger, capped at 1s)
277
307
  ```
@@ -284,7 +314,10 @@ WCAG 2.2 AA table pattern:
284
314
 
285
315
  ## Icon sizes
286
316
 
317
+ Always combine the base block with one size modifier (e.g. `class="l-ui-icon l-ui-icon--sm"`).
318
+
287
319
  ```
320
+ .l-ui-icon Base icon (always required alongside a size modifier)
288
321
  .l-ui-icon--xs 16px (4x4)
289
322
  .l-ui-icon--sm 20px (5x5)
290
323
  .l-ui-icon--md 24px (6x6)
@@ -295,17 +328,16 @@ WCAG 2.2 AA table pattern:
295
328
  ## Utility classes
296
329
 
297
330
  ```
298
- .l-ui-utility--mt-0 through --mt-8 Margin top (fixed scale)
299
- .l-ui-utility--mt-sm/md/lg/xl/2xl Responsive margin top
300
- .l-ui-utility--mb-0 Margin bottom zero
301
- .l-ui-sr-only Visually hidden, screen reader only
302
- .l-ui-skip-link Accessibility skip link
303
- .l-ui-list Styled list
304
- .l-ui-hr Horizontal rule with theme border and vertical spacing
305
- .l-ui-container--grid 1-col mobile, 2-col desktop grid
306
- .l-ui-container--spread Flex row with space-between
307
- .l-ui-container--pagy Pagination wrapper
308
- .l-ui-scroll-lock Prevent body scroll (mobile panels/modals)
331
+ .l-ui-mt-0/2/3/4/6/8 Margin top (fixed scale)
332
+ .l-ui-mb-0 Margin bottom zero
333
+ .l-ui-sr-only Visually hidden, screen reader only
334
+ .l-ui-skip-link Accessibility skip link
335
+ .l-ui-list Styled list
336
+ .l-ui-hr Horizontal rule with theme border and vertical spacing
337
+ .l-ui-grid 1-col mobile, 2-col desktop grid
338
+ .l-ui-spread Flex row with space-between
339
+ .l-ui-pagy-container Pagination wrapper (Pagy integration)
340
+ .l-ui-scroll-lock Prevent body scroll (mobile panels/modals)
309
341
  ```
310
342
 
311
343
  ## Theming tokens
data/.claude/skills/layered-ui-rails/references/HELPERS.md CHANGED
@@ -80,7 +80,7 @@ l_ui_title_bar(title:, breadcrumbs: [], actions: nil, &block)
80
80
  ["Admin", admin_path]
81
81
  ]
82
82
  ) do %>
83
- <%= link_to "New user", new_user_path, class: "l-ui-button--primary" %>
83
+ <%= link_to "New user", new_user_path, class: "l-ui-button l-ui-button--primary" %>
84
84
  <% end %>
85
85
  ```
86
86
 
@@ -132,7 +132,7 @@ Custom mode:
132
132
  <%= render "layered_ui/shared/search_field", form: f, field: :name_cont, label: "Name" %>
133
133
  <%= render "layered_ui/shared/search_select", form: f, field: :status_eq,
134
134
  label: "Status", options: ["Active", "Inactive"], include_blank: "Any" %>
135
- <%= f.submit "Search", class: "l-ui-button--primary" %>
135
+ <%= f.submit "Search", class: "l-ui-button l-ui-button--primary" %>
136
136
  <% end %>
137
137
  ```
138
138
 
@@ -199,7 +199,7 @@ Formats a date/time value as `"%-d %b %Y, %H:%M"` (e.g. "15 Apr 2026, 10:30"). R
199
199
  { attribute: :email, render: ->(r) { r.email } },
200
200
  { attribute: :created_at, label: "Joined", render: ->(r) { l_ui_format_datetime(r.created_at) } },
201
201
  ],
202
- actions: ->(r) { link_to "Edit", edit_user_path(r) },
202
+ actions: ->(r) { link_to "Edit", edit_user_path(r), class: "l-ui-button l-ui-button--outline l-ui-button--small" },
203
203
  caption: "Users",
204
204
  query: @q,
205
205
  turbo_frame: "users") %>
data/AGENTS.md CHANGED
@@ -7,7 +7,7 @@ Guidance for AI agents working in this repository.
7
7
  - **Entry:** `require "layered-ui-rails"` → `lib/layered/ui.rb` → `lib/layered/ui/engine.rb`
8
8
  - **Engine:** importmap, assets, Pagy helpers when present; helpers: `AuthenticationHelper`, `NavigationHelper`, `PagyHelper`
9
9
  - **CSS** `app/assets/tailwind/layered/ui/styles.css`: OKLCH tokens, `.dark` on `<html>`, `@theme` utilities (`bg-background`, etc.), BEM components (`.l-ui-button--primary`, etc.). Layout: 63px header, 240px sidebar, 320px panel. WCAG 2.2 AA.
10
- - **CSS `@apply`:** Multi-line with grouping (layout → spacing → typography → colors → effects). Single utilities may stay on one line.
10
+ - **CSS `@apply`:** Multi-line with grouping, following the Prettier Tailwind plugin order: layout → sizing → spacing → typography → backgrounds → borders → effects → transitions → interactivity. Within each group, follow Tailwind's own ordering (not alphabetical). State variants (`hover:`, `focus:`, `active:`, `disabled:`) and responsive prefixes (`sm:`, `md:`, `lg:`) are grouped with their base utility. Single utilities may stay on one line.
11
11
  - **Generators:** `bin/rails generate layered:ui:install` (copy CSS, import CSS, import JS)
12
12
  - **JS** `app/javascript/layered_ui/`: Stimulus controllers registered as `l-ui--theme`, `l-ui--navigation`, `l-ui--panel`, `l-ui--modal`, `l-ui--tabs`
13
13
  - **Layout yields** (prefixed `l_ui_`): `:l_ui_navigation_items`, `:l_ui_panel_heading`, `:l_ui_panel_body`, `:l_ui_body_class`
@@ -17,17 +17,17 @@ Guidance for AI agents working in this repository.
17
17
 
18
18
  `test/dummy/` - Rails 8 app with Devise. Run: `bundle exec rake test`
19
19
 
20
- ## Conventions
20
+ ### Conventions
21
21
 
22
22
  - Use "layered-ui-rails" not "Layered UI" when referring to the project
23
- - Use normal dashes '-' not long ones '—'
24
- - Locale: Favour en-GB (British English), unless terms are defined by technical standards (e.g. LICENSE, COLOR).
23
+ - Prefer normal dashes '-' over em dashes '—'
24
+ - Locale: Use en-GB for prose and user-facing copy. Use en-US for code, variable names, identifiers, and technical standards (e.g. LICENSE, COLOR)
25
25
  - Titles: capitalise first word only (e.g. "This title")
26
26
  - Document new styles in the dummy app. When adding a new CSS class or helper, add a working example to the relevant dummy app documentation page (in `test/dummy/app/views/pages/`) following the existing style (heading, description paragraph, live example, "View code" modal). Update the relevant skill reference file in `.claude/skills/layered-ui-rails/references/` to include the new class or helper.
27
27
  - Use l-ui classes only in engine views, with no additional Tailwind utilities, as Tailwind classes referenced only inside the engine will not be generated by the host app’s build
28
28
  - Dummy app documentation pages may use additional Tailwind utilities, but should favour l-ui classes where possible
29
29
  - Importmap for JS (no bundler)
30
-
30
+ - We are currently in pre-release, so breaking changes may be introduced. Flag any expected breaking changes clearly before making them, but do not avoid necessary improvements solely to preserve backwards compatibility
31
31
  - CRITICAL: Retain WCAG 2.2 AA compliance. Do not be too pedantic though as this introduces audit loops which are undesirable.
32
32
  - A WCAG 2.2 AA table looks like this:
33
33
  ```
data/CHANGELOG.md CHANGED
@@ -2,6 +2,42 @@
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
+ ## [0.14.0] - 2026-05-10
6
+
7
+ ### Breaking
8
+
9
+ - Strict BEM across all components - modifiers no longer carry their base styles. Every modifier (e.g. `l-ui-button--primary`, `l-ui-surface--highlighted`, `l-ui-tabs__tab--active`, `l-ui-navigation__item--active`, `l-ui-table__cell--primary`, `l-ui-message--sent`, `l-ui-page--with-navigation`) must now be paired with its base class.
10
+ - Several misnamed modifiers renamed to reflect their actual role: `l-ui-page--vertically-centered` → `l-ui-page__vertically-centered`, `l-ui-page--width-constrained` → `l-ui-page__width-constrained`, `l-ui-label--checkbox` → `l-ui-checkbox-container__label`, `l-ui-stream-fade-word` → `l-ui-stream-fade__word`, `l-ui-select-wrapper` → `l-ui-select-container`, `l-ui-button--panel-close` → `l-ui-panel__close-button`
11
+ - Bare `<a>`/`<button>` elements inside `l-ui-table__cell--action` are no longer auto-styled; add `l-ui-table__action` explicitly
12
+ - `l-ui--mr-2` utility class removed
13
+
14
+ ### Added
15
+
16
+ - `l-ui-table__action` element class (with `--danger` modifier) for action links/buttons inside `l-ui-table__cell--action`
17
+ - `l-ui-checkbox` class as an explicit hook for checkbox inputs inside `l-ui-checkbox-container`
18
+
19
+ ### Changed
20
+
21
+ - Navigation drawer close animation now matches the panel (300ms transform) and no longer snaps via a `visibility` toggle
22
+ - Navigation container right border removed; desktop nav links lose their right padding
23
+ - CSS `@apply` formatting convention adopted Prettier Tailwind plugin group order (layout → sizing → spacing → typography → backgrounds → borders → effects → transitions → interactivity); all multi-line blocks reordered to comply
24
+ - Default table action examples and `l_ui_table` helper now render small outline buttons
25
+
26
+ ## [0.13.0] - 2026-05-09
27
+
28
+ ### Breaking
29
+
30
+ - Responsive margin-top utilities `l-ui-mt-sm`/`md`/`lg`/`xl`/`2xl` removed in favour of the fixed scale. Migration: `sm` → `mt-2`, `md` → `mt-3`, `lg` → `mt-4`, `xl` → `mt-6`, `2xl` → `mt-8`. The BEM migration prompt has been updated with the mapping
31
+
32
+ ### Added
33
+
34
+ - Fixed-scale margin utilities `l-ui-mt-2`, `l-ui-mt-3`, and `l-ui-mt-6`
35
+ - Default underline/focus link styling on `l-ui-panel__body a` (matches `l-ui-page a`)
36
+
37
+ ### Changed
38
+
39
+ - `pre.l-ui-surface` margin reset moved into `@layer base` so call-site Tailwind spacing utilities (e.g. `mt-4`) reliably override the browser default
40
+
5
41
  ## [0.12.0] - 2026-05-08
6
42
 
7
43
  ### Added
@@ -28,16 +64,16 @@ All notable changes to this project will be documented in this file. This projec
28
64
 
29
65
  ## [0.10.0] - 2026-05-03
30
66
 
67
+ ### Breaking
68
+
69
+ - Minimum Ruby version raised to 3.3.0 (Ruby 3.2 is EOL). CI matrix now tests against Ruby 3.3, 3.4, and 4.0
70
+
31
71
  ### Added
32
72
 
33
73
  - Nested navigation: `l_ui_navigation_section` helper for collapsible sidebar sections, backed by an `l-ui--navigation-section` Stimulus controller and `l-ui-navigation__section`/`__toggle`/`__items` styles
34
74
  - Optional `icon:` / `icon_path:` / `icon_html:` arguments on `l_ui_navigation_item` and `l_ui_navigation_section` to render an icon alongside the label; ships with a default `icon_home.svg` as an example
35
75
  - `row_id:` option on `l_ui_table` to set a stable DOM id on each row (useful for Turbo Stream targeting)
36
76
 
37
- ### Changed
38
-
39
- - **Breaking:** Minimum Ruby version raised to 3.3.0 (Ruby 3.2 is EOL). CI matrix now tests against Ruby 3.3, 3.4, and 4.0
40
-
41
77
  ## [0.9.0] - 2026-04-26
42
78
 
43
79
  ### Added
@@ -55,9 +91,12 @@ All notable changes to this project will be documented in this file. This projec
55
91
 
56
92
  ## [0.8.0] - 2026-04-24
57
93
 
94
+ ### Breaking
95
+
96
+ - Theme tokens migrated from HSL channels (`220 80% 55%`) to full `oklch()` values for perceptually uniform mixing. `@theme` now references the vars directly instead of wrapping them in `hsl()`. Existing overrides files need to be updated: replace `hue sat% lightness%` with the equivalent `oklch(L C H)` value (or any valid CSS color - `#hex`, `rgb()`, and keywords all work now).
97
+
58
98
  ### Changed
59
99
 
60
- - **Breaking:** Theme tokens migrated from HSL channels (`220 80% 55%`) to full `oklch()` values for perceptually uniform mixing. `@theme` now references the vars directly instead of wrapping them in `hsl()`. Existing overrides files need to be updated: replace `hue sat% lightness%` with the equivalent `oklch(L C H)` value (or any valid CSS color - `#hex`, `rgb()`, and keywords all work now).
61
100
  - `layered:ui:create_overrides` generator and token documentation (`SKILL.md`, `references/CSS.md`, `README.md`, dummy app colour/head pages) updated to reflect the new `oklch()` format.
62
101
 
63
102
  ## [0.7.0] - 2026-04-23
data/README.md CHANGED
@@ -186,8 +186,6 @@ For per-request icons, set instance variables - the engine renders `<link>` and
186
186
 
187
187
  An online version of the documentation is available at **[layered-ui-rails.layered.ai](https://layered-ui-rails.layered.ai)**.
188
188
 
189
- The latest accessibility audit is available at **[audits/accessibility/codex-5_3.md](https://github.com/layered-ai-public/layered-ui-rails/blob/main/audits/accessibility/codex-5_3.md)**.
190
-
191
189
  You can also run the included dummy app locally for development and testing:
192
190
 
193
191
  ```bash
@@ -211,6 +209,10 @@ export KAMAL_SSH_KEY=<path-to-ssh-key>
211
209
  kamal deploy
212
210
  ```
213
211
 
212
+ ## Accessibility audits
213
+
214
+ The latest accessibility audits are available at **[https://github.com/layered-ai-public/layered-ui-rails/blob/main/audits/accessibility](https://github.com/layered-ai-public/layered-ui-rails/blob/main/audits/accessibility)**.
215
+
214
216
  ## Contributing
215
217
 
216
218
  This project is still in its early days. We welcome issues, feedback, and ideas - they genuinely help shape the direction of the project. That said, we're holding off on accepting pull requests for now to stay focused on getting the foundations right. Thank you for your patience and interest. See [CLA.md](CLA.md) for the full policy.
data/app/assets/images/layered_ui/logo_dark.svg CHANGED
@@ -1,25 +1,15 @@
1
- <svg width="454" height="80" viewBox="0 0 454 80" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <mask id="mask0_93_125" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="433" y="10" width="21" height="16">
3
- <path d="M453.245 10H433.245V26H453.245V10Z" fill="white"/>
4
- </mask>
5
- <g mask="url(#mask0_93_125)">
6
- <mask id="mask1_93_125" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="434" y="14" width="8" height="8">
7
- <path d="M434.312 14H441.245V22H434.312V14Z" fill="white"/>
8
- </mask>
9
- <g mask="url(#mask1_93_125)">
10
- <path d="M437.733 21.8H436.858V14.9667H434.462V14.175H440.129V14.9667H437.733V21.8Z" fill="white"/>
11
- </g>
12
- <path d="M445.375 21.8L442.813 15.05H442.771C442.781 15.2062 442.797 15.3833 442.813 15.5917C442.823 15.7896 442.833 16.0083 442.833 16.2583C442.844 16.4979 442.854 16.7375 442.854 16.9875V21.8H442.021V14.175H443.333L445.75 20.5083H445.792L448.229 14.175H449.542V21.8H448.667V16.925C448.667 16.7062 448.667 16.4823 448.667 16.2583C448.677 16.0239 448.688 15.8104 448.688 15.6125C448.698 15.4042 448.714 15.2271 448.729 15.0708H448.688L446.104 21.8H445.375Z" fill="white"/>
13
- </g>
14
- <path d="M42.5 37.2344L5.875 20L42.5 2.76563L79.125 20L42.5 37.2344ZM2.9375 21.375L42.5 40L82.0625 21.375L85 20L82.0625 18.625L42.5 0L2.9375 18.625L0 20L2.9375 21.375ZM12.4375 34.1406C5.01563 37.6406 0.859376 39.5938 0 40L2.9375 41.375L42.5 60L82.0625 41.375L85 40C84.1406 39.5938 79.9844 37.6406 72.5625 34.1406L69.625 35.5156L79.125 39.9844L42.5 57.2188L5.875 39.9844L15.375 35.5156L12.4375 34.1406ZM2.9375 58.625L0 60L2.9375 61.375L42.5 80L82.0625 61.375L85 60C84.1406 59.5938 79.9844 57.6406 72.5625 54.1406L69.625 55.5156L79.125 59.9844L42.5 77.2188L5.875 59.9844L15.375 55.5156L12.4375 54.1406L2.9375 58.6094V58.625Z" fill="white"/>
15
- <path d="M117.833 23.0625H120.145C120.588 23.0625 120.812 23.2917 120.812 23.75V52.3542H139.583C139.776 52.3542 139.937 52.4323 140.062 52.5833C140.187 52.724 140.25 52.8698 140.25 53.0208V55.3333C140.25 55.7813 140.026 56 139.583 56H117.833C117.677 56 117.526 55.9375 117.375 55.8125C117.234 55.6875 117.166 55.5313 117.166 55.3333V23.75C117.166 23.5573 117.234 23.3958 117.375 23.2708C117.526 23.1354 117.677 23.0625 117.833 23.0625Z" fill="white"/>
16
- <path d="M166.356 23.0625C166.549 23.0625 166.736 23.1354 166.919 23.2708C167.096 23.3958 167.215 23.5365 167.273 23.6875L173.939 40.3958C174.007 40.5625 174.064 40.7813 174.106 41.0417C174.158 41.2917 174.189 41.5104 174.189 41.6875V55.3333C174.189 55.7813 173.965 56 173.523 56H171.252C170.804 56 170.585 55.7813 170.585 55.3333V46.4583H153.169V55.3333C153.169 55.7813 152.945 56 152.502 56H150.189C149.741 56 149.523 55.7813 149.523 55.3333V41.6875C149.523 41.5104 149.544 41.2917 149.585 41.0417C149.637 40.7813 149.695 40.5625 149.752 40.3958L156.419 23.6875C156.486 23.5365 156.616 23.3958 156.814 23.2708C157.007 23.1354 157.179 23.0625 157.335 23.0625H166.356ZM170.585 42.8542V41.6875L164.585 26.7292H159.169L153.169 41.6875V42.8542H170.585Z" fill="white"/>
17
- <path d="M183.65 32.4792C183.509 32.3281 183.389 32.1458 183.296 31.9375C183.212 31.7292 183.171 31.5313 183.171 31.3333V23.75C183.171 23.5833 183.238 23.4323 183.379 23.2917C183.514 23.1406 183.671 23.0625 183.837 23.0625H186.15C186.327 23.0625 186.483 23.1406 186.608 23.2917C186.744 23.4323 186.816 23.5833 186.816 23.75V29.8958C186.816 30.0521 186.863 30.2396 186.962 30.4583C187.056 30.6823 187.171 30.875 187.296 31.0417L195.546 39.1042L203.754 31.0417C203.921 30.875 204.035 30.6823 204.108 30.4583C204.191 30.2396 204.233 30.0521 204.233 29.8958V23.75C204.233 23.5833 204.296 23.4323 204.421 23.2917C204.556 23.1406 204.718 23.0625 204.9 23.0625H207.212C207.405 23.0625 207.566 23.1406 207.691 23.2917C207.816 23.4323 207.879 23.5833 207.879 23.75V31.3333C207.879 31.5313 207.827 31.7292 207.733 31.9375C207.634 32.1458 207.525 32.3281 207.4 32.4792L197.379 42.4583V55.3333C197.379 55.5313 197.301 55.6875 197.15 55.8125C197.009 55.9375 196.858 56 196.691 56H194.4C193.952 56 193.733 55.7813 193.733 55.3333V42.4583L183.65 32.4792Z" fill="white"/>
18
- <path d="M217.542 55.3333V23.75C217.542 23.2917 217.76 23.0625 218.208 23.0625H240.562C241.021 23.0625 241.25 23.2917 241.25 23.75V26.0417C241.25 26.5 241.021 26.7292 240.562 26.7292H221.125V37.7083H237.979C238.146 37.7083 238.297 37.7865 238.437 37.9375C238.573 38.0781 238.646 38.224 238.646 38.375V40.6875C238.646 40.8854 238.573 41.0417 238.437 41.1667C238.297 41.2917 238.146 41.3542 237.979 41.3542H221.125V52.3542H240.562C240.755 52.3542 240.917 52.4323 241.042 52.5833C241.177 52.724 241.25 52.8698 241.25 53.0208V55.3333C241.25 55.7813 241.021 56 240.562 56H218.208C217.76 56 217.542 55.7813 217.542 55.3333Z" fill="white"/>
19
- <path d="M270.517 55.375L264.287 41.3542H254.017V55.3333C254.017 55.7813 253.793 56 253.35 56H251.079C250.631 56 250.412 55.7813 250.412 55.3333V23.75C250.412 23.2917 250.631 23.0625 251.079 23.0625H268.079C269.037 23.0625 269.938 23.25 270.787 23.625C271.631 23.9896 272.376 24.4948 273.017 25.1458C273.652 25.7865 274.152 26.5313 274.517 27.375C274.892 28.224 275.079 29.125 275.079 30.0833V34.3542C275.079 35.9271 274.605 37.3281 273.662 38.5625C272.714 39.7865 271.496 40.6198 269.996 41.0625L268.371 41.5417L274.517 55.375C274.6 55.5417 274.6 55.6875 274.517 55.8125C274.444 55.9375 274.313 56 274.121 56H271.475C271.293 56 271.105 55.9375 270.912 55.8125C270.714 55.6875 270.584 55.5417 270.517 55.375ZM254.017 37.7083H268.079C269.006 37.7083 269.798 37.3854 270.454 36.7292C271.105 36.0781 271.433 35.2865 271.433 34.3542V30.0833C271.433 29.1563 271.105 28.3646 270.454 27.7083C269.798 27.0573 269.006 26.7292 268.079 26.7292H254.017V37.7083Z" fill="white"/>
20
- <path d="M284.79 55.3333V23.75C284.79 23.2917 285.008 23.0625 285.456 23.0625H307.81C308.269 23.0625 308.498 23.2917 308.498 23.75V26.0417C308.498 26.5 308.269 26.7292 307.81 26.7292H288.373V37.7083H305.227C305.394 37.7083 305.545 37.7865 305.685 37.9375C305.821 38.0781 305.894 38.224 305.894 38.375V40.6875C305.894 40.8854 305.821 41.0417 305.685 41.1667C305.545 41.2917 305.394 41.3542 305.227 41.3542H288.373V52.3542H307.81C308.003 52.3542 308.165 52.4323 308.29 52.5833C308.425 52.724 308.498 52.8698 308.498 53.0208V55.3333C308.498 55.7813 308.269 56 307.81 56H285.456C285.008 56 284.79 55.7813 284.79 55.3333Z" fill="white"/>
21
- <path d="M317.619 55.3333V23.75C317.619 23.5833 317.687 23.4323 317.827 23.2917C317.963 23.1406 318.119 23.0625 318.286 23.0625H335.327C336.286 23.0625 337.187 23.25 338.036 23.625C338.879 23.9896 339.624 24.4948 340.265 25.1458C340.9 25.7865 341.4 26.5313 341.765 27.375C342.14 28.224 342.327 29.125 342.327 30.0833V49C342.327 49.9583 342.14 50.8698 341.765 51.7292C341.4 52.5938 340.9 53.3333 340.265 53.9583C339.624 54.5833 338.879 55.0833 338.036 55.4583C337.187 55.8229 336.286 56 335.327 56H318.286C318.119 56 317.963 55.9375 317.827 55.8125C317.687 55.6875 317.619 55.5313 317.619 55.3333ZM321.265 52.3542H335.327C336.254 52.3542 337.046 52.0313 337.702 51.375C338.353 50.7083 338.681 49.9167 338.681 49V30.0833C338.681 29.1563 338.353 28.3646 337.702 27.7083C337.046 27.0573 336.254 26.7292 335.327 26.7292H321.265V52.3542Z" fill="white"/>
22
- <path d="M353.294 55.1458V49.8958C353.294 49.4531 353.512 49.2291 353.96 49.2291H356.252C356.419 49.2291 356.57 49.302 356.71 49.4375C356.861 49.5625 356.94 49.7187 356.94 49.8958V55.1458C356.94 55.3281 356.861 55.4895 356.71 55.625C356.57 55.75 356.419 55.8125 356.252 55.8125H353.96C353.512 55.8125 353.294 55.5937 353.294 55.1458Z" fill="white"/>
23
- <path d="M385.365 23.0625C385.558 23.0625 385.746 23.1354 385.928 23.2708C386.105 23.3958 386.225 23.5365 386.282 23.6875L392.949 40.3958C393.016 40.5625 393.074 40.7813 393.115 41.0417C393.167 41.2917 393.199 41.5104 393.199 41.6875V55.3333C393.199 55.7813 392.975 56 392.532 56H390.261C389.813 56 389.594 55.7813 389.594 55.3333V46.4583H372.178V55.3333C372.178 55.7813 371.954 56 371.511 56H369.199C368.751 56 368.532 55.7813 368.532 55.3333V41.6875C368.532 41.5104 368.553 41.2917 368.594 41.0417C368.647 40.7813 368.704 40.5625 368.761 40.3958L375.428 23.6875C375.496 23.5365 375.626 23.3958 375.824 23.2708C376.016 23.1354 376.188 23.0625 376.344 23.0625H385.365ZM389.594 42.8542V41.6875L383.594 26.7292H378.178L372.178 41.6875V42.8542H389.594Z" fill="white"/>
24
- <path d="M402.847 55.3333V53.0208C402.847 52.8698 402.909 52.724 403.034 52.5833C403.159 52.4323 403.315 52.3542 403.513 52.3542H412.743V26.7292H403.513C403.065 26.7292 402.847 26.5 402.847 26.0417V23.75C402.847 23.2917 403.065 23.0625 403.513 23.0625H425.555C425.998 23.0625 426.222 23.2917 426.222 23.75V26.0417C426.222 26.5 425.998 26.7292 425.555 26.7292H416.388V52.3542H425.555C425.748 52.3542 425.909 52.4323 426.034 52.5833C426.159 52.724 426.222 52.8698 426.222 53.0208V55.3333C426.222 55.7813 425.998 56 425.555 56H403.513C403.065 56 402.847 55.7813 402.847 55.3333Z" fill="white"/>
1
+ <svg width="468" height="80" viewBox="0 0 468 80" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M452.588 16.3333H451.463V7.79167H448.484V6.8125H455.567V7.79167H452.588V16.3333Z" fill="white"/>
3
+ <path d="M462.112 16.3333L458.924 7.91667H458.883C458.893 8.08333 458.909 8.30208 458.924 8.5625C458.935 8.8125 458.945 9.09375 458.945 9.39583C458.956 9.70313 458.966 10.0104 458.966 10.3125V16.3333H457.945V6.8125H459.57L462.591 14.7292H462.633L465.695 6.8125H467.32V16.3333H466.237V10.2292C466.237 9.95313 466.237 9.67708 466.237 9.39583C466.247 9.10417 466.263 8.83333 466.279 8.58333C466.289 8.33333 466.305 8.11458 466.32 7.91667H466.258L463.029 16.3333H462.112Z" fill="white"/>
4
+ <path d="M42.5 37.2344L5.875 20L42.5 2.76562L79.125 20L42.5 37.2344ZM2.9375 21.375L42.5 40L82.0625 21.375L85 20L82.0625 18.625L42.5 0L2.9375 18.625L0 20L2.9375 21.375ZM12.4375 34.1406C5.01562 37.6406 0.859376 39.5938 0 40L2.9375 41.375L42.5 60L82.0625 41.375L85 40C84.1406 39.5938 79.9844 37.6406 72.5625 34.1406L69.625 35.5156L79.125 39.9844L42.5 57.2188L5.875 39.9844L15.375 35.5156L12.4375 34.1406ZM2.9375 58.625L0 60L2.9375 61.375L42.5 80L82.0625 61.375L85 60C84.1406 59.5938 79.9844 57.6406 72.5625 54.1406L69.625 55.5156L79.125 59.9844L42.5 77.2188L5.875 59.9844L15.375 55.5156L12.4375 54.1406L2.9375 58.6094V58.625Z" fill="white"/>
5
+ <path d="M134.834 23.0625H137.146C137.589 23.0625 137.813 23.2917 137.813 23.75V52.3542H156.584C156.776 52.3542 156.938 52.4323 157.063 52.5833C157.188 52.724 157.25 52.8698 157.25 53.0208V55.3333C157.25 55.7812 157.026 56 156.584 56H134.834C134.677 56 134.526 55.9375 134.375 55.8125C134.235 55.6875 134.167 55.5312 134.167 55.3333V23.75C134.167 23.5573 134.235 23.3958 134.375 23.2708C134.526 23.1354 134.677 23.0625 134.834 23.0625Z" fill="white"/>
6
+ <path d="M183.357 23.0625C183.549 23.0625 183.737 23.1354 183.919 23.2708C184.096 23.3958 184.216 23.5365 184.273 23.6875L190.94 40.3958C191.008 40.5625 191.065 40.7813 191.107 41.0417C191.159 41.2917 191.19 41.5104 191.19 41.6875V55.3333C191.19 55.7812 190.966 56 190.523 56H188.253C187.805 56 187.586 55.7812 187.586 55.3333V46.4583H170.169V55.3333C170.169 55.7812 169.945 56 169.503 56H167.19C166.742 56 166.523 55.7812 166.523 55.3333V41.6875C166.523 41.5104 166.544 41.2917 166.586 41.0417C166.638 40.7813 166.695 40.5625 166.753 40.3958L173.419 23.6875C173.487 23.5365 173.617 23.3958 173.815 23.2708C174.008 23.1354 174.18 23.0625 174.336 23.0625H183.357ZM187.586 42.8542V41.6875L181.586 26.7292H176.169L170.169 41.6875V42.8542H187.586Z" fill="white"/>
7
+ <path d="M200.651 32.4792C200.51 32.3281 200.39 32.1458 200.296 31.9375C200.213 31.7292 200.171 31.5313 200.171 31.3333V23.75C200.171 23.5833 200.239 23.4323 200.38 23.2917C200.515 23.1406 200.671 23.0625 200.838 23.0625H203.151C203.328 23.0625 203.484 23.1406 203.609 23.2917C203.744 23.4323 203.817 23.5833 203.817 23.75V29.8958C203.817 30.0521 203.864 30.2396 203.963 30.4583C204.057 30.6823 204.171 30.875 204.296 31.0417L212.546 39.1042L220.755 31.0417C220.921 30.875 221.036 30.6823 221.109 30.4583C221.192 30.2396 221.234 30.0521 221.234 29.8958V23.75C221.234 23.5833 221.296 23.4323 221.421 23.2917C221.557 23.1406 221.718 23.0625 221.901 23.0625H224.213C224.406 23.0625 224.567 23.1406 224.692 23.2917C224.817 23.4323 224.88 23.5833 224.88 23.75V31.3333C224.88 31.5313 224.828 31.7292 224.734 31.9375C224.635 32.1458 224.526 32.3281 224.401 32.4792L214.38 42.4583V55.3333C214.38 55.5312 214.302 55.6875 214.151 55.8125C214.01 55.9375 213.859 56 213.692 56H211.401C210.953 56 210.734 55.7812 210.734 55.3333V42.4583L200.651 32.4792Z" fill="white"/>
8
+ <path d="M234.542 55.3333V23.75C234.542 23.2917 234.761 23.0625 235.209 23.0625H257.563C258.022 23.0625 258.251 23.2917 258.251 23.75V26.0417C258.251 26.5 258.022 26.7292 257.563 26.7292H238.126V37.7083H254.98C255.147 37.7083 255.298 37.7865 255.438 37.9375C255.574 38.0781 255.647 38.224 255.647 38.375V40.6875C255.647 40.8854 255.574 41.0417 255.438 41.1667C255.298 41.2917 255.147 41.3542 254.98 41.3542H238.126V52.3542H257.563C257.756 52.3542 257.917 52.4323 258.042 52.5833C258.178 52.724 258.251 52.8698 258.251 53.0208V55.3333C258.251 55.7812 258.022 56 257.563 56H235.209C234.761 56 234.542 55.7812 234.542 55.3333Z" fill="white"/>
9
+ <path d="M287.518 55.375L281.289 41.3542H271.018V55.3333C271.018 55.7812 270.794 56 270.351 56H268.08C267.632 56 267.414 55.7812 267.414 55.3333V23.75C267.414 23.2917 267.632 23.0625 268.08 23.0625H285.08C286.039 23.0625 286.94 23.25 287.789 23.625C288.632 23.9896 289.377 24.4948 290.018 25.1458C290.653 25.7865 291.153 26.5313 291.518 27.375C291.893 28.224 292.08 29.125 292.08 30.0833V34.3542C292.08 35.9271 291.606 37.3281 290.664 38.5625C289.716 39.7865 288.497 40.6198 286.997 41.0625L285.372 41.5417L291.518 55.375C291.601 55.5417 291.601 55.6875 291.518 55.8125C291.445 55.9375 291.315 56 291.122 56H288.476C288.294 56 288.106 55.9375 287.914 55.8125C287.716 55.6875 287.585 55.5417 287.518 55.375ZM271.018 37.7083H285.08C286.007 37.7083 286.799 37.3854 287.455 36.7292C288.106 36.0781 288.434 35.2865 288.434 34.3542V30.0833C288.434 29.1563 288.106 28.3646 287.455 27.7083C286.799 27.0573 286.007 26.7292 285.08 26.7292H271.018V37.7083Z" fill="white"/>
10
+ <path d="M301.791 55.3333V23.75C301.791 23.2917 302.009 23.0625 302.457 23.0625H324.811C325.27 23.0625 325.499 23.2917 325.499 23.75V26.0417C325.499 26.5 325.27 26.7292 324.811 26.7292H305.374V37.7083H322.228C322.395 37.7083 322.546 37.7865 322.686 37.9375C322.822 38.0781 322.895 38.224 322.895 38.375V40.6875C322.895 40.8854 322.822 41.0417 322.686 41.1667C322.546 41.2917 322.395 41.3542 322.228 41.3542H305.374V52.3542H324.811C325.004 52.3542 325.166 52.4323 325.291 52.5833C325.426 52.724 325.499 52.8698 325.499 53.0208V55.3333C325.499 55.7812 325.27 56 324.811 56H302.457C302.009 56 301.791 55.7812 301.791 55.3333Z" fill="white"/>
11
+ <path d="M334.62 55.3333V23.75C334.62 23.5833 334.687 23.4323 334.828 23.2917C334.963 23.1406 335.12 23.0625 335.286 23.0625H352.328C353.286 23.0625 354.187 23.25 355.036 23.625C355.88 23.9896 356.625 24.4948 357.265 25.1458C357.901 25.7865 358.401 26.5313 358.765 27.375C359.14 28.224 359.328 29.125 359.328 30.0833V49C359.328 49.9583 359.14 50.8698 358.765 51.7292C358.401 52.5938 357.901 53.3333 357.265 53.9583C356.625 54.5833 355.88 55.0833 355.036 55.4583C354.187 55.8229 353.286 56 352.328 56H335.286C335.12 56 334.963 55.9375 334.828 55.8125C334.687 55.6875 334.62 55.5312 334.62 55.3333ZM338.265 52.3542H352.328C353.255 52.3542 354.047 52.0313 354.703 51.375C355.354 50.7083 355.682 49.9167 355.682 49V30.0833C355.682 29.1563 355.354 28.3646 354.703 27.7083C354.047 27.0573 353.255 26.7292 352.328 26.7292H338.265V52.3542Z" fill="white"/>
12
+ <path d="M370.295 55.1458V49.8958C370.295 49.4531 370.514 49.2292 370.962 49.2292H373.253C373.42 49.2292 373.571 49.3021 373.712 49.4375C373.863 49.5625 373.941 49.7187 373.941 49.8958V55.1458C373.941 55.3281 373.863 55.4896 373.712 55.625C373.571 55.75 373.42 55.8125 373.253 55.8125H370.962C370.514 55.8125 370.295 55.5937 370.295 55.1458Z" fill="white"/>
13
+ <path d="M402.367 23.0625C402.559 23.0625 402.747 23.1354 402.929 23.2708C403.106 23.3958 403.226 23.5365 403.283 23.6875L409.95 40.3958C410.018 40.5625 410.075 40.7813 410.117 41.0417C410.169 41.2917 410.2 41.5104 410.2 41.6875V55.3333C410.2 55.7812 409.976 56 409.533 56H407.262C406.814 56 406.596 55.7812 406.596 55.3333V46.4583H389.179V55.3333C389.179 55.7812 388.955 56 388.512 56H386.2C385.752 56 385.533 55.7812 385.533 55.3333V41.6875C385.533 41.5104 385.554 41.2917 385.596 41.0417C385.648 40.7813 385.705 40.5625 385.762 40.3958L392.429 23.6875C392.497 23.5365 392.627 23.3958 392.825 23.2708C393.018 23.1354 393.189 23.0625 393.346 23.0625H402.367ZM406.596 42.8542V41.6875L400.596 26.7292H395.179L389.179 41.6875V42.8542H406.596Z" fill="white"/>
14
+ <path d="M419.848 55.3333V53.0208C419.848 52.8698 419.91 52.724 420.035 52.5833C420.16 52.4323 420.316 52.3542 420.514 52.3542H429.743V26.7292H420.514C420.066 26.7292 419.848 26.5 419.848 26.0417V23.75C419.848 23.2917 420.066 23.0625 420.514 23.0625H442.556C442.999 23.0625 443.223 23.2917 443.223 23.75V26.0417C443.223 26.5 442.999 26.7292 442.556 26.7292H433.389V52.3542H442.556C442.749 52.3542 442.91 52.4323 443.035 52.5833C443.16 52.724 443.223 52.8698 443.223 53.0208V55.3333C443.223 55.7812 442.999 56 442.556 56H420.514C420.066 56 419.848 55.7812 419.848 55.3333Z" fill="white"/>
25
15
  </svg>