@livenetworks/ashlar 2.0.7 → 2.0.9

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 (213) 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-ajax/ln-ajax-dev.scss +8 -8
  8. package/components/ln-ajax/ln-ajax.js +1 -1
  9. package/components/ln-ajax/ln-ajax.schema.json +30 -30
  10. package/components/ln-api-connector/ln-api-connector.js +1 -1
  11. package/components/ln-api-connector/ln-api-connector.schema.json +9 -0
  12. package/components/ln-api-connector/src/ln-api-connector.js +2 -0
  13. package/components/ln-api-queue/ln-api-queue.js +1 -1
  14. package/components/ln-api-queue/ln-api-queue.schema.json +34 -34
  15. package/components/ln-api-queue/src/ln-api-queue.js +3 -13
  16. package/components/ln-autoresize/ln-autoresize-dev.scss +8 -8
  17. package/components/ln-autoresize/ln-autoresize.js +1 -1
  18. package/components/ln-autoresize/ln-autoresize.schema.json +22 -22
  19. package/components/ln-autosave/ln-autosave-dev.scss +13 -13
  20. package/components/ln-autosave/ln-autosave.js +1 -1
  21. package/components/ln-autosave/ln-autosave.schema.json +48 -48
  22. package/components/ln-autosave/src/autosave-model.js +34 -34
  23. package/components/ln-chart/ln-chart.js +1 -1
  24. package/components/ln-chart/ln-chart.schema.json +146 -146
  25. package/components/ln-chart/src/chart-model.js +154 -154
  26. package/components/ln-circular-progress/ln-circular-progress.js +1 -1
  27. package/components/ln-circular-progress/ln-circular-progress.schema.json +42 -42
  28. package/components/ln-confirm/ln-confirm-dev.scss +24 -24
  29. package/components/ln-confirm/ln-confirm.js +1 -1
  30. package/components/ln-confirm/ln-confirm.schema.json +66 -66
  31. package/components/ln-confirm/src/ln-confirm.js +178 -178
  32. package/components/ln-core/attrs.js +13 -0
  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 +146 -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/lifecycle.js +5 -0
  40. package/components/ln-core/ln-core.schema.json +3 -2
  41. package/components/ln-core/locale.js +55 -55
  42. package/components/ln-core/matching.js +78 -78
  43. package/components/ln-core/number.js +125 -125
  44. package/components/ln-core/template.js +206 -206
  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 +1 -0
  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 +432 -1308
  54. package/components/ln-data-store/ln-data-store-dev.scss +13 -13
  55. package/components/ln-data-store/ln-data-store.js +1 -1
  56. package/components/ln-data-store/ln-data-store.schema.json +84 -84
  57. package/components/ln-data-store/src/data-store-model.js +184 -184
  58. package/components/ln-data-store/src/ln-data-store.js +1 -1
  59. package/components/ln-date/ln-date.js +1 -1
  60. package/components/ln-date/ln-date.schema.json +92 -92
  61. package/components/ln-date/src/date-model.js +186 -186
  62. package/components/ln-debug/ln-debug.js +1 -1
  63. package/components/ln-debug/ln-debug.schema.json +28 -28
  64. package/components/ln-debug/src/console-sink.js +19 -19
  65. package/components/ln-debug/src/gate.js +95 -95
  66. package/components/ln-debug/src/generated-attributes.js +4 -2
  67. package/components/ln-dropdown/ln-dropdown-dev.scss +13 -13
  68. package/components/ln-dropdown/ln-dropdown.js +1 -1
  69. package/components/ln-dropdown/ln-dropdown.schema.json +90 -90
  70. package/components/ln-editor/ln-editor.js +1 -1
  71. package/components/ln-editor/ln-editor.schema.json +58 -58
  72. package/components/ln-external-links/ln-external-links.js +1 -1
  73. package/components/ln-external-links/ln-external-links.schema.json +18 -18
  74. package/components/ln-fill/ln-fill.js +1 -1
  75. package/components/ln-fill/ln-fill.schema.json +23 -23
  76. package/components/ln-filter/ln-filter.js +1 -1
  77. package/components/ln-filter/ln-filter.schema.json +153 -153
  78. package/components/ln-filter/src/filter-model.js +185 -185
  79. package/components/ln-form/ln-form-dev.scss +8 -8
  80. package/components/ln-form/ln-form.js +1 -1
  81. package/components/ln-form/ln-form.schema.json +6 -0
  82. package/components/ln-form/src/ln-form.js +21 -0
  83. package/components/ln-http/ln-http.js +1 -1
  84. package/components/ln-http/ln-http.schema.json +6 -6
  85. package/components/ln-icon/ln-icon.schema.json +6 -6
  86. package/components/ln-include/ln-include.js +1 -1
  87. package/components/ln-include/ln-include.schema.json +23 -23
  88. package/components/ln-key/ln-key-dev.scss +18 -18
  89. package/components/ln-key/ln-key.js +1 -1
  90. package/components/ln-key/ln-key.schema.json +56 -56
  91. package/components/ln-key/src/ln-key.js +10 -10
  92. package/components/ln-link/ln-link-dev.scss +8 -8
  93. package/components/ln-link/ln-link.js +1 -1
  94. package/components/ln-link/ln-link.schema.json +22 -22
  95. package/components/ln-list/README.md +152 -152
  96. package/components/ln-list/ln-list-dev.scss +8 -8
  97. package/components/ln-list/ln-list.js +1 -1
  98. package/components/ln-list/ln-list.schema.json +166 -166
  99. package/components/ln-modal/ln-modal.js +1 -1
  100. package/components/ln-modal/ln-modal.schema.json +65 -65
  101. package/components/ln-nav/ln-nav.js +1 -1
  102. package/components/ln-nav/ln-nav.schema.json +25 -25
  103. package/components/ln-number/ln-number.js +1 -1
  104. package/components/ln-number/ln-number.schema.json +63 -63
  105. package/components/ln-number/src/ln-number.js +26 -0
  106. package/components/ln-number/src/number-model.js +31 -31
  107. package/components/ln-obfuscator/README.md +60 -60
  108. package/components/ln-obfuscator/ln-obfuscator.js +1 -1
  109. package/components/ln-obfuscator/ln-obfuscator.schema.json +49 -49
  110. package/components/ln-obfuscator/src/ln-obfuscator.js +159 -159
  111. package/components/ln-obfuscator/src/obfuscator-model.js +250 -250
  112. package/components/ln-options/ln-options.js +1 -1
  113. package/components/ln-options/ln-options.schema.json +6 -0
  114. package/components/ln-options/src/ln-options.js +4 -4
  115. package/components/ln-persist/README.md +151 -151
  116. package/components/ln-persist/ln-persist.js +1 -1
  117. package/components/ln-persist/ln-persist.schema.json +28 -28
  118. package/components/ln-persist/src/ln-persist.js +83 -83
  119. package/components/ln-picklist/README.md +230 -230
  120. package/components/ln-picklist/ln-picklist-dev.scss +22 -22
  121. package/components/ln-picklist/ln-picklist.js +1 -1
  122. package/components/ln-picklist/ln-picklist.schema.json +49 -49
  123. package/components/ln-picklist/src/ln-picklist.js +228 -228
  124. package/components/ln-popover/ln-popover-dev.scss +13 -13
  125. package/components/ln-popover/ln-popover.js +1 -1
  126. package/components/ln-popover/ln-popover.schema.json +82 -82
  127. package/components/ln-progress/ln-progress-dev.scss +8 -8
  128. package/components/ln-progress/ln-progress.js +1 -1
  129. package/components/ln-progress/ln-progress.schema.json +40 -40
  130. package/components/ln-router/ln-router.js +1 -1
  131. package/components/ln-router/ln-router.schema.json +76 -76
  132. package/components/ln-scroll/README.md +45 -45
  133. package/components/ln-scroll/ln-scroll.js +1 -1
  134. package/components/ln-scroll/ln-scroll.schema.json +85 -85
  135. package/components/ln-scroll/src/ln-scroll.js +150 -150
  136. package/components/ln-search/README.md +188 -188
  137. package/components/ln-search/ln-search.js +1 -1
  138. package/components/ln-search/ln-search.schema.json +103 -103
  139. package/components/ln-slug/ln-slug.js +1 -1
  140. package/components/ln-slug/ln-slug.schema.json +23 -23
  141. package/components/ln-slug/src/ln-slug.js +25 -1
  142. package/components/ln-sort/ln-sort.js +1 -1
  143. package/components/ln-sort/ln-sort.schema.json +104 -104
  144. package/components/ln-sort/src/ln-sort.js +321 -321
  145. package/components/ln-sort/src/sort-model.js +117 -117
  146. package/components/ln-sortable/ln-sortable-dev.scss +13 -13
  147. package/components/ln-sortable/ln-sortable.js +1 -1
  148. package/components/ln-sortable/ln-sortable.schema.json +36 -36
  149. package/components/ln-stat/ln-stat-dev.scss +8 -8
  150. package/components/ln-stat/ln-stat.js +1 -1
  151. package/components/ln-stat/ln-stat.schema.json +32 -32
  152. package/components/ln-stat/src/stat-model.js +28 -28
  153. package/components/ln-table/ln-table.js +1 -1
  154. package/components/ln-table/ln-table.schema.json +211 -211
  155. package/components/ln-table/src/table-model.js +98 -98
  156. package/components/ln-table-coordinator/ln-table-coordinator.js +1 -1
  157. package/components/ln-table-coordinator/ln-table-coordinator.schema.json +93 -93
  158. package/components/ln-tabs/ln-tabs.js +1 -1
  159. package/components/ln-tabs/ln-tabs.schema.json +75 -75
  160. package/components/ln-tabs/src/ln-tabs.js +208 -208
  161. package/components/ln-tabs/src/tabs-model.js +82 -82
  162. package/components/ln-time/ln-time-dev.scss +13 -13
  163. package/components/ln-time/ln-time.js +1 -1
  164. package/components/ln-time/ln-time.schema.json +38 -38
  165. package/components/ln-toast/ln-toast.js +1 -1
  166. package/components/ln-toast/ln-toast.schema.json +65 -65
  167. package/components/ln-toggle/ln-toggle.js +1 -1
  168. package/components/ln-toggle/ln-toggle.schema.json +52 -52
  169. package/components/ln-tooltip/ln-tooltip.js +1 -1
  170. package/components/ln-tooltip/ln-tooltip.schema.json +86 -86
  171. package/components/ln-translations/ln-translations.js +1 -1
  172. package/components/ln-translations/ln-translations.schema.json +120 -120
  173. package/components/ln-ui-coordinator/README.md +62 -62
  174. package/components/ln-ui-coordinator/ln-ui-coordinator.js +1 -1
  175. package/components/ln-ui-coordinator/ln-ui-coordinator.schema.json +28 -28
  176. package/components/ln-ui-coordinator/src/ln-ui-coordinator.js +140 -140
  177. package/components/ln-upload/ln-upload.js +1 -1
  178. package/components/ln-upload/ln-upload.schema.json +193 -193
  179. package/components/ln-upload/src/upload-model.js +78 -78
  180. package/components/ln-validate/ln-validate.js +1 -1
  181. package/components/ln-validate/ln-validate.schema.json +50 -50
  182. package/components/ln-validate/src/validate-model.js +64 -64
  183. package/components/ln-websocket-connector/README.md +166 -166
  184. package/components/ln-websocket-connector/ln-websocket-connector.js +1 -1
  185. package/components/ln-websocket-connector/ln-websocket-connector.schema.json +29 -29
  186. package/components/ln-websocket-connector/src/ln-websocket-connector.js +283 -279
  187. package/ln-ashlar.html-data.json +15 -8
  188. package/package.json +85 -84
  189. package/theme/brand.css +73 -73
  190. package/theme/components/_confirm.scss +6 -6
  191. package/theme/components/_picklist.scss +3 -3
  192. package/theme/config/_palette.scss +274 -274
  193. package/theme/config/_theme.scss +292 -292
  194. package/theme/config/_tokens.scss +285 -285
  195. package/theme/config/mixins/_index.scss +62 -62
  196. package/theme/config/mixins/_picklist.scss +66 -66
  197. package/theme/ln-ashlar-dev.scss +66 -66
  198. package/theme/ln-ashlar-landing.scss +56 -56
  199. package/theme/ln-ashlar-theme.scss +63 -63
  200. package/theme/presentation/_bento.scss +151 -151
  201. package/theme/presentation/_cta.scss +111 -111
  202. package/theme/presentation/_effects.scss +216 -216
  203. package/theme/presentation/_features.scss +108 -108
  204. package/theme/presentation/_footer.scss +129 -129
  205. package/theme/presentation/_hero.scss +158 -158
  206. package/theme/presentation/_layout.scss +170 -170
  207. package/theme/presentation/_navbar.scss +140 -140
  208. package/theme/presentation/_pricing.scss +262 -262
  209. package/theme/presentation/_stats.scss +87 -87
  210. package/theme/presentation/_testimonials.scss +124 -124
  211. package/theme/presentation/_tokens.scss +39 -39
  212. package/theme/presentation/_typography.scss +163 -163
  213. package/web-types.json +26 -12
@@ -1,208 +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.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
+ /* 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
+ }