@livenetworks/ashlar 2.0.6 → 2.0.8

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 (221) hide show
  1. package/LICENSE +641 -641
  2. package/components/COMPONENTS.md +1116 -1116
  3. package/components/index.js +81 -81
  4. package/components/ln-accordion/ln-accordion-dev.scss +8 -8
  5. package/components/ln-accordion/ln-accordion.js +1 -1
  6. package/components/ln-accordion/ln-accordion.schema.json +30 -30
  7. package/components/ln-accordion/src/ln-accordion.js +1 -0
  8. package/components/ln-ajax/ln-ajax-dev.scss +8 -8
  9. package/components/ln-ajax/ln-ajax.js +1 -1
  10. package/components/ln-ajax/ln-ajax.schema.json +30 -30
  11. package/components/ln-api-connector/ln-api-connector.js +1 -1
  12. package/components/ln-api-connector/ln-api-connector.schema.json +96 -96
  13. package/components/ln-api-connector/src/ln-api-connector.js +1 -0
  14. package/components/ln-api-queue/ln-api-queue.js +1 -1
  15. package/components/ln-api-queue/ln-api-queue.schema.json +34 -34
  16. package/components/ln-api-queue/src/ln-api-queue.js +3 -13
  17. package/components/ln-autoresize/ln-autoresize-dev.scss +8 -8
  18. package/components/ln-autoresize/ln-autoresize.js +1 -1
  19. package/components/ln-autoresize/ln-autoresize.schema.json +22 -22
  20. package/components/ln-autosave/ln-autosave-dev.scss +13 -13
  21. package/components/ln-autosave/ln-autosave.js +1 -1
  22. package/components/ln-autosave/ln-autosave.schema.json +48 -48
  23. package/components/ln-autosave/src/autosave-model.js +34 -34
  24. package/components/ln-chart/ln-chart.js +1 -1
  25. package/components/ln-chart/ln-chart.schema.json +146 -146
  26. package/components/ln-chart/src/chart-model.js +154 -154
  27. package/components/ln-circular-progress/ln-circular-progress.js +1 -1
  28. package/components/ln-circular-progress/ln-circular-progress.schema.json +42 -42
  29. package/components/ln-confirm/ln-confirm-dev.scss +24 -24
  30. package/components/ln-confirm/ln-confirm.js +1 -1
  31. package/components/ln-confirm/ln-confirm.schema.json +66 -66
  32. package/components/ln-confirm/src/ln-confirm.js +178 -178
  33. package/components/ln-core/crypto.js +286 -265
  34. package/components/ln-core/dom.js +115 -115
  35. package/components/ln-core/form.js +136 -136
  36. package/components/ln-core/helpers.js +33 -33
  37. package/components/ln-core/http.js +48 -48
  38. package/components/ln-core/index.js +1 -1
  39. package/components/ln-core/ln-core.schema.json +109 -109
  40. package/components/ln-core/locale.js +55 -55
  41. package/components/ln-core/matching.js +78 -78
  42. package/components/ln-core/number.js +125 -125
  43. package/components/ln-core/template.js +206 -206
  44. package/components/ln-couchdb-connector/README.md +4 -0
  45. package/components/ln-couchdb-connector/ln-couchdb-connector.js +1 -1
  46. package/components/ln-couchdb-connector/ln-couchdb-connector.schema.json +50 -50
  47. package/components/ln-couchdb-connector/src/ln-couchdb-connector.js +19 -1
  48. package/components/ln-data-coordinator/README.md +9 -38
  49. package/components/ln-data-coordinator/ln-data-coordinator-dev.scss +8 -8
  50. package/components/ln-data-coordinator/ln-data-coordinator.js +1 -1
  51. package/components/ln-data-coordinator/ln-data-coordinator.schema.json +16 -16
  52. package/components/ln-data-coordinator/src/data-read-policy.js +0 -7
  53. package/components/ln-data-coordinator/src/ln-data-coordinator.js +428 -1299
  54. package/components/ln-data-store/README.md +3 -2
  55. package/components/ln-data-store/ln-data-store-dev.scss +13 -13
  56. package/components/ln-data-store/ln-data-store.js +1 -1
  57. package/components/ln-data-store/ln-data-store.schema.json +84 -84
  58. package/components/ln-data-store/src/data-store-model.js +184 -155
  59. package/components/ln-data-store/src/ln-data-store.js +58 -11
  60. package/components/ln-date/README.md +4 -0
  61. package/components/ln-date/ln-date.js +1 -1
  62. package/components/ln-date/ln-date.schema.json +92 -92
  63. package/components/ln-date/src/date-model.js +186 -186
  64. package/components/ln-date/src/ln-date.js +3 -3
  65. package/components/ln-debug/ln-debug.js +1 -1
  66. package/components/ln-debug/ln-debug.schema.json +28 -28
  67. package/components/ln-debug/src/console-sink.js +19 -19
  68. package/components/ln-debug/src/gate.js +95 -95
  69. package/components/ln-debug/src/generated-attributes.js +2 -2
  70. package/components/ln-dropdown/ln-dropdown-dev.scss +13 -13
  71. package/components/ln-dropdown/ln-dropdown.js +1 -1
  72. package/components/ln-dropdown/ln-dropdown.schema.json +90 -90
  73. package/components/ln-editor/ln-editor.js +1 -1
  74. package/components/ln-editor/ln-editor.schema.json +58 -58
  75. package/components/ln-external-links/ln-external-links.js +1 -1
  76. package/components/ln-external-links/ln-external-links.schema.json +18 -18
  77. package/components/ln-fill/ln-fill.js +1 -1
  78. package/components/ln-fill/ln-fill.schema.json +23 -23
  79. package/components/ln-filter/ln-filter.js +1 -1
  80. package/components/ln-filter/ln-filter.schema.json +153 -153
  81. package/components/ln-filter/src/filter-model.js +185 -185
  82. package/components/ln-form/ln-form-dev.scss +8 -8
  83. package/components/ln-form/ln-form.js +1 -1
  84. package/components/ln-form/ln-form.schema.json +45 -45
  85. package/components/ln-http/ln-http.js +1 -1
  86. package/components/ln-http/ln-http.schema.json +6 -6
  87. package/components/ln-icon/ln-icon.schema.json +6 -6
  88. package/components/ln-include/ln-include.js +1 -1
  89. package/components/ln-include/ln-include.schema.json +23 -23
  90. package/components/ln-key/ln-key-dev.scss +18 -18
  91. package/components/ln-key/ln-key.js +1 -1
  92. package/components/ln-key/ln-key.schema.json +56 -56
  93. package/components/ln-key/src/ln-key.js +10 -10
  94. package/components/ln-link/ln-link-dev.scss +8 -8
  95. package/components/ln-link/ln-link.js +1 -1
  96. package/components/ln-link/ln-link.schema.json +22 -22
  97. package/components/ln-list/README.md +152 -152
  98. package/components/ln-list/ln-list-dev.scss +8 -8
  99. package/components/ln-list/ln-list.js +1 -1
  100. package/components/ln-list/ln-list.schema.json +166 -166
  101. package/components/ln-list/src/ln-list.js +4 -4
  102. package/components/ln-modal/README.md +4 -6
  103. package/components/ln-modal/ln-modal.js +1 -1
  104. package/components/ln-modal/ln-modal.schema.json +65 -65
  105. package/components/ln-modal/src/ln-modal.js +28 -8
  106. package/components/ln-nav/ln-nav.js +1 -1
  107. package/components/ln-nav/ln-nav.schema.json +25 -25
  108. package/components/ln-number/ln-number.js +1 -1
  109. package/components/ln-number/ln-number.schema.json +63 -63
  110. package/components/ln-number/src/number-model.js +31 -31
  111. package/components/ln-obfuscator/README.md +60 -60
  112. package/components/ln-obfuscator/ln-obfuscator.js +1 -1
  113. package/components/ln-obfuscator/ln-obfuscator.schema.json +49 -49
  114. package/components/ln-obfuscator/src/ln-obfuscator.js +159 -159
  115. package/components/ln-obfuscator/src/obfuscator-model.js +250 -250
  116. package/components/ln-options/ln-options.js +1 -1
  117. package/components/ln-options/ln-options.schema.json +41 -41
  118. package/components/ln-options/src/ln-options.js +1 -0
  119. package/components/ln-persist/README.md +151 -151
  120. package/components/ln-persist/ln-persist.js +1 -1
  121. package/components/ln-persist/ln-persist.schema.json +28 -28
  122. package/components/ln-persist/src/ln-persist.js +83 -83
  123. package/components/ln-picklist/README.md +230 -230
  124. package/components/ln-picklist/ln-picklist-dev.scss +22 -22
  125. package/components/ln-picklist/ln-picklist.js +1 -1
  126. package/components/ln-picklist/ln-picklist.schema.json +49 -49
  127. package/components/ln-picklist/src/ln-picklist.js +228 -228
  128. package/components/ln-popover/README.md +4 -0
  129. package/components/ln-popover/ln-popover-dev.scss +13 -13
  130. package/components/ln-popover/ln-popover.js +1 -1
  131. package/components/ln-popover/ln-popover.schema.json +82 -82
  132. package/components/ln-popover/src/ln-popover.js +9 -0
  133. package/components/ln-progress/ln-progress-dev.scss +8 -8
  134. package/components/ln-progress/ln-progress.js +1 -1
  135. package/components/ln-progress/ln-progress.schema.json +40 -40
  136. package/components/ln-router/ln-router.js +1 -1
  137. package/components/ln-router/ln-router.schema.json +76 -76
  138. package/components/ln-scroll/README.md +45 -45
  139. package/components/ln-scroll/ln-scroll.js +1 -1
  140. package/components/ln-scroll/ln-scroll.schema.json +85 -85
  141. package/components/ln-scroll/src/ln-scroll.js +150 -150
  142. package/components/ln-search/README.md +188 -188
  143. package/components/ln-search/ln-search.js +1 -1
  144. package/components/ln-search/ln-search.schema.json +103 -103
  145. package/components/ln-slug/ln-slug.js +1 -1
  146. package/components/ln-slug/ln-slug.schema.json +23 -23
  147. package/components/ln-sort/ln-sort.js +1 -1
  148. package/components/ln-sort/ln-sort.schema.json +104 -104
  149. package/components/ln-sort/src/ln-sort.js +321 -321
  150. package/components/ln-sort/src/sort-model.js +117 -117
  151. package/components/ln-sortable/ln-sortable-dev.scss +13 -13
  152. package/components/ln-sortable/ln-sortable.js +1 -1
  153. package/components/ln-sortable/ln-sortable.schema.json +36 -36
  154. package/components/ln-stat/ln-stat-dev.scss +8 -8
  155. package/components/ln-stat/ln-stat.js +1 -1
  156. package/components/ln-stat/ln-stat.schema.json +32 -32
  157. package/components/ln-stat/src/stat-model.js +28 -28
  158. package/components/ln-table/ln-table.js +1 -1
  159. package/components/ln-table/ln-table.schema.json +211 -211
  160. package/components/ln-table/src/ln-table.js +2 -0
  161. package/components/ln-table/src/table-model.js +98 -98
  162. package/components/ln-table-coordinator/ln-table-coordinator.js +1 -1
  163. package/components/ln-table-coordinator/ln-table-coordinator.schema.json +93 -93
  164. package/components/ln-table-coordinator/src/ln-table-coordinator.js +3 -3
  165. package/components/ln-tabs/README.md +2 -2
  166. package/components/ln-tabs/ln-tabs.js +1 -1
  167. package/components/ln-tabs/ln-tabs.schema.json +75 -75
  168. package/components/ln-tabs/src/ln-tabs.js +208 -207
  169. package/components/ln-tabs/src/tabs-model.js +82 -82
  170. package/components/ln-time/ln-time-dev.scss +13 -13
  171. package/components/ln-time/ln-time.js +1 -1
  172. package/components/ln-time/ln-time.schema.json +38 -38
  173. package/components/ln-toast/ln-toast.js +1 -1
  174. package/components/ln-toast/ln-toast.schema.json +65 -65
  175. package/components/ln-toggle/ln-toggle.js +1 -1
  176. package/components/ln-toggle/ln-toggle.schema.json +52 -52
  177. package/components/ln-tooltip/ln-tooltip.js +1 -1
  178. package/components/ln-tooltip/ln-tooltip.schema.json +86 -86
  179. package/components/ln-translations/ln-translations.js +1 -1
  180. package/components/ln-translations/ln-translations.schema.json +120 -120
  181. package/components/ln-ui-coordinator/README.md +62 -62
  182. package/components/ln-ui-coordinator/ln-ui-coordinator.js +1 -1
  183. package/components/ln-ui-coordinator/ln-ui-coordinator.schema.json +28 -28
  184. package/components/ln-ui-coordinator/src/ln-ui-coordinator.js +140 -140
  185. package/components/ln-upload/ln-upload.js +1 -1
  186. package/components/ln-upload/ln-upload.schema.json +193 -193
  187. package/components/ln-upload/src/upload-model.js +78 -78
  188. package/components/ln-validate/ln-validate.js +1 -1
  189. package/components/ln-validate/ln-validate.schema.json +50 -50
  190. package/components/ln-validate/src/validate-model.js +64 -64
  191. package/components/ln-websocket-connector/README.md +166 -166
  192. package/components/ln-websocket-connector/ln-websocket-connector.js +1 -1
  193. package/components/ln-websocket-connector/ln-websocket-connector.schema.json +29 -29
  194. package/components/ln-websocket-connector/src/ln-websocket-connector.js +283 -279
  195. package/ln-ashlar.html-data.json +7 -8
  196. package/package.json +84 -84
  197. package/theme/brand.css +73 -73
  198. package/theme/components/_confirm.scss +6 -6
  199. package/theme/components/_picklist.scss +3 -3
  200. package/theme/config/_palette.scss +274 -274
  201. package/theme/config/_theme.scss +292 -292
  202. package/theme/config/_tokens.scss +285 -285
  203. package/theme/config/mixins/_index.scss +62 -62
  204. package/theme/config/mixins/_picklist.scss +66 -66
  205. package/theme/ln-ashlar-dev.scss +66 -66
  206. package/theme/ln-ashlar-landing.scss +56 -56
  207. package/theme/ln-ashlar-theme.scss +63 -63
  208. package/theme/presentation/_bento.scss +151 -151
  209. package/theme/presentation/_cta.scss +111 -111
  210. package/theme/presentation/_effects.scss +216 -216
  211. package/theme/presentation/_features.scss +108 -108
  212. package/theme/presentation/_footer.scss +129 -129
  213. package/theme/presentation/_hero.scss +158 -158
  214. package/theme/presentation/_layout.scss +170 -170
  215. package/theme/presentation/_navbar.scss +140 -140
  216. package/theme/presentation/_pricing.scss +262 -262
  217. package/theme/presentation/_stats.scss +87 -87
  218. package/theme/presentation/_testimonials.scss +124 -124
  219. package/theme/presentation/_tokens.scss +39 -39
  220. package/theme/presentation/_typography.scss +163 -163
  221. package/web-types.json +12 -12
@@ -1,207 +1,208 @@
1
- /* Live Networks - lnTabs (hash-aware tabs — supports <button> and <a href="#nsKey:key"> triggers) */
2
- import { dispatch, dispatchCancelable, hashGet, hashLinkClick, hashSet, registerComponent, attrSpec, defineAttrs, attrBool } from '../../ln-core';
3
- import { deriveKeyFromTrigger, determineTabsMode, resolveActiveTabKey } from './tabs-model.js';
4
-
5
- (function () {
6
- const DOM_SELECTOR = "data-ln-tabs";
7
- const DOM_ATTRIBUTE = "lnTabs";
8
-
9
- if (window[DOM_ATTRIBUTE] !== undefined && window[DOM_ATTRIBUTE] !== null) return;
10
-
11
- function _syncActive(el) {
12
- const key = el.getAttribute('data-ln-tabs-active');
13
- if (el[DOM_ATTRIBUTE]) el[DOM_ATTRIBUTE]._applyActive(key);
14
- }
15
-
16
- function _readTabsKey(el, name) { return (el.getAttribute(name) || el.id || '').toLowerCase().trim(); }
17
-
18
- // ─── Attribute Contract (SSOT) ──────────────────────────
19
- const ATTRIBUTES = {
20
- 'data-ln-tabs': { type: 'marker', description: 'Mounts lnTabs component instance on tabs container' },
21
- 'data-ln-tabs-active': { effect: _syncActive, type: 'string', description: 'Active tab key identifier' },
22
- 'data-ln-tabs-default': { type: 'string', description: 'Default fallback tab key when none selected' },
23
- 'data-ln-tabs-focus': { prop: 'autoFocus', read: attrBool, type: 'boolean', fallback: true, description: 'Whether to shift focus to newly activated tab panel' },
24
- 'data-ln-tabs-key': { prop: 'nsKey', read: _readTabsKey, type: 'string', description: 'Hash namespace key for URL hash synchronization' },
25
- 'data-ln-tab': { type: 'string', description: 'Tab trigger key identifier' },
26
- 'data-ln-panel': { type: 'string', description: 'Tab content panel key identifier matching corresponding tab' }
27
- };
28
-
29
- const ATTR_SPEC = attrSpec(ATTRIBUTES);
30
-
31
- function _component(dom) { this.dom = dom; defineAttrs(this, dom, ATTR_SPEC); this.activeKey = null; _init.call(this); return this; }
32
-
33
- function _init() {
34
- this.tabs = Array.from(this.dom.querySelectorAll("[data-ln-tab]"));
35
- this.panels = Array.from(this.dom.querySelectorAll("[data-ln-panel]"));
36
-
37
- const triggerDescriptors = this.tabs.map(t => ({
38
- tagName: t.tagName,
39
- href: t.getAttribute('href')
40
- }));
41
- const modeInfo = determineTabsMode(triggerDescriptors, this.nsKey);
42
- this.hashEnabled = modeInfo.hashEnabled;
43
-
44
- if (modeInfo.warning === 'mixed') {
45
- console.warn('[ln-tabs] Mixed <a href="#…"> and <button> triggers in one group — using persist mode. Pick one: anchors for URL hash, buttons for localStorage persist.', this.dom);
46
- } else if (modeInfo.warning === 'missing-namespace') {
47
- console.warn('[ln-tabs] Anchor triggers need a hash namespace — add id or data-ln-tabs-key to the wrapper. Falling back to non-hash mode.', this.dom);
48
- }
49
-
50
- this.mapTabs = {};
51
- this.mapPanels = {};
52
- for (const t of this.tabs) {
53
- const key = deriveKeyFromTrigger(t.getAttribute('data-ln-tab'), t.tagName, t.getAttribute('href'), this.nsKey);
54
- if (key) {
55
- this.mapTabs[key] = t;
56
- } else {
57
- console.warn('[ln-tabs] Trigger has no resolvable key — needs `data-ln-tab="key"` or `<a href="#…">`.', t);
58
- }
59
- }
60
- for (const p of this.panels) {
61
- const key = (p.getAttribute("data-ln-panel") || "").toLowerCase().trim();
62
- if (key) this.mapPanels[key] = p;
63
- }
64
-
65
- // Not a pure attribute mirror: falls back to the first tab key, which
66
- // only exists once mapTabs is built. A reader cannot reach instance state.
67
- this.defaultKey = (this.dom.getAttribute("data-ln-tabs-default") || "").toLowerCase().trim()
68
- || Object.keys(this.mapTabs)[0] || "";
69
-
70
- const self = this;
71
- this._clickHandlers = [];
72
- for (const t of this.tabs) {
73
- if (t[DOM_ATTRIBUTE + 'Trigger']) continue;
74
- const handler = function (e) {
75
- const isAnchor = t.tagName === "A";
76
- if (!isAnchor && (e.ctrlKey || e.metaKey || e.button === 1)) return;
77
- const key = deriveKeyFromTrigger(t.getAttribute('data-ln-tab'), t.tagName, t.getAttribute('href'), self.nsKey);
78
- if (!key) return;
79
- if (isAnchor && !hashLinkClick(e)) return;
80
- if (self.hashEnabled) {
81
- if (hashGet(self.nsKey) === key) self.dom.setAttribute('data-ln-tabs-active', key);
82
- else hashSet(self.nsKey, key);
83
- } else {
84
- self.dom.setAttribute('data-ln-tabs-active', key);
85
- }
86
- };
87
- t.addEventListener("click", handler);
88
- t[DOM_ATTRIBUTE + 'Trigger'] = handler;
89
- self._clickHandlers.push({ el: t, handler: handler });
90
- }
91
-
92
- this._onRequestSelect = function (e) {
93
- const key = e.detail && (e.detail.key || e.detail.tab);
94
- if (key) self.select(key);
95
- };
96
- this.dom.addEventListener('ln-tabs:request-select', this._onRequestSelect);
97
-
98
- this._hashHandler = function () {
99
- if (!self.hashEnabled) return;
100
- const val = hashGet(self.nsKey);
101
- self.dom.setAttribute('data-ln-tabs-active', val !== null ? val : self.defaultKey);
102
- };
103
-
104
- if (this.hashEnabled) {
105
- window.addEventListener("hashchange", this._hashHandler);
106
- this._hashHandler();
107
- } else {
108
- const initialKey = resolveActiveTabKey(this.dom.getAttribute('data-ln-tabs-active'), Object.keys(this.mapPanels), this.defaultKey);
109
- this.dom.setAttribute('data-ln-tabs-active', initialKey);
110
- }
111
- }
112
-
113
- _component.prototype.select = function (key) {
114
- const k = (key + '').toLowerCase().trim();
115
- if (!k) return;
116
- if (this.hashEnabled) {
117
- if (hashGet(this.nsKey) === k) this.dom.setAttribute('data-ln-tabs-active', k);
118
- else hashSet(this.nsKey, k);
119
- } else {
120
- this.dom.setAttribute('data-ln-tabs-active', k);
121
- }
122
- };
123
-
124
- _component.prototype._applyActive = function (key) {
125
- key = resolveActiveTabKey(key, Object.keys(this.mapPanels), this.defaultKey);
126
- if (key === this.activeKey) return;
127
-
128
- const prevKey = this.activeKey;
129
- if (prevKey !== null) {
130
- const before = dispatchCancelable(this.dom, 'ln-tabs:before-change', {
131
- key: key,
132
- previousKey: prevKey,
133
- tab: this.mapTabs[key],
134
- panel: this.mapPanels[key],
135
- target: this.dom
136
- });
137
- if (before.defaultPrevented) {
138
- if (prevKey in this.mapPanels) {
139
- this.dom.setAttribute('data-ln-tabs-active', prevKey);
140
- if (this.hashEnabled && hashGet(this.nsKey) !== prevKey) {
141
- hashSet(this.nsKey, prevKey);
142
- }
143
- }
144
- return;
145
- }
146
- }
147
-
148
- this.activeKey = key;
149
-
150
- for (const k in this.mapTabs) {
151
- const btn = this.mapTabs[k];
152
- if (k === key) {
153
- btn.setAttribute("data-active", "");
154
- btn.setAttribute("aria-selected", "true");
155
- } else {
156
- btn.removeAttribute("data-active");
157
- btn.setAttribute("aria-selected", "false");
158
- }
159
- }
160
- for (const k in this.mapPanels) {
161
- const panel = this.mapPanels[k];
162
- const show = (k === key);
163
- panel.classList.toggle("hidden", !show);
164
- panel.setAttribute("aria-hidden", show ? "false" : "true");
165
- }
166
- if (this.autoFocus) {
167
- const first = this.mapPanels[key]?.querySelector('input,button,select,textarea,[tabindex]:not([tabindex="-1"])');
168
- if (first) setTimeout(() => first.focus({ preventScroll: true }), 0);
169
- }
170
- dispatch(this.dom, 'ln-tabs:change', {
171
- key: key,
172
- previousKey: prevKey,
173
- tab: this.mapTabs[key],
174
- panel: this.mapPanels[key],
175
- target: this.dom
176
- });
177
- };
178
-
179
- _component.prototype.destroy = function () {
180
- if (!this.dom[DOM_ATTRIBUTE]) return;
181
- this.dom.removeEventListener('ln-tabs:request-select', this._onRequestSelect);
182
- for (const { el, handler } of this._clickHandlers) {
183
- el.removeEventListener("click", handler);
184
- delete el[DOM_ATTRIBUTE + 'Trigger'];
185
- }
186
- if (this.hashEnabled) {
187
- window.removeEventListener("hashchange", this._hashHandler);
188
- }
189
- delete this.dom[DOM_ATTRIBUTE];
190
- };
191
-
192
- // ─── Init ──────────────────────────────────────────────────
193
-
194
- registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-tabs', {
195
- attributes: ATTRIBUTES,
196
- persist: {
197
- attr: 'data-ln-tabs-active',
198
- hashActive: function (el) {
199
- const triggers = Array.from(el.querySelectorAll('[data-ln-tab]')).map(function (t) {
200
- return { tagName: t.tagName, href: t.getAttribute('href') };
201
- });
202
- const nsKey = (el.getAttribute('data-ln-tabs-key') || el.id || '').toLowerCase().trim();
203
- return determineTabsMode(triggers, nsKey).hashEnabled;
204
- }
205
- }
206
- });
207
- })();
1
+ /* Live Networks - lnTabs (hash-aware tabs — supports <button> and <a href="#nsKey:key"> triggers) */
2
+ import { dispatch, dispatchCancelable, hashGet, hashLinkClick, hashSet, registerComponent, attrSpec, defineAttrs, attrBool } from '../../ln-core';
3
+ import { deriveKeyFromTrigger, determineTabsMode, resolveActiveTabKey } from './tabs-model.js';
4
+
5
+ (function () {
6
+ const DOM_SELECTOR = "data-ln-tabs";
7
+ const DOM_ATTRIBUTE = "lnTabs";
8
+
9
+ if (window[DOM_ATTRIBUTE] !== undefined && window[DOM_ATTRIBUTE] !== null) return;
10
+
11
+ function _syncActive(el) {
12
+ const key = el.getAttribute('data-ln-tabs-active');
13
+ if (el[DOM_ATTRIBUTE]) el[DOM_ATTRIBUTE]._applyActive(key);
14
+ }
15
+
16
+ function _readTabsKey(el, name) { return (el.getAttribute(name) || el.id || '').toLowerCase().trim(); }
17
+
18
+ // ─── Attribute Contract (SSOT) ──────────────────────────
19
+ const ATTRIBUTES = {
20
+ 'data-ln-tabs': { type: 'marker', description: 'Mounts lnTabs component instance on tabs container' },
21
+ 'data-ln-tabs-active': { effect: _syncActive, type: 'string', description: 'Active tab key identifier' },
22
+ 'data-ln-tabs-default': { type: 'string', description: 'Default fallback tab key when none selected' },
23
+ 'data-ln-tabs-focus': { prop: 'autoFocus', read: attrBool, type: 'boolean', fallback: true, description: 'Whether to shift focus to newly activated tab panel' },
24
+ 'data-ln-tabs-key': { prop: 'nsKey', read: _readTabsKey, type: 'string', description: 'Hash namespace key for URL hash synchronization' },
25
+ 'data-ln-tab': { type: 'string', description: 'Tab trigger key identifier' },
26
+ 'data-ln-panel': { type: 'string', description: 'Tab content panel key identifier matching corresponding tab' }
27
+ };
28
+
29
+ const ATTR_SPEC = attrSpec(ATTRIBUTES);
30
+
31
+ function _component(dom) { this.dom = dom; defineAttrs(this, dom, ATTR_SPEC); this.activeKey = null; _init.call(this); return this; }
32
+
33
+ function _init() {
34
+ this.tabs = Array.from(this.dom.querySelectorAll("[data-ln-tab]"));
35
+ this.panels = Array.from(this.dom.querySelectorAll("[data-ln-panel]"));
36
+
37
+ const triggerDescriptors = this.tabs.map(t => ({
38
+ tagName: t.tagName,
39
+ href: t.getAttribute('href')
40
+ }));
41
+ const modeInfo = determineTabsMode(triggerDescriptors, this.nsKey);
42
+ this.hashEnabled = modeInfo.hashEnabled;
43
+
44
+ if (modeInfo.warning === 'mixed') {
45
+ console.warn('[ln-tabs] Mixed <a href="#…"> and <button> triggers in one group — using persist mode. Pick one: anchors for URL hash, buttons for localStorage persist.', this.dom);
46
+ } else if (modeInfo.warning === 'missing-namespace') {
47
+ console.warn('[ln-tabs] Anchor triggers need a hash namespace — add id or data-ln-tabs-key to the wrapper. Falling back to non-hash mode.', this.dom);
48
+ }
49
+
50
+ this.mapTabs = {};
51
+ this.mapPanels = {};
52
+ for (const t of this.tabs) {
53
+ const key = deriveKeyFromTrigger(t.getAttribute('data-ln-tab'), t.tagName, t.getAttribute('href'), this.nsKey);
54
+ if (key) {
55
+ this.mapTabs[key] = t;
56
+ } else {
57
+ console.warn('[ln-tabs] Trigger has no resolvable key — needs `data-ln-tab="key"` or `<a href="#…">`.', t);
58
+ }
59
+ }
60
+ for (const p of this.panels) {
61
+ const key = (p.getAttribute("data-ln-panel") || "").toLowerCase().trim();
62
+ if (key) this.mapPanels[key] = p;
63
+ }
64
+
65
+ // Not a pure attribute mirror: falls back to the first tab key, which
66
+ // only exists once mapTabs is built. A reader cannot reach instance state.
67
+ this.defaultKey = (this.dom.getAttribute("data-ln-tabs-default") || "").toLowerCase().trim()
68
+ || Object.keys(this.mapTabs)[0] || "";
69
+
70
+ const self = this;
71
+ this._clickHandlers = [];
72
+ for (const t of this.tabs) {
73
+ if (t[DOM_ATTRIBUTE + 'Trigger']) continue;
74
+ const handler = function (e) {
75
+ const isAnchor = t.tagName === "A";
76
+ if (!isAnchor && (e.ctrlKey || e.metaKey || e.button === 1)) return;
77
+ const key = deriveKeyFromTrigger(t.getAttribute('data-ln-tab'), t.tagName, t.getAttribute('href'), self.nsKey);
78
+ if (!key) return;
79
+ if (isAnchor && !hashLinkClick(e)) return;
80
+ if (self.hashEnabled) {
81
+ if (hashGet(self.nsKey) === key) self.dom.setAttribute('data-ln-tabs-active', key);
82
+ else hashSet(self.nsKey, key);
83
+ } else {
84
+ self.dom.setAttribute('data-ln-tabs-active', key);
85
+ }
86
+ };
87
+ t.addEventListener("click", handler);
88
+ t[DOM_ATTRIBUTE + 'Trigger'] = handler;
89
+ self._clickHandlers.push({ el: t, handler: handler });
90
+ }
91
+
92
+ this._onRequestSelect = function (e) {
93
+ const key = e.detail && (e.detail.key || e.detail.tab);
94
+ if (key) self.select(key);
95
+ };
96
+ this.dom.addEventListener('ln-tabs:request-select', this._onRequestSelect);
97
+
98
+ this._hashHandler = function () {
99
+ if (!self.hashEnabled) return;
100
+ const val = hashGet(self.nsKey);
101
+ self.dom.setAttribute('data-ln-tabs-active', val !== null ? val : self.defaultKey);
102
+ };
103
+
104
+ if (this.hashEnabled) {
105
+ window.addEventListener("hashchange", this._hashHandler);
106
+ this._hashHandler();
107
+ } else {
108
+ const initialKey = resolveActiveTabKey(this.dom.getAttribute('data-ln-tabs-active'), Object.keys(this.mapPanels), this.defaultKey);
109
+ this.dom.setAttribute('data-ln-tabs-active', initialKey);
110
+ }
111
+ }
112
+
113
+ _component.prototype.select = function (key) {
114
+ const k = (key + '').toLowerCase().trim();
115
+ if (!k) return;
116
+ if (this.hashEnabled) {
117
+ if (hashGet(this.nsKey) === k) this.dom.setAttribute('data-ln-tabs-active', k);
118
+ else hashSet(this.nsKey, k);
119
+ } else {
120
+ this.dom.setAttribute('data-ln-tabs-active', k);
121
+ }
122
+ };
123
+
124
+ _component.prototype._applyActive = function (key) {
125
+ key = resolveActiveTabKey(key, Object.keys(this.mapPanels), this.defaultKey);
126
+ if (key === this.activeKey) return;
127
+
128
+ const prevKey = this.activeKey;
129
+ if (prevKey !== null) {
130
+ const before = dispatchCancelable(this.dom, 'ln-tabs:before-change', {
131
+ key: key,
132
+ previousKey: prevKey,
133
+ tab: this.mapTabs[key],
134
+ panel: this.mapPanels[key],
135
+ target: this.dom
136
+ });
137
+ if (before.defaultPrevented) {
138
+ if (prevKey in this.mapPanels) {
139
+ this.dom.setAttribute('data-ln-tabs-active', prevKey);
140
+ if (this.hashEnabled && hashGet(this.nsKey) !== prevKey) {
141
+ hashSet(this.nsKey, prevKey);
142
+ }
143
+ }
144
+ return;
145
+ }
146
+ }
147
+
148
+ this.activeKey = key;
149
+
150
+ for (const k in this.mapTabs) {
151
+ const btn = this.mapTabs[k];
152
+ if (k === key) {
153
+ btn.setAttribute("data-active", "");
154
+ btn.setAttribute("aria-selected", "true");
155
+ } else {
156
+ btn.removeAttribute("data-active");
157
+ btn.setAttribute("aria-selected", "false");
158
+ }
159
+ }
160
+ for (const k in this.mapPanels) {
161
+ const panel = this.mapPanels[k];
162
+ const show = (k === key);
163
+ panel.hidden = !show;
164
+ panel.classList.toggle("hidden", !show);
165
+ panel.setAttribute("aria-hidden", show ? "false" : "true");
166
+ }
167
+ if (this.autoFocus) {
168
+ const first = this.mapPanels[key]?.querySelector('input,button,select,textarea,[tabindex]:not([tabindex="-1"])');
169
+ if (first) setTimeout(() => first.focus({ preventScroll: true }), 0);
170
+ }
171
+ dispatch(this.dom, 'ln-tabs:change', {
172
+ key: key,
173
+ previousKey: prevKey,
174
+ tab: this.mapTabs[key],
175
+ panel: this.mapPanels[key],
176
+ target: this.dom
177
+ });
178
+ };
179
+
180
+ _component.prototype.destroy = function () {
181
+ if (!this.dom[DOM_ATTRIBUTE]) return;
182
+ this.dom.removeEventListener('ln-tabs:request-select', this._onRequestSelect);
183
+ for (const { el, handler } of this._clickHandlers) {
184
+ el.removeEventListener("click", handler);
185
+ delete el[DOM_ATTRIBUTE + 'Trigger'];
186
+ }
187
+ if (this.hashEnabled) {
188
+ window.removeEventListener("hashchange", this._hashHandler);
189
+ }
190
+ delete this.dom[DOM_ATTRIBUTE];
191
+ };
192
+
193
+ // ─── Init ──────────────────────────────────────────────────
194
+
195
+ registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-tabs', {
196
+ attributes: ATTRIBUTES,
197
+ persist: {
198
+ attr: 'data-ln-tabs-active',
199
+ hashActive: function (el) {
200
+ const triggers = Array.from(el.querySelectorAll('[data-ln-tab]')).map(function (t) {
201
+ return { tagName: t.tagName, href: t.getAttribute('href') };
202
+ });
203
+ const nsKey = (el.getAttribute('data-ln-tabs-key') || el.id || '').toLowerCase().trim();
204
+ return determineTabsMode(triggers, nsKey).hashEnabled;
205
+ }
206
+ }
207
+ });
208
+ })();
@@ -1,82 +1,82 @@
1
- /**
2
- * Derives a tab key from an explicit attribute or anchor href hash fragment.
3
- * @param {string|null} explicitTabAttr
4
- * @param {string} tagName
5
- * @param {string|null} href
6
- * @param {string|null} [nsKey]
7
- * @returns {string}
8
- */
9
- export function deriveKeyFromTrigger(explicitTabAttr, tagName, href, nsKey) {
10
- const explicit = (explicitTabAttr || '').toLowerCase().trim();
11
- if (explicit) return explicit;
12
-
13
- if ((tagName || '').toUpperCase() !== 'A') return '';
14
-
15
- const rawHref = href || '';
16
- if (!rawHref.startsWith('#')) return '';
17
-
18
- const raw = rawHref.slice(1);
19
- if (!raw) return '';
20
-
21
- const fragments = raw.split('&');
22
- const normalizedNs = (nsKey || '').toLowerCase().trim();
23
-
24
- if (normalizedNs) {
25
- for (const frag of fragments) {
26
- const sep = frag.indexOf(':');
27
- if (sep > 0 && frag.slice(0, sep).toLowerCase().trim() === normalizedNs) {
28
- return frag.slice(sep + 1).toLowerCase().trim();
29
- }
30
- }
31
- }
32
-
33
- const last = fragments[fragments.length - 1] || '';
34
- const sep = last.indexOf(':');
35
- return (sep > 0 ? last.slice(sep + 1) : last).toLowerCase().trim();
36
- }
37
-
38
- /**
39
- * Determines whether tabs should use URL hash sync mode or local persist mode.
40
- * @param {Array<{ tagName: string, href?: string|null }>} triggers
41
- * @param {string|null} nsKey
42
- * @returns {{ hashEnabled: boolean, warning: 'mixed' | 'missing-namespace' | null }}
43
- */
44
- export function determineTabsMode(triggers, nsKey) {
45
- if (!Array.isArray(triggers) || triggers.length === 0) {
46
- return { hashEnabled: false, warning: null };
47
- }
48
-
49
- const anchorTabs = triggers.filter(
50
- t => (t.tagName || '').toUpperCase() === 'A' && (t.href || '').startsWith('#')
51
- );
52
- const allAnchors = anchorTabs.length > 0 && anchorTabs.length === triggers.length;
53
- const normalizedNs = (nsKey || '').toLowerCase().trim();
54
-
55
- if (anchorTabs.length > 0 && anchorTabs.length !== triggers.length) {
56
- return { hashEnabled: false, warning: 'mixed' };
57
- }
58
-
59
- if (allAnchors && !normalizedNs) {
60
- return { hashEnabled: false, warning: 'missing-namespace' };
61
- }
62
-
63
- return {
64
- hashEnabled: allAnchors && Boolean(normalizedNs),
65
- warning: null
66
- };
67
- }
68
-
69
- /**
70
- * Resolves the valid active key against registered panel keys with fallback.
71
- * @param {string|null} requestedKey
72
- * @param {string[]} validPanelKeys
73
- * @param {string} defaultKey
74
- * @returns {string}
75
- */
76
- export function resolveActiveTabKey(requestedKey, validPanelKeys, defaultKey) {
77
- const key = (requestedKey || '').toLowerCase().trim();
78
- if (key && Array.isArray(validPanelKeys) && validPanelKeys.includes(key)) {
79
- return key;
80
- }
81
- return (defaultKey || '').toLowerCase().trim();
82
- }
1
+ /**
2
+ * Derives a tab key from an explicit attribute or anchor href hash fragment.
3
+ * @param {string|null} explicitTabAttr
4
+ * @param {string} tagName
5
+ * @param {string|null} href
6
+ * @param {string|null} [nsKey]
7
+ * @returns {string}
8
+ */
9
+ export function deriveKeyFromTrigger(explicitTabAttr, tagName, href, nsKey) {
10
+ const explicit = (explicitTabAttr || '').toLowerCase().trim();
11
+ if (explicit) return explicit;
12
+
13
+ if ((tagName || '').toUpperCase() !== 'A') return '';
14
+
15
+ const rawHref = href || '';
16
+ if (!rawHref.startsWith('#')) return '';
17
+
18
+ const raw = rawHref.slice(1);
19
+ if (!raw) return '';
20
+
21
+ const fragments = raw.split('&');
22
+ const normalizedNs = (nsKey || '').toLowerCase().trim();
23
+
24
+ if (normalizedNs) {
25
+ for (const frag of fragments) {
26
+ const sep = frag.indexOf(':');
27
+ if (sep > 0 && frag.slice(0, sep).toLowerCase().trim() === normalizedNs) {
28
+ return frag.slice(sep + 1).toLowerCase().trim();
29
+ }
30
+ }
31
+ }
32
+
33
+ const last = fragments[fragments.length - 1] || '';
34
+ const sep = last.indexOf(':');
35
+ return (sep > 0 ? last.slice(sep + 1) : last).toLowerCase().trim();
36
+ }
37
+
38
+ /**
39
+ * Determines whether tabs should use URL hash sync mode or local persist mode.
40
+ * @param {Array<{ tagName: string, href?: string|null }>} triggers
41
+ * @param {string|null} nsKey
42
+ * @returns {{ hashEnabled: boolean, warning: 'mixed' | 'missing-namespace' | null }}
43
+ */
44
+ export function determineTabsMode(triggers, nsKey) {
45
+ if (!Array.isArray(triggers) || triggers.length === 0) {
46
+ return { hashEnabled: false, warning: null };
47
+ }
48
+
49
+ const anchorTabs = triggers.filter(
50
+ t => (t.tagName || '').toUpperCase() === 'A' && (t.href || '').startsWith('#')
51
+ );
52
+ const allAnchors = anchorTabs.length > 0 && anchorTabs.length === triggers.length;
53
+ const normalizedNs = (nsKey || '').toLowerCase().trim();
54
+
55
+ if (anchorTabs.length > 0 && anchorTabs.length !== triggers.length) {
56
+ return { hashEnabled: false, warning: 'mixed' };
57
+ }
58
+
59
+ if (allAnchors && !normalizedNs) {
60
+ return { hashEnabled: false, warning: 'missing-namespace' };
61
+ }
62
+
63
+ return {
64
+ hashEnabled: allAnchors && Boolean(normalizedNs),
65
+ warning: null
66
+ };
67
+ }
68
+
69
+ /**
70
+ * Resolves the valid active key against registered panel keys with fallback.
71
+ * @param {string|null} requestedKey
72
+ * @param {string[]} validPanelKeys
73
+ * @param {string} defaultKey
74
+ * @returns {string}
75
+ */
76
+ export function resolveActiveTabKey(requestedKey, validPanelKeys, defaultKey) {
77
+ const key = (requestedKey || '').toLowerCase().trim();
78
+ if (key && Array.isArray(validPanelKeys) && validPanelKeys.includes(key)) {
79
+ return key;
80
+ }
81
+ return (defaultKey || '').toLowerCase().trim();
82
+ }
@@ -1,13 +1,13 @@
1
- @use '../../theme/config/mixins' as *;
2
-
3
- [data-ln-debug] {
4
- // 1. Host Element Check: data-ln-time belongs on native <time> elements
5
- [data-ln-time]:not(time) {
6
- @include dev-inline-error("data-ln-time belongs on native <time> elements");
7
- }
8
-
9
- // 2. Datetime Attribute Check: <time data-ln-time> requires a datetime attribute
10
- time[data-ln-time]:not([datetime]) {
11
- @include dev-inline-error("<time data-ln-time> is missing required datetime attribute");
12
- }
13
- }
1
+ @use '../../theme/config/mixins' as *;
2
+
3
+ [data-ln-debug] {
4
+ // 1. Host Element Check: data-ln-time belongs on native <time> elements
5
+ [data-ln-time]:not(time) {
6
+ @include dev-inline-error("data-ln-time belongs on native <time> elements");
7
+ }
8
+
9
+ // 2. Datetime Attribute Check: <time data-ln-time> requires a datetime attribute
10
+ time[data-ln-time]:not([datetime]) {
11
+ @include dev-inline-error("<time data-ln-time> is missing required datetime attribute");
12
+ }
13
+ }