@lo-tek/interfaces 0.41.0 → 0.42.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.
- package/CHANGELOG.md +25 -0
- package/agent/astro.md +1 -1
- package/agent/bundles.md +1 -1
- package/agent/datastar.md +57 -50
- package/agent/html.md +53 -53
- package/agent/kotlin.md +4 -4
- package/agent/react.md +1 -1
- package/agent/templates.md +50 -50
- package/dist/lotek.css +1 -1
- package/live-templates-kotlin.xml +4 -6
- package/manifest/manifest.json +1 -1
- package/package.json +1 -1
- package/web-types.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -24,6 +24,31 @@ including 0.36.0 were written in Norwegian, and list them under "Brytende".
|
|
|
24
24
|
|
|
25
25
|
## Unreleased
|
|
26
26
|
|
|
27
|
+
## 0.42.0 (2026-11-06)
|
|
28
|
+
|
|
29
|
+
### Changed
|
|
30
|
+
|
|
31
|
+
- **The Kotlin live templates have no script of their own.** They are the
|
|
32
|
+
Datastar recipe rendered by the server: the dialog is sent open and its
|
|
33
|
+
choices go with `@post`, Escape included through `data-on:cancel`, the
|
|
34
|
+
session timeout sends its events on with `data-on`, the toast's button
|
|
35
|
+
posts and the server answers with the call to `show()`, and the
|
|
36
|
+
connection status hears of a lost server through
|
|
37
|
+
`data-on:datastar-fetch__document`. The page needs Datastar, loaded once
|
|
38
|
+
in its template after the registration, and the server answers with a
|
|
39
|
+
200: the signals as `application/json`, or as `text/javascript` the
|
|
40
|
+
toast's call and, for a session that is already gone, the way to log in.
|
|
41
|
+
|
|
42
|
+
### Fixed
|
|
43
|
+
|
|
44
|
+
- **The rulebook for Datastar, `agent/datastar.md`, loads Datastar after
|
|
45
|
+
the registration.** Module scripts run in the order they stand, and with
|
|
46
|
+
Datastar first the answer to a request at load could reach a web component
|
|
47
|
+
before it was registered.
|
|
48
|
+
- **`agent/datastar.md` says how Escape reaches the server from a dialog.**
|
|
49
|
+
Escape is a close request, reported with `cancel` on the `<dialog>`, and
|
|
50
|
+
`dialog-toggle` cannot tell it from a close the server makes.
|
|
51
|
+
|
|
27
52
|
## 0.41.0 (2026-11-05)
|
|
28
53
|
|
|
29
54
|
### Added
|
package/agent/astro.md
CHANGED
|
@@ -9,7 +9,7 @@ this runs at build time: out comes plain HTML, and `lt` is gone once the page
|
|
|
9
9
|
is built. The only JavaScript the browser gets from the package is the
|
|
10
10
|
registration of the web components you use, in a `<script>`.
|
|
11
11
|
|
|
12
|
-
This is @lo-tek/interfaces 0.
|
|
12
|
+
This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
|
|
13
13
|
follows its version, so it can never say anything other than the code next to
|
|
14
14
|
it.
|
|
15
15
|
|
package/agent/bundles.md
CHANGED
|
@@ -10,7 +10,7 @@ names, and `defineLt*()` runs at the top of `main.ts`. If you write React, the
|
|
|
10
10
|
attribute names differ and `react.md` applies instead. If you write Astro, the
|
|
11
11
|
stylesheets are imported in the frontmatter and `astro.md` applies.
|
|
12
12
|
|
|
13
|
-
This is @lo-tek/interfaces 0.
|
|
13
|
+
This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
|
|
14
14
|
follows its version, so it can never say anything other than the code next to
|
|
15
15
|
it.
|
|
16
16
|
|
package/agent/datastar.md
CHANGED
|
@@ -8,7 +8,7 @@ That means two things for this file: the addresses are URLs, since a browser
|
|
|
8
8
|
without a bundler does not resolve a package name, and the state is controlled
|
|
9
9
|
with attributes, which is exactly what the `frame` components expect.
|
|
10
10
|
|
|
11
|
-
This is @lo-tek/interfaces 0.
|
|
11
|
+
This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
|
|
12
12
|
follows its version, so it can never say anything other than the code next to
|
|
13
13
|
it.
|
|
14
14
|
|
|
@@ -39,13 +39,19 @@ it.
|
|
|
39
39
|
## 1. The stylesheet and Datastar
|
|
40
40
|
|
|
41
41
|
```html
|
|
42
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
42
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/lotek.css">
|
|
43
|
+
<!-- The registration, defineLt*(), stands here, before Datastar. -->
|
|
43
44
|
<script
|
|
44
45
|
type="module"
|
|
45
46
|
src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar.js"
|
|
46
47
|
></script>
|
|
47
48
|
```
|
|
48
49
|
|
|
50
|
+
**Datastar after the `defineLt*()` script.** Module scripts run in the order
|
|
51
|
+
they stand. With Datastar first, the answer to a request at load can reach a
|
|
52
|
+
web component before it is registered, and a `data-on` that calls one of its
|
|
53
|
+
methods throws. Never `async` on either.
|
|
54
|
+
|
|
49
55
|
`lotek.css` is 112 kB, 14 kB compressed, and has all the components. If you
|
|
50
56
|
want only what you use, `tokens.css` defines all the variables, and all the
|
|
51
57
|
other stylesheets build on it. It must be loaded, and comes first out of
|
|
@@ -62,42 +68,42 @@ The default variant has no attribute.
|
|
|
62
68
|
|
|
63
69
|
| Class | Stylesheet | Attributes |
|
|
64
70
|
| --- | --- | --- |
|
|
65
|
-
| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
66
|
-
| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
67
|
-
| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
68
|
-
| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
69
|
-
| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
70
|
-
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
71
|
-
| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
72
|
-
| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
73
|
-
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
74
|
-
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
75
|
-
| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
76
|
-
| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
77
|
-
| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
78
|
-
| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
79
|
-
| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
80
|
-
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
81
|
-
| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
82
|
-
| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
83
|
-
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
84
|
-
| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
85
|
-
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
86
|
-
| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
87
|
-
| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
88
|
-
| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
89
|
-
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
90
|
-
| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
91
|
-
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
92
|
-
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
93
|
-
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
94
|
-
| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
95
|
-
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
96
|
-
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
97
|
-
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
98
|
-
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
99
|
-
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
100
|
-
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
71
|
+
| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/accordion/accordion.css` | `data-variant`: plain |
|
|
72
|
+
| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/alert/alert.css` | `data-color`: info, success, warning, danger |
|
|
73
|
+
| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/avatar/avatar.css` | `data-variant`: square<br>`data-size`: small, large |
|
|
74
|
+
| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
|
|
75
|
+
| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
76
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/button/button.css` | `data-variant`: secondary, ghost, danger |
|
|
77
|
+
| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/card/card.css` | `data-variant`: filled<br>`data-interactive` (flag) |
|
|
78
|
+
| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
79
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
80
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/error-text/error-text.css` | `data-variant`: warning |
|
|
81
|
+
| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/fieldset/fieldset.css` | `data-state`: invalid, success<br>`data-required`: symbol, text<br>`data-optional` (flag) |
|
|
82
|
+
| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
|
|
83
|
+
| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/heading/heading.css` | `data-size`: xs, s, m, xl, mega |
|
|
84
|
+
| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/help-text/help-text.css` | `data-variant`: strong, success, warning |
|
|
85
|
+
| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/icon/icon.css` | none |
|
|
86
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/input/input.css` | `data-state`: invalid, success<br>`data-variant`: date, datetime-local, time |
|
|
87
|
+
| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/label/label.css` | `data-required`: symbol, text<br>`data-optional` (flag) |
|
|
88
|
+
| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/link/link.css` | none |
|
|
89
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/list/list.css` | `data-variant`: plain, divided |
|
|
90
|
+
| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/pagination/pagination.css` | none |
|
|
91
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/paragraph/paragraph.css` | `data-variant`: lead<br>`data-size`: small, large |
|
|
92
|
+
| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/progress/progress.css` | `data-color`: success, warning, danger |
|
|
93
|
+
| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/radio/radio.css` | `data-state`: invalid, success |
|
|
94
|
+
| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
95
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/select/select.css` | `data-state`: invalid, success<br>`data-picker`: styled |
|
|
96
|
+
| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
97
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/skip-link/skip-link.css` | none |
|
|
98
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
99
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/sr-only/sr-only.css` | none |
|
|
100
|
+
| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/steps/steps.css` | none |
|
|
101
|
+
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/switch/switch.css` | none |
|
|
102
|
+
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/table/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
|
|
103
|
+
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/tag/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
|
|
104
|
+
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/textarea/textarea.css` | `data-state`: invalid, success |
|
|
105
|
+
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/toggle-group/toggle-group.css` | none |
|
|
106
|
+
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/tooltip/tooltip.css` | none |
|
|
101
107
|
|
|
102
108
|
There is also `lt-theme-control`, a class on a radio button that lets the user
|
|
103
109
|
choose a theme. It is in `tokens.css`, and is described under Tokens.
|
|
@@ -176,7 +182,7 @@ root element:
|
|
|
176
182
|
Below the root element the browser then ignores the host's CSS without a
|
|
177
183
|
layer, unless a rule of the host's wins on specificity as described below, and
|
|
178
184
|
LO-TEK's layer applies again. The rule is in `lotek.css` and in
|
|
179
|
-
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
185
|
+
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/tokens/boundary.css`.
|
|
180
186
|
Fonts and other inherited properties still come from the host, and the
|
|
181
187
|
`--lt-*` variables work. Three things follow from it:
|
|
182
188
|
|
|
@@ -270,16 +276,16 @@ Three rules apply to all of them:
|
|
|
270
276
|
|
|
271
277
|
| Element | Category | Stylesheet | Registration | Attributes | Events | Classes inside |
|
|
272
278
|
| --- | --- | --- | --- | --- | --- | --- |
|
|
273
|
-
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
274
|
-
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
275
|
-
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
276
|
-
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
277
|
-
| `<lt-term>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
278
|
-
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
279
|
-
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
280
|
-
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
281
|
-
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
282
|
-
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
279
|
+
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/field/lt-field.js` | `disabled` (flag)<br>`optional` (flag)<br>`described-by` (text) | none | none |
|
|
280
|
+
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/tabs/lt-tabs.js` | `server-controlled` (flag)<br>`activation`: manual, automatic | `tab-select` (index) | `lt-tabs__list`<br>`lt-tabs__panel` |
|
|
281
|
+
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/error-summary/lt-error-summary.js` | `data-autofocus`: false, true<br>`hidden` (flag) | none | `lt-error-summary`<br>`lt-error-summary__title` |
|
|
282
|
+
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/popover/lt-popover.js` | `open` (flag)<br>`placement`: bottom-start, bottom-end, top-start, top-end<br>`server-controlled` (flag) | `popover-toggle` (open) | `lt-popover` |
|
|
283
|
+
| `<lt-term>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/term/term.css` | `defineLtTerm()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/term/lt-term.js` | none | none | `lt-term`<br>`lt-term__entry` |
|
|
284
|
+
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/suggestion/lt-suggestion.js` | `prefiltered` (flag)<br>`count-none` (text)<br>`count-zero` (text)<br>`count-one` (text)<br>`count-two` (text)<br>`count-few` (text)<br>`count-many` (text)<br>`count-other` (text)<br>`server-controlled` (flag) | `suggestion-select` (value, label) | `lt-suggestion__list`<br>`lt-suggestion__option`<br>`lt-suggestion__value`<br>`lt-suggestion__empty` |
|
|
285
|
+
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/dialog/lt-dialog.js` | `open` (flag)<br>`server-controlled` (flag) | `dialog-toggle` (open, returnValue) | `lt-dialog` (`data-color`: brand, info, success, warning, danger)<br>`lt-dialog__body`<br>`lt-dialog__title`<br>`lt-dialog__footer`<br>`lt-dialog__header`<br>`lt-dialog__subtitle` |
|
|
286
|
+
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/standalone/toast/lt-toast.js` | `duration` (number)<br>`label` (text)<br>`close-label` (text) | `toast-dismiss` | `lt-toast`<br>`lt-toast__message`<br>`lt-toast__close` |
|
|
287
|
+
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/session-timeout/lt-session-timeout.js` | `warn-at` (number)<br>`expires-at` (number)<br>`activity-interval` (number) | `session-warn`<br>`session-extend`<br>`session-logout`<br>`session-expired`<br>`session-activity` | `lt-session-timeout`<br>`lt-session-timeout__dialog`<br>`lt-session-timeout__title`<br>`lt-session-timeout__text`<br>`lt-session-timeout__count`<br>`lt-session-timeout__actions` |
|
|
288
|
+
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/standalone/connection-status/lt-connection-status.js` | `offline-text` (text)<br>`online-text` (text) | `connection-lost`<br>`connection-restored` | `lt-connection-status`<br>`lt-connection-status__bar` |
|
|
283
289
|
|
|
284
290
|
None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
285
291
|
`FormData` and ordinary CSS work straight into it.
|
|
@@ -309,7 +315,7 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
|
309
315
|
|
|
310
316
|
<script type="module">
|
|
311
317
|
import { defineLtField } from
|
|
312
|
-
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
318
|
+
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/field/lt-field.js"
|
|
313
319
|
|
|
314
320
|
defineLtField()
|
|
315
321
|
</script>
|
|
@@ -394,6 +400,7 @@ build step. Datastar does not need it in the browser.
|
|
|
394
400
|
| An `<lt-toast>` or `<lt-connection-status>` shows nothing, an `<lt-session-timeout>` never warns, or another component does nothing | The `define` function has not run. `<lt-toast>` and `<lt-connection-status>` create their content themselves and are empty without it, and `<lt-session-timeout>` does not count the time. The markup in the others comes from you and is there regardless, with two exceptions until they are registered. `<lt-tabs>` shows one panel: of those the server left without `hidden`, the one the URL points to, otherwise the first, and under `server-controlled` always the first. `<lt-suggestion>` hides the list |
|
|
395
401
|
| A component speaks English on a page in another language | The text in the markup comes from you, and is written with the app's own translation setup. The few default texts the package has are replaced with `label` and `close-label` on `<lt-toast>`, `offline-text` and `online-text` on `<lt-connection-status>`, `count-none`, `count-one` and `count-other` on `<lt-suggestion>`, and `--lt-label-required-text`, `--lt-label-optional-text` and `--lt-label-required-symbol` in CSS. Numbers and durations follow the nearest `lang`, usually the one on `<html>`. See https://lo-tek.sobernetics.no/translation/ |
|
|
396
402
|
| The error text never shows, and the field counts as valid | `hidden="false"` is set on the error text, and it hides it all the same. The attribute must be removed, not set to `false` |
|
|
403
|
+
| The server still has a dialog as open after the user pressed Escape | Only the buttons post the choice. Escape is a close request, which the browser reports with `cancel` on the `<dialog>`: `data-on:cancel="@post(…)"`. Not `dialog-toggle`, which reports an empty `returnValue` both for Escape and for a close the server makes |
|
|
397
404
|
| `SyntaxError` in the browser | TypeScript syntax in a `<script type="module">` without a build step |
|
|
398
405
|
|
|
399
406
|
## When CSS is not enough
|
package/agent/html.md
CHANGED
|
@@ -5,7 +5,7 @@ where the browser loads the files directly. If you use a bundler, React, Astro
|
|
|
5
5
|
or Datastar, or the server produces the markup, another file in this folder
|
|
6
6
|
applies.
|
|
7
7
|
|
|
8
|
-
This is @lo-tek/interfaces 0.
|
|
8
|
+
This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
|
|
9
9
|
follows its version, so it can never say anything other than the code next to
|
|
10
10
|
it.
|
|
11
11
|
|
|
@@ -38,7 +38,7 @@ it.
|
|
|
38
38
|
One file with everything, the simplest and fastest option without a bundler:
|
|
39
39
|
|
|
40
40
|
```html
|
|
41
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
41
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/lotek.css">
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
Or from `node_modules`, if you serve the folder:
|
|
@@ -54,8 +54,8 @@ be loaded, and comes first out of habit: the order between it and the others
|
|
|
54
54
|
does not matter.
|
|
55
55
|
|
|
56
56
|
```html
|
|
57
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
58
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
57
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/tokens/tokens.css">
|
|
58
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/button/button.css">
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
Some of them, such as `field.css` and `suggestion.css`, fetch the stylesheets
|
|
@@ -74,42 +74,42 @@ The default variant has no attribute.
|
|
|
74
74
|
|
|
75
75
|
| Class | Stylesheet | Attributes |
|
|
76
76
|
| --- | --- | --- |
|
|
77
|
-
| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
78
|
-
| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
79
|
-
| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
80
|
-
| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
81
|
-
| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
82
|
-
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
83
|
-
| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
84
|
-
| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
85
|
-
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
86
|
-
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
87
|
-
| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
88
|
-
| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
89
|
-
| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
90
|
-
| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
91
|
-
| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
92
|
-
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
93
|
-
| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
94
|
-
| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
95
|
-
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
96
|
-
| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
97
|
-
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
98
|
-
| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
99
|
-
| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
100
|
-
| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
101
|
-
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
102
|
-
| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
103
|
-
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
104
|
-
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
105
|
-
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
106
|
-
| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
107
|
-
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
108
|
-
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
109
|
-
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
110
|
-
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
111
|
-
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
112
|
-
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
77
|
+
| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/accordion/accordion.css` | `data-variant`: plain |
|
|
78
|
+
| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/alert/alert.css` | `data-color`: info, success, warning, danger |
|
|
79
|
+
| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/avatar/avatar.css` | `data-variant`: square<br>`data-size`: small, large |
|
|
80
|
+
| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
|
|
81
|
+
| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
82
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/button/button.css` | `data-variant`: secondary, ghost, danger |
|
|
83
|
+
| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/card/card.css` | `data-variant`: filled<br>`data-interactive` (flag) |
|
|
84
|
+
| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
85
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
86
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/error-text/error-text.css` | `data-variant`: warning |
|
|
87
|
+
| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/fieldset/fieldset.css` | `data-state`: invalid, success<br>`data-required`: symbol, text<br>`data-optional` (flag) |
|
|
88
|
+
| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
|
|
89
|
+
| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/heading/heading.css` | `data-size`: xs, s, m, xl, mega |
|
|
90
|
+
| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/help-text/help-text.css` | `data-variant`: strong, success, warning |
|
|
91
|
+
| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/icon/icon.css` | none |
|
|
92
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/input/input.css` | `data-state`: invalid, success<br>`data-variant`: date, datetime-local, time |
|
|
93
|
+
| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/label/label.css` | `data-required`: symbol, text<br>`data-optional` (flag) |
|
|
94
|
+
| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/link/link.css` | none |
|
|
95
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/list/list.css` | `data-variant`: plain, divided |
|
|
96
|
+
| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/pagination/pagination.css` | none |
|
|
97
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/paragraph/paragraph.css` | `data-variant`: lead<br>`data-size`: small, large |
|
|
98
|
+
| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/progress/progress.css` | `data-color`: success, warning, danger |
|
|
99
|
+
| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/radio/radio.css` | `data-state`: invalid, success |
|
|
100
|
+
| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
101
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/select/select.css` | `data-state`: invalid, success<br>`data-picker`: styled |
|
|
102
|
+
| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
103
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/skip-link/skip-link.css` | none |
|
|
104
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
105
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/sr-only/sr-only.css` | none |
|
|
106
|
+
| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/steps/steps.css` | none |
|
|
107
|
+
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/switch/switch.css` | none |
|
|
108
|
+
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/table/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
|
|
109
|
+
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/tag/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
|
|
110
|
+
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/textarea/textarea.css` | `data-state`: invalid, success |
|
|
111
|
+
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/toggle-group/toggle-group.css` | none |
|
|
112
|
+
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/tooltip/tooltip.css` | none |
|
|
113
113
|
|
|
114
114
|
There is also `lt-theme-control`, a class on a radio button that lets the user
|
|
115
115
|
choose a theme. It is in `tokens.css`, and is described under Tokens.
|
|
@@ -188,7 +188,7 @@ root element:
|
|
|
188
188
|
Below the root element the browser then ignores the host's CSS without a
|
|
189
189
|
layer, unless a rule of the host's wins on specificity as described below, and
|
|
190
190
|
LO-TEK's layer applies again. The rule is in `lotek.css` and in
|
|
191
|
-
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
191
|
+
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/tokens/boundary.css`.
|
|
192
192
|
Fonts and other inherited properties still come from the host, and the
|
|
193
193
|
`--lt-*` variables work. Three things follow from it:
|
|
194
194
|
|
|
@@ -284,16 +284,16 @@ Three rules apply to all of them:
|
|
|
284
284
|
|
|
285
285
|
| Element | Category | Stylesheet | Registration | Attributes | Events | Classes inside |
|
|
286
286
|
| --- | --- | --- | --- | --- | --- | --- |
|
|
287
|
-
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
288
|
-
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
289
|
-
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
290
|
-
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
291
|
-
| `<lt-term>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
292
|
-
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
293
|
-
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
294
|
-
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
295
|
-
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
296
|
-
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
287
|
+
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/field/lt-field.js` | `disabled` (flag)<br>`optional` (flag)<br>`described-by` (text) | none | none |
|
|
288
|
+
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/tabs/lt-tabs.js` | `server-controlled` (flag)<br>`activation`: manual, automatic | `tab-select` (index) | `lt-tabs__list`<br>`lt-tabs__panel` |
|
|
289
|
+
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/error-summary/lt-error-summary.js` | `data-autofocus`: false, true<br>`hidden` (flag) | none | `lt-error-summary`<br>`lt-error-summary__title` |
|
|
290
|
+
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/popover/lt-popover.js` | `open` (flag)<br>`placement`: bottom-start, bottom-end, top-start, top-end<br>`server-controlled` (flag) | `popover-toggle` (open) | `lt-popover` |
|
|
291
|
+
| `<lt-term>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/term/term.css` | `defineLtTerm()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/term/lt-term.js` | none | none | `lt-term`<br>`lt-term__entry` |
|
|
292
|
+
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/suggestion/lt-suggestion.js` | `prefiltered` (flag)<br>`count-none` (text)<br>`count-zero` (text)<br>`count-one` (text)<br>`count-two` (text)<br>`count-few` (text)<br>`count-many` (text)<br>`count-other` (text)<br>`server-controlled` (flag) | `suggestion-select` (value, label) | `lt-suggestion__list`<br>`lt-suggestion__option`<br>`lt-suggestion__value`<br>`lt-suggestion__empty` |
|
|
293
|
+
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/dialog/lt-dialog.js` | `open` (flag)<br>`server-controlled` (flag) | `dialog-toggle` (open, returnValue) | `lt-dialog` (`data-color`: brand, info, success, warning, danger)<br>`lt-dialog__body`<br>`lt-dialog__title`<br>`lt-dialog__footer`<br>`lt-dialog__header`<br>`lt-dialog__subtitle` |
|
|
294
|
+
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/standalone/toast/lt-toast.js` | `duration` (number)<br>`label` (text)<br>`close-label` (text) | `toast-dismiss` | `lt-toast`<br>`lt-toast__message`<br>`lt-toast__close` |
|
|
295
|
+
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/session-timeout/lt-session-timeout.js` | `warn-at` (number)<br>`expires-at` (number)<br>`activity-interval` (number) | `session-warn`<br>`session-extend`<br>`session-logout`<br>`session-expired`<br>`session-activity` | `lt-session-timeout`<br>`lt-session-timeout__dialog`<br>`lt-session-timeout__title`<br>`lt-session-timeout__text`<br>`lt-session-timeout__count`<br>`lt-session-timeout__actions` |
|
|
296
|
+
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/standalone/connection-status/lt-connection-status.js` | `offline-text` (text)<br>`online-text` (text) | `connection-lost`<br>`connection-restored` | `lt-connection-status`<br>`lt-connection-status__bar` |
|
|
297
297
|
|
|
298
298
|
None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
299
299
|
`FormData` and ordinary CSS work straight into it.
|
|
@@ -301,7 +301,7 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
|
301
301
|
## 5. A whole form
|
|
302
302
|
|
|
303
303
|
```html
|
|
304
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
304
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/lotek.css">
|
|
305
305
|
|
|
306
306
|
<form id="job-order" novalidate>
|
|
307
307
|
<lt-field>
|
|
@@ -315,7 +315,7 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
|
315
315
|
|
|
316
316
|
<script type="module">
|
|
317
317
|
import { defineLtField } from
|
|
318
|
-
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
318
|
+
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/field/lt-field.js"
|
|
319
319
|
|
|
320
320
|
defineLtField()
|
|
321
321
|
</script>
|
package/agent/kotlin.md
CHANGED
|
@@ -15,7 +15,7 @@ so code that calls the builder functions cannot invent a variant. It does not
|
|
|
15
15
|
see markup written by hand next to them, or the wiring across a whole page.
|
|
16
16
|
That is what `assertLotek` reads.
|
|
17
17
|
|
|
18
|
-
This is @lo-tek/interfaces 0.
|
|
18
|
+
This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
|
|
19
19
|
follows its version, so it can never say anything other than the code next to
|
|
20
20
|
it.
|
|
21
21
|
|
|
@@ -50,9 +50,9 @@ it.
|
|
|
50
50
|
```kotlin
|
|
51
51
|
// build.gradle.kts
|
|
52
52
|
dependencies {
|
|
53
|
-
implementation("io.github.markusaugust:lo-tek-interfaces:0.
|
|
53
|
+
implementation("io.github.markusaugust:lo-tek-interfaces:0.42.0")
|
|
54
54
|
// Only with kotlinx.html: the extension lt(…) and one function per web component.
|
|
55
|
-
implementation("io.github.markusaugust:lo-tek-kotlinx-html:0.
|
|
55
|
+
implementation("io.github.markusaugust:lo-tek-kotlinx-html:0.42.0")
|
|
56
56
|
}
|
|
57
57
|
```
|
|
58
58
|
|
|
@@ -571,7 +571,7 @@ Freemarker and Pebble.
|
|
|
571
571
|
```kotlin
|
|
572
572
|
// build.gradle.kts
|
|
573
573
|
plugins {
|
|
574
|
-
id("io.github.markusaugust.lo-tek") version "0.
|
|
574
|
+
id("io.github.markusaugust.lo-tek") version "0.42.0"
|
|
575
575
|
}
|
|
576
576
|
|
|
577
577
|
lotek {
|
package/agent/react.md
CHANGED
|
@@ -8,7 +8,7 @@ enough to have its own file: React rewrites the attribute names. `class` is
|
|
|
8
8
|
the main entry, React prints "Invalid DOM property" in the console, once for
|
|
9
9
|
each attribute name. That is why the package has a React entry of its own.
|
|
10
10
|
|
|
11
|
-
This is @lo-tek/interfaces 0.
|
|
11
|
+
This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
|
|
12
12
|
follows its version, so it can never say anything other than the code next to
|
|
13
13
|
it.
|
|
14
14
|
|
package/agent/templates.md
CHANGED
|
@@ -20,7 +20,7 @@ the attributes in a template that cannot call a builder function, and no type
|
|
|
20
20
|
stops `data-variant="outlined"`. That is why item 5 applies more strictly here
|
|
21
21
|
than anywhere else: the check is the only thing that reads your markup.
|
|
22
22
|
|
|
23
|
-
This is @lo-tek/interfaces 0.
|
|
23
|
+
This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
|
|
24
24
|
follows its version, so it can never say anything other than the code next to
|
|
25
25
|
it.
|
|
26
26
|
|
|
@@ -54,7 +54,7 @@ it.
|
|
|
54
54
|
One link in the page template, with all the components:
|
|
55
55
|
|
|
56
56
|
```html
|
|
57
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
57
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/lotek.css">
|
|
58
58
|
```
|
|
59
59
|
|
|
60
60
|
Or from your own server, if you copy the file into your static assets.
|
|
@@ -80,42 +80,42 @@ The default variant has no attribute.
|
|
|
80
80
|
|
|
81
81
|
| Class | Stylesheet | Attributes |
|
|
82
82
|
| --- | --- | --- |
|
|
83
|
-
| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
84
|
-
| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
85
|
-
| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
86
|
-
| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
87
|
-
| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
88
|
-
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
89
|
-
| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
90
|
-
| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
91
|
-
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
92
|
-
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
93
|
-
| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
94
|
-
| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
95
|
-
| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
96
|
-
| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
97
|
-
| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
98
|
-
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
99
|
-
| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
100
|
-
| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
101
|
-
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
102
|
-
| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
103
|
-
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
104
|
-
| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
105
|
-
| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
106
|
-
| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
107
|
-
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
108
|
-
| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
109
|
-
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
110
|
-
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
111
|
-
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
112
|
-
| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
113
|
-
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
114
|
-
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
115
|
-
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
116
|
-
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
117
|
-
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
118
|
-
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
83
|
+
| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/accordion/accordion.css` | `data-variant`: plain |
|
|
84
|
+
| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/alert/alert.css` | `data-color`: info, success, warning, danger |
|
|
85
|
+
| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/avatar/avatar.css` | `data-variant`: square<br>`data-size`: small, large |
|
|
86
|
+
| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
|
|
87
|
+
| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
88
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/button/button.css` | `data-variant`: secondary, ghost, danger |
|
|
89
|
+
| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/card/card.css` | `data-variant`: filled<br>`data-interactive` (flag) |
|
|
90
|
+
| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
91
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
92
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/error-text/error-text.css` | `data-variant`: warning |
|
|
93
|
+
| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/fieldset/fieldset.css` | `data-state`: invalid, success<br>`data-required`: symbol, text<br>`data-optional` (flag) |
|
|
94
|
+
| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
|
|
95
|
+
| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/heading/heading.css` | `data-size`: xs, s, m, xl, mega |
|
|
96
|
+
| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/help-text/help-text.css` | `data-variant`: strong, success, warning |
|
|
97
|
+
| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/icon/icon.css` | none |
|
|
98
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/input/input.css` | `data-state`: invalid, success<br>`data-variant`: date, datetime-local, time |
|
|
99
|
+
| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/label/label.css` | `data-required`: symbol, text<br>`data-optional` (flag) |
|
|
100
|
+
| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/link/link.css` | none |
|
|
101
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/list/list.css` | `data-variant`: plain, divided |
|
|
102
|
+
| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/pagination/pagination.css` | none |
|
|
103
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/paragraph/paragraph.css` | `data-variant`: lead<br>`data-size`: small, large |
|
|
104
|
+
| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/progress/progress.css` | `data-color`: success, warning, danger |
|
|
105
|
+
| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/radio/radio.css` | `data-state`: invalid, success |
|
|
106
|
+
| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
107
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/select/select.css` | `data-state`: invalid, success<br>`data-picker`: styled |
|
|
108
|
+
| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
109
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/skip-link/skip-link.css` | none |
|
|
110
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
111
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/sr-only/sr-only.css` | none |
|
|
112
|
+
| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/steps/steps.css` | none |
|
|
113
|
+
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/switch/switch.css` | none |
|
|
114
|
+
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/table/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
|
|
115
|
+
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/tag/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
|
|
116
|
+
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/textarea/textarea.css` | `data-state`: invalid, success |
|
|
117
|
+
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/toggle-group/toggle-group.css` | none |
|
|
118
|
+
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/tooltip/tooltip.css` | none |
|
|
119
119
|
|
|
120
120
|
There is also `lt-theme-control`, a class on a radio button that lets the user
|
|
121
121
|
choose a theme. It is in `tokens.css`, and is described under Tokens.
|
|
@@ -194,7 +194,7 @@ root element:
|
|
|
194
194
|
Below the root element the browser then ignores the host's CSS without a
|
|
195
195
|
layer, unless a rule of the host's wins on specificity as described below, and
|
|
196
196
|
LO-TEK's layer applies again. The rule is in `lotek.css` and in
|
|
197
|
-
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
197
|
+
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/tokens/boundary.css`.
|
|
198
198
|
Fonts and other inherited properties still come from the host, and the
|
|
199
199
|
`--lt-*` variables work. Three things follow from it:
|
|
200
200
|
|
|
@@ -288,16 +288,16 @@ Three rules apply to all of them:
|
|
|
288
288
|
|
|
289
289
|
| Element | Category | Stylesheet | Registration | Attributes | Events | Classes inside |
|
|
290
290
|
| --- | --- | --- | --- | --- | --- | --- |
|
|
291
|
-
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
292
|
-
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
293
|
-
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
294
|
-
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
295
|
-
| `<lt-term>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
296
|
-
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
297
|
-
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
298
|
-
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
299
|
-
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
300
|
-
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
291
|
+
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/field/lt-field.js` | `disabled` (flag)<br>`optional` (flag)<br>`described-by` (text) | none | none |
|
|
292
|
+
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/tabs/lt-tabs.js` | `server-controlled` (flag)<br>`activation`: manual, automatic | `tab-select` (index) | `lt-tabs__list`<br>`lt-tabs__panel` |
|
|
293
|
+
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/error-summary/lt-error-summary.js` | `data-autofocus`: false, true<br>`hidden` (flag) | none | `lt-error-summary`<br>`lt-error-summary__title` |
|
|
294
|
+
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/popover/lt-popover.js` | `open` (flag)<br>`placement`: bottom-start, bottom-end, top-start, top-end<br>`server-controlled` (flag) | `popover-toggle` (open) | `lt-popover` |
|
|
295
|
+
| `<lt-term>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/term/term.css` | `defineLtTerm()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/term/lt-term.js` | none | none | `lt-term`<br>`lt-term__entry` |
|
|
296
|
+
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/suggestion/lt-suggestion.js` | `prefiltered` (flag)<br>`count-none` (text)<br>`count-zero` (text)<br>`count-one` (text)<br>`count-two` (text)<br>`count-few` (text)<br>`count-many` (text)<br>`count-other` (text)<br>`server-controlled` (flag) | `suggestion-select` (value, label) | `lt-suggestion__list`<br>`lt-suggestion__option`<br>`lt-suggestion__value`<br>`lt-suggestion__empty` |
|
|
297
|
+
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/dialog/lt-dialog.js` | `open` (flag)<br>`server-controlled` (flag) | `dialog-toggle` (open, returnValue) | `lt-dialog` (`data-color`: brand, info, success, warning, danger)<br>`lt-dialog__body`<br>`lt-dialog__title`<br>`lt-dialog__footer`<br>`lt-dialog__header`<br>`lt-dialog__subtitle` |
|
|
298
|
+
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/standalone/toast/lt-toast.js` | `duration` (number)<br>`label` (text)<br>`close-label` (text) | `toast-dismiss` | `lt-toast`<br>`lt-toast__message`<br>`lt-toast__close` |
|
|
299
|
+
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/session-timeout/lt-session-timeout.js` | `warn-at` (number)<br>`expires-at` (number)<br>`activity-interval` (number) | `session-warn`<br>`session-extend`<br>`session-logout`<br>`session-expired`<br>`session-activity` | `lt-session-timeout`<br>`lt-session-timeout__dialog`<br>`lt-session-timeout__title`<br>`lt-session-timeout__text`<br>`lt-session-timeout__count`<br>`lt-session-timeout__actions` |
|
|
300
|
+
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/standalone/connection-status/lt-connection-status.js` | `offline-text` (text)<br>`online-text` (text) | `connection-lost`<br>`connection-restored` | `lt-connection-status`<br>`lt-connection-status__bar` |
|
|
301
301
|
|
|
302
302
|
None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
303
303
|
`FormData` and ordinary CSS work straight into it.
|
|
@@ -334,7 +334,7 @@ The registration, once in the page template:
|
|
|
334
334
|
```html
|
|
335
335
|
<script type="module">
|
|
336
336
|
import { defineLtField } from
|
|
337
|
-
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
337
|
+
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/field/lt-field.js"
|
|
338
338
|
|
|
339
339
|
defineLtField()
|
|
340
340
|
</script>
|
package/dist/lotek.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @lo-tek/interfaces 0.
|
|
1
|
+
/* @lo-tek/interfaces 0.42.0. Every stylesheet in one file, without @import,
|
|
2
2
|
* for those who link from a CDN or node_modules. A build step uses the
|
|
3
3
|
* stylesheets. Generated by scripts/build-css.ts; edit the sources, not this. */
|
|
4
4
|
/* src/tokens/tokens.css */
|
|
@@ -40,28 +40,26 @@
|
|
|
40
40
|
<option name="KOTLIN_TOPLEVEL" value="true" />
|
|
41
41
|
</context>
|
|
42
42
|
</template>
|
|
43
|
-
<template name="ltdialog" value="fun FlowContent.cancelJob() { val box = no.lotek.Lt.dialog(titleId = "$confirm_title$"
|
|
43
|
+
<template name="ltdialog" value="fun FlowContent.cancelJob(open: Boolean = true) { val box = no.lotek.Lt.dialog(titleId = "$confirm_title$", open = open) ltDialog { lt(box.host) id = "$confirm$" dialog { lt(box.dialog) // Escape is a close request, reported with `cancel`, and it // keeps the job. A close the server makes gives no `cancel`. attributes["data-on:cancel"] = "@post('/jobs/222-0481/keep')" h2 { lt(box.title); +"Cancel job 222-0481?" } div { lt(box.body) p { +"The crew keeps the advance. This cannot be undone." } } form { lt(box.footer) attributes["method"] = "dialog" button { lt(no.lotek.Lt.button(variant = no.lotek.ButtonVariant.SECONDARY)) value = "keep" attributes["data-on:click"] = "@post('/jobs/222-0481/keep')" +"Keep the job" } button { lt(no.lotek.Lt.button(variant = no.lotek.ButtonVariant.DANGER)) value = "cancel" attributes["data-on:click"] = "@post('/jobs/222-0481/cancel')" +"Cancel the job" } } } } }" description="The Kotlin recipe from the dialog page, in kotlinx.html. Needs import kotlinx.html.* and no.lotek.html.*; the names from no.lotek are imported when it is inserted." toReformat="true" toShortenFQNames="true">
|
|
44
44
|
<variable name="confirm_title" expression="" defaultValue="" alwaysStopAt="true" />
|
|
45
|
-
<variable name="open_confirm" expression="" defaultValue="" alwaysStopAt="true" />
|
|
46
45
|
<variable name="confirm" expression="" defaultValue="" alwaysStopAt="true" />
|
|
47
46
|
<context>
|
|
48
47
|
<option name="KOTLIN_TOPLEVEL" value="true" />
|
|
49
48
|
</context>
|
|
50
49
|
</template>
|
|
51
|
-
<template name="lttoast" value="fun FlowContent.relay() { ltToast { lt(no.lotek.Lt.toast(label = "Messages").host); id = "$messages$" } button {
|
|
50
|
+
<template name="lttoast" value="fun FlowContent.relay() { ltToast { lt(no.lotek.Lt.toast(label = "Messages").host); id = "$messages$" } button { lt(no.lotek.Lt.button()) type = ButtonType.button attributes["data-on:click"] = "@post('/relays/14/restart')" +"Restart relay 14" } }" description="The Kotlin recipe from the toast page, in kotlinx.html. Needs import kotlinx.html.* and no.lotek.html.*; the names from no.lotek are imported when it is inserted." toReformat="true" toShortenFQNames="true">
|
|
52
51
|
<variable name="messages" expression="" defaultValue="" alwaysStopAt="true" />
|
|
53
|
-
<variable name="restart" expression="" defaultValue="" alwaysStopAt="true" />
|
|
54
52
|
<context>
|
|
55
53
|
<option name="KOTLIN_TOPLEVEL" value="true" />
|
|
56
54
|
</context>
|
|
57
55
|
</template>
|
|
58
|
-
<template name="ltsessiontimeout" value="fun FlowContent.sessionWarning() { val session = no.lotek.Lt.sessionTimeout(titleId = "$session_title$", warnAt = 1500, expiresAt = 1800) ltSessionTimeout { lt(session.host) dialog { lt(session.dialog) h2 { lt(session.title); +"Your session is ending" } p { lt(session.text) +"Your session on the Lattice ends in " span { lt(session.count) } +". Unsaved routes will be lost." } span { lt(session.live) } form { lt(session.actions) attributes["method"] = "dialog" button { lt(no.lotek.Lt.button(), session.extend); +"Stay connected" } button { lt(no.lotek.Lt.button(variant = no.lotek.ButtonVariant.SECONDARY), session.logout) // Logging out is a post to the server, which ends the session. formMethod = ButtonFormMethod.post formAction = "/log-out" +"Log out" } } } }
|
|
56
|
+
<template name="ltsessiontimeout" value="fun FlowContent.sessionWarning() { val session = no.lotek.Lt.sessionTimeout(titleId = "$session_title$", warnAt = 1500, expiresAt = 1800) ltSessionTimeout { lt(session.host) attributes["data-on:session-extend"] = "@post('/api/extend-session')" attributes["data-on:session-expired"] = "window.location = '/log-in?reason=expired'" dialog { lt(session.dialog) h2 { lt(session.title); +"Your session is ending" } p { lt(session.text) +"Your session on the Lattice ends in " span { lt(session.count) } +". Unsaved routes will be lost." } span { lt(session.live) } form { lt(session.actions) attributes["method"] = "dialog" button { lt(no.lotek.Lt.button(), session.extend); +"Stay connected" } button { lt(no.lotek.Lt.button(variant = no.lotek.ButtonVariant.SECONDARY), session.logout) // Logging out is a post to the server, which ends the session. formMethod = ButtonFormMethod.post formAction = "/log-out" +"Log out" } } } } }" description="The Kotlin recipe from the session-timeout page, in kotlinx.html. Needs import kotlinx.html.* and no.lotek.html.*; the names from no.lotek are imported when it is inserted." toReformat="true" toShortenFQNames="true">
|
|
59
57
|
<variable name="session_title" expression="" defaultValue="" alwaysStopAt="true" />
|
|
60
58
|
<context>
|
|
61
59
|
<option name="KOTLIN_TOPLEVEL" value="true" />
|
|
62
60
|
</context>
|
|
63
61
|
</template>
|
|
64
|
-
<template name="ltconnectionstatus" value="fun FlowContent.connection() { ltConnectionStatus {
|
|
62
|
+
<template name="ltconnectionstatus" value="fun FlowContent.connection() { ltConnectionStatus { lt(no.lotek.Lt.connectionStatus()) // `retrying`: the request got no answer. `error`: an answer of 400 or // more; 502, 503 and 504 come from a gateway whose server is gone, // any other is a server that is there. A patch: the stream is alive. attributes["data-on:datastar-fetch__document"] = "evt.detail.type === 'retrying' || [502, 503, 504].includes(+evt.detail.argsRaw.status) ? el.reportFailure() : (evt.detail.type === 'error' || evt.detail.type.startsWith('datastar-patch')) && el.reportSuccess()" } }" description="The Kotlin recipe from the connection-status page, in kotlinx.html. Needs import kotlinx.html.* and no.lotek.html.*; the names from no.lotek are imported when it is inserted." toReformat="true" toShortenFQNames="true">
|
|
65
63
|
<context>
|
|
66
64
|
<option name="KOTLIN_TOPLEVEL" value="true" />
|
|
67
65
|
</context>
|
package/manifest/manifest.json
CHANGED
package/package.json
CHANGED
package/web-types.json
CHANGED