@lo-tek/interfaces 0.38.0 → 0.39.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 +23 -0
- package/agent/astro.md +1 -1
- package/agent/bundles.md +4 -2
- package/agent/datastar.md +48 -48
- package/agent/html.md +51 -51
- package/agent/react.md +6 -5
- package/agent/templates.md +48 -48
- package/dist/components/host-element.d.ts +3 -0
- package/dist/components/host-element.d.ts.map +1 -1
- package/dist/components/host-element.js +90 -1
- package/dist/components/host-element.js.map +1 -1
- package/dist/lotek.css +1 -1
- package/dist/vocabulary/types.d.ts +6 -0
- package/dist/vocabulary/types.d.ts.map +1 -1
- package/manifest/manifest.json +40 -1
- package/manifest/manifest.schema.json +7 -0
- package/package.json +1 -1
- package/src/components/host-element.ts +97 -1
- package/src/vocabulary/types.ts +6 -0
- package/web-types.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -24,6 +24,29 @@ including 0.36.0 were written in Norwegian, and list them under "Brytende".
|
|
|
24
24
|
|
|
25
25
|
## Unreleased
|
|
26
26
|
|
|
27
|
+
## 0.39.0 (2026-11-01)
|
|
28
|
+
|
|
29
|
+
### Added
|
|
30
|
+
|
|
31
|
+
- **The classes for the parts a template writes itself are in the manifest,
|
|
32
|
+
and in Kotlin.** `lt.card.title` and `lt.toggleGroup.option` were string
|
|
33
|
+
constants on the TypeScript functions alone, so a Kotlin template had to
|
|
34
|
+
write `lt-card__title` as text. Every such constant is now `classes` on the
|
|
35
|
+
builder function in `manifest.json`, and `Lt` has the same names:
|
|
36
|
+
`Lt.card.title`, `Lt.toggleGroup.option` and the rest, each a set with the
|
|
37
|
+
class, so it goes where every other answer goes.
|
|
38
|
+
|
|
39
|
+
### Fixed
|
|
40
|
+
|
|
41
|
+
- **A property set on a web component before its registration now reaches
|
|
42
|
+
the attribute.** `dialog.open = true` from a script that ran before
|
|
43
|
+
`defineLt()` became a plain property on the element. Once the element was
|
|
44
|
+
upgraded, that property shadowed the setter: the attribute was never set,
|
|
45
|
+
and no later write reached the setter either, `dialog.open = false`
|
|
46
|
+
included. The components now write such a property through the setter in
|
|
47
|
+
the microtask after the upgrade, and a write made in between wins. This is
|
|
48
|
+
the same gap `whenUpgraded()` closes for the methods.
|
|
49
|
+
|
|
27
50
|
## 0.38.0 (2026-10-31)
|
|
28
51
|
|
|
29
52
|
### Breaking
|
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.39.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.39.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
|
|
|
@@ -306,7 +306,9 @@ defineLtField()
|
|
|
306
306
|
The call is in the module, not in `mounted`, `onMount` or an effect. A hook
|
|
307
307
|
runs after the first paint, so the elements in the markup are plain
|
|
308
308
|
`HTMLElement`s when the framework renders them, and a call to `show()` or
|
|
309
|
-
`reportFailure()` before the hook fails with "is not a function".
|
|
309
|
+
`reportFailure()` before the hook fails with "is not a function". A property
|
|
310
|
+
set before the registration, such as `open`, is written through the setter
|
|
311
|
+
once the element is upgraded.
|
|
310
312
|
|
|
311
313
|
The markup is ordinary HTML, in whatever template your framework uses:
|
|
312
314
|
|
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.39.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,7 +39,7 @@ 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.39.0/dist/lotek.css">
|
|
43
43
|
<script
|
|
44
44
|
type="module"
|
|
45
45
|
src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar.js"
|
|
@@ -62,41 +62,41 @@ The default variant has no attribute.
|
|
|
62
62
|
|
|
63
63
|
| Class | Stylesheet | Attributes |
|
|
64
64
|
| --- | --- | --- |
|
|
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-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
95
|
-
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
96
|
-
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
97
|
-
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
98
|
-
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
99
|
-
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
65
|
+
| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/accordion/accordion.css` | `data-variant`: plain |
|
|
66
|
+
| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/alert/alert.css` | `data-color`: info, success, warning, danger |
|
|
67
|
+
| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/avatar/avatar.css` | `data-variant`: square<br>`data-size`: small, large |
|
|
68
|
+
| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
|
|
69
|
+
| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
70
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/button/button.css` | `data-variant`: secondary, ghost, danger |
|
|
71
|
+
| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/card/card.css` | `data-variant`: filled<br>`data-interactive` (flag) |
|
|
72
|
+
| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
73
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
74
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/error-text/error-text.css` | `data-variant`: warning |
|
|
75
|
+
| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/fieldset/fieldset.css` | `data-state`: invalid, success<br>`data-required`: symbol, text<br>`data-optional` (flag) |
|
|
76
|
+
| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
|
|
77
|
+
| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/heading/heading.css` | `data-size`: xs, s, m, xl, mega |
|
|
78
|
+
| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/help-text/help-text.css` | `data-variant`: strong, success, warning |
|
|
79
|
+
| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/icon/icon.css` | none |
|
|
80
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/input/input.css` | `data-state`: invalid, success<br>`data-variant`: date, datetime-local, time |
|
|
81
|
+
| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/label/label.css` | `data-required`: symbol, text<br>`data-optional` (flag) |
|
|
82
|
+
| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/link/link.css` | none |
|
|
83
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/list/list.css` | `data-variant`: plain, divided |
|
|
84
|
+
| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/pagination/pagination.css` | none |
|
|
85
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/paragraph/paragraph.css` | `data-variant`: lead<br>`data-size`: small, large |
|
|
86
|
+
| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/progress/progress.css` | `data-color`: success, warning, danger |
|
|
87
|
+
| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/radio/radio.css` | `data-state`: invalid, success |
|
|
88
|
+
| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
89
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/select/select.css` | `data-state`: invalid, success<br>`data-picker`: styled |
|
|
90
|
+
| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
91
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/skip-link/skip-link.css` | none |
|
|
92
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
93
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/sr-only/sr-only.css` | none |
|
|
94
|
+
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/switch/switch.css` | none |
|
|
95
|
+
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/table/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
|
|
96
|
+
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/tag/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
|
|
97
|
+
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/textarea/textarea.css` | `data-state`: invalid, success |
|
|
98
|
+
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/toggle-group/toggle-group.css` | none |
|
|
99
|
+
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/tooltip/tooltip.css` | none |
|
|
100
100
|
|
|
101
101
|
There is also `lt-theme-control`, a class on a radio button that lets the user
|
|
102
102
|
choose a theme. It is in `tokens.css`, and is described under Tokens.
|
|
@@ -175,7 +175,7 @@ root element:
|
|
|
175
175
|
Below the root element the browser then ignores the host's CSS without a
|
|
176
176
|
layer, unless a rule of the host's wins on specificity as described below, and
|
|
177
177
|
LO-TEK's layer applies again. The rule is in `lotek.css` and in
|
|
178
|
-
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
178
|
+
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/tokens/boundary.css`.
|
|
179
179
|
Fonts and other inherited properties still come from the host, and the
|
|
180
180
|
`--lt-*` variables work. Three things follow from it:
|
|
181
181
|
|
|
@@ -269,15 +269,15 @@ Three rules apply to all of them:
|
|
|
269
269
|
|
|
270
270
|
| Element | Category | Stylesheet | Registration | Attributes | Events | Classes inside |
|
|
271
271
|
| --- | --- | --- | --- | --- | --- | --- |
|
|
272
|
-
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
273
|
-
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
274
|
-
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
275
|
-
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
276
|
-
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
277
|
-
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
278
|
-
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
279
|
-
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
280
|
-
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
272
|
+
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js` | `disabled` (flag)<br>`optional` (flag)<br>`described-by` (text) | none | none |
|
|
273
|
+
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
274
|
+
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
275
|
+
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
276
|
+
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
277
|
+
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
278
|
+
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
279
|
+
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
280
|
+
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
281
281
|
|
|
282
282
|
None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
283
283
|
`FormData` and ordinary CSS work straight into it.
|
|
@@ -307,7 +307,7 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
|
307
307
|
|
|
308
308
|
<script type="module">
|
|
309
309
|
import { defineLtField } from
|
|
310
|
-
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
310
|
+
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js"
|
|
311
311
|
|
|
312
312
|
defineLtField()
|
|
313
313
|
</script>
|
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.39.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.39.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.39.0/src/tokens/tokens.css">
|
|
58
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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,41 +74,41 @@ 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-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
107
|
-
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
108
|
-
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
109
|
-
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
110
|
-
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
111
|
-
| `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.39.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.39.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.39.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.39.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.39.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
82
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
85
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
86
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.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.39.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.39.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.39.0/src/components/css/icon/icon.css` | none |
|
|
92
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/link/link.css` | none |
|
|
95
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/css/pagination/pagination.css` | none |
|
|
97
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.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.39.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
101
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
103
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/skip-link/skip-link.css` | none |
|
|
104
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
105
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/sr-only/sr-only.css` | none |
|
|
106
|
+
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/switch/switch.css` | none |
|
|
107
|
+
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/table/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
|
|
108
|
+
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/tag/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
|
|
109
|
+
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/textarea/textarea.css` | `data-state`: invalid, success |
|
|
110
|
+
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/toggle-group/toggle-group.css` | none |
|
|
111
|
+
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/tooltip/tooltip.css` | none |
|
|
112
112
|
|
|
113
113
|
There is also `lt-theme-control`, a class on a radio button that lets the user
|
|
114
114
|
choose a theme. It is in `tokens.css`, and is described under Tokens.
|
|
@@ -187,7 +187,7 @@ root element:
|
|
|
187
187
|
Below the root element the browser then ignores the host's CSS without a
|
|
188
188
|
layer, unless a rule of the host's wins on specificity as described below, and
|
|
189
189
|
LO-TEK's layer applies again. The rule is in `lotek.css` and in
|
|
190
|
-
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
190
|
+
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/tokens/boundary.css`.
|
|
191
191
|
Fonts and other inherited properties still come from the host, and the
|
|
192
192
|
`--lt-*` variables work. Three things follow from it:
|
|
193
193
|
|
|
@@ -283,15 +283,15 @@ Three rules apply to all of them:
|
|
|
283
283
|
|
|
284
284
|
| Element | Category | Stylesheet | Registration | Attributes | Events | Classes inside |
|
|
285
285
|
| --- | --- | --- | --- | --- | --- | --- |
|
|
286
|
-
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
287
|
-
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
288
|
-
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
289
|
-
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
290
|
-
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
291
|
-
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
292
|
-
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
293
|
-
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
294
|
-
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
286
|
+
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js` | `disabled` (flag)<br>`optional` (flag)<br>`described-by` (text) | none | none |
|
|
287
|
+
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
288
|
+
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
289
|
+
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
290
|
+
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
291
|
+
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
292
|
+
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
293
|
+
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
294
|
+
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
295
295
|
|
|
296
296
|
None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
297
297
|
`FormData` and ordinary CSS work straight into it.
|
|
@@ -299,7 +299,7 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
|
299
299
|
## 5. A whole form
|
|
300
300
|
|
|
301
301
|
```html
|
|
302
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
302
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/lotek.css">
|
|
303
303
|
|
|
304
304
|
<form id="contact-form" novalidate>
|
|
305
305
|
<lt-field>
|
|
@@ -313,7 +313,7 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
|
313
313
|
|
|
314
314
|
<script type="module">
|
|
315
315
|
import { defineLtField } from
|
|
316
|
-
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
316
|
+
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js"
|
|
317
317
|
|
|
318
318
|
defineLtField()
|
|
319
319
|
</script>
|
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.39.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
|
|
|
@@ -301,10 +301,11 @@ defineLt()
|
|
|
301
301
|
The call is at the top of the module, not in a `useEffect`. An effect runs
|
|
302
302
|
after the first paint, so the elements are plain `HTMLElement`s when React
|
|
303
303
|
renders them, and a call to `show()` or `reportFailure()` before the effect
|
|
304
|
-
fails with "is not a function".
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
304
|
+
fails with "is not a function". A property set before the registration, such
|
|
305
|
+
as `open`, is written through the setter once the element is upgraded. The
|
|
306
|
+
function does nothing on a server, so it can sit in a root module that runs in
|
|
307
|
+
both places. If you use only one component, it has its own function, such as
|
|
308
|
+
`defineLtTabs()` in `@lo-tek/interfaces/tabs`.
|
|
308
309
|
|
|
309
310
|
```ts
|
|
310
311
|
// src/lotek.d.ts, gives the web components types in JSX
|
package/agent/templates.md
CHANGED
|
@@ -14,7 +14,7 @@ the attributes in a template, and no type stops `data-variant="outlined"`.
|
|
|
14
14
|
That is why item 5 applies more strictly here than anywhere else: the check is
|
|
15
15
|
the only thing that reads your markup.
|
|
16
16
|
|
|
17
|
-
This is @lo-tek/interfaces 0.
|
|
17
|
+
This is @lo-tek/interfaces 0.39.0. The file is generated by the package and
|
|
18
18
|
follows its version, so it can never say anything other than the code next to
|
|
19
19
|
it.
|
|
20
20
|
|
|
@@ -48,7 +48,7 @@ it.
|
|
|
48
48
|
One link in the page template, with all the components:
|
|
49
49
|
|
|
50
50
|
```html
|
|
51
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
51
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/lotek.css">
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
Or from your own server, if you copy the file into your static assets.
|
|
@@ -74,41 +74,41 @@ 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-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
107
|
-
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
108
|
-
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
109
|
-
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
110
|
-
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
111
|
-
| `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.39.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.39.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.39.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.39.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.39.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
82
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
85
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
86
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.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.39.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.39.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.39.0/src/components/css/icon/icon.css` | none |
|
|
92
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/link/link.css` | none |
|
|
95
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/css/pagination/pagination.css` | none |
|
|
97
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.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.39.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
101
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
103
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/skip-link/skip-link.css` | none |
|
|
104
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
105
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/sr-only/sr-only.css` | none |
|
|
106
|
+
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/switch/switch.css` | none |
|
|
107
|
+
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/table/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
|
|
108
|
+
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/tag/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
|
|
109
|
+
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/textarea/textarea.css` | `data-state`: invalid, success |
|
|
110
|
+
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/toggle-group/toggle-group.css` | none |
|
|
111
|
+
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/tooltip/tooltip.css` | none |
|
|
112
112
|
|
|
113
113
|
There is also `lt-theme-control`, a class on a radio button that lets the user
|
|
114
114
|
choose a theme. It is in `tokens.css`, and is described under Tokens.
|
|
@@ -187,7 +187,7 @@ root element:
|
|
|
187
187
|
Below the root element the browser then ignores the host's CSS without a
|
|
188
188
|
layer, unless a rule of the host's wins on specificity as described below, and
|
|
189
189
|
LO-TEK's layer applies again. The rule is in `lotek.css` and in
|
|
190
|
-
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
190
|
+
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/tokens/boundary.css`.
|
|
191
191
|
Fonts and other inherited properties still come from the host, and the
|
|
192
192
|
`--lt-*` variables work. Three things follow from it:
|
|
193
193
|
|
|
@@ -281,15 +281,15 @@ Three rules apply to all of them:
|
|
|
281
281
|
|
|
282
282
|
| Element | Category | Stylesheet | Registration | Attributes | Events | Classes inside |
|
|
283
283
|
| --- | --- | --- | --- | --- | --- | --- |
|
|
284
|
-
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
285
|
-
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
286
|
-
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
287
|
-
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
288
|
-
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
289
|
-
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
290
|
-
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
291
|
-
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
292
|
-
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
284
|
+
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js` | `disabled` (flag)<br>`optional` (flag)<br>`described-by` (text) | none | none |
|
|
285
|
+
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
286
|
+
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
287
|
+
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
288
|
+
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
289
|
+
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
290
|
+
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
291
|
+
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
292
|
+
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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` |
|
|
293
293
|
|
|
294
294
|
None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
295
295
|
`FormData` and ordinary CSS work straight into it.
|
|
@@ -326,7 +326,7 @@ The registration, once in the page template:
|
|
|
326
326
|
```html
|
|
327
327
|
<script type="module">
|
|
328
328
|
import { defineLtField } from
|
|
329
|
-
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
329
|
+
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js"
|
|
330
330
|
|
|
331
331
|
defineLtField()
|
|
332
332
|
</script>
|
|
@@ -12,6 +12,9 @@
|
|
|
12
12
|
* without `customElements` nothing is registered, and without registration
|
|
13
13
|
* the browser never creates an instance. It only exists so the module can
|
|
14
14
|
* load.
|
|
15
|
+
*
|
|
16
|
+
* In the browser the base does one thing: it adopts the properties a script
|
|
17
|
+
* set before the registration, see `adoptPropertiesSetBeforeUpgrade()`.
|
|
15
18
|
*/
|
|
16
19
|
export declare const HostElement: {
|
|
17
20
|
new (): HTMLElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"host-element.d.ts","sourceRoot":"","sources":["../../src/components/host-element.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"host-element.d.ts","sourceRoot":"","sources":["../../src/components/host-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,WAAW;;;CA0BiB,CAAA;AA8EzC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,wBAAwB,GAChC,IAAI,CAgBN;AAYD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CACrB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC/B,IAAI,CAMN;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,OAAO,oBAAoB,CAAA;AAExC;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,OAAO,GACZ,IAAI,CAWN;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAUzE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAEnE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAEzE;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAwB/D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAE5D;AAED,2DAA2D;AAC3D,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAE7D;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,EAChC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,GACb,MAAM,CAQR;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,OAAO,EAC5C,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,GAC5B,CAAC,EAAE,CAQL;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,iBAAiB,EAAG,mBAA4B,CAAA;AAE7D,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAE5D;AA8BD,wBAAgB,eAAe,CAC7B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,MAAM,OAAO,GACzB,IAAI,CA0BN;AA+ED,wBAAsB,YAAY,CAAC,CAAC,SAAS,WAAW,EACtD,OAAO,EAAE,OAAO,GACf,OAAO,CAAC,CAAC,CAAC,CAuBZ"}
|
|
@@ -12,11 +12,100 @@
|
|
|
12
12
|
* without `customElements` nothing is registered, and without registration
|
|
13
13
|
* the browser never creates an instance. It only exists so the module can
|
|
14
14
|
* load.
|
|
15
|
+
*
|
|
16
|
+
* In the browser the base does one thing: it adopts the properties a script
|
|
17
|
+
* set before the registration, see `adoptPropertiesSetBeforeUpgrade()`.
|
|
15
18
|
*/
|
|
16
19
|
export const HostElement = typeof HTMLElement === "undefined"
|
|
17
20
|
? class {
|
|
18
21
|
}
|
|
19
|
-
: HTMLElement
|
|
22
|
+
: class extends HTMLElement {
|
|
23
|
+
constructor() {
|
|
24
|
+
super();
|
|
25
|
+
// Here the own properties are exactly what a script set before the
|
|
26
|
+
// upgrade: the component's own fields are assigned after `super()`
|
|
27
|
+
// returns. An element created after the registration has none, and
|
|
28
|
+
// costs nothing.
|
|
29
|
+
const names = Object.getOwnPropertyNames(this);
|
|
30
|
+
if (names.length === 0)
|
|
31
|
+
return;
|
|
32
|
+
const pending = holdPropertiesSetBeforeUpgrade(this, names);
|
|
33
|
+
if (pending.size === 0)
|
|
34
|
+
return;
|
|
35
|
+
// Written in a microtask, not here: the field initialisers run
|
|
36
|
+
// after `super()`, and a setter that notes something on the
|
|
37
|
+
// instance, as `<lt-popover>` does with `open`, would have been
|
|
38
|
+
// overwritten by them. By the microtask the whole constructor and
|
|
39
|
+
// the upgrade's `connectedCallback` are done.
|
|
40
|
+
queueMicrotask(() => {
|
|
41
|
+
for (const [name, value] of pending) {
|
|
42
|
+
Reflect.deleteProperty(this, name);
|
|
43
|
+
this[name] = value;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Takes the properties a script set on the element before it was upgraded out
|
|
50
|
+
* of the way, so they can be written through the component's setters.
|
|
51
|
+
*
|
|
52
|
+
* `dialog.open = true` from a script that runs before `defineLt()` lands on a
|
|
53
|
+
* plain `HTMLElement`, and becomes an own data property. When the element is
|
|
54
|
+
* upgraded, that property shadows the accessor on the prototype: the
|
|
55
|
+
* attribute is never set, and every later write, `dialog.open = false`
|
|
56
|
+
* included, goes to the shadow and never reaches the setter. Tested against
|
|
57
|
+
* `dist` on 2026-11-01: the setters were dead for the rest of the element's
|
|
58
|
+
* life.
|
|
59
|
+
*
|
|
60
|
+
* Each such property is replaced by a stand-in for the time until the
|
|
61
|
+
* microtask that writes the value. A read goes to the getter, so the
|
|
62
|
+
* component's first `sync()` sees the attribute and not the script's value:
|
|
63
|
+
* when it saw the value, it opened a dialog the script closed again right
|
|
64
|
+
* after the registration, and the write of `false` then removed an attribute
|
|
65
|
+
* that was never there, so nothing closed the dialog (found by GitHub's
|
|
66
|
+
* review). A write goes to the setter and cancels the adoption, so the last
|
|
67
|
+
* write wins. The values returned are what the microtask writes.
|
|
68
|
+
*
|
|
69
|
+
* Only a property with a setter somewhere on the prototype chain is taken;
|
|
70
|
+
* anything else a script put on the element stays as it is. A property set
|
|
71
|
+
* after the upgrade is never an own property, so there is nothing to do for
|
|
72
|
+
* an element created once the registration is there. A property someone made
|
|
73
|
+
* non-configurable cannot be moved out of the way, and is left shadowing the
|
|
74
|
+
* setter, as before. (Documented: the "lazy properties" pattern in Google's
|
|
75
|
+
* custom elements best practices.)
|
|
76
|
+
*/
|
|
77
|
+
function holdPropertiesSetBeforeUpgrade(element, names) {
|
|
78
|
+
const pending = new Map();
|
|
79
|
+
for (const name of names) {
|
|
80
|
+
const own = Object.getOwnPropertyDescriptor(element, name);
|
|
81
|
+
if (!own || !("value" in own) || !own.configurable)
|
|
82
|
+
continue;
|
|
83
|
+
const accessor = accessorOnPrototype(element, name);
|
|
84
|
+
if (!accessor?.set)
|
|
85
|
+
continue;
|
|
86
|
+
const { get, set } = accessor;
|
|
87
|
+
pending.set(name, own.value);
|
|
88
|
+
Object.defineProperty(element, name, {
|
|
89
|
+
configurable: true,
|
|
90
|
+
enumerable: true,
|
|
91
|
+
get: () => get?.call(element),
|
|
92
|
+
set: (value) => {
|
|
93
|
+
pending.delete(name);
|
|
94
|
+
Reflect.deleteProperty(element, name);
|
|
95
|
+
set.call(element, value);
|
|
96
|
+
},
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
return pending;
|
|
100
|
+
}
|
|
101
|
+
function accessorOnPrototype(element, name) {
|
|
102
|
+
for (let proto = Object.getPrototypeOf(element); proto !== null; proto = Object.getPrototypeOf(proto)) {
|
|
103
|
+
const descriptor = Object.getOwnPropertyDescriptor(proto, name);
|
|
104
|
+
if (descriptor)
|
|
105
|
+
return descriptor;
|
|
106
|
+
}
|
|
107
|
+
return undefined;
|
|
108
|
+
}
|
|
20
109
|
/**
|
|
21
110
|
* Registers a web component, once, and only in the browser.
|
|
22
111
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"host-element.js","sourceRoot":"","sources":["../../src/components/host-element.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"host-element.js","sourceRoot":"","sources":["../../src/components/host-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,CAAC,MAAM,WAAW,GACtB,OAAO,WAAW,KAAK,WAAW;IAChC,CAAC,CAAE;KAA0C;IAC7C,CAAC,CAAE,KAAM,SAAQ,WAAW;QACxB;YACE,KAAK,EAAE,CAAA;YACP,mEAAmE;YACnE,mEAAmE;YACnE,mEAAmE;YACnE,iBAAiB;YACjB,MAAM,KAAK,GAAG,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAA;YAC9C,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAM;YAC9B,MAAM,OAAO,GAAG,8BAA8B,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YAC3D,IAAI,OAAO,CAAC,IAAI,KAAK,CAAC;gBAAE,OAAM;YAC9B,+DAA+D;YAC/D,4DAA4D;YAC5D,gEAAgE;YAChE,kEAAkE;YAClE,8CAA8C;YAC9C,cAAc,CAAC,GAAG,EAAE;gBAClB,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,OAAO,EAAE,CAAC;oBACpC,OAAO,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CACjC;oBAAC,IAA2C,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;gBAC7D,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;KACgC,CAAA;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,SAAS,8BAA8B,CACrC,OAAoB,EACpB,KAAwB;IAExB,MAAM,OAAO,GAAG,IAAI,GAAG,EAAmB,CAAA;IAC1C,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,GAAG,GAAG,MAAM,CAAC,wBAAwB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QAC1D,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY;YAAE,SAAQ;QAC5D,MAAM,QAAQ,GAAG,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QACnD,IAAI,CAAC,QAAQ,EAAE,GAAG;YAAE,SAAQ;QAC5B,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,QAAQ,CAAA;QAC7B,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,CAAA;QAC5B,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE;YACnC,YAAY,EAAE,IAAI;YAClB,UAAU,EAAE,IAAI;YAChB,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC;YAC7B,GAAG,EAAE,CAAC,KAAc,EAAE,EAAE;gBACtB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;gBACpB,OAAO,CAAC,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;gBACrC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;YAC1B,CAAC;SACF,CAAC,CAAA;IACJ,CAAC;IACD,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,SAAS,mBAAmB,CAC1B,OAAe,EACf,IAAY;IAEZ,KACE,IAAI,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,EAC1C,KAAK,KAAK,IAAI,EACd,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,EACpC,CAAC;QACD,MAAM,UAAU,GAAG,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;QAC/D,IAAI,UAAU;YAAE,OAAO,UAAU,CAAA;IACnC,CAAC;IACD,OAAO,SAAS,CAAA;AAClB,CAAC;AAUD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,aAAa,CAC3B,OAAe,EACf,OAAiC;IAEjC,IAAI,OAAO,cAAc,KAAK,WAAW;QAAE,OAAM;IACjD,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;QAAE,OAAM;IACvC,IAAI,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC;QAC1B,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,KAAM,SAAQ,OAAO;SAAG,CAAC,CAAA;QACxD,OAAM;IACR,CAAC;IACD,IAAI,CAAC;QACH,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IACzC,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,sEAAsE;QACtE,kEAAkE;QAClE,IAAI,CAAC,CAAC,KAAK,YAAY,YAAY,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAmB,CAAC;YACxE,MAAM,KAAK,CAAA;QACb,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,KAAM,SAAQ,OAAO;SAAG,CAAC,CAAA;IAC1D,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,SAAS,YAAY,CAAC,OAAiC;IACrD,IAAI,OAAO,cAAc,CAAC,OAAO,KAAK,UAAU;QAAE,OAAO,KAAK,CAAA;IAC9D,OAAO,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;AACjD,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,OAAO,CACrB,OAAgB,EAChB,IAAY,EACZ,KAAgC;IAEhC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QAC1C,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC;YAAE,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IAC/D,CAAC;SAAM,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;QAChD,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IACnC,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,iBAAiB,CAAA;AAExC;;;;GAIG;AACH,MAAM,UAAU,WAAW,CACzB,OAAgB,EAChB,IAAY,EACZ,IAAa;IAEb,MAAM,MAAM,GAAG,IAAI,GAAG,CACpB,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACnE,CAAA;IACD,IAAI,IAAI;QAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;;QACrB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IACxB,OAAO,CACL,OAAO,EACP,OAAO,EACP,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACtD,CAAA;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAa,EAAE,OAAgB;IACjE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;QAAE,OAAM;IAC1C,eAAe,CACb,IAAI,EACJ,SAAS,OAAO,sDAAsD;QACpE,kEAAkE;QAClE,+DAA+D;QAC/D,wDAAwD,EAC1D,GAAG,EAAE,CAAC,IAAI,CACX,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,OAAgB,EAAE,IAAY;IACxD,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;AAC1E,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,OAAO,CAAC,OAAgB,EAAE,IAAY,EAAE,EAAW;IACjE,OAAO,CAAC,eAAe,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAA;AAC5C,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,OAAgB;IACzC;;;;OAIG;IACH,IAAI,IAAI,GAAmB,OAAO,CAAA;IAClC,OAAO,IAAI,EAAE,CAAC;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;QACpC,+EAA+E;QAC/E,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAA;YAC/C,IAAI,CAAC,IAAI;gBAAE,OAAO,SAAS,CAAA;YAC3B,IAAI,CAAC;gBACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAA;gBAC9B,OAAO,IAAI,CAAA;YACb,CAAC;YAAC,MAAM,CAAC;gBACP,OAAO,SAAS,CAAA;YAClB,CAAC;QACH,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QAC/B,IAAI,GAAG,IAAI,YAAY,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IACtD,CAAC;IACD,OAAO,SAAS,CAAA;AAClB,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,OAAO,CAAC,OAAgB,EAAE,IAAY;IACpD,IAAI,OAAO,CAAC,WAAW,KAAK,IAAI;QAAE,OAAO,CAAC,WAAW,GAAG,IAAI,CAAA;AAC9D,CAAC;AAED,2DAA2D;AAC3D,MAAM,UAAU,QAAQ,CAAC,OAAgB,EAAE,IAAY;IACrD,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC;QAAE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;AACpE,CAAC;AAED,oEAAoE;AACpE,MAAM,UAAU,QAAQ,CAAC,MAAc;IACrC,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;AAC9D,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAC1B,MAAgC,EAChC,OAAgB,EAChB,MAAc;IAEd,IAAI,OAAO,CAAC,EAAE;QAAE,OAAO,OAAO,CAAC,EAAE,CAAA;IACjC,IAAI,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IAC5B,IAAI,CAAC,EAAE,EAAE,CAAC;QACR,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;QACrB,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IACzB,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,YAAY,CAC1B,IAAa,EACb,QAAgB,EAChB,IAAY,EACZ,WAA6B;IAE7B,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CACxD,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAChD,CAAA;IACD,MAAM,IAAI,GAAG,GAAG;SACb,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;SACpD,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAA;IACzC,OAAO,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAA;AAC9E,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,mBAA4B,CAAA;AAE7D,4DAA4D;AAC5D,MAAM,UAAU,kBAAkB,CAAC,OAAgB;IACjD,OAAO,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;AAChD,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAwB,CAAA;AACpD,MAAM,MAAM,GAAG,IAAI,OAAO,EAAwB,CAAA;AAElD,MAAM,UAAU,eAAe,CAC7B,OAAgB,EAChB,OAAe,EACf,WAA0B;IAE1B,IAAI,OAAO,OAAO,KAAK,WAAW;QAAE,OAAM;IAC1C,IAAI,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;QAAE,OAAM;IAE/C,IAAI,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACjC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,GAAG,IAAI,GAAG,EAAE,CAAA;QACnB,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAC9B,CAAC;IACD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;QAAE,OAAM;IAChC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IAEpB,WAAW,CAAC,GAAG,EAAE;QACf,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACvB,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE;YAAE,OAAM;QAElD,IAAI,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAChC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,IAAI,GAAG,IAAI,GAAG,EAAE,CAAA;YAChB,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QAC7B,CAAC;QACD,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,OAAM;QAC7B,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAEjB,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE,EAAE,OAAO,CAAC,CAAA;IACvE,CAAC,CAAC,CAAA;AACJ,CAAC;AAED;;;;;;GAMG;AACH,SAAS,WAAW,CAAC,GAAe;IAClC,IAAI,IAAI,GAAG,KAAK,CAAA;IAChB,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,IAAI;YAAE,OAAM;QAChB,IAAI,GAAG,IAAI,CAAA;QACX,GAAG,EAAE,CAAA;IACP,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,OAAO,qBAAqB,KAAK,WAAW,EAAE,CAAC;YACjD,IAAI,EAAE,CAAA;YACN,OAAM;QACR,CAAC;QACD;;;;;;;;;;;;;;;;WAgBG;QACH,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QACtB,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAA;IAC1D,CAAC,CAAA;IAED,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;QACzE,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,cAAc,EAAE;YAC5D,IAAI,EAAE,IAAI;SACX,CAAC,CAAA;QACF,OAAM;IACR,CAAC;IAED,cAAc,EAAE,CAAA;AAClB,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,kBAAkB,GAAG,IAAI,CAAA;AAC/B,MAAM,UAAU,GAAG,IAAI,GAAG,EAAU,CAAA;AAEpC,MAAM,CAAC,KAAK,UAAU,YAAY,CAChC,OAAgB;IAEhB,MAAM,GAAG,GAAG,OAAO,CAAC,SAAS,CAAA;IAC7B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,IAAI,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,OAAM;YAC1D,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;YACnB,OAAO,CAAC,IAAI,CACV,IAAI,GAAG,6BAA6B,kBAAkB,GAAG,IAAI,YAAY;gBACvE,gFAAgF,EAClF,OAAO,CACR,CAAA;QACH,CAAC,EAAE,kBAAkB,CAAC,CAAA;QACtB,wEAAwE;QACxE,yEAAyE;QACzE,0DAA0D;QAC1D,IAAI,CAAC;YACH,MAAM,cAAc,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;QACvC,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAA;QACrB,CAAC;IACH,CAAC;IACD,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAC/B,OAAO,OAAY,CAAA;AACrB,CAAC"}
|
package/dist/lotek.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @lo-tek/interfaces 0.
|
|
1
|
+
/* @lo-tek/interfaces 0.39.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 */
|
|
@@ -204,6 +204,12 @@ export type Builder = {
|
|
|
204
204
|
description?: string;
|
|
205
205
|
}[];
|
|
206
206
|
returns: BuilderReturns;
|
|
207
|
+
/**
|
|
208
|
+
* The classes for the parts the template writes itself, as `lt.card.title`:
|
|
209
|
+
* the name on the function and the class. Only on the builder functions
|
|
210
|
+
* that have one.
|
|
211
|
+
*/
|
|
212
|
+
classes?: Record<string, string>;
|
|
207
213
|
};
|
|
208
214
|
/**
|
|
209
215
|
* The shape of `manifest.json`, as `manifest.schema.json` describes it. The
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/vocabulary/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/vocabulary/types.ts"],"names":[],"mappings":"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"}
|
package/manifest/manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "./manifest.schema.json",
|
|
3
3
|
"schemaVersion": 1,
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.39.0",
|
|
5
5
|
"textLanguage": "en",
|
|
6
6
|
"elements": {
|
|
7
7
|
"lt-field": {
|
|
@@ -1913,6 +1913,9 @@
|
|
|
1913
1913
|
}
|
|
1914
1914
|
}
|
|
1915
1915
|
}
|
|
1916
|
+
},
|
|
1917
|
+
"classes": {
|
|
1918
|
+
"content": "lt-accordion__content"
|
|
1916
1919
|
}
|
|
1917
1920
|
},
|
|
1918
1921
|
{
|
|
@@ -1961,6 +1964,9 @@
|
|
|
1961
1964
|
}
|
|
1962
1965
|
}
|
|
1963
1966
|
}
|
|
1967
|
+
},
|
|
1968
|
+
"classes": {
|
|
1969
|
+
"title": "lt-alert__title"
|
|
1964
1970
|
}
|
|
1965
1971
|
},
|
|
1966
1972
|
{
|
|
@@ -2023,6 +2029,9 @@
|
|
|
2023
2029
|
}
|
|
2024
2030
|
}
|
|
2025
2031
|
}
|
|
2032
|
+
},
|
|
2033
|
+
"classes": {
|
|
2034
|
+
"stack": "lt-avatar-stack"
|
|
2026
2035
|
}
|
|
2027
2036
|
},
|
|
2028
2037
|
{
|
|
@@ -2189,6 +2198,9 @@
|
|
|
2189
2198
|
}
|
|
2190
2199
|
}
|
|
2191
2200
|
}
|
|
2201
|
+
},
|
|
2202
|
+
"classes": {
|
|
2203
|
+
"title": "lt-card__title"
|
|
2192
2204
|
}
|
|
2193
2205
|
},
|
|
2194
2206
|
{
|
|
@@ -2233,6 +2245,9 @@
|
|
|
2233
2245
|
}
|
|
2234
2246
|
}
|
|
2235
2247
|
}
|
|
2248
|
+
},
|
|
2249
|
+
"classes": {
|
|
2250
|
+
"row": "lt-checkbox-row"
|
|
2236
2251
|
}
|
|
2237
2252
|
},
|
|
2238
2253
|
{
|
|
@@ -2900,6 +2915,9 @@
|
|
|
2900
2915
|
}
|
|
2901
2916
|
}
|
|
2902
2917
|
}
|
|
2918
|
+
},
|
|
2919
|
+
"classes": {
|
|
2920
|
+
"list": "lt-file-upload-list"
|
|
2903
2921
|
}
|
|
2904
2922
|
},
|
|
2905
2923
|
{
|
|
@@ -3309,6 +3327,9 @@
|
|
|
3309
3327
|
},
|
|
3310
3328
|
"options": {}
|
|
3311
3329
|
}
|
|
3330
|
+
},
|
|
3331
|
+
"classes": {
|
|
3332
|
+
"gap": "lt-pagination__gap"
|
|
3312
3333
|
}
|
|
3313
3334
|
},
|
|
3314
3335
|
{
|
|
@@ -3651,6 +3672,9 @@
|
|
|
3651
3672
|
}
|
|
3652
3673
|
}
|
|
3653
3674
|
}
|
|
3675
|
+
},
|
|
3676
|
+
"classes": {
|
|
3677
|
+
"row": "lt-radio-row"
|
|
3654
3678
|
}
|
|
3655
3679
|
},
|
|
3656
3680
|
{
|
|
@@ -3695,6 +3719,9 @@
|
|
|
3695
3719
|
}
|
|
3696
3720
|
}
|
|
3697
3721
|
}
|
|
3722
|
+
},
|
|
3723
|
+
"classes": {
|
|
3724
|
+
"row": "lt-search-row"
|
|
3698
3725
|
}
|
|
3699
3726
|
},
|
|
3700
3727
|
{
|
|
@@ -4354,6 +4381,9 @@
|
|
|
4354
4381
|
}
|
|
4355
4382
|
}
|
|
4356
4383
|
}
|
|
4384
|
+
},
|
|
4385
|
+
"classes": {
|
|
4386
|
+
"row": "lt-switch-row"
|
|
4357
4387
|
}
|
|
4358
4388
|
},
|
|
4359
4389
|
{
|
|
@@ -4408,6 +4438,9 @@
|
|
|
4408
4438
|
}
|
|
4409
4439
|
}
|
|
4410
4440
|
}
|
|
4441
|
+
},
|
|
4442
|
+
"classes": {
|
|
4443
|
+
"scroll": "lt-table-scroll"
|
|
4411
4444
|
}
|
|
4412
4445
|
},
|
|
4413
4446
|
{
|
|
@@ -4742,6 +4775,9 @@
|
|
|
4742
4775
|
},
|
|
4743
4776
|
"options": {}
|
|
4744
4777
|
}
|
|
4778
|
+
},
|
|
4779
|
+
"classes": {
|
|
4780
|
+
"option": "lt-toggle-group__option"
|
|
4745
4781
|
}
|
|
4746
4782
|
},
|
|
4747
4783
|
{
|
|
@@ -4758,6 +4794,9 @@
|
|
|
4758
4794
|
},
|
|
4759
4795
|
"options": {}
|
|
4760
4796
|
}
|
|
4797
|
+
},
|
|
4798
|
+
"classes": {
|
|
4799
|
+
"bubble": "lt-tooltip__bubble"
|
|
4761
4800
|
}
|
|
4762
4801
|
}
|
|
4763
4802
|
],
|
|
@@ -239,6 +239,13 @@
|
|
|
239
239
|
"returns": {
|
|
240
240
|
"$ref": "#/$defs/returns"
|
|
241
241
|
},
|
|
242
|
+
"classes": {
|
|
243
|
+
"type": "object",
|
|
244
|
+
"description": "The classes the builder function carries for the parts the template writes itself, as lt.card.title in TypeScript: the name on the function and the class. Only the parts no set of the function's own answer writes.",
|
|
245
|
+
"additionalProperties": {
|
|
246
|
+
"type": "string"
|
|
247
|
+
}
|
|
248
|
+
},
|
|
242
249
|
"table": {
|
|
243
250
|
"description": "When the options act independently: the base set and what each option adds, derived from the results and checked against every builder case. Another language can build the builder function from it alone.",
|
|
244
251
|
"oneOf": [
|
package/package.json
CHANGED
|
@@ -12,12 +12,108 @@
|
|
|
12
12
|
* without `customElements` nothing is registered, and without registration
|
|
13
13
|
* the browser never creates an instance. It only exists so the module can
|
|
14
14
|
* load.
|
|
15
|
+
*
|
|
16
|
+
* In the browser the base does one thing: it adopts the properties a script
|
|
17
|
+
* set before the registration, see `adoptPropertiesSetBeforeUpgrade()`.
|
|
15
18
|
*/
|
|
16
19
|
|
|
17
20
|
export const HostElement =
|
|
18
21
|
typeof HTMLElement === "undefined"
|
|
19
22
|
? (class {} as unknown as typeof HTMLElement)
|
|
20
|
-
: HTMLElement
|
|
23
|
+
: (class extends HTMLElement {
|
|
24
|
+
constructor() {
|
|
25
|
+
super()
|
|
26
|
+
// Here the own properties are exactly what a script set before the
|
|
27
|
+
// upgrade: the component's own fields are assigned after `super()`
|
|
28
|
+
// returns. An element created after the registration has none, and
|
|
29
|
+
// costs nothing.
|
|
30
|
+
const names = Object.getOwnPropertyNames(this)
|
|
31
|
+
if (names.length === 0) return
|
|
32
|
+
const pending = holdPropertiesSetBeforeUpgrade(this, names)
|
|
33
|
+
if (pending.size === 0) return
|
|
34
|
+
// Written in a microtask, not here: the field initialisers run
|
|
35
|
+
// after `super()`, and a setter that notes something on the
|
|
36
|
+
// instance, as `<lt-popover>` does with `open`, would have been
|
|
37
|
+
// overwritten by them. By the microtask the whole constructor and
|
|
38
|
+
// the upgrade's `connectedCallback` are done.
|
|
39
|
+
queueMicrotask(() => {
|
|
40
|
+
for (const [name, value] of pending) {
|
|
41
|
+
Reflect.deleteProperty(this, name)
|
|
42
|
+
;(this as unknown as Record<string, unknown>)[name] = value
|
|
43
|
+
}
|
|
44
|
+
})
|
|
45
|
+
}
|
|
46
|
+
} as unknown as typeof HTMLElement)
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Takes the properties a script set on the element before it was upgraded out
|
|
50
|
+
* of the way, so they can be written through the component's setters.
|
|
51
|
+
*
|
|
52
|
+
* `dialog.open = true` from a script that runs before `defineLt()` lands on a
|
|
53
|
+
* plain `HTMLElement`, and becomes an own data property. When the element is
|
|
54
|
+
* upgraded, that property shadows the accessor on the prototype: the
|
|
55
|
+
* attribute is never set, and every later write, `dialog.open = false`
|
|
56
|
+
* included, goes to the shadow and never reaches the setter. Tested against
|
|
57
|
+
* `dist` on 2026-11-01: the setters were dead for the rest of the element's
|
|
58
|
+
* life.
|
|
59
|
+
*
|
|
60
|
+
* Each such property is replaced by a stand-in for the time until the
|
|
61
|
+
* microtask that writes the value. A read goes to the getter, so the
|
|
62
|
+
* component's first `sync()` sees the attribute and not the script's value:
|
|
63
|
+
* when it saw the value, it opened a dialog the script closed again right
|
|
64
|
+
* after the registration, and the write of `false` then removed an attribute
|
|
65
|
+
* that was never there, so nothing closed the dialog (found by GitHub's
|
|
66
|
+
* review). A write goes to the setter and cancels the adoption, so the last
|
|
67
|
+
* write wins. The values returned are what the microtask writes.
|
|
68
|
+
*
|
|
69
|
+
* Only a property with a setter somewhere on the prototype chain is taken;
|
|
70
|
+
* anything else a script put on the element stays as it is. A property set
|
|
71
|
+
* after the upgrade is never an own property, so there is nothing to do for
|
|
72
|
+
* an element created once the registration is there. A property someone made
|
|
73
|
+
* non-configurable cannot be moved out of the way, and is left shadowing the
|
|
74
|
+
* setter, as before. (Documented: the "lazy properties" pattern in Google's
|
|
75
|
+
* custom elements best practices.)
|
|
76
|
+
*/
|
|
77
|
+
function holdPropertiesSetBeforeUpgrade(
|
|
78
|
+
element: HTMLElement,
|
|
79
|
+
names: readonly string[],
|
|
80
|
+
): Map<string, unknown> {
|
|
81
|
+
const pending = new Map<string, unknown>()
|
|
82
|
+
for (const name of names) {
|
|
83
|
+
const own = Object.getOwnPropertyDescriptor(element, name)
|
|
84
|
+
if (!own || !("value" in own) || !own.configurable) continue
|
|
85
|
+
const accessor = accessorOnPrototype(element, name)
|
|
86
|
+
if (!accessor?.set) continue
|
|
87
|
+
const { get, set } = accessor
|
|
88
|
+
pending.set(name, own.value)
|
|
89
|
+
Object.defineProperty(element, name, {
|
|
90
|
+
configurable: true,
|
|
91
|
+
enumerable: true,
|
|
92
|
+
get: () => get?.call(element),
|
|
93
|
+
set: (value: unknown) => {
|
|
94
|
+
pending.delete(name)
|
|
95
|
+
Reflect.deleteProperty(element, name)
|
|
96
|
+
set.call(element, value)
|
|
97
|
+
},
|
|
98
|
+
})
|
|
99
|
+
}
|
|
100
|
+
return pending
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
function accessorOnPrototype(
|
|
104
|
+
element: object,
|
|
105
|
+
name: string,
|
|
106
|
+
): PropertyDescriptor | undefined {
|
|
107
|
+
for (
|
|
108
|
+
let proto = Object.getPrototypeOf(element);
|
|
109
|
+
proto !== null;
|
|
110
|
+
proto = Object.getPrototypeOf(proto)
|
|
111
|
+
) {
|
|
112
|
+
const descriptor = Object.getOwnPropertyDescriptor(proto, name)
|
|
113
|
+
if (descriptor) return descriptor
|
|
114
|
+
}
|
|
115
|
+
return undefined
|
|
116
|
+
}
|
|
21
117
|
|
|
22
118
|
/*
|
|
23
119
|
* The types of the events, such as `dialog-toggle` with `detail.open`. Every
|
package/src/vocabulary/types.ts
CHANGED
|
@@ -197,6 +197,12 @@ export type Builder = {
|
|
|
197
197
|
description?: string
|
|
198
198
|
}[]
|
|
199
199
|
returns: BuilderReturns
|
|
200
|
+
/**
|
|
201
|
+
* The classes for the parts the template writes itself, as `lt.card.title`:
|
|
202
|
+
* the name on the function and the class. Only on the builder functions
|
|
203
|
+
* that have one.
|
|
204
|
+
*/
|
|
205
|
+
classes?: Record<string, string>
|
|
200
206
|
}
|
|
201
207
|
|
|
202
208
|
/**
|
package/web-types.json
CHANGED