@lo-tek/interfaces 0.41.0 → 0.43.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 +107 -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/components/frame/dialog/lt-dialog.d.ts +11 -3
- package/dist/components/frame/dialog/lt-dialog.d.ts.map +1 -1
- package/dist/components/frame/dialog/lt-dialog.js +59 -46
- package/dist/components/frame/dialog/lt-dialog.js.map +1 -1
- package/dist/components/frame/error-summary/lt-error-summary.d.ts +9 -6
- package/dist/components/frame/error-summary/lt-error-summary.d.ts.map +1 -1
- package/dist/components/frame/error-summary/lt-error-summary.js +38 -57
- package/dist/components/frame/error-summary/lt-error-summary.js.map +1 -1
- package/dist/components/frame/field/lt-field.d.ts +17 -26
- package/dist/components/frame/field/lt-field.d.ts.map +1 -1
- package/dist/components/frame/field/lt-field.js +81 -143
- package/dist/components/frame/field/lt-field.js.map +1 -1
- package/dist/components/frame/popover/lt-popover.d.ts +1 -1
- package/dist/components/frame/popover/lt-popover.d.ts.map +1 -1
- package/dist/components/frame/popover/lt-popover.js +31 -33
- package/dist/components/frame/popover/lt-popover.js.map +1 -1
- package/dist/components/frame/session-timeout/lt-session-timeout.d.ts +14 -2
- package/dist/components/frame/session-timeout/lt-session-timeout.d.ts.map +1 -1
- package/dist/components/frame/session-timeout/lt-session-timeout.js +73 -46
- package/dist/components/frame/session-timeout/lt-session-timeout.js.map +1 -1
- package/dist/components/frame/suggestion/lt-suggestion.d.ts +5 -7
- package/dist/components/frame/suggestion/lt-suggestion.d.ts.map +1 -1
- package/dist/components/frame/suggestion/lt-suggestion.js +57 -72
- package/dist/components/frame/suggestion/lt-suggestion.js.map +1 -1
- package/dist/components/frame/tabs/lt-tabs.d.ts +14 -5
- package/dist/components/frame/tabs/lt-tabs.d.ts.map +1 -1
- package/dist/components/frame/tabs/lt-tabs.js +86 -106
- package/dist/components/frame/tabs/lt-tabs.js.map +1 -1
- package/dist/components/frame/term/lt-term.d.ts +5 -1
- package/dist/components/frame/term/lt-term.d.ts.map +1 -1
- package/dist/components/frame/term/lt-term.js +23 -21
- package/dist/components/frame/term/lt-term.js.map +1 -1
- package/dist/components/host-element.d.ts +137 -2
- package/dist/components/host-element.d.ts.map +1 -1
- package/dist/components/host-element.js +187 -4
- package/dist/components/host-element.js.map +1 -1
- package/dist/lotek.css +1 -1
- package/dist/react.d.ts +51 -437
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +48 -208
- package/dist/react.js.map +1 -1
- package/live-templates-kotlin.xml +4 -6
- package/manifest/manifest.json +1 -1
- package/package.json +7 -3
- package/src/components/frame/dialog/lt-dialog.ts +56 -50
- package/src/components/frame/error-summary/lt-error-summary.ts +33 -46
- package/src/components/frame/field/lt-field.ts +99 -207
- package/src/components/frame/popover/lt-popover.ts +37 -35
- package/src/components/frame/session-timeout/lt-session-timeout.ts +88 -46
- package/src/components/frame/suggestion/lt-suggestion.ts +59 -73
- package/src/components/frame/tabs/lt-tabs.ts +96 -122
- package/src/components/frame/term/lt-term.ts +27 -21
- package/src/components/host-element.ts +306 -3
- package/src/react.ts +125 -240
- package/web-types.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -24,6 +24,113 @@ including 0.36.0 were written in Norwegian, and list them under "Brytende".
|
|
|
24
24
|
|
|
25
25
|
## Unreleased
|
|
26
26
|
|
|
27
|
+
## 0.43.0 (2026-11-08)
|
|
28
|
+
|
|
29
|
+
### Breaking
|
|
30
|
+
|
|
31
|
+
- **`derivedParts()` in `@lo-tek/interfaces/host-element` takes the
|
|
32
|
+
`ownership()` the roles were written through**, in place of the `WeakSet`
|
|
33
|
+
of parts it took before. Write the roles with `own.write(part, "role", …)`
|
|
34
|
+
and pass `own`.
|
|
35
|
+
|
|
36
|
+
### Added
|
|
37
|
+
|
|
38
|
+
- **`ownership()` in `@lo-tek/interfaces/host-element`** remembers, per
|
|
39
|
+
node and attribute, what a web component wrote and the server's word it
|
|
40
|
+
wrote it against, and tells the two apart with `serverWord()`: the value
|
|
41
|
+
that stands there, unless it is the component's own echo. `write()` writes
|
|
42
|
+
through `setAttr` or `setFlag` and can mark the attribute with
|
|
43
|
+
`data-lt-written`, so a morph that removes the mark is seen as the server
|
|
44
|
+
speaking. `<lt-field>` keeps its memory through it, and behaves as before.
|
|
45
|
+
- **`ownership()` also has `forget()`**, for an attribute the server has
|
|
46
|
+
taken over, which takes the component's mark away with the memory, and **`lost()`**, which says that a morph from the server has
|
|
47
|
+
removed the mark since the component wrote a value that differed from the
|
|
48
|
+
server's. **`release()`** removes an attribute the component wrote and
|
|
49
|
+
forgets it in the same step, so the memory cannot outlive the attribute.
|
|
50
|
+
`<lt-error-summary>`, `<lt-term>`, `<lt-suggestion>` and
|
|
51
|
+
`<lt-tabs>` keep what they wrote through `ownership()` now, and behave as
|
|
52
|
+
before.
|
|
53
|
+
- **`watcher()` in the same module** starts a `MutationObserver` on a node
|
|
54
|
+
and stops it, leaves the old node when it is started on a new one, and
|
|
55
|
+
says with `watching` whether it runs.
|
|
56
|
+
- **`restoreModalOpen()`** puts `open` back on a `<dialog>` still in the top
|
|
57
|
+
layer when a morph took it, and says whether it did. `<lt-dialog>` and
|
|
58
|
+
`<lt-session-timeout>` repair through it.
|
|
59
|
+
- **`nameFromHeading()` in the same module** names an element from a
|
|
60
|
+
heading with `aria-labelledby`, unless the server named it, and says how
|
|
61
|
+
it is named. `<lt-dialog>`, `<lt-session-timeout>` and
|
|
62
|
+
`<lt-error-summary>` name themselves through it, so the rule is in one
|
|
63
|
+
place, and say so when `data-lt-written` was copied into the template.
|
|
64
|
+
**`hasName()`** says whether an element has a name that is not blank, for
|
|
65
|
+
the warnings about an element without one.
|
|
66
|
+
- **`warnAboutMarkup()` takes `{ silentWhenEmpty: true }`**, which keeps it
|
|
67
|
+
silent about an element with no children, a region the server has not
|
|
68
|
+
filled yet.
|
|
69
|
+
|
|
70
|
+
### Changed
|
|
71
|
+
|
|
72
|
+
- **`@lo-tek/interfaces/react` is derived from `lt`.** `react.ts` goes over
|
|
73
|
+
every builder function in the main entry and gives the attribute sets in
|
|
74
|
+
the result the React names, so a new component comes along by itself.
|
|
75
|
+
What every function returns, and the lists and guards on it, are the same
|
|
76
|
+
as before; a test holds each function to the main entry's result. The
|
|
77
|
+
type of each function wrapped without a React result of its own is now
|
|
78
|
+
the React result alone, where it used to be an intersection that also had
|
|
79
|
+
the main entry's, and the documentation on
|
|
80
|
+
each member of `lt` comes along to the editor from `/react` too.
|
|
81
|
+
`ReactResult<R>` and `ReactLt` are exported for the types.
|
|
82
|
+
|
|
83
|
+
### Fixed
|
|
84
|
+
|
|
85
|
+
- **`<lt-dialog>` and `<lt-session-timeout>` keep the dialog's name when the
|
|
86
|
+
server replaces the heading.** The component took the `aria-labelledby` it
|
|
87
|
+
had written itself for the server's word, so a patch that sent the heading
|
|
88
|
+
with another id left the name pointing at an id that was gone, and a
|
|
89
|
+
screen reader announced the dialog without a name. The name the component
|
|
90
|
+
wrote now follows the heading, gives way when the server names the
|
|
91
|
+
dialog with `aria-label`, and is taken away when no heading is left, so
|
|
92
|
+
the warning about a dialog without a name comes then. The component
|
|
93
|
+
writes its own with `data-lt-written`, so an `aria-labelledby` the server
|
|
94
|
+
sent is the server's and stays, also with the same id.
|
|
95
|
+
`<lt-session-timeout>` now has that warning too.
|
|
96
|
+
- **`<lt-error-summary>` leaves an `aria-labelledby` the server sent with
|
|
97
|
+
the same id the component wrote**, also beside an `aria-label`. It now
|
|
98
|
+
writes its own with `data-lt-written`, as the dialog does.
|
|
99
|
+
- **A blank `aria-labelledby` or `aria-label` on `<lt-dialog>` and
|
|
100
|
+
`<lt-session-timeout>` counts as no name**, as it already did on
|
|
101
|
+
`<lt-error-summary>`: the dialog is named from its heading, and the
|
|
102
|
+
warning about a dialog without a name comes when it has none.
|
|
103
|
+
- **`<lt-field>` leaves a `data-state="invalid"` the server sent itself.**
|
|
104
|
+
When the component had written the value first and a morph then brought
|
|
105
|
+
the same value from the server, the component removed it once the error
|
|
106
|
+
text was hidden. It now writes the value with `data-lt-written`, as it
|
|
107
|
+
does `aria-invalid`, and removes only its own.
|
|
108
|
+
|
|
109
|
+
## 0.42.0 (2026-11-06)
|
|
110
|
+
|
|
111
|
+
### Changed
|
|
112
|
+
|
|
113
|
+
- **The Kotlin live templates have no script of their own.** They are the
|
|
114
|
+
Datastar recipe rendered by the server: the dialog is sent open and its
|
|
115
|
+
choices go with `@post`, Escape included through `data-on:cancel`, the
|
|
116
|
+
session timeout sends its events on with `data-on`, the toast's button
|
|
117
|
+
posts and the server answers with the call to `show()`, and the
|
|
118
|
+
connection status hears of a lost server through
|
|
119
|
+
`data-on:datastar-fetch__document`. The page needs Datastar, loaded once
|
|
120
|
+
in its template after the registration, and the server answers with a
|
|
121
|
+
200: the signals as `application/json`, or as `text/javascript` the
|
|
122
|
+
toast's call and, for a session that is already gone, the way to log in.
|
|
123
|
+
|
|
124
|
+
### Fixed
|
|
125
|
+
|
|
126
|
+
- **The rulebook for Datastar, `agent/datastar.md`, loads Datastar after
|
|
127
|
+
the registration.** Module scripts run in the order they stand, and with
|
|
128
|
+
Datastar first the answer to a request at load could reach a web component
|
|
129
|
+
before it was registered.
|
|
130
|
+
- **`agent/datastar.md` says how Escape reaches the server from a dialog.**
|
|
131
|
+
Escape is a close request, reported with `cancel` on the `<dialog>`, and
|
|
132
|
+
`dialog-toggle` cannot tell it from a close the server makes.
|
|
133
|
+
|
|
27
134
|
## 0.41.0 (2026-11-05)
|
|
28
135
|
|
|
29
136
|
### 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.43.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.43.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.43.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.43.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.43.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.43.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.43.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.43.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.43.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
76
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
79
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
80
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.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.43.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.43.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.43.0/src/components/css/icon/icon.css` | none |
|
|
86
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.0/src/components/css/link/link.css` | none |
|
|
89
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/css/pagination/pagination.css` | none |
|
|
91
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.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.43.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
95
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
97
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/skip-link/skip-link.css` | none |
|
|
98
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
99
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/sr-only/sr-only.css` | none |
|
|
100
|
+
| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/steps/steps.css` | none |
|
|
101
|
+
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.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.43.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.43.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.43.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.43.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.43.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/term/term.css` | `defineLtTerm()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.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.43.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.43.0/src/tokens/tokens.css">
|
|
58
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.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.43.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.43.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.43.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
82
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
85
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
86
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.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.43.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.43.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.43.0/src/components/css/icon/icon.css` | none |
|
|
92
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.0/src/components/css/link/link.css` | none |
|
|
95
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/css/pagination/pagination.css` | none |
|
|
97
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.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.43.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
101
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
103
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/skip-link/skip-link.css` | none |
|
|
104
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
105
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/sr-only/sr-only.css` | none |
|
|
106
|
+
| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.0/src/components/css/steps/steps.css` | none |
|
|
107
|
+
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.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.43.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.43.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.43.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.43.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.43.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/term/term.css` | `defineLtTerm()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.43.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.43.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.43.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.43.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.43.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.43.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.43.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.43.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
|
|