@lo-tek/interfaces 0.39.0 → 0.40.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 +100 -0
- package/README.md +1 -1
- package/agent/astro.md +9 -9
- package/agent/bundles.md +11 -11
- package/agent/datastar.md +65 -65
- package/agent/html.md +59 -59
- package/agent/react.md +11 -11
- package/agent/templates.md +65 -58
- package/core/lotek-core.wasm +0 -0
- package/core/lotek.wasm +0 -0
- package/dist/components/css/accordion/accordion.d.ts +1 -1
- package/dist/components/css/accordion/accordion.js +1 -1
- package/dist/components/css/alert/alert.d.ts +1 -1
- package/dist/components/css/alert/alert.js +1 -1
- package/dist/components/css/avatar/avatar.d.ts +1 -1
- package/dist/components/css/avatar/avatar.js +1 -1
- package/dist/components/css/badge/badge.d.ts +1 -1
- package/dist/components/css/badge/badge.js +1 -1
- package/dist/components/css/breadcrumbs/breadcrumbs.d.ts +1 -1
- package/dist/components/css/breadcrumbs/breadcrumbs.js +1 -1
- package/dist/components/css/card/card.d.ts +1 -1
- package/dist/components/css/card/card.js +1 -1
- package/dist/components/css/file-upload/file-upload.d.ts +1 -1
- package/dist/components/css/file-upload/file-upload.js +1 -1
- package/dist/components/css/icon/icon.d.ts +1 -1
- package/dist/components/css/icon/icon.js +1 -1
- package/dist/components/css/label/label.d.ts +1 -1
- package/dist/components/css/label/label.js +1 -1
- package/dist/components/css/link/link.d.ts +1 -1
- package/dist/components/css/link/link.js +1 -1
- package/dist/components/css/spinner/spinner.d.ts +7 -5
- package/dist/components/css/spinner/spinner.d.ts.map +1 -1
- package/dist/components/css/spinner/spinner.js +7 -5
- package/dist/components/css/spinner/spinner.js.map +1 -1
- package/dist/components/css/tag/tag.d.ts +1 -1
- package/dist/components/css/tag/tag.js +1 -1
- package/dist/components/css/toggle-group/toggle-group.d.ts +1 -1
- package/dist/components/css/toggle-group/toggle-group.js +1 -1
- package/dist/components/css/tooltip/tooltip.d.ts +2 -2
- package/dist/components/css/tooltip/tooltip.js +2 -2
- package/dist/components/frame/dialog/dialog.d.ts +11 -6
- package/dist/components/frame/dialog/dialog.d.ts.map +1 -1
- package/dist/components/frame/dialog/dialog.js +4 -4
- package/dist/components/frame/dialog/dialog.js.map +1 -1
- package/dist/components/frame/dialog/lt-dialog.d.ts +1 -1
- package/dist/components/frame/dialog/lt-dialog.js +7 -7
- package/dist/components/frame/error-summary/error-summary.d.ts +6 -2
- package/dist/components/frame/error-summary/error-summary.d.ts.map +1 -1
- package/dist/components/frame/error-summary/error-summary.js +1 -1
- package/dist/components/frame/error-summary/error-summary.js.map +1 -1
- package/dist/components/frame/error-summary/lt-error-summary.d.ts +1 -1
- package/dist/components/frame/error-summary/lt-error-summary.js +6 -6
- package/dist/components/frame/field/field-core.d.ts +4 -2
- package/dist/components/frame/field/field-core.d.ts.map +1 -1
- package/dist/components/frame/field/field-core.js.map +1 -1
- package/dist/components/frame/field/lt-field.d.ts +5 -4
- package/dist/components/frame/field/lt-field.d.ts.map +1 -1
- package/dist/components/frame/field/lt-field.js +5 -4
- package/dist/components/frame/field/lt-field.js.map +1 -1
- package/dist/components/frame/popover/lt-popover.d.ts +3 -3
- package/dist/components/frame/popover/lt-popover.js +3 -3
- package/dist/components/frame/popover/popover.d.ts +7 -3
- package/dist/components/frame/popover/popover.d.ts.map +1 -1
- package/dist/components/frame/popover/popover.js +2 -2
- package/dist/components/frame/popover/popover.js.map +1 -1
- package/dist/components/frame/session-timeout/lt-session-timeout.d.ts +8 -8
- package/dist/components/frame/session-timeout/lt-session-timeout.js +7 -7
- package/dist/components/frame/session-timeout/session-timeout.d.ts +10 -5
- package/dist/components/frame/session-timeout/session-timeout.d.ts.map +1 -1
- package/dist/components/frame/session-timeout/session-timeout.js +4 -4
- package/dist/components/frame/session-timeout/session-timeout.js.map +1 -1
- package/dist/components/frame/suggestion/lt-suggestion.d.ts +12 -11
- package/dist/components/frame/suggestion/lt-suggestion.d.ts.map +1 -1
- package/dist/components/frame/suggestion/lt-suggestion.js +11 -10
- package/dist/components/frame/suggestion/lt-suggestion.js.map +1 -1
- package/dist/components/frame/suggestion/suggestion.d.ts +3 -1
- package/dist/components/frame/suggestion/suggestion.d.ts.map +1 -1
- package/dist/components/frame/suggestion/suggestion.js.map +1 -1
- package/dist/components/frame/tabs/lt-tabs.d.ts +3 -3
- package/dist/components/frame/tabs/lt-tabs.js +5 -5
- package/dist/components/frame/tabs/lt-tabs.js.map +1 -1
- package/dist/components/frame/tabs/tabs.d.ts +8 -6
- package/dist/components/frame/tabs/tabs.d.ts.map +1 -1
- package/dist/components/frame/tabs/tabs.js +4 -4
- package/dist/components/frame/tabs/tabs.js.map +1 -1
- package/dist/components/standalone/connection-status/lt-connection-status.d.ts +1 -1
- package/dist/components/standalone/connection-status/lt-connection-status.js +1 -1
- package/dist/components/standalone/toast/lt-toast.d.ts +1 -1
- package/dist/components/standalone/toast/lt-toast.js +1 -1
- package/dist/diagnostics/index.d.ts +2 -2
- package/dist/diagnostics/index.js +2 -2
- package/dist/dom.d.ts +2 -1
- package/dist/dom.d.ts.map +1 -1
- package/dist/dom.js +2 -1
- package/dist/dom.js.map +1 -1
- package/dist/lotek.css +20 -1
- package/dist/lt.d.ts +5 -5
- package/dist/lt.js +5 -5
- package/dist/react.d.ts.map +1 -1
- package/dist/vocabulary/elements.js +1 -1
- package/dist/vocabulary/elements.js.map +1 -1
- package/dist/vocabulary/types.d.ts +20 -0
- package/dist/vocabulary/types.d.ts.map +1 -1
- package/live-templates-kotlin.xml +64 -0
- package/live-templates.xml +23 -23
- package/manifest/manifest.json +368 -80
- package/manifest/manifest.schema.json +54 -7
- package/package.json +2 -1
- package/src/components/css/accordion/accordion.ts +1 -1
- package/src/components/css/alert/alert.ts +1 -1
- package/src/components/css/avatar/avatar.ts +1 -1
- package/src/components/css/badge/badge.ts +1 -1
- package/src/components/css/breadcrumbs/breadcrumbs.ts +1 -1
- package/src/components/css/card/card.ts +1 -1
- package/src/components/css/file-upload/file-upload.ts +1 -1
- package/src/components/css/icon/icon.ts +1 -1
- package/src/components/css/input/input.css +21 -0
- package/src/components/css/label/label.ts +1 -1
- package/src/components/css/link/link.ts +1 -1
- package/src/components/css/spinner/spinner.ts +8 -5
- package/src/components/css/tag/tag.ts +1 -1
- package/src/components/css/toggle-group/toggle-group.ts +1 -1
- package/src/components/css/tooltip/tooltip.ts +2 -2
- package/src/components/frame/dialog/dialog.ts +11 -6
- package/src/components/frame/dialog/lt-dialog.ts +7 -7
- package/src/components/frame/error-summary/error-summary.ts +6 -2
- package/src/components/frame/error-summary/lt-error-summary.ts +6 -6
- package/src/components/frame/field/field-core.ts +4 -2
- package/src/components/frame/field/lt-field.ts +5 -4
- package/src/components/frame/popover/lt-popover.ts +3 -3
- package/src/components/frame/popover/popover.ts +7 -3
- package/src/components/frame/session-timeout/lt-session-timeout.ts +8 -8
- package/src/components/frame/session-timeout/session-timeout.ts +10 -5
- package/src/components/frame/suggestion/lt-suggestion.ts +13 -12
- package/src/components/frame/suggestion/suggestion.css +1 -1
- package/src/components/frame/suggestion/suggestion.ts +3 -1
- package/src/components/frame/tabs/lt-tabs.ts +5 -5
- package/src/components/frame/tabs/tabs.css +1 -1
- package/src/components/frame/tabs/tabs.ts +8 -6
- package/src/components/standalone/connection-status/lt-connection-status.ts +1 -1
- package/src/components/standalone/toast/lt-toast.ts +1 -1
- package/src/diagnostics/index.ts +2 -2
- package/src/dom.ts +2 -1
- package/src/lt.ts +5 -5
- package/src/tokens/boundary.css +4 -0
- package/src/vocabulary/elements.ts +1 -1
- package/src/vocabulary/types.ts +17 -0
- package/web-types.json +2 -2
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.40.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.40.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.40.0/src/tokens/tokens.css">
|
|
58
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.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.40.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.40.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.40.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.40.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
82
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.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.40.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
85
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
86
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.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.40.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.40.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.40.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.40.0/src/components/css/icon/icon.css` | none |
|
|
92
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.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.40.0/src/components/css/link/link.css` | none |
|
|
95
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/css/pagination/pagination.css` | none |
|
|
97
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.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.40.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.40.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
101
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
103
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/skip-link/skip-link.css` | none |
|
|
104
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
105
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.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.40.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.40.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.40.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.40.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.40.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.40.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.40.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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.40.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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,21 +299,21 @@ 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.40.0/dist/lotek.css">
|
|
303
303
|
|
|
304
|
-
<form id="
|
|
304
|
+
<form id="job-order" novalidate>
|
|
305
305
|
<lt-field>
|
|
306
|
-
<label class="lt-label" for="
|
|
307
|
-
<input class="lt-input" id="
|
|
308
|
-
<p class="lt-error-text" hidden>Enter
|
|
306
|
+
<label class="lt-label" for="codename" data-required="symbol">Codename</label>
|
|
307
|
+
<input class="lt-input" id="codename" type="text" name="codename" required />
|
|
308
|
+
<p class="lt-error-text" hidden>Enter a codename.</p>
|
|
309
309
|
</lt-field>
|
|
310
310
|
|
|
311
|
-
<button class="lt-button" type="submit">
|
|
311
|
+
<button class="lt-button" type="submit">Order the job</button>
|
|
312
312
|
</form>
|
|
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.40.0/dist/components/frame/field/lt-field.js"
|
|
317
317
|
|
|
318
318
|
defineLtField()
|
|
319
319
|
</script>
|
|
@@ -322,10 +322,10 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
|
322
322
|
The field becomes invalid when the error text shows, not by switching a class:
|
|
323
323
|
|
|
324
324
|
```js
|
|
325
|
-
const
|
|
326
|
-
const error =
|
|
325
|
+
const codename = document.getElementById("codename")
|
|
326
|
+
const error = codename.closest("lt-field").querySelector(".lt-error-text")
|
|
327
327
|
|
|
328
|
-
error.hidden =
|
|
328
|
+
error.hidden = codename.value.trim() !== ""
|
|
329
329
|
```
|
|
330
330
|
|
|
331
331
|
TypeScript does not belong in a `<script type="module">`. The browser runs the
|
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.40.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
|
|
|
@@ -319,15 +319,15 @@ reports mismatches on the label, the field and the error text. Without a
|
|
|
319
319
|
server it works, but `lt.field()` is the way in both.
|
|
320
320
|
|
|
321
321
|
```tsx
|
|
322
|
-
//
|
|
322
|
+
// JobOrder.tsx
|
|
323
323
|
import { lt } from "@lo-tek/interfaces/react"
|
|
324
324
|
import { useId, useState } from "react"
|
|
325
325
|
|
|
326
|
-
export function
|
|
327
|
-
const [
|
|
326
|
+
export function JobOrder() {
|
|
327
|
+
const [codename, setCodename] = useState("")
|
|
328
328
|
const [touched, setTouched] = useState(false)
|
|
329
329
|
|
|
330
|
-
const invalid = touched &&
|
|
330
|
+
const invalid = touched && codename.trim() === ""
|
|
331
331
|
const field = lt.field({
|
|
332
332
|
id: useId(),
|
|
333
333
|
required: "symbol",
|
|
@@ -337,19 +337,19 @@ export function ContactForm() {
|
|
|
337
337
|
|
|
338
338
|
return (
|
|
339
339
|
<form onSubmit={(e) => e.preventDefault()}>
|
|
340
|
-
<label {...field.label}>
|
|
340
|
+
<label {...field.label}>Codename</label>
|
|
341
341
|
<input
|
|
342
342
|
{...lt.input({ type: "text" })}
|
|
343
343
|
{...field.control}
|
|
344
|
-
name="
|
|
344
|
+
name="codename"
|
|
345
345
|
required
|
|
346
|
-
value={
|
|
347
|
-
onChange={(e) =>
|
|
346
|
+
value={codename}
|
|
347
|
+
onChange={(e) => setCodename(e.target.value)}
|
|
348
348
|
onBlur={() => setTouched(true)}
|
|
349
349
|
/>
|
|
350
|
-
<p {...lt.errorText()} {...field.error}>Enter
|
|
350
|
+
<p {...lt.errorText()} {...field.error}>Enter a codename.</p>
|
|
351
351
|
|
|
352
|
-
<button {...lt.button()} type="submit">
|
|
352
|
+
<button {...lt.button()} type="submit">Order the job</button>
|
|
353
353
|
</form>
|
|
354
354
|
)
|
|
355
355
|
}
|
package/agent/templates.md
CHANGED
|
@@ -9,12 +9,18 @@ web components, that is, things the browser understands directly, so a Go
|
|
|
9
9
|
template gets the same components as a React app without taking in any
|
|
10
10
|
JavaScript framework.
|
|
11
11
|
|
|
12
|
+
In Kotlin or Java code that writes the HTML, the builder functions are
|
|
13
|
+
`Lt.field()`, `Lt.button()` and the others, with enums for the values, and
|
|
14
|
+
`Lt.field()` makes `<lt-field>` unnecessary. See
|
|
15
|
+
https://lo-tek.sobernetics.no/kotlin/. The rest of this file is for templates
|
|
16
|
+
that cannot call them.
|
|
17
|
+
|
|
12
18
|
It is also the environment with the smallest safety net. No compiler looks at
|
|
13
|
-
the attributes in a template, and no type
|
|
14
|
-
That is why item 5 applies more strictly here
|
|
15
|
-
the only thing that reads your markup.
|
|
19
|
+
the attributes in a template that cannot call a builder function, and no type
|
|
20
|
+
stops `data-variant="outlined"`. That is why item 5 applies more strictly here
|
|
21
|
+
than anywhere else: the check is the only thing that reads your markup.
|
|
16
22
|
|
|
17
|
-
This is @lo-tek/interfaces 0.
|
|
23
|
+
This is @lo-tek/interfaces 0.40.0. The file is generated by the package and
|
|
18
24
|
follows its version, so it can never say anything other than the code next to
|
|
19
25
|
it.
|
|
20
26
|
|
|
@@ -48,7 +54,7 @@ it.
|
|
|
48
54
|
One link in the page template, with all the components:
|
|
49
55
|
|
|
50
56
|
```html
|
|
51
|
-
<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.40.0/dist/lotek.css">
|
|
52
58
|
```
|
|
53
59
|
|
|
54
60
|
Or from your own server, if you copy the file into your static assets.
|
|
@@ -74,41 +80,41 @@ The default variant has no attribute.
|
|
|
74
80
|
|
|
75
81
|
| Class | Stylesheet | Attributes |
|
|
76
82
|
| --- | --- | --- |
|
|
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.
|
|
83
|
+
| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/accordion/accordion.css` | `data-variant`: plain |
|
|
84
|
+
| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/alert/alert.css` | `data-color`: info, success, warning, danger |
|
|
85
|
+
| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/avatar/avatar.css` | `data-variant`: square<br>`data-size`: small, large |
|
|
86
|
+
| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
|
|
87
|
+
| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
|
|
88
|
+
| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/button/button.css` | `data-variant`: secondary, ghost, danger |
|
|
89
|
+
| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/card/card.css` | `data-variant`: filled<br>`data-interactive` (flag) |
|
|
90
|
+
| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
|
|
91
|
+
| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
|
|
92
|
+
| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/error-text/error-text.css` | `data-variant`: warning |
|
|
93
|
+
| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/fieldset/fieldset.css` | `data-state`: invalid, success<br>`data-required`: symbol, text<br>`data-optional` (flag) |
|
|
94
|
+
| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
|
|
95
|
+
| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/heading/heading.css` | `data-size`: xs, s, m, xl, mega |
|
|
96
|
+
| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/help-text/help-text.css` | `data-variant`: strong, success, warning |
|
|
97
|
+
| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/icon/icon.css` | none |
|
|
98
|
+
| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/input/input.css` | `data-state`: invalid, success<br>`data-variant`: date, datetime-local, time |
|
|
99
|
+
| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/label/label.css` | `data-required`: symbol, text<br>`data-optional` (flag) |
|
|
100
|
+
| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/link/link.css` | none |
|
|
101
|
+
| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/list/list.css` | `data-variant`: plain, divided |
|
|
102
|
+
| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/pagination/pagination.css` | none |
|
|
103
|
+
| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/paragraph/paragraph.css` | `data-variant`: lead<br>`data-size`: small, large |
|
|
104
|
+
| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/progress/progress.css` | `data-color`: success, warning, danger |
|
|
105
|
+
| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/radio/radio.css` | `data-state`: invalid, success |
|
|
106
|
+
| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/search/search.css` | `data-state`: invalid, success |
|
|
107
|
+
| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/select/select.css` | `data-state`: invalid, success<br>`data-picker`: styled |
|
|
108
|
+
| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
|
|
109
|
+
| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/skip-link/skip-link.css` | none |
|
|
110
|
+
| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
|
|
111
|
+
| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/sr-only/sr-only.css` | none |
|
|
112
|
+
| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/switch/switch.css` | none |
|
|
113
|
+
| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/table/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
|
|
114
|
+
| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/tag/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
|
|
115
|
+
| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/textarea/textarea.css` | `data-state`: invalid, success |
|
|
116
|
+
| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/toggle-group/toggle-group.css` | none |
|
|
117
|
+
| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/tooltip/tooltip.css` | none |
|
|
112
118
|
|
|
113
119
|
There is also `lt-theme-control`, a class on a radio button that lets the user
|
|
114
120
|
choose a theme. It is in `tokens.css`, and is described under Tokens.
|
|
@@ -187,7 +193,7 @@ root element:
|
|
|
187
193
|
Below the root element the browser then ignores the host's CSS without a
|
|
188
194
|
layer, unless a rule of the host's wins on specificity as described below, and
|
|
189
195
|
LO-TEK's layer applies again. The rule is in `lotek.css` and in
|
|
190
|
-
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
196
|
+
`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/tokens/boundary.css`.
|
|
191
197
|
Fonts and other inherited properties still come from the host, and the
|
|
192
198
|
`--lt-*` variables work. Three things follow from it:
|
|
193
199
|
|
|
@@ -281,15 +287,15 @@ Three rules apply to all of them:
|
|
|
281
287
|
|
|
282
288
|
| Element | Category | Stylesheet | Registration | Attributes | Events | Classes inside |
|
|
283
289
|
| --- | --- | --- | --- | --- | --- | --- |
|
|
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.
|
|
290
|
+
| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/field/lt-field.js` | `disabled` (flag)<br>`optional` (flag)<br>`described-by` (text) | none | none |
|
|
291
|
+
| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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` |
|
|
292
|
+
| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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` |
|
|
293
|
+
| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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` |
|
|
294
|
+
| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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` |
|
|
295
|
+
| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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` |
|
|
296
|
+
| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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` |
|
|
297
|
+
| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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` |
|
|
298
|
+
| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.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
299
|
|
|
294
300
|
None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
295
301
|
`FormData` and ordinary CSS work straight into it.
|
|
@@ -298,8 +304,8 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
|
|
|
298
304
|
|
|
299
305
|
```html
|
|
300
306
|
<lt-field>
|
|
301
|
-
<label class="lt-label" for="
|
|
302
|
-
<input class="lt-input" id="
|
|
307
|
+
<label class="lt-label" for="codename" data-required="symbol">Codename</label>
|
|
308
|
+
<input class="lt-input" id="codename" type="text" name="codename" value="{{.Codename}}" required />
|
|
303
309
|
{{if .Error}}<p class="lt-error-text">{{.Error}}</p>{{end}}
|
|
304
310
|
</lt-field>
|
|
305
311
|
```
|
|
@@ -313,7 +319,7 @@ In a loop the id comes from a key in the data, never from the index or a
|
|
|
313
319
|
counter:
|
|
314
320
|
|
|
315
321
|
```html
|
|
316
|
-
{{range .
|
|
322
|
+
{{range .Targets}}
|
|
317
323
|
<lt-field>
|
|
318
324
|
<label for="note-{{.Code}}">{{.Name}}</label>
|
|
319
325
|
<input class="lt-input" id="note-{{.Code}}" name="note-{{.Code}}" value="{{.Note}}" />
|
|
@@ -326,7 +332,7 @@ The registration, once in the page template:
|
|
|
326
332
|
```html
|
|
327
333
|
<script type="module">
|
|
328
334
|
import { defineLtField } from
|
|
329
|
-
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.
|
|
335
|
+
"https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/field/lt-field.js"
|
|
330
336
|
|
|
331
337
|
defineLtField()
|
|
332
338
|
</script>
|
|
@@ -372,11 +378,11 @@ putting the user's choice back:
|
|
|
372
378
|
|
|
373
379
|
```html
|
|
374
380
|
<lt-tabs server-controlled>
|
|
375
|
-
<ul class="lt-tabs__list" aria-label="Parts of the
|
|
376
|
-
<li><a href="#
|
|
381
|
+
<ul class="lt-tabs__list" aria-label="Parts of the claim">
|
|
382
|
+
<li><a href="#claim">Claim</a></li>
|
|
377
383
|
<li><a href="#attachments">Attachments</a></li>
|
|
378
384
|
</ul>
|
|
379
|
-
<section class="lt-tabs__panel" id="
|
|
385
|
+
<section class="lt-tabs__panel" id="claim">…</section>
|
|
380
386
|
<section class="lt-tabs__panel" id="attachments" hidden="until-found">…</section>
|
|
381
387
|
</lt-tabs>
|
|
382
388
|
```
|
|
@@ -438,7 +444,8 @@ completion in HTML in a string marked with `@Language("HTML")` or
|
|
|
438
444
|
`// language=HTML`.
|
|
439
445
|
|
|
440
446
|
On the JVM without Node there is LO-TEK for Kotlin
|
|
441
|
-
(https://lo-tek.sobernetics.no/kotlin/)
|
|
447
|
+
(https://lo-tek.sobernetics.no/kotlin/), with the builder functions as `Lt`
|
|
448
|
+
and the check as `assertLotek(html)`. `lotek.jar` is the command line as
|
|
442
449
|
`java -jar lotek.jar check`, and is attached to every release on GitHub:
|
|
443
450
|
https://github.com/MarkusAugust/lo-tek/releases/latest. The Maven package
|
|
444
451
|
`io.github.markusaugust:lo-tek-interfaces` with `assertLotek(html)` and the
|
package/core/lotek-core.wasm
CHANGED
|
Binary file
|
package/core/lotek.wasm
CHANGED
|
Binary file
|
|
@@ -14,7 +14,7 @@ export const accordionVariants = ["default", "plain"];
|
|
|
14
14
|
*
|
|
15
15
|
* ```ts
|
|
16
16
|
* <details {...accordion()}>
|
|
17
|
-
* <summary>Who can
|
|
17
|
+
* <summary>Who can take out a policy?</summary>
|
|
18
18
|
* <div class={accordion.content}>…</div>
|
|
19
19
|
* </details>
|
|
20
20
|
* ```
|
|
@@ -13,7 +13,7 @@ export const alertColors = ["info", "success", "warning", "danger"];
|
|
|
13
13
|
*
|
|
14
14
|
* ```ts
|
|
15
15
|
* <div {...alert({ color: "warning" })}>
|
|
16
|
-
* <p class={alert.title}>
|
|
16
|
+
* <p class={alert.title}>Your routes have not been saved</p>
|
|
17
17
|
* </div>
|
|
18
18
|
* ```
|
|
19
19
|
*/
|
|
@@ -26,7 +26,7 @@ export type AvatarAttributes = {
|
|
|
26
26
|
* picture stands alone, it must have a text that says who it is.
|
|
27
27
|
*
|
|
28
28
|
* ```ts
|
|
29
|
-
* <span {...avatar({ size: "small" })} aria-hidden="true">
|
|
29
|
+
* <span {...avatar({ size: "small" })} aria-hidden="true">DP</span>
|
|
30
30
|
* ```
|
|
31
31
|
*/
|
|
32
32
|
export declare const avatar: (({ size, variant, }?: AvatarOptions) => AvatarAttributes) & {
|
|
@@ -12,7 +12,7 @@ export const avatarVariants = ["circle", "square"];
|
|
|
12
12
|
* picture stands alone, it must have a text that says who it is.
|
|
13
13
|
*
|
|
14
14
|
* ```ts
|
|
15
|
-
* <span {...avatar({ size: "small" })} aria-hidden="true">
|
|
15
|
+
* <span {...avatar({ size: "small" })} aria-hidden="true">DP</span>
|
|
16
16
|
* ```
|
|
17
17
|
*/
|
|
18
18
|
export const avatar = Object.assign(({ size = "medium", variant = "circle", } = {}) => attributes({
|
|
@@ -14,7 +14,7 @@ export type BadgeAttributes = {
|
|
|
14
14
|
* The attributes for a status badge.
|
|
15
15
|
*
|
|
16
16
|
* ```ts
|
|
17
|
-
* <span {...badge({ color: "success" })}>
|
|
17
|
+
* <span {...badge({ color: "success" })}>Paid</span>
|
|
18
18
|
* ```
|
|
19
19
|
*/
|
|
20
20
|
export declare const badge: (({ color }?: BadgeOptions) => BadgeAttributes) & {
|
|
@@ -11,7 +11,7 @@ export const badgeColors = [
|
|
|
11
11
|
* The attributes for a status badge.
|
|
12
12
|
*
|
|
13
13
|
* ```ts
|
|
14
|
-
* <span {...badge({ color: "success" })}>
|
|
14
|
+
* <span {...badge({ color: "success" })}>Paid</span>
|
|
15
15
|
* ```
|
|
16
16
|
*/
|
|
17
17
|
export const badge = Object.assign(({ color = "info" } = {}) => attributes({
|
|
@@ -17,7 +17,7 @@ export type BreadcrumbsAttributes = {
|
|
|
17
17
|
* <nav aria-label="You are here">
|
|
18
18
|
* <ol {...breadcrumbs()}>
|
|
19
19
|
* <li><a href="/">Home</a></li>
|
|
20
|
-
* <li><a href="/
|
|
20
|
+
* <li><a href="/claims" aria-current="page">My claims</a></li>
|
|
21
21
|
* </ol>
|
|
22
22
|
* </nav>
|
|
23
23
|
* ```
|