@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.
Files changed (148) hide show
  1. package/CHANGELOG.md +100 -0
  2. package/README.md +1 -1
  3. package/agent/astro.md +9 -9
  4. package/agent/bundles.md +11 -11
  5. package/agent/datastar.md +65 -65
  6. package/agent/html.md +59 -59
  7. package/agent/react.md +11 -11
  8. package/agent/templates.md +65 -58
  9. package/core/lotek-core.wasm +0 -0
  10. package/core/lotek.wasm +0 -0
  11. package/dist/components/css/accordion/accordion.d.ts +1 -1
  12. package/dist/components/css/accordion/accordion.js +1 -1
  13. package/dist/components/css/alert/alert.d.ts +1 -1
  14. package/dist/components/css/alert/alert.js +1 -1
  15. package/dist/components/css/avatar/avatar.d.ts +1 -1
  16. package/dist/components/css/avatar/avatar.js +1 -1
  17. package/dist/components/css/badge/badge.d.ts +1 -1
  18. package/dist/components/css/badge/badge.js +1 -1
  19. package/dist/components/css/breadcrumbs/breadcrumbs.d.ts +1 -1
  20. package/dist/components/css/breadcrumbs/breadcrumbs.js +1 -1
  21. package/dist/components/css/card/card.d.ts +1 -1
  22. package/dist/components/css/card/card.js +1 -1
  23. package/dist/components/css/file-upload/file-upload.d.ts +1 -1
  24. package/dist/components/css/file-upload/file-upload.js +1 -1
  25. package/dist/components/css/icon/icon.d.ts +1 -1
  26. package/dist/components/css/icon/icon.js +1 -1
  27. package/dist/components/css/label/label.d.ts +1 -1
  28. package/dist/components/css/label/label.js +1 -1
  29. package/dist/components/css/link/link.d.ts +1 -1
  30. package/dist/components/css/link/link.js +1 -1
  31. package/dist/components/css/spinner/spinner.d.ts +7 -5
  32. package/dist/components/css/spinner/spinner.d.ts.map +1 -1
  33. package/dist/components/css/spinner/spinner.js +7 -5
  34. package/dist/components/css/spinner/spinner.js.map +1 -1
  35. package/dist/components/css/tag/tag.d.ts +1 -1
  36. package/dist/components/css/tag/tag.js +1 -1
  37. package/dist/components/css/toggle-group/toggle-group.d.ts +1 -1
  38. package/dist/components/css/toggle-group/toggle-group.js +1 -1
  39. package/dist/components/css/tooltip/tooltip.d.ts +2 -2
  40. package/dist/components/css/tooltip/tooltip.js +2 -2
  41. package/dist/components/frame/dialog/dialog.d.ts +11 -6
  42. package/dist/components/frame/dialog/dialog.d.ts.map +1 -1
  43. package/dist/components/frame/dialog/dialog.js +4 -4
  44. package/dist/components/frame/dialog/dialog.js.map +1 -1
  45. package/dist/components/frame/dialog/lt-dialog.d.ts +1 -1
  46. package/dist/components/frame/dialog/lt-dialog.js +7 -7
  47. package/dist/components/frame/error-summary/error-summary.d.ts +6 -2
  48. package/dist/components/frame/error-summary/error-summary.d.ts.map +1 -1
  49. package/dist/components/frame/error-summary/error-summary.js +1 -1
  50. package/dist/components/frame/error-summary/error-summary.js.map +1 -1
  51. package/dist/components/frame/error-summary/lt-error-summary.d.ts +1 -1
  52. package/dist/components/frame/error-summary/lt-error-summary.js +6 -6
  53. package/dist/components/frame/field/field-core.d.ts +4 -2
  54. package/dist/components/frame/field/field-core.d.ts.map +1 -1
  55. package/dist/components/frame/field/field-core.js.map +1 -1
  56. package/dist/components/frame/field/lt-field.d.ts +5 -4
  57. package/dist/components/frame/field/lt-field.d.ts.map +1 -1
  58. package/dist/components/frame/field/lt-field.js +5 -4
  59. package/dist/components/frame/field/lt-field.js.map +1 -1
  60. package/dist/components/frame/popover/lt-popover.d.ts +3 -3
  61. package/dist/components/frame/popover/lt-popover.js +3 -3
  62. package/dist/components/frame/popover/popover.d.ts +7 -3
  63. package/dist/components/frame/popover/popover.d.ts.map +1 -1
  64. package/dist/components/frame/popover/popover.js +2 -2
  65. package/dist/components/frame/popover/popover.js.map +1 -1
  66. package/dist/components/frame/session-timeout/lt-session-timeout.d.ts +8 -8
  67. package/dist/components/frame/session-timeout/lt-session-timeout.js +7 -7
  68. package/dist/components/frame/session-timeout/session-timeout.d.ts +10 -5
  69. package/dist/components/frame/session-timeout/session-timeout.d.ts.map +1 -1
  70. package/dist/components/frame/session-timeout/session-timeout.js +4 -4
  71. package/dist/components/frame/session-timeout/session-timeout.js.map +1 -1
  72. package/dist/components/frame/suggestion/lt-suggestion.d.ts +12 -11
  73. package/dist/components/frame/suggestion/lt-suggestion.d.ts.map +1 -1
  74. package/dist/components/frame/suggestion/lt-suggestion.js +11 -10
  75. package/dist/components/frame/suggestion/lt-suggestion.js.map +1 -1
  76. package/dist/components/frame/suggestion/suggestion.d.ts +3 -1
  77. package/dist/components/frame/suggestion/suggestion.d.ts.map +1 -1
  78. package/dist/components/frame/suggestion/suggestion.js.map +1 -1
  79. package/dist/components/frame/tabs/lt-tabs.d.ts +3 -3
  80. package/dist/components/frame/tabs/lt-tabs.js +5 -5
  81. package/dist/components/frame/tabs/lt-tabs.js.map +1 -1
  82. package/dist/components/frame/tabs/tabs.d.ts +8 -6
  83. package/dist/components/frame/tabs/tabs.d.ts.map +1 -1
  84. package/dist/components/frame/tabs/tabs.js +4 -4
  85. package/dist/components/frame/tabs/tabs.js.map +1 -1
  86. package/dist/components/standalone/connection-status/lt-connection-status.d.ts +1 -1
  87. package/dist/components/standalone/connection-status/lt-connection-status.js +1 -1
  88. package/dist/components/standalone/toast/lt-toast.d.ts +1 -1
  89. package/dist/components/standalone/toast/lt-toast.js +1 -1
  90. package/dist/diagnostics/index.d.ts +2 -2
  91. package/dist/diagnostics/index.js +2 -2
  92. package/dist/dom.d.ts +2 -1
  93. package/dist/dom.d.ts.map +1 -1
  94. package/dist/dom.js +2 -1
  95. package/dist/dom.js.map +1 -1
  96. package/dist/lotek.css +20 -1
  97. package/dist/lt.d.ts +5 -5
  98. package/dist/lt.js +5 -5
  99. package/dist/react.d.ts.map +1 -1
  100. package/dist/vocabulary/elements.js +1 -1
  101. package/dist/vocabulary/elements.js.map +1 -1
  102. package/dist/vocabulary/types.d.ts +20 -0
  103. package/dist/vocabulary/types.d.ts.map +1 -1
  104. package/live-templates-kotlin.xml +64 -0
  105. package/live-templates.xml +23 -23
  106. package/manifest/manifest.json +368 -80
  107. package/manifest/manifest.schema.json +54 -7
  108. package/package.json +2 -1
  109. package/src/components/css/accordion/accordion.ts +1 -1
  110. package/src/components/css/alert/alert.ts +1 -1
  111. package/src/components/css/avatar/avatar.ts +1 -1
  112. package/src/components/css/badge/badge.ts +1 -1
  113. package/src/components/css/breadcrumbs/breadcrumbs.ts +1 -1
  114. package/src/components/css/card/card.ts +1 -1
  115. package/src/components/css/file-upload/file-upload.ts +1 -1
  116. package/src/components/css/icon/icon.ts +1 -1
  117. package/src/components/css/input/input.css +21 -0
  118. package/src/components/css/label/label.ts +1 -1
  119. package/src/components/css/link/link.ts +1 -1
  120. package/src/components/css/spinner/spinner.ts +8 -5
  121. package/src/components/css/tag/tag.ts +1 -1
  122. package/src/components/css/toggle-group/toggle-group.ts +1 -1
  123. package/src/components/css/tooltip/tooltip.ts +2 -2
  124. package/src/components/frame/dialog/dialog.ts +11 -6
  125. package/src/components/frame/dialog/lt-dialog.ts +7 -7
  126. package/src/components/frame/error-summary/error-summary.ts +6 -2
  127. package/src/components/frame/error-summary/lt-error-summary.ts +6 -6
  128. package/src/components/frame/field/field-core.ts +4 -2
  129. package/src/components/frame/field/lt-field.ts +5 -4
  130. package/src/components/frame/popover/lt-popover.ts +3 -3
  131. package/src/components/frame/popover/popover.ts +7 -3
  132. package/src/components/frame/session-timeout/lt-session-timeout.ts +8 -8
  133. package/src/components/frame/session-timeout/session-timeout.ts +10 -5
  134. package/src/components/frame/suggestion/lt-suggestion.ts +13 -12
  135. package/src/components/frame/suggestion/suggestion.css +1 -1
  136. package/src/components/frame/suggestion/suggestion.ts +3 -1
  137. package/src/components/frame/tabs/lt-tabs.ts +5 -5
  138. package/src/components/frame/tabs/tabs.css +1 -1
  139. package/src/components/frame/tabs/tabs.ts +8 -6
  140. package/src/components/standalone/connection-status/lt-connection-status.ts +1 -1
  141. package/src/components/standalone/toast/lt-toast.ts +1 -1
  142. package/src/diagnostics/index.ts +2 -2
  143. package/src/dom.ts +2 -1
  144. package/src/lt.ts +5 -5
  145. package/src/tokens/boundary.css +4 -0
  146. package/src/vocabulary/elements.ts +1 -1
  147. package/src/vocabulary/types.ts +17 -0
  148. 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.39.0. The file is generated by the package and
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.39.0/dist/lotek.css">
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.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">
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.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 |
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.39.0/src/tokens/boundary.css`.
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.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` |
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.39.0/dist/lotek.css">
302
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/lotek.css">
303
303
 
304
- <form id="contact-form" novalidate>
304
+ <form id="job-order" novalidate>
305
305
  <lt-field>
306
- <label class="lt-label" for="name" data-required="symbol">Full name</label>
307
- <input class="lt-input" id="name" type="text" name="name" required />
308
- <p class="lt-error-text" hidden>Enter your name.</p>
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">Send</button>
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.39.0/dist/components/frame/field/lt-field.js"
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 name = document.getElementById("name")
326
- const error = name.closest("lt-field").querySelector(".lt-error-text")
325
+ const codename = document.getElementById("codename")
326
+ const error = codename.closest("lt-field").querySelector(".lt-error-text")
327
327
 
328
- error.hidden = name.value.trim() !== ""
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.39.0. The file is generated by the package and
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
- // ContactForm.tsx
322
+ // JobOrder.tsx
323
323
  import { lt } from "@lo-tek/interfaces/react"
324
324
  import { useId, useState } from "react"
325
325
 
326
- export function ContactForm() {
327
- const [name, setName] = useState("")
326
+ export function JobOrder() {
327
+ const [codename, setCodename] = useState("")
328
328
  const [touched, setTouched] = useState(false)
329
329
 
330
- const invalid = touched && name.trim() === ""
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}>Full name</label>
340
+ <label {...field.label}>Codename</label>
341
341
  <input
342
342
  {...lt.input({ type: "text" })}
343
343
  {...field.control}
344
- name="name"
344
+ name="codename"
345
345
  required
346
- value={name}
347
- onChange={(e) => setName(e.target.value)}
346
+ value={codename}
347
+ onChange={(e) => setCodename(e.target.value)}
348
348
  onBlur={() => setTouched(true)}
349
349
  />
350
- <p {...lt.errorText()} {...field.error}>Enter your name.</p>
350
+ <p {...lt.errorText()} {...field.error}>Enter a codename.</p>
351
351
 
352
- <button {...lt.button()} type="submit">Send</button>
352
+ <button {...lt.button()} type="submit">Order the job</button>
353
353
  </form>
354
354
  )
355
355
  }
@@ -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 stops `data-variant="outlined"`.
14
- That is why item 5 applies more strictly here than anywhere else: the check is
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.39.0. The file is generated by the package and
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.39.0/dist/lotek.css">
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.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 |
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.39.0/src/tokens/boundary.css`.
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.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` |
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="name" data-required="symbol">Full name</label>
302
- <input class="lt-input" id="name" type="text" name="name" value="{{.Name}}" required />
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 .Municipalities}}
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.39.0/dist/components/frame/field/lt-field.js"
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 case">
376
- <li><a href="#application">Application</a></li>
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="application">…</section>
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/). `lotek.jar` is the command line as
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
Binary file
package/core/lotek.wasm CHANGED
Binary file
@@ -23,7 +23,7 @@ export type AccordionAttributes = {
23
23
  *
24
24
  * ```ts
25
25
  * <details {...accordion()}>
26
- * <summary>Who can apply?</summary>
26
+ * <summary>Who can take out a policy?</summary>
27
27
  * <div class={accordion.content}>…</div>
28
28
  * </details>
29
29
  * ```
@@ -14,7 +14,7 @@ export const accordionVariants = ["default", "plain"];
14
14
  *
15
15
  * ```ts
16
16
  * <details {...accordion()}>
17
- * <summary>Who can apply?</summary>
17
+ * <summary>Who can take out a policy?</summary>
18
18
  * <div class={accordion.content}>…</div>
19
19
  * </details>
20
20
  * ```
@@ -22,7 +22,7 @@ export type AlertAttributes = {
22
22
  *
23
23
  * ```ts
24
24
  * <div {...alert({ color: "warning" })}>
25
- * <p class={alert.title}>The application has not been sent</p>
25
+ * <p class={alert.title}>Your routes have not been saved</p>
26
26
  * </div>
27
27
  * ```
28
28
  */
@@ -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}>The application has not been sent</p>
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">ON</span>
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">ON</span>
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" })}>Approved</span>
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" })}>Approved</span>
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="/cases" aria-current="page">My cases</a></li>
20
+ * <li><a href="/claims" aria-current="page">My claims</a></li>
21
21
  * </ol>
22
22
  * </nav>
23
23
  * ```