layered-ui-rails 0.13.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.
- checksums.yaml +4 -4
- data/.claude/skills/layered-ui-rails/SKILL.md +4 -4
- data/.claude/skills/layered-ui-rails/references/CONTROLLERS.md +2 -2
- data/.claude/skills/layered-ui-rails/references/CSS.md +64 -40
- data/.claude/skills/layered-ui-rails/references/HELPERS.md +3 -3
- data/AGENTS.md +5 -5
- data/CHANGELOG.md +33 -6
- data/app/assets/images/layered_ui/logo_dark.svg +14 -14
- data/app/assets/images/layered_ui/logo_light.svg +14 -14
- data/app/assets/tailwind/layered/ui/styles.css +315 -365
- data/app/helpers/layered/ui/navigation_helper.rb +1 -1
- data/app/helpers/layered/ui/ransack_helper.rb +3 -3
- data/app/helpers/layered/ui/table_helper.rb +4 -4
- data/app/javascript/layered_ui/controllers/l_ui/navigation_controller.js +6 -6
- data/app/javascript/layered_ui/controllers/l_ui/panel_controller.js +4 -4
- data/app/javascript/layered_ui/controllers/l_ui/tabs_controller.js +0 -2
- data/app/views/devise/confirmations/new.html.erb +4 -4
- data/app/views/devise/passwords/edit.html.erb +4 -4
- data/app/views/devise/passwords/new.html.erb +4 -4
- data/app/views/devise/registrations/new.html.erb +4 -4
- data/app/views/devise/sessions/new.html.erb +6 -6
- data/app/views/devise/unlocks/new.html.erb +4 -4
- data/app/views/layered/ui/managed_resource/_field_input.html.erb +10 -7
- data/app/views/layered_ui/shared/_search_select.html.erb +1 -1
- data/app/views/layouts/layered_ui/_header.html.erb +4 -4
- data/app/views/layouts/layered_ui/_navigation.html.erb +1 -1
- data/app/views/layouts/layered_ui/_panel.html.erb +1 -1
- data/lib/layered/ui/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: dd3b300ca92cbb2d2bc81086f5bc641f5124ce17e9ee8bfe509bca379fea9a32
|
|
4
|
+
data.tar.gz: 4dd8fadd0855594730d434e48dcd3eee163c0d8c3859212cfcfaa67a3856ccdb
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4f55763d1411e9d97fba34b3d7cebf22642c7aed74679e9f4218bc6389145acf3f2a5503cabfa9d0157ddc7873f9b337be0d7821349e33c2283b710568a9b773
|
|
7
|
+
data.tar.gz: 0fd9a835309c100a8a15968a55843fd7d857fc941a0e77686881fa022d244add42addd67c3c76931fea6dd2c7565dc69df3cee45ee12a11cc78215cb57bdf85a
|
|
@@ -125,14 +125,14 @@ Key components:
|
|
|
125
125
|
|
|
126
126
|
| Component | Key classes |
|
|
127
127
|
|---|---|
|
|
128
|
-
| Page layout | `.l-ui-page`, `--with-navigation`,
|
|
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`, `--
|
|
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
134
|
| Notices | `.l-ui-notice` (base), `--success`, `--warning`, `--error` |
|
|
135
|
-
| Tabs | `.l-ui-tabs__list`, `.l-ui-tabs__tab`, `--active` |
|
|
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
|
|
@@ -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"
|
|
@@ -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-
|
|
11
|
-
.l-ui-
|
|
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
|
-
|
|
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
|
|
20
|
-
.l-ui-button--primary
|
|
21
|
-
.l-ui-button--danger
|
|
22
|
-
.l-ui-button--outline
|
|
23
|
-
.l-ui-button--outline-danger
|
|
24
|
-
.l-ui-button--
|
|
25
|
-
.l-ui-button--
|
|
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
|
-
|
|
43
|
+
Icon variants (combine with the `l-ui-button` base):
|
|
30
44
|
|
|
31
45
|
```
|
|
32
|
-
.l-ui-button--
|
|
33
|
-
.l-ui-button--
|
|
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
|
|
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
|
|
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,14 +81,16 @@ 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
|
-
|
|
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-
|
|
90
|
+
.l-ui-select-container Select wrapper (custom arrow)
|
|
72
91
|
|
|
73
92
|
.l-ui-search-inline Inline search form layout
|
|
74
93
|
|
|
75
|
-
.l-ui-checkbox-container Checkbox container
|
|
76
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
|
|
@@ -90,13 +108,15 @@ 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--
|
|
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)
|
|
100
120
|
.l-ui-table-container Overflow wrapper for responsive tables
|
|
101
121
|
```
|
|
102
122
|
|
|
@@ -110,14 +130,14 @@ WCAG 2.2 AA table pattern:
|
|
|
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>
|
|
@@ -140,7 +160,7 @@ Always combine the base block with one variant modifier (e.g. `class="l-ui-notic
|
|
|
140
160
|
## Badges
|
|
141
161
|
|
|
142
162
|
```
|
|
143
|
-
.l-ui-badge Base badge
|
|
163
|
+
.l-ui-badge Base badge (required alongside a colour modifier)
|
|
144
164
|
.l-ui-badge--rounded Pill shape
|
|
145
165
|
.l-ui-badge--default Grey
|
|
146
166
|
.l-ui-badge--success Green
|
|
@@ -148,12 +168,15 @@ Always combine the base block with one variant modifier (e.g. `class="l-ui-notic
|
|
|
148
168
|
.l-ui-badge--danger Red
|
|
149
169
|
```
|
|
150
170
|
|
|
171
|
+
Always combine the base block with a modifier, e.g. `<span class="l-ui-badge l-ui-badge--success">`.
|
|
172
|
+
|
|
151
173
|
## Tabs
|
|
152
174
|
|
|
153
175
|
```
|
|
176
|
+
.l-ui-tabs Tabs wrapper (data-controller="l-ui--tabs")
|
|
154
177
|
.l-ui-tabs__list Tab list container (role="tablist")
|
|
155
|
-
.l-ui-tabs__tab Tab button
|
|
156
|
-
.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)
|
|
157
180
|
.l-ui-tabs__panel Tab panel content
|
|
158
181
|
```
|
|
159
182
|
|
|
@@ -196,22 +219,22 @@ Always combine the base block with one variant modifier (e.g. `class="l-ui-notic
|
|
|
196
219
|
## Navigation
|
|
197
220
|
|
|
198
221
|
```
|
|
199
|
-
.l-ui-navigation-container
|
|
200
|
-
.l-ui-navigation-container
|
|
201
|
-
.l-ui-backdrop
|
|
202
|
-
.l-ui-backdrop--navigation
|
|
203
|
-
.l-ui-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)
|
|
204
227
|
.l-ui-navigation Nav flexbox
|
|
205
228
|
.l-ui-navigation__links Nav links list
|
|
206
|
-
.l-ui-navigation__item Nav item
|
|
207
|
-
.l-ui-navigation__item--active Active nav item (
|
|
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)
|
|
208
231
|
.l-ui-navigation__item-icon Icon image inside a nav item
|
|
209
232
|
.l-ui-navigation__item-icon-slot Wrapper for caller-supplied icon HTML (e.g. icon fonts)
|
|
210
233
|
.l-ui-navigation__item-label Label span inside a nav item
|
|
211
234
|
.l-ui-navigation__section Section group (li)
|
|
212
235
|
.l-ui-navigation__section--has-heading Section that has a visible heading
|
|
213
236
|
.l-ui-navigation__section--separated Section with top border separator
|
|
214
|
-
.l-ui-navigation__section--collapsible
|
|
237
|
+
.l-ui-navigation__section--collapsible Marker class for collapsible sections (no engine styles; host-app/JS hook)
|
|
215
238
|
.l-ui-navigation__section-heading Plain section label (small, uppercase, muted)
|
|
216
239
|
.l-ui-navigation__section-toggle Collapsible section heading (item-row sized button)
|
|
217
240
|
.l-ui-navigation__section-chevron Toggle chevron (rotates when closed)
|
|
@@ -242,11 +265,13 @@ Always combine the base block with one variant modifier (e.g. `class="l-ui-notic
|
|
|
242
265
|
|
|
243
266
|
```
|
|
244
267
|
.l-ui-panel-container Side panel container
|
|
245
|
-
.l-ui-panel-container
|
|
268
|
+
.l-ui-panel-container--open Visible panel (toggled by Stimulus)
|
|
246
269
|
.l-ui-panel Panel flexbox
|
|
247
270
|
.l-ui-panel__button Floating action button
|
|
248
271
|
.l-ui-panel__button--dragging During drag
|
|
249
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)
|
|
250
275
|
.l-ui-panel__icon Panel button inline SVG icon
|
|
251
276
|
.l-ui-panel__icon--light Panel button icon (light, for custom image override)
|
|
252
277
|
.l-ui-panel__icon--dark Panel button icon (dark, for custom image override)
|
|
@@ -266,8 +291,8 @@ Always combine the base block with one variant modifier (e.g. `class="l-ui-notic
|
|
|
266
291
|
.l-ui-conversation__composer-input Textarea
|
|
267
292
|
.l-ui-conversation__separator Date separator
|
|
268
293
|
|
|
269
|
-
.l-ui-message Message wrapper
|
|
270
|
-
.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)
|
|
271
296
|
.l-ui-message__avatar User avatar
|
|
272
297
|
.l-ui-message__bubble Message bubble
|
|
273
298
|
.l-ui-message__author Author name
|
|
@@ -276,7 +301,7 @@ Always combine the base block with one variant modifier (e.g. `class="l-ui-notic
|
|
|
276
301
|
.l-ui-message__timestamp Timestamp
|
|
277
302
|
|
|
278
303
|
.l-ui-stream-fade Fade-in for streamed chunks as they arrive (0.5s ease-out)
|
|
279
|
-
.l-ui-stream-
|
|
304
|
+
.l-ui-stream-fade__word Per-word staggered fade-in for completed responses
|
|
280
305
|
(0.5s ease-out; set --i to the word index for a 25ms
|
|
281
306
|
stagger, capped at 1s)
|
|
282
307
|
```
|
|
@@ -305,7 +330,6 @@ Always combine the base block with one size modifier (e.g. `class="l-ui-icon l-u
|
|
|
305
330
|
```
|
|
306
331
|
.l-ui-mt-0/2/3/4/6/8 Margin top (fixed scale)
|
|
307
332
|
.l-ui-mb-0 Margin bottom zero
|
|
308
|
-
.l-ui--mr-2 Negative margin right (offset for flush right alignment)
|
|
309
333
|
.l-ui-sr-only Visually hidden, screen reader only
|
|
310
334
|
.l-ui-skip-link Accessibility skip link
|
|
311
335
|
.l-ui-list Styled list
|
|
@@ -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
|
|
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
|
-
|
|
20
|
+
### Conventions
|
|
21
21
|
|
|
22
22
|
- Use "layered-ui-rails" not "Layered UI" when referring to the project
|
|
23
|
-
-
|
|
24
|
-
- Locale:
|
|
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,8 +2,33 @@
|
|
|
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
|
+
|
|
5
26
|
## [0.13.0] - 2026-05-09
|
|
6
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
|
+
|
|
7
32
|
### Added
|
|
8
33
|
|
|
9
34
|
- Fixed-scale margin utilities `l-ui-mt-2`, `l-ui-mt-3`, and `l-ui-mt-6`
|
|
@@ -11,7 +36,6 @@ All notable changes to this project will be documented in this file. This projec
|
|
|
11
36
|
|
|
12
37
|
### Changed
|
|
13
38
|
|
|
14
|
-
- **Breaking:** 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
|
|
15
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
|
|
16
40
|
|
|
17
41
|
## [0.12.0] - 2026-05-08
|
|
@@ -40,16 +64,16 @@ All notable changes to this project will be documented in this file. This projec
|
|
|
40
64
|
|
|
41
65
|
## [0.10.0] - 2026-05-03
|
|
42
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
|
+
|
|
43
71
|
### Added
|
|
44
72
|
|
|
45
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
|
|
46
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
|
|
47
75
|
- `row_id:` option on `l_ui_table` to set a stable DOM id on each row (useful for Turbo Stream targeting)
|
|
48
76
|
|
|
49
|
-
### Changed
|
|
50
|
-
|
|
51
|
-
- **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
|
|
52
|
-
|
|
53
77
|
## [0.9.0] - 2026-04-26
|
|
54
78
|
|
|
55
79
|
### Added
|
|
@@ -67,9 +91,12 @@ All notable changes to this project will be documented in this file. This projec
|
|
|
67
91
|
|
|
68
92
|
## [0.8.0] - 2026-04-24
|
|
69
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
|
+
|
|
70
98
|
### Changed
|
|
71
99
|
|
|
72
|
-
- **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).
|
|
73
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.
|
|
74
101
|
|
|
75
102
|
## [0.7.0] - 2026-04-23
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<path d="
|
|
3
|
-
<path d="
|
|
4
|
-
<path d="M42.5 37.2344L5.875 20L42.5 2.
|
|
5
|
-
<path d="
|
|
6
|
-
<path d="
|
|
7
|
-
<path d="
|
|
8
|
-
<path d="
|
|
9
|
-
<path d="
|
|
10
|
-
<path d="
|
|
11
|
-
<path d="
|
|
12
|
-
<path d="
|
|
13
|
-
<path d="
|
|
14
|
-
<path d="
|
|
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"/>
|
|
15
15
|
</svg>
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<path d="
|
|
3
|
-
<path d="
|
|
4
|
-
<path d="M42.5 37.2344L5.875 20L42.5 2.
|
|
5
|
-
<path d="
|
|
6
|
-
<path d="
|
|
7
|
-
<path d="
|
|
8
|
-
<path d="
|
|
9
|
-
<path d="
|
|
10
|
-
<path d="
|
|
11
|
-
<path d="
|
|
12
|
-
<path d="
|
|
13
|
-
<path d="
|
|
14
|
-
<path d="
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
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="black"/>
|
|
15
15
|
</svg>
|