@hyperfixi/behaviors 2.2.1 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.browser.global.js +316 -54
- package/dist/all.browser.global.js.map +1 -1
- package/dist/autodismiss.browser.global.js +54 -2
- package/dist/autodismiss.browser.global.js.map +1 -1
- package/dist/behaviors/autodismiss.cjs +54 -18
- package/dist/behaviors/autodismiss.cjs.map +1 -1
- package/dist/behaviors/autodismiss.js +2 -2
- package/dist/behaviors/clickoutside.cjs +23 -4
- package/dist/behaviors/clickoutside.cjs.map +1 -1
- package/dist/behaviors/clickoutside.js +2 -2
- package/dist/behaviors/clipboard.cjs +43 -21
- package/dist/behaviors/clipboard.cjs.map +1 -1
- package/dist/behaviors/clipboard.js +2 -2
- package/dist/behaviors/focustrap.cjs +44 -3
- package/dist/behaviors/focustrap.cjs.map +1 -1
- package/dist/behaviors/focustrap.js +2 -2
- package/dist/behaviors/removable.cjs +7 -4
- package/dist/behaviors/removable.cjs.map +1 -1
- package/dist/behaviors/removable.js +2 -2
- package/dist/behaviors/resizable.cjs +22 -14
- package/dist/behaviors/resizable.cjs.map +1 -1
- package/dist/behaviors/resizable.js +2 -2
- package/dist/behaviors/scrollreveal.cjs +25 -13
- package/dist/behaviors/scrollreveal.cjs.map +1 -1
- package/dist/behaviors/scrollreveal.js +2 -2
- package/dist/behaviors/sortable.cjs +18 -12
- package/dist/behaviors/sortable.cjs.map +1 -1
- package/dist/behaviors/sortable.js +2 -2
- package/dist/behaviors/tabs.cjs +80 -11
- package/dist/behaviors/tabs.cjs.map +1 -1
- package/dist/behaviors/tabs.js +2 -2
- package/dist/behaviors/toggleable.cjs +5 -2
- package/dist/behaviors/toggleable.cjs.map +1 -1
- package/dist/behaviors/toggleable.js +2 -2
- package/dist/chunk-66U2RSYJ.js +100 -0
- package/dist/chunk-66U2RSYJ.js.map +1 -0
- package/dist/{chunk-2NSKQMNM.js → chunk-7O7UOSBH.js} +2 -2
- package/dist/{chunk-244WSZOL.js → chunk-EKKJVXDZ.js} +2 -2
- package/dist/{chunk-AFGA54SA.js → chunk-F3CASJ7Q.js} +2 -2
- package/dist/{chunk-YHQRFUWV.js → chunk-GALKOMJ5.js} +2 -2
- package/dist/{chunk-272NKUJ3.js → chunk-HMU342XE.js} +8 -5
- package/dist/chunk-HMU342XE.js.map +1 -0
- package/dist/chunk-HQDYH45I.js +137 -0
- package/dist/chunk-HQDYH45I.js.map +1 -0
- package/dist/{chunk-WTUVPVSD.js → chunk-IQM32TEY.js} +2 -2
- package/dist/{chunk-H5Y5ARYG.js → chunk-L52AGCMP.js} +2 -2
- package/dist/{chunk-H2MCHR5A.js → chunk-LQJOQTBZ.js} +2 -2
- package/dist/{chunk-7JDV2THA.js → chunk-MVNHMYIK.js} +11 -11
- package/dist/{chunk-BWZ6EGII.js → chunk-NC6I6T7T.js} +19 -13
- package/dist/{chunk-BWZ6EGII.js.map → chunk-NC6I6T7T.js.map} +1 -1
- package/dist/chunk-OJ3YWO3W.js +92 -0
- package/dist/chunk-OJ3YWO3W.js.map +1 -0
- package/dist/{chunk-64DIQGQI.js → chunk-SLOXO6IY.js} +24 -5
- package/dist/chunk-SLOXO6IY.js.map +1 -0
- package/dist/{chunk-RPERQTFU.js → chunk-TLLGH5KX.js} +2 -2
- package/dist/{chunk-V5IWDPDP.js → chunk-U5GNXZUF.js} +23 -15
- package/dist/{chunk-V5IWDPDP.js.map → chunk-U5GNXZUF.js.map} +1 -1
- package/dist/{chunk-GPTHAUWN.js → chunk-URZGNPTQ.js} +26 -14
- package/dist/chunk-URZGNPTQ.js.map +1 -0
- package/dist/chunk-WOTZO7K4.js +92 -0
- package/dist/chunk-WOTZO7K4.js.map +1 -0
- package/dist/{chunk-JKBWIJFI.js → chunk-WPOQIMCC.js} +2 -2
- package/dist/{chunk-WUHHMDAA.js → chunk-XYZ7FOXJ.js} +6 -3
- package/dist/{chunk-WUHHMDAA.js.map → chunk-XYZ7FOXJ.js.map} +1 -1
- package/dist/{chunk-DYHBKDKB.js → chunk-ZZ2WSAX3.js} +2 -2
- package/dist/clickoutside.browser.global.js +16 -5
- package/dist/clickoutside.browser.global.js.map +1 -1
- package/dist/clipboard.browser.global.js +43 -2
- package/dist/clipboard.browser.global.js.map +1 -1
- package/dist/core.browser.global.js +5 -2
- package/dist/core.browser.global.js.map +1 -1
- package/dist/focustrap.browser.global.js +46 -5
- package/dist/focustrap.browser.global.js.map +1 -1
- package/dist/index.cjs +321 -102
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +21 -21
- package/dist/loaders.cjs +321 -102
- package/dist/loaders.cjs.map +1 -1
- package/dist/loaders.js +11 -11
- package/dist/removable.browser.global.js +8 -5
- package/dist/removable.browser.global.js.map +1 -1
- package/dist/resizable.browser.global.js +24 -16
- package/dist/resizable.browser.global.js.map +1 -1
- package/dist/resolver.browser.global.js +407 -0
- package/dist/resolver.browser.global.js.map +1 -0
- package/dist/schemas/index.cjs +321 -102
- package/dist/schemas/index.cjs.map +1 -1
- package/dist/schemas/index.js +10 -10
- package/dist/scrollreveal.browser.global.js +27 -8
- package/dist/scrollreveal.browser.global.js.map +1 -1
- package/dist/sortable.browser.global.js +19 -13
- package/dist/sortable.browser.global.js.map +1 -1
- package/dist/tabs.browser.global.js +80 -2
- package/dist/tabs.browser.global.js.map +1 -1
- package/dist/toggleable.browser.global.js +6 -3
- package/dist/toggleable.browser.global.js.map +1 -1
- package/package.json +1 -1
- package/src/behavior-resolver.ts +91 -0
- package/src/browser-resolver-bundle.ts +42 -0
- package/src/schemas/autodismiss.schema.ts +54 -18
- package/src/schemas/clickoutside.schema.ts +22 -3
- package/src/schemas/clipboard.schema.ts +43 -21
- package/src/schemas/focustrap.schema.ts +44 -3
- package/src/schemas/removable.schema.ts +7 -4
- package/src/schemas/resizable.schema.ts +22 -14
- package/src/schemas/scrollreveal.schema.ts +25 -13
- package/src/schemas/sortable.schema.ts +18 -12
- package/src/schemas/tabs.schema.ts +80 -11
- package/src/schemas/toggleable.schema.ts +5 -2
- package/dist/chunk-272NKUJ3.js.map +0 -1
- package/dist/chunk-64DIQGQI.js.map +0 -1
- package/dist/chunk-GPTHAUWN.js.map +0 -1
- package/dist/chunk-GVJPA2EK.js +0 -68
- package/dist/chunk-GVJPA2EK.js.map +0 -1
- package/dist/chunk-QKDYW4VM.js +0 -70
- package/dist/chunk-QKDYW4VM.js.map +0 -1
- package/dist/chunk-RB7OB6OD.js +0 -51
- package/dist/chunk-RB7OB6OD.js.map +0 -1
- package/dist/chunk-ZQQZTMCJ.js +0 -64
- package/dist/chunk-ZQQZTMCJ.js.map +0 -1
- /package/dist/{chunk-2NSKQMNM.js.map → chunk-7O7UOSBH.js.map} +0 -0
- /package/dist/{chunk-244WSZOL.js.map → chunk-EKKJVXDZ.js.map} +0 -0
- /package/dist/{chunk-AFGA54SA.js.map → chunk-F3CASJ7Q.js.map} +0 -0
- /package/dist/{chunk-YHQRFUWV.js.map → chunk-GALKOMJ5.js.map} +0 -0
- /package/dist/{chunk-WTUVPVSD.js.map → chunk-IQM32TEY.js.map} +0 -0
- /package/dist/{chunk-H5Y5ARYG.js.map → chunk-L52AGCMP.js.map} +0 -0
- /package/dist/{chunk-H2MCHR5A.js.map → chunk-LQJOQTBZ.js.map} +0 -0
- /package/dist/{chunk-7JDV2THA.js.map → chunk-MVNHMYIK.js.map} +0 -0
- /package/dist/{chunk-RPERQTFU.js.map → chunk-TLLGH5KX.js.map} +0 -0
- /package/dist/{chunk-JKBWIJFI.js.map → chunk-WPOQIMCC.js.map} +0 -0
- /package/dist/{chunk-DYHBKDKB.js.map → chunk-ZZ2WSAX3.js.map} +0 -0
package/dist/behaviors/tabs.cjs
CHANGED
|
@@ -78,17 +78,86 @@ var tabsSchema = {
|
|
|
78
78
|
"Manages aria-selected, aria-controls, aria-labelledby, and tabindex",
|
|
79
79
|
"Keyboard: Arrow keys navigate, Home/End jump to first/last, Tab exits tablist"
|
|
80
80
|
],
|
|
81
|
-
source:
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
81
|
+
source: `
|
|
82
|
+
behavior Tabs(orientation, activeTab, wrap, activeClass)
|
|
83
|
+
init
|
|
84
|
+
if orientation is undefined
|
|
85
|
+
set orientation to "horizontal"
|
|
86
|
+
end
|
|
87
|
+
if activeTab is undefined
|
|
88
|
+
set activeTab to 0
|
|
89
|
+
end
|
|
90
|
+
if wrap is undefined
|
|
91
|
+
set wrap to true
|
|
92
|
+
end
|
|
93
|
+
if activeClass is undefined
|
|
94
|
+
set activeClass to "active"
|
|
95
|
+
end
|
|
96
|
+
js(me, orientation, activeTab, wrap, activeClass)
|
|
97
|
+
var tabs = Array.from(me.querySelectorAll('[role="tab"]'));
|
|
98
|
+
var panels = Array.from(me.querySelectorAll('[role="tabpanel"]'));
|
|
99
|
+
if (tabs.length === 0 || panels.length === 0) return;
|
|
100
|
+
var tablist = me.querySelector('[role="tablist"]') || tabs[0].parentElement;
|
|
101
|
+
if (tablist) tablist.setAttribute('aria-orientation', orientation);
|
|
102
|
+
var count = Math.min(tabs.length, panels.length);
|
|
103
|
+
var idN = 0;
|
|
104
|
+
for (var i = 0; i < count; i++) {
|
|
105
|
+
if (!tabs[i].id) tabs[i].id = 'tab-' + (++idN);
|
|
106
|
+
if (!panels[i].id) panels[i].id = 'tabpanel-' + idN;
|
|
107
|
+
tabs[i].setAttribute('aria-controls', panels[i].id);
|
|
108
|
+
panels[i].setAttribute('aria-labelledby', tabs[i].id);
|
|
109
|
+
}
|
|
110
|
+
var cur = Math.max(0, Math.min(activeTab, count - 1));
|
|
111
|
+
function activate(idx, prev) {
|
|
112
|
+
if (idx === prev || idx < 0 || idx >= count) return false;
|
|
113
|
+
var ev = new CustomEvent('tabs:change', { bubbles: true, cancelable: true, detail: { index: idx, previousIndex: prev } });
|
|
114
|
+
me.dispatchEvent(ev);
|
|
115
|
+
if (ev.defaultPrevented) return false;
|
|
116
|
+
if (prev >= 0 && prev < count) {
|
|
117
|
+
tabs[prev].setAttribute('aria-selected', 'false');
|
|
118
|
+
tabs[prev].setAttribute('tabindex', '-1');
|
|
119
|
+
tabs[prev].classList.remove(activeClass);
|
|
120
|
+
panels[prev].setAttribute('aria-hidden', 'true');
|
|
121
|
+
panels[prev].classList.remove(activeClass);
|
|
122
|
+
}
|
|
123
|
+
tabs[idx].setAttribute('aria-selected', 'true');
|
|
124
|
+
tabs[idx].setAttribute('tabindex', '0');
|
|
125
|
+
tabs[idx].classList.add(activeClass);
|
|
126
|
+
panels[idx].setAttribute('aria-hidden', 'false');
|
|
127
|
+
panels[idx].classList.add(activeClass);
|
|
128
|
+
cur = idx;
|
|
129
|
+
me.dispatchEvent(new CustomEvent('tabs:changed', { bubbles: true, detail: { index: idx } }));
|
|
130
|
+
return true;
|
|
131
|
+
}
|
|
132
|
+
for (var j = 0; j < count; j++) {
|
|
133
|
+
tabs[j].setAttribute('aria-selected', 'false');
|
|
134
|
+
tabs[j].setAttribute('tabindex', '-1');
|
|
135
|
+
panels[j].setAttribute('aria-hidden', 'true');
|
|
136
|
+
panels[j].classList.remove(activeClass);
|
|
137
|
+
}
|
|
138
|
+
tabs[cur].setAttribute('aria-selected', 'true');
|
|
139
|
+
tabs[cur].setAttribute('tabindex', '0');
|
|
140
|
+
tabs[cur].classList.add(activeClass);
|
|
141
|
+
panels[cur].setAttribute('aria-hidden', 'false');
|
|
142
|
+
panels[cur].classList.add(activeClass);
|
|
143
|
+
for (var k = 0; k < count; k++) {
|
|
144
|
+
(function(idx) {
|
|
145
|
+
tabs[idx].addEventListener('click', function() { if (activate(idx, cur)) tabs[idx].focus(); });
|
|
146
|
+
})(k);
|
|
147
|
+
}
|
|
148
|
+
(tablist || me).addEventListener('keydown', function(e) {
|
|
149
|
+
var nk = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
|
|
150
|
+
var pk = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
|
|
151
|
+
var next = null;
|
|
152
|
+
if (e.key === nk) { next = cur + 1; if (next >= count) next = wrap ? 0 : null; }
|
|
153
|
+
else if (e.key === pk) { next = cur - 1; if (next < 0) next = wrap ? count - 1 : null; }
|
|
154
|
+
else if (e.key === 'Home') next = 0;
|
|
155
|
+
else if (e.key === 'End') next = count - 1;
|
|
156
|
+
if (next !== null) { e.preventDefault(); if (activate(next, cur)) tabs[next].focus(); }
|
|
157
|
+
});
|
|
158
|
+
end
|
|
159
|
+
end
|
|
160
|
+
end`.trim()
|
|
92
161
|
};
|
|
93
162
|
|
|
94
163
|
// src/schemas/types.ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/behaviors/tabs.ts","../../src/schemas/tabs.schema.ts","../../src/schemas/types.ts"],"sourcesContent":["/**\n * Tabs Behavior — Imperative Implementation\n *\n * WAI-ARIA compliant tabs with roving tabindex keyboard navigation.\n * Auto-wires role, aria-selected, aria-controls, and aria-labelledby.\n */\n\nimport { tabsSchema } from '../schemas/tabs.schema';\nimport type { LokaScriptInstance } from '../schemas/types';\nimport { resolveRuntime } from '../schemas/types';\n\nexport const tabsSource = tabsSchema.source;\nexport const tabsMetadata = tabsSchema;\n\nlet idCounter = 0;\n\nfunction ensureId(el: HTMLElement, prefix: string): string {\n if (!el.id) {\n el.id = `${prefix}-${++idCounter}`;\n }\n return el.id;\n}\n\n/**\n * Imperative installer for Tabs behavior.\n */\nfunction installTabs(element: HTMLElement, params: Record<string, any>): void {\n const orientation = params.orientation === 'vertical' ? 'vertical' : 'horizontal';\n const wrap = params.wrap !== false;\n const activeClass = (params.activeClass as string) || 'active';\n const initialIndex = typeof params.activeTab === 'number' ? params.activeTab : 0;\n\n // Discover tabs and panels\n const tabs = Array.from(element.querySelectorAll<HTMLElement>('[role=\"tab\"]'));\n const panels = Array.from(element.querySelectorAll<HTMLElement>('[role=\"tabpanel\"]'));\n\n if (tabs.length === 0 || panels.length === 0) return;\n\n // Find or mark the tablist\n const tablist = element.querySelector<HTMLElement>('[role=\"tablist\"]') || tabs[0].parentElement;\n if (tablist && !tablist.getAttribute('role')) {\n tablist.setAttribute('role', 'tablist');\n }\n if (tablist) {\n tablist.setAttribute('aria-orientation', orientation);\n }\n\n // Wire IDs, aria-controls, aria-labelledby\n const count = Math.min(tabs.length, panels.length);\n for (let i = 0; i < count; i++) {\n const tabId = ensureId(tabs[i], 'tab');\n const panelId = ensureId(panels[i], 'tabpanel');\n tabs[i].setAttribute('aria-controls', panelId);\n panels[i].setAttribute('aria-labelledby', tabId);\n }\n\n let currentIndex = -1;\n\n function selectTab(index: number, previousIndex: number): boolean {\n if (index === previousIndex || index < 0 || index >= count) return false;\n\n const detail = {\n tab: tabs[index],\n panel: panels[index],\n index,\n previousIndex,\n };\n\n // Cancelable before-event\n const changeEvent = new CustomEvent('tabs:change', {\n bubbles: true,\n cancelable: true,\n detail,\n });\n element.dispatchEvent(changeEvent);\n if (changeEvent.defaultPrevented) return false;\n\n // Deactivate previous\n if (previousIndex >= 0 && previousIndex < count) {\n tabs[previousIndex].setAttribute('aria-selected', 'false');\n tabs[previousIndex].setAttribute('tabindex', '-1');\n tabs[previousIndex].classList.remove(activeClass);\n panels[previousIndex].setAttribute('aria-hidden', 'true');\n panels[previousIndex].classList.remove(activeClass);\n }\n\n // Activate new\n tabs[index].setAttribute('aria-selected', 'true');\n tabs[index].setAttribute('tabindex', '0');\n tabs[index].classList.add(activeClass);\n panels[index].setAttribute('aria-hidden', 'false');\n panels[index].classList.add(activeClass);\n\n currentIndex = index;\n\n element.dispatchEvent(new CustomEvent('tabs:changed', { bubbles: true, detail }));\n return true;\n }\n\n // Initialize all tabs as inactive, then activate initial\n for (let i = 0; i < count; i++) {\n tabs[i].setAttribute('aria-selected', 'false');\n tabs[i].setAttribute('tabindex', '-1');\n tabs[i].classList.remove(activeClass);\n panels[i].setAttribute('aria-hidden', 'true');\n panels[i].classList.remove(activeClass);\n }\n\n const clamped = Math.max(0, Math.min(initialIndex, count - 1));\n // Directly activate without firing change event on init\n tabs[clamped].setAttribute('aria-selected', 'true');\n tabs[clamped].setAttribute('tabindex', '0');\n tabs[clamped].classList.add(activeClass);\n panels[clamped].setAttribute('aria-hidden', 'false');\n panels[clamped].classList.add(activeClass);\n currentIndex = clamped;\n\n // Click handler\n for (let i = 0; i < count; i++) {\n tabs[i].addEventListener('click', () => {\n selectTab(i, currentIndex);\n tabs[i].focus();\n });\n }\n\n // Keyboard handler on tablist\n const keyTarget = tablist || element;\n keyTarget.addEventListener('keydown', (e: KeyboardEvent) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n let nextIndex: number | null = null;\n\n if (e.key === nextKey) {\n nextIndex = currentIndex + 1;\n if (nextIndex >= count) nextIndex = wrap ? 0 : null;\n } else if (e.key === prevKey) {\n nextIndex = currentIndex - 1;\n if (nextIndex < 0) nextIndex = wrap ? count - 1 : null;\n } else if (e.key === 'Home') {\n nextIndex = 0;\n } else if (e.key === 'End') {\n nextIndex = count - 1;\n }\n\n if (nextIndex !== null) {\n e.preventDefault();\n if (selectTab(nextIndex, currentIndex)) {\n tabs[nextIndex].focus();\n }\n }\n });\n\n // Programmatic tab selection\n element.addEventListener('tabs:select', ((e: CustomEvent) => {\n const index = e.detail?.index;\n if (typeof index === 'number') {\n selectTab(index, currentIndex);\n }\n }) as EventListener);\n}\n\n/**\n * Register the Tabs behavior with LokaScript.\n */\nexport async function registerTabs(hyperfixi?: LokaScriptInstance): Promise<void> {\n const hf = hyperfixi || resolveRuntime();\n\n if (!hf) {\n throw new Error(\n 'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'\n );\n }\n\n const syntheticNode = {\n type: 'behavior',\n name: 'Tabs',\n parameters: ['orientation', 'activeTab', 'wrap', 'activeClass'],\n eventHandlers: [],\n imperativeInstaller: installTabs,\n };\n const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };\n await hf.execute(syntheticNode, ctx);\n}\n\n// Auto-register when loaded as a script tag\nif (resolveRuntime()) {\n registerTabs().catch(console.error);\n}\n\nexport default {\n source: tabsSchema.source,\n metadata: tabsSchema,\n register: registerTabs,\n};\n","import type { BehaviorSchema } from './types';\n\nexport const tabsSchema: BehaviorSchema = {\n name: 'Tabs',\n category: 'ui',\n tier: 'core',\n version: '1.0.0',\n description:\n 'WAI-ARIA compliant tabs with roving tabindex keyboard navigation. ' +\n 'Auto-wires role, aria-selected, aria-controls, and aria-labelledby attributes.',\n parameters: [\n {\n name: 'orientation',\n type: 'string',\n optional: true,\n default: 'horizontal',\n enum: ['horizontal', 'vertical'],\n description: 'Arrow key direction: horizontal (Left/Right) or vertical (Up/Down)',\n },\n {\n name: 'activeTab',\n type: 'number',\n optional: true,\n default: 0,\n description: 'Initial active tab index (zero-based)',\n },\n {\n name: 'wrap',\n type: 'boolean',\n optional: true,\n default: true,\n description: 'Wrap to first/last tab when navigating past the end',\n },\n {\n name: 'activeClass',\n type: 'string',\n optional: true,\n default: 'active',\n description: 'CSS class applied to the active tab and its panel',\n },\n ],\n events: [\n {\n name: 'tabs:change',\n description: 'Fired before tab selection changes (cancelable via preventDefault)',\n },\n { name: 'tabs:changed', description: 'Fired after tab selection has changed' },\n ],\n requirements: [\n 'Sets role=\"tablist\" on the tab container',\n 'Sets role=\"tab\" on tab buttons and role=\"tabpanel\" on content panels',\n 'Manages aria-selected, aria-controls, aria-labelledby, and tabindex',\n 'Keyboard: Arrow keys navigate, Home/End jump to first/last, Tab exits tablist',\n ],\n source: [\n 'behavior Tabs(orientation, activeTab, wrap, activeClass)',\n ' init',\n ' if orientation is undefined set orientation to \"horizontal\"',\n ' if activeTab is undefined set activeTab to 0',\n ' if wrap is undefined set wrap to true',\n ' if activeClass is undefined set activeClass to \"active\"',\n ' end',\n ' -- Imperative installer handles ARIA wiring and keyboard navigation',\n 'end',\n ].join('\\n'),\n};\n","/**\n * Behavior Schema Types\n *\n * Defines the structure for behavior metadata used for:\n * - Code generation (TypeScript types, documentation)\n * - Runtime categorization and lazy loading\n * - Tooling and IDE integration\n */\n\n/**\n * Behavior categories for organization.\n * - ui: Visual interaction behaviors (drag, resize, sort)\n * - data: Data manipulation behaviors (remove, transform)\n * - animation: Animation and transition behaviors\n * - form: Form-related behaviors (validation, toggle states)\n * - layout: Layout behaviors (sticky, scrollspy)\n */\nexport type BehaviorCategory = 'ui' | 'data' | 'animation' | 'form' | 'layout';\n\n/**\n * Loading tiers for lazy loading optimization.\n * - core: Always loaded (essential behaviors)\n * - common: High usage (loaded for typical apps)\n * - optional: Low usage (loaded on demand)\n */\nexport type BehaviorTier = 'core' | 'common' | 'optional';\n\n/**\n * Schema for a behavior parameter.\n */\nexport interface ParameterSchema {\n name: string;\n type: 'string' | 'number' | 'boolean' | 'selector' | 'element';\n optional?: boolean;\n default?: string | number | boolean;\n /** Allowed values for constrained parameters */\n enum?: string[];\n description: string;\n}\n\n/**\n * Schema for a behavior event.\n */\nexport interface EventSchema {\n name: string;\n description: string;\n}\n\n/**\n * Complete schema for a behavior.\n * This is the source of truth for all behavior metadata.\n */\nexport interface BehaviorSchema {\n /** Behavior name (PascalCase) */\n name: string;\n /** Category for organization */\n category: BehaviorCategory;\n /** Loading tier for lazy loading */\n tier: BehaviorTier;\n /** Semantic version */\n version: string;\n /** Human-readable description */\n description: string;\n /** Parameter definitions */\n parameters: ParameterSchema[];\n /** Event definitions */\n events: EventSchema[];\n /** The hyperscript behavior source code */\n source: string;\n /** Optional requirements or notes */\n requirements?: string[];\n}\n\n/**\n * Runtime behavior module interface.\n * This is what gets registered with the hyperfixi runtime.\n */\nexport interface BehaviorModule {\n source: string;\n metadata: BehaviorSchema;\n register: (hyperfixi?: LokaScriptInstance) => Promise<void>;\n}\n\n/**\n * Minimal LokaScript instance interface for behavior registration.\n */\nexport interface LokaScriptInstance {\n compileSync: (\n code: string,\n options?: { traditional?: boolean; language?: string }\n ) => {\n ok: boolean;\n ast?: unknown;\n errors?: Array<{ message: string; line?: number; column?: number }>;\n };\n execute: (ast: unknown, ctx: unknown) => Promise<unknown>;\n createContext?: () => { locals: Map<string, unknown>; globals: Map<string, unknown> };\n}\n\n/**\n * Typed window interface for behavior auto-registration.\n * Avoids `(window as any)` casts throughout the codebase.\n * Checks both `window.lokascript` and `window.hyperfixi` for the runtime instance.\n */\nexport interface LokaScriptWindow {\n lokascript?: LokaScriptInstance;\n hyperfixi?: LokaScriptInstance;\n __hyperfixi_behaviors_ready?: Promise<void> | undefined;\n}\n\n/**\n * Resolve the LokaScript runtime from window globals.\n * Checks both `window.lokascript` and `window.hyperfixi`.\n */\nexport function resolveRuntime(): LokaScriptInstance | null {\n if (typeof window === 'undefined') return null;\n const win = window as unknown as LokaScriptWindow;\n return win.lokascript || win.hyperfixi || null;\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/behaviors/tabs.ts","../../src/schemas/tabs.schema.ts","../../src/schemas/types.ts"],"sourcesContent":["/**\n * Tabs Behavior — Imperative Implementation\n *\n * WAI-ARIA compliant tabs with roving tabindex keyboard navigation.\n * Auto-wires role, aria-selected, aria-controls, and aria-labelledby.\n */\n\nimport { tabsSchema } from '../schemas/tabs.schema';\nimport type { LokaScriptInstance } from '../schemas/types';\nimport { resolveRuntime } from '../schemas/types';\n\nexport const tabsSource = tabsSchema.source;\nexport const tabsMetadata = tabsSchema;\n\nlet idCounter = 0;\n\nfunction ensureId(el: HTMLElement, prefix: string): string {\n if (!el.id) {\n el.id = `${prefix}-${++idCounter}`;\n }\n return el.id;\n}\n\n/**\n * Imperative installer for Tabs behavior.\n */\nfunction installTabs(element: HTMLElement, params: Record<string, any>): void {\n const orientation = params.orientation === 'vertical' ? 'vertical' : 'horizontal';\n const wrap = params.wrap !== false;\n const activeClass = (params.activeClass as string) || 'active';\n const initialIndex = typeof params.activeTab === 'number' ? params.activeTab : 0;\n\n // Discover tabs and panels\n const tabs = Array.from(element.querySelectorAll<HTMLElement>('[role=\"tab\"]'));\n const panels = Array.from(element.querySelectorAll<HTMLElement>('[role=\"tabpanel\"]'));\n\n if (tabs.length === 0 || panels.length === 0) return;\n\n // Find or mark the tablist\n const tablist = element.querySelector<HTMLElement>('[role=\"tablist\"]') || tabs[0].parentElement;\n if (tablist && !tablist.getAttribute('role')) {\n tablist.setAttribute('role', 'tablist');\n }\n if (tablist) {\n tablist.setAttribute('aria-orientation', orientation);\n }\n\n // Wire IDs, aria-controls, aria-labelledby\n const count = Math.min(tabs.length, panels.length);\n for (let i = 0; i < count; i++) {\n const tabId = ensureId(tabs[i], 'tab');\n const panelId = ensureId(panels[i], 'tabpanel');\n tabs[i].setAttribute('aria-controls', panelId);\n panels[i].setAttribute('aria-labelledby', tabId);\n }\n\n let currentIndex = -1;\n\n function selectTab(index: number, previousIndex: number): boolean {\n if (index === previousIndex || index < 0 || index >= count) return false;\n\n const detail = {\n tab: tabs[index],\n panel: panels[index],\n index,\n previousIndex,\n };\n\n // Cancelable before-event\n const changeEvent = new CustomEvent('tabs:change', {\n bubbles: true,\n cancelable: true,\n detail,\n });\n element.dispatchEvent(changeEvent);\n if (changeEvent.defaultPrevented) return false;\n\n // Deactivate previous\n if (previousIndex >= 0 && previousIndex < count) {\n tabs[previousIndex].setAttribute('aria-selected', 'false');\n tabs[previousIndex].setAttribute('tabindex', '-1');\n tabs[previousIndex].classList.remove(activeClass);\n panels[previousIndex].setAttribute('aria-hidden', 'true');\n panels[previousIndex].classList.remove(activeClass);\n }\n\n // Activate new\n tabs[index].setAttribute('aria-selected', 'true');\n tabs[index].setAttribute('tabindex', '0');\n tabs[index].classList.add(activeClass);\n panels[index].setAttribute('aria-hidden', 'false');\n panels[index].classList.add(activeClass);\n\n currentIndex = index;\n\n element.dispatchEvent(new CustomEvent('tabs:changed', { bubbles: true, detail }));\n return true;\n }\n\n // Initialize all tabs as inactive, then activate initial\n for (let i = 0; i < count; i++) {\n tabs[i].setAttribute('aria-selected', 'false');\n tabs[i].setAttribute('tabindex', '-1');\n tabs[i].classList.remove(activeClass);\n panels[i].setAttribute('aria-hidden', 'true');\n panels[i].classList.remove(activeClass);\n }\n\n const clamped = Math.max(0, Math.min(initialIndex, count - 1));\n // Directly activate without firing change event on init\n tabs[clamped].setAttribute('aria-selected', 'true');\n tabs[clamped].setAttribute('tabindex', '0');\n tabs[clamped].classList.add(activeClass);\n panels[clamped].setAttribute('aria-hidden', 'false');\n panels[clamped].classList.add(activeClass);\n currentIndex = clamped;\n\n // Click handler\n for (let i = 0; i < count; i++) {\n tabs[i].addEventListener('click', () => {\n selectTab(i, currentIndex);\n tabs[i].focus();\n });\n }\n\n // Keyboard handler on tablist\n const keyTarget = tablist || element;\n keyTarget.addEventListener('keydown', (e: KeyboardEvent) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n let nextIndex: number | null = null;\n\n if (e.key === nextKey) {\n nextIndex = currentIndex + 1;\n if (nextIndex >= count) nextIndex = wrap ? 0 : null;\n } else if (e.key === prevKey) {\n nextIndex = currentIndex - 1;\n if (nextIndex < 0) nextIndex = wrap ? count - 1 : null;\n } else if (e.key === 'Home') {\n nextIndex = 0;\n } else if (e.key === 'End') {\n nextIndex = count - 1;\n }\n\n if (nextIndex !== null) {\n e.preventDefault();\n if (selectTab(nextIndex, currentIndex)) {\n tabs[nextIndex].focus();\n }\n }\n });\n\n // Programmatic tab selection\n element.addEventListener('tabs:select', ((e: CustomEvent) => {\n const index = e.detail?.index;\n if (typeof index === 'number') {\n selectTab(index, currentIndex);\n }\n }) as EventListener);\n}\n\n/**\n * Register the Tabs behavior with LokaScript.\n */\nexport async function registerTabs(hyperfixi?: LokaScriptInstance): Promise<void> {\n const hf = hyperfixi || resolveRuntime();\n\n if (!hf) {\n throw new Error(\n 'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'\n );\n }\n\n const syntheticNode = {\n type: 'behavior',\n name: 'Tabs',\n parameters: ['orientation', 'activeTab', 'wrap', 'activeClass'],\n eventHandlers: [],\n imperativeInstaller: installTabs,\n };\n const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };\n await hf.execute(syntheticNode, ctx);\n}\n\n// Auto-register when loaded as a script tag\nif (resolveRuntime()) {\n registerTabs().catch(console.error);\n}\n\nexport default {\n source: tabsSchema.source,\n metadata: tabsSchema,\n register: registerTabs,\n};\n","import type { BehaviorSchema } from './types';\n\nexport const tabsSchema: BehaviorSchema = {\n name: 'Tabs',\n category: 'ui',\n tier: 'core',\n version: '1.0.0',\n description:\n 'WAI-ARIA compliant tabs with roving tabindex keyboard navigation. ' +\n 'Auto-wires role, aria-selected, aria-controls, and aria-labelledby attributes.',\n parameters: [\n {\n name: 'orientation',\n type: 'string',\n optional: true,\n default: 'horizontal',\n enum: ['horizontal', 'vertical'],\n description: 'Arrow key direction: horizontal (Left/Right) or vertical (Up/Down)',\n },\n {\n name: 'activeTab',\n type: 'number',\n optional: true,\n default: 0,\n description: 'Initial active tab index (zero-based)',\n },\n {\n name: 'wrap',\n type: 'boolean',\n optional: true,\n default: true,\n description: 'Wrap to first/last tab when navigating past the end',\n },\n {\n name: 'activeClass',\n type: 'string',\n optional: true,\n default: 'active',\n description: 'CSS class applied to the active tab and its panel',\n },\n ],\n events: [\n {\n name: 'tabs:change',\n description: 'Fired before tab selection changes (cancelable via preventDefault)',\n },\n { name: 'tabs:changed', description: 'Fired after tab selection has changed' },\n ],\n requirements: [\n 'Sets role=\"tablist\" on the tab container',\n 'Sets role=\"tab\" on tab buttons and role=\"tabpanel\" on content panels',\n 'Manages aria-selected, aria-controls, aria-labelledby, and tabindex',\n 'Keyboard: Arrow keys navigate, Home/End jump to first/last, Tab exits tablist',\n ],\n source: `\nbehavior Tabs(orientation, activeTab, wrap, activeClass)\n init\n if orientation is undefined\n set orientation to \"horizontal\"\n end\n if activeTab is undefined\n set activeTab to 0\n end\n if wrap is undefined\n set wrap to true\n end\n if activeClass is undefined\n set activeClass to \"active\"\n end\n js(me, orientation, activeTab, wrap, activeClass)\n var tabs = Array.from(me.querySelectorAll('[role=\"tab\"]'));\n var panels = Array.from(me.querySelectorAll('[role=\"tabpanel\"]'));\n if (tabs.length === 0 || panels.length === 0) return;\n var tablist = me.querySelector('[role=\"tablist\"]') || tabs[0].parentElement;\n if (tablist) tablist.setAttribute('aria-orientation', orientation);\n var count = Math.min(tabs.length, panels.length);\n var idN = 0;\n for (var i = 0; i < count; i++) {\n if (!tabs[i].id) tabs[i].id = 'tab-' + (++idN);\n if (!panels[i].id) panels[i].id = 'tabpanel-' + idN;\n tabs[i].setAttribute('aria-controls', panels[i].id);\n panels[i].setAttribute('aria-labelledby', tabs[i].id);\n }\n var cur = Math.max(0, Math.min(activeTab, count - 1));\n function activate(idx, prev) {\n if (idx === prev || idx < 0 || idx >= count) return false;\n var ev = new CustomEvent('tabs:change', { bubbles: true, cancelable: true, detail: { index: idx, previousIndex: prev } });\n me.dispatchEvent(ev);\n if (ev.defaultPrevented) return false;\n if (prev >= 0 && prev < count) {\n tabs[prev].setAttribute('aria-selected', 'false');\n tabs[prev].setAttribute('tabindex', '-1');\n tabs[prev].classList.remove(activeClass);\n panels[prev].setAttribute('aria-hidden', 'true');\n panels[prev].classList.remove(activeClass);\n }\n tabs[idx].setAttribute('aria-selected', 'true');\n tabs[idx].setAttribute('tabindex', '0');\n tabs[idx].classList.add(activeClass);\n panels[idx].setAttribute('aria-hidden', 'false');\n panels[idx].classList.add(activeClass);\n cur = idx;\n me.dispatchEvent(new CustomEvent('tabs:changed', { bubbles: true, detail: { index: idx } }));\n return true;\n }\n for (var j = 0; j < count; j++) {\n tabs[j].setAttribute('aria-selected', 'false');\n tabs[j].setAttribute('tabindex', '-1');\n panels[j].setAttribute('aria-hidden', 'true');\n panels[j].classList.remove(activeClass);\n }\n tabs[cur].setAttribute('aria-selected', 'true');\n tabs[cur].setAttribute('tabindex', '0');\n tabs[cur].classList.add(activeClass);\n panels[cur].setAttribute('aria-hidden', 'false');\n panels[cur].classList.add(activeClass);\n for (var k = 0; k < count; k++) {\n (function(idx) {\n tabs[idx].addEventListener('click', function() { if (activate(idx, cur)) tabs[idx].focus(); });\n })(k);\n }\n (tablist || me).addEventListener('keydown', function(e) {\n var nk = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n var pk = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\n var next = null;\n if (e.key === nk) { next = cur + 1; if (next >= count) next = wrap ? 0 : null; }\n else if (e.key === pk) { next = cur - 1; if (next < 0) next = wrap ? count - 1 : null; }\n else if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = count - 1;\n if (next !== null) { e.preventDefault(); if (activate(next, cur)) tabs[next].focus(); }\n });\n end\n end\nend`.trim(),\n};\n","/**\n * Behavior Schema Types\n *\n * Defines the structure for behavior metadata used for:\n * - Code generation (TypeScript types, documentation)\n * - Runtime categorization and lazy loading\n * - Tooling and IDE integration\n */\n\n/**\n * Behavior categories for organization.\n * - ui: Visual interaction behaviors (drag, resize, sort)\n * - data: Data manipulation behaviors (remove, transform)\n * - animation: Animation and transition behaviors\n * - form: Form-related behaviors (validation, toggle states)\n * - layout: Layout behaviors (sticky, scrollspy)\n */\nexport type BehaviorCategory = 'ui' | 'data' | 'animation' | 'form' | 'layout';\n\n/**\n * Loading tiers for lazy loading optimization.\n * - core: Always loaded (essential behaviors)\n * - common: High usage (loaded for typical apps)\n * - optional: Low usage (loaded on demand)\n */\nexport type BehaviorTier = 'core' | 'common' | 'optional';\n\n/**\n * Schema for a behavior parameter.\n */\nexport interface ParameterSchema {\n name: string;\n type: 'string' | 'number' | 'boolean' | 'selector' | 'element';\n optional?: boolean;\n default?: string | number | boolean;\n /** Allowed values for constrained parameters */\n enum?: string[];\n description: string;\n}\n\n/**\n * Schema for a behavior event.\n */\nexport interface EventSchema {\n name: string;\n description: string;\n}\n\n/**\n * Complete schema for a behavior.\n * This is the source of truth for all behavior metadata.\n */\nexport interface BehaviorSchema {\n /** Behavior name (PascalCase) */\n name: string;\n /** Category for organization */\n category: BehaviorCategory;\n /** Loading tier for lazy loading */\n tier: BehaviorTier;\n /** Semantic version */\n version: string;\n /** Human-readable description */\n description: string;\n /** Parameter definitions */\n parameters: ParameterSchema[];\n /** Event definitions */\n events: EventSchema[];\n /** The hyperscript behavior source code */\n source: string;\n /** Optional requirements or notes */\n requirements?: string[];\n}\n\n/**\n * Runtime behavior module interface.\n * This is what gets registered with the hyperfixi runtime.\n */\nexport interface BehaviorModule {\n source: string;\n metadata: BehaviorSchema;\n register: (hyperfixi?: LokaScriptInstance) => Promise<void>;\n}\n\n/**\n * Minimal LokaScript instance interface for behavior registration.\n */\nexport interface LokaScriptInstance {\n compileSync: (\n code: string,\n options?: { traditional?: boolean; language?: string }\n ) => {\n ok: boolean;\n ast?: unknown;\n errors?: Array<{ message: string; line?: number; column?: number }>;\n };\n execute: (ast: unknown, ctx: unknown) => Promise<unknown>;\n createContext?: () => { locals: Map<string, unknown>; globals: Map<string, unknown> };\n}\n\n/**\n * Typed window interface for behavior auto-registration.\n * Avoids `(window as any)` casts throughout the codebase.\n * Checks both `window.lokascript` and `window.hyperfixi` for the runtime instance.\n */\nexport interface LokaScriptWindow {\n lokascript?: LokaScriptInstance;\n hyperfixi?: LokaScriptInstance;\n __hyperfixi_behaviors_ready?: Promise<void> | undefined;\n}\n\n/**\n * Resolve the LokaScript runtime from window globals.\n * Checks both `window.lokascript` and `window.hyperfixi`.\n */\nexport function resolveRuntime(): LokaScriptInstance | null {\n if (typeof window === 'undefined') return null;\n const win = window as unknown as LokaScriptWindow;\n return win.lokascript || win.hyperfixi || null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,IAAM,aAA6B;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,aACE;AAAA,EAEF,YAAY;AAAA,IACV;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM,CAAC,cAAc,UAAU;AAAA,MAC/B,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,EAAE,MAAM,gBAAgB,aAAa,wCAAwC;AAAA,EAC/E;AAAA,EACA,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KA+EL,KAAK;AACV;;;ACpBO,SAAS,iBAA4C;AAC1D,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,MAAM;AACZ,SAAO,IAAI,cAAc,IAAI,aAAa;AAC5C;;;AF3GO,IAAM,aAAa,WAAW;AAC9B,IAAM,eAAe;AAE5B,IAAI,YAAY;AAEhB,SAAS,SAAS,IAAiB,QAAwB;AACzD,MAAI,CAAC,GAAG,IAAI;AACV,OAAG,KAAK,GAAG,MAAM,IAAI,EAAE,SAAS;AAAA,EAClC;AACA,SAAO,GAAG;AACZ;AAKA,SAAS,YAAY,SAAsB,QAAmC;AAC5E,QAAM,cAAc,OAAO,gBAAgB,aAAa,aAAa;AACrE,QAAM,OAAO,OAAO,SAAS;AAC7B,QAAM,cAAe,OAAO,eAA0B;AACtD,QAAM,eAAe,OAAO,OAAO,cAAc,WAAW,OAAO,YAAY;AAG/E,QAAM,OAAO,MAAM,KAAK,QAAQ,iBAA8B,cAAc,CAAC;AAC7E,QAAM,SAAS,MAAM,KAAK,QAAQ,iBAA8B,mBAAmB,CAAC;AAEpF,MAAI,KAAK,WAAW,KAAK,OAAO,WAAW,EAAG;AAG9C,QAAM,UAAU,QAAQ,cAA2B,kBAAkB,KAAK,KAAK,CAAC,EAAE;AAClF,MAAI,WAAW,CAAC,QAAQ,aAAa,MAAM,GAAG;AAC5C,YAAQ,aAAa,QAAQ,SAAS;AAAA,EACxC;AACA,MAAI,SAAS;AACX,YAAQ,aAAa,oBAAoB,WAAW;AAAA,EACtD;AAGA,QAAM,QAAQ,KAAK,IAAI,KAAK,QAAQ,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,UAAM,QAAQ,SAAS,KAAK,CAAC,GAAG,KAAK;AACrC,UAAM,UAAU,SAAS,OAAO,CAAC,GAAG,UAAU;AAC9C,SAAK,CAAC,EAAE,aAAa,iBAAiB,OAAO;AAC7C,WAAO,CAAC,EAAE,aAAa,mBAAmB,KAAK;AAAA,EACjD;AAEA,MAAI,eAAe;AAEnB,WAAS,UAAU,OAAe,eAAgC;AAChE,QAAI,UAAU,iBAAiB,QAAQ,KAAK,SAAS,MAAO,QAAO;AAEnE,UAAM,SAAS;AAAA,MACb,KAAK,KAAK,KAAK;AAAA,MACf,OAAO,OAAO,KAAK;AAAA,MACnB;AAAA,MACA;AAAA,IACF;AAGA,UAAM,cAAc,IAAI,YAAY,eAAe;AAAA,MACjD,SAAS;AAAA,MACT,YAAY;AAAA,MACZ;AAAA,IACF,CAAC;AACD,YAAQ,cAAc,WAAW;AACjC,QAAI,YAAY,iBAAkB,QAAO;AAGzC,QAAI,iBAAiB,KAAK,gBAAgB,OAAO;AAC/C,WAAK,aAAa,EAAE,aAAa,iBAAiB,OAAO;AACzD,WAAK,aAAa,EAAE,aAAa,YAAY,IAAI;AACjD,WAAK,aAAa,EAAE,UAAU,OAAO,WAAW;AAChD,aAAO,aAAa,EAAE,aAAa,eAAe,MAAM;AACxD,aAAO,aAAa,EAAE,UAAU,OAAO,WAAW;AAAA,IACpD;AAGA,SAAK,KAAK,EAAE,aAAa,iBAAiB,MAAM;AAChD,SAAK,KAAK,EAAE,aAAa,YAAY,GAAG;AACxC,SAAK,KAAK,EAAE,UAAU,IAAI,WAAW;AACrC,WAAO,KAAK,EAAE,aAAa,eAAe,OAAO;AACjD,WAAO,KAAK,EAAE,UAAU,IAAI,WAAW;AAEvC,mBAAe;AAEf,YAAQ,cAAc,IAAI,YAAY,gBAAgB,EAAE,SAAS,MAAM,OAAO,CAAC,CAAC;AAChF,WAAO;AAAA,EACT;AAGA,WAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,SAAK,CAAC,EAAE,aAAa,iBAAiB,OAAO;AAC7C,SAAK,CAAC,EAAE,aAAa,YAAY,IAAI;AACrC,SAAK,CAAC,EAAE,UAAU,OAAO,WAAW;AACpC,WAAO,CAAC,EAAE,aAAa,eAAe,MAAM;AAC5C,WAAO,CAAC,EAAE,UAAU,OAAO,WAAW;AAAA,EACxC;AAEA,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,QAAQ,CAAC,CAAC;AAE7D,OAAK,OAAO,EAAE,aAAa,iBAAiB,MAAM;AAClD,OAAK,OAAO,EAAE,aAAa,YAAY,GAAG;AAC1C,OAAK,OAAO,EAAE,UAAU,IAAI,WAAW;AACvC,SAAO,OAAO,EAAE,aAAa,eAAe,OAAO;AACnD,SAAO,OAAO,EAAE,UAAU,IAAI,WAAW;AACzC,iBAAe;AAGf,WAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,SAAK,CAAC,EAAE,iBAAiB,SAAS,MAAM;AACtC,gBAAU,GAAG,YAAY;AACzB,WAAK,CAAC,EAAE,MAAM;AAAA,IAChB,CAAC;AAAA,EACH;AAGA,QAAM,YAAY,WAAW;AAC7B,YAAU,iBAAiB,WAAW,CAAC,MAAqB;AAC1D,UAAM,eAAe,gBAAgB;AACrC,UAAM,UAAU,eAAe,eAAe;AAC9C,UAAM,UAAU,eAAe,cAAc;AAE7C,QAAI,YAA2B;AAE/B,QAAI,EAAE,QAAQ,SAAS;AACrB,kBAAY,eAAe;AAC3B,UAAI,aAAa,MAAO,aAAY,OAAO,IAAI;AAAA,IACjD,WAAW,EAAE,QAAQ,SAAS;AAC5B,kBAAY,eAAe;AAC3B,UAAI,YAAY,EAAG,aAAY,OAAO,QAAQ,IAAI;AAAA,IACpD,WAAW,EAAE,QAAQ,QAAQ;AAC3B,kBAAY;AAAA,IACd,WAAW,EAAE,QAAQ,OAAO;AAC1B,kBAAY,QAAQ;AAAA,IACtB;AAEA,QAAI,cAAc,MAAM;AACtB,QAAE,eAAe;AACjB,UAAI,UAAU,WAAW,YAAY,GAAG;AACtC,aAAK,SAAS,EAAE,MAAM;AAAA,MACxB;AAAA,IACF;AAAA,EACF,CAAC;AAGD,UAAQ,iBAAiB,gBAAgB,CAAC,MAAmB;AAC3D,UAAM,QAAQ,EAAE,QAAQ;AACxB,QAAI,OAAO,UAAU,UAAU;AAC7B,gBAAU,OAAO,YAAY;AAAA,IAC/B;AAAA,EACF,EAAmB;AACrB;AAKA,eAAsB,aAAa,WAA+C;AAChF,QAAM,KAAK,aAAa,eAAe;AAEvC,MAAI,CAAC,IAAI;AACP,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY,CAAC,eAAe,aAAa,QAAQ,aAAa;AAAA,IAC9D,eAAe,CAAC;AAAA,IAChB,qBAAqB;AAAA,EACvB;AACA,QAAM,MAAM,GAAG,gBAAgB,GAAG,cAAc,IAAI,EAAE,QAAQ,oBAAI,IAAI,GAAG,SAAS,oBAAI,IAAI,EAAE;AAC5F,QAAM,GAAG,QAAQ,eAAe,GAAG;AACrC;AAGA,IAAI,eAAe,GAAG;AACpB,eAAa,EAAE,MAAM,QAAQ,KAAK;AACpC;AAEA,IAAO,eAAQ;AAAA,EACb,QAAQ,WAAW;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AACZ;","names":[]}
|
package/dist/behaviors/tabs.js
CHANGED
|
@@ -66,9 +66,12 @@ behavior Toggleable(cls, target)
|
|
|
66
66
|
end
|
|
67
67
|
on click
|
|
68
68
|
toggle .{cls} on target
|
|
69
|
+
js(target, cls)
|
|
70
|
+
var eventName = target.classList.contains(cls) ? 'toggleable:on' : 'toggleable:off';
|
|
71
|
+
target.dispatchEvent(new CustomEvent(eventName, { bubbles: true }));
|
|
72
|
+
end
|
|
69
73
|
end
|
|
70
|
-
end
|
|
71
|
-
`.trim()
|
|
74
|
+
end`.trim()
|
|
72
75
|
};
|
|
73
76
|
|
|
74
77
|
// src/schemas/types.ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/behaviors/toggleable.ts","../../src/schemas/toggleable.schema.ts","../../src/schemas/types.ts"],"sourcesContent":["/**\n * Toggleable Behavior — Imperative Implementation\n *\n * A behavior that toggles a CSS class on click.\n * Useful for accordions, dropdowns, and toggle buttons.\n *\n * Uses direct DOM APIs instead of compiling hyperscript source,\n * because `toggle .{cls}` template interpolation doesn't resolve\n * behavior parameters at runtime.\n *\n * @example\n * ```html\n * <button _=\"install Toggleable\">Toggle</button>\n *\n * <button _=\"install Toggleable(cls: expanded, target: #menu)\">Menu</button>\n * ```\n */\n\nimport { toggleableSchema } from '../schemas/toggleable.schema';\nimport type { LokaScriptInstance } from '../schemas/types';\nimport { resolveRuntime } from '../schemas/types';\n\n// Re-export schema-derived values for backwards compatibility\nexport const toggleableSource = toggleableSchema.source;\nexport const toggleableMetadata = toggleableSchema;\n\n/**\n * Imperative installer for Toggleable behavior.\n * Called directly by the runtime when `install Toggleable` is executed.\n */\nfunction installToggleable(element: HTMLElement, params: Record<string, any>): void {\n const cls = params.cls || 'active';\n\n // Resolve target element\n let targetEl: HTMLElement = element;\n if (params.target && params.target !== 'me') {\n if (typeof params.target === 'string') {\n const found = document.querySelector(params.target);\n if (found instanceof HTMLElement) targetEl = found;\n } else if (params.target instanceof HTMLElement) {\n targetEl = params.target;\n }\n }\n\n element.addEventListener('click', () => {\n const wasOn = targetEl.classList.contains(cls);\n targetEl.classList.toggle(cls);\n targetEl.dispatchEvent(\n new CustomEvent(wasOn ? 'toggleable:off' : 'toggleable:on', { bubbles: true })\n );\n });\n}\n\n/**\n * Register the Toggleable behavior with LokaScript.\n * Uses imperative installer via synthetic behavior node.\n */\nexport async function registerToggleable(hyperfixi?: LokaScriptInstance): Promise<void> {\n const hf = hyperfixi || resolveRuntime();\n\n if (!hf) {\n throw new Error(\n 'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'\n );\n }\n\n const syntheticNode = {\n type: 'behavior',\n name: 'Toggleable',\n parameters: ['cls', 'target'],\n eventHandlers: [],\n imperativeInstaller: installToggleable,\n };\n const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };\n await hf.execute(syntheticNode, ctx);\n}\n\n// Auto-register when loaded as a script tag\nif (resolveRuntime()) {\n registerToggleable().catch(console.error);\n}\n\nexport default {\n source: toggleableSchema.source,\n metadata: toggleableSchema,\n register: registerToggleable,\n};\n","import type { BehaviorSchema } from './types';\n\n/**\n * Toggleable Behavior Schema\n *\n * Toggles a CSS class on click.\n * Useful for accordions, dropdowns, and toggle buttons.\n */\nexport const toggleableSchema: BehaviorSchema = {\n name: 'Toggleable',\n category: 'form',\n tier: 'core',\n version: '1.0.0',\n description: 'Toggles a CSS class on click',\n parameters: [\n {\n name: 'cls',\n type: 'string',\n optional: true,\n default: 'active',\n description: 'CSS class to toggle',\n },\n {\n name: 'target',\n type: 'selector',\n optional: true,\n default: 'me',\n description: 'Element to toggle the class on',\n },\n ],\n events: [\n { name: 'toggleable:on', description: 'Fired when class is added' },\n { name: 'toggleable:off', description: 'Fired when class is removed' },\n ],\n source: `\nbehavior Toggleable(cls, target)\n init\n if cls is undefined\n set cls to \"active\"\n end\n if target is undefined\n set target to me\n end\n end\n on click\n toggle .{cls} on target\n end\nend
|
|
1
|
+
{"version":3,"sources":["../../src/behaviors/toggleable.ts","../../src/schemas/toggleable.schema.ts","../../src/schemas/types.ts"],"sourcesContent":["/**\n * Toggleable Behavior — Imperative Implementation\n *\n * A behavior that toggles a CSS class on click.\n * Useful for accordions, dropdowns, and toggle buttons.\n *\n * Uses direct DOM APIs instead of compiling hyperscript source,\n * because `toggle .{cls}` template interpolation doesn't resolve\n * behavior parameters at runtime.\n *\n * @example\n * ```html\n * <button _=\"install Toggleable\">Toggle</button>\n *\n * <button _=\"install Toggleable(cls: expanded, target: #menu)\">Menu</button>\n * ```\n */\n\nimport { toggleableSchema } from '../schemas/toggleable.schema';\nimport type { LokaScriptInstance } from '../schemas/types';\nimport { resolveRuntime } from '../schemas/types';\n\n// Re-export schema-derived values for backwards compatibility\nexport const toggleableSource = toggleableSchema.source;\nexport const toggleableMetadata = toggleableSchema;\n\n/**\n * Imperative installer for Toggleable behavior.\n * Called directly by the runtime when `install Toggleable` is executed.\n */\nfunction installToggleable(element: HTMLElement, params: Record<string, any>): void {\n const cls = params.cls || 'active';\n\n // Resolve target element\n let targetEl: HTMLElement = element;\n if (params.target && params.target !== 'me') {\n if (typeof params.target === 'string') {\n const found = document.querySelector(params.target);\n if (found instanceof HTMLElement) targetEl = found;\n } else if (params.target instanceof HTMLElement) {\n targetEl = params.target;\n }\n }\n\n element.addEventListener('click', () => {\n const wasOn = targetEl.classList.contains(cls);\n targetEl.classList.toggle(cls);\n targetEl.dispatchEvent(\n new CustomEvent(wasOn ? 'toggleable:off' : 'toggleable:on', { bubbles: true })\n );\n });\n}\n\n/**\n * Register the Toggleable behavior with LokaScript.\n * Uses imperative installer via synthetic behavior node.\n */\nexport async function registerToggleable(hyperfixi?: LokaScriptInstance): Promise<void> {\n const hf = hyperfixi || resolveRuntime();\n\n if (!hf) {\n throw new Error(\n 'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'\n );\n }\n\n const syntheticNode = {\n type: 'behavior',\n name: 'Toggleable',\n parameters: ['cls', 'target'],\n eventHandlers: [],\n imperativeInstaller: installToggleable,\n };\n const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };\n await hf.execute(syntheticNode, ctx);\n}\n\n// Auto-register when loaded as a script tag\nif (resolveRuntime()) {\n registerToggleable().catch(console.error);\n}\n\nexport default {\n source: toggleableSchema.source,\n metadata: toggleableSchema,\n register: registerToggleable,\n};\n","import type { BehaviorSchema } from './types';\n\n/**\n * Toggleable Behavior Schema\n *\n * Toggles a CSS class on click.\n * Useful for accordions, dropdowns, and toggle buttons.\n */\nexport const toggleableSchema: BehaviorSchema = {\n name: 'Toggleable',\n category: 'form',\n tier: 'core',\n version: '1.0.0',\n description: 'Toggles a CSS class on click',\n parameters: [\n {\n name: 'cls',\n type: 'string',\n optional: true,\n default: 'active',\n description: 'CSS class to toggle',\n },\n {\n name: 'target',\n type: 'selector',\n optional: true,\n default: 'me',\n description: 'Element to toggle the class on',\n },\n ],\n events: [\n { name: 'toggleable:on', description: 'Fired when class is added' },\n { name: 'toggleable:off', description: 'Fired when class is removed' },\n ],\n source: `\nbehavior Toggleable(cls, target)\n init\n if cls is undefined\n set cls to \"active\"\n end\n if target is undefined\n set target to me\n end\n end\n on click\n toggle .{cls} on target\n js(target, cls)\n var eventName = target.classList.contains(cls) ? 'toggleable:on' : 'toggleable:off';\n target.dispatchEvent(new CustomEvent(eventName, { bubbles: true }));\n end\n end\nend`.trim(),\n};\n","/**\n * Behavior Schema Types\n *\n * Defines the structure for behavior metadata used for:\n * - Code generation (TypeScript types, documentation)\n * - Runtime categorization and lazy loading\n * - Tooling and IDE integration\n */\n\n/**\n * Behavior categories for organization.\n * - ui: Visual interaction behaviors (drag, resize, sort)\n * - data: Data manipulation behaviors (remove, transform)\n * - animation: Animation and transition behaviors\n * - form: Form-related behaviors (validation, toggle states)\n * - layout: Layout behaviors (sticky, scrollspy)\n */\nexport type BehaviorCategory = 'ui' | 'data' | 'animation' | 'form' | 'layout';\n\n/**\n * Loading tiers for lazy loading optimization.\n * - core: Always loaded (essential behaviors)\n * - common: High usage (loaded for typical apps)\n * - optional: Low usage (loaded on demand)\n */\nexport type BehaviorTier = 'core' | 'common' | 'optional';\n\n/**\n * Schema for a behavior parameter.\n */\nexport interface ParameterSchema {\n name: string;\n type: 'string' | 'number' | 'boolean' | 'selector' | 'element';\n optional?: boolean;\n default?: string | number | boolean;\n /** Allowed values for constrained parameters */\n enum?: string[];\n description: string;\n}\n\n/**\n * Schema for a behavior event.\n */\nexport interface EventSchema {\n name: string;\n description: string;\n}\n\n/**\n * Complete schema for a behavior.\n * This is the source of truth for all behavior metadata.\n */\nexport interface BehaviorSchema {\n /** Behavior name (PascalCase) */\n name: string;\n /** Category for organization */\n category: BehaviorCategory;\n /** Loading tier for lazy loading */\n tier: BehaviorTier;\n /** Semantic version */\n version: string;\n /** Human-readable description */\n description: string;\n /** Parameter definitions */\n parameters: ParameterSchema[];\n /** Event definitions */\n events: EventSchema[];\n /** The hyperscript behavior source code */\n source: string;\n /** Optional requirements or notes */\n requirements?: string[];\n}\n\n/**\n * Runtime behavior module interface.\n * This is what gets registered with the hyperfixi runtime.\n */\nexport interface BehaviorModule {\n source: string;\n metadata: BehaviorSchema;\n register: (hyperfixi?: LokaScriptInstance) => Promise<void>;\n}\n\n/**\n * Minimal LokaScript instance interface for behavior registration.\n */\nexport interface LokaScriptInstance {\n compileSync: (\n code: string,\n options?: { traditional?: boolean; language?: string }\n ) => {\n ok: boolean;\n ast?: unknown;\n errors?: Array<{ message: string; line?: number; column?: number }>;\n };\n execute: (ast: unknown, ctx: unknown) => Promise<unknown>;\n createContext?: () => { locals: Map<string, unknown>; globals: Map<string, unknown> };\n}\n\n/**\n * Typed window interface for behavior auto-registration.\n * Avoids `(window as any)` casts throughout the codebase.\n * Checks both `window.lokascript` and `window.hyperfixi` for the runtime instance.\n */\nexport interface LokaScriptWindow {\n lokascript?: LokaScriptInstance;\n hyperfixi?: LokaScriptInstance;\n __hyperfixi_behaviors_ready?: Promise<void> | undefined;\n}\n\n/**\n * Resolve the LokaScript runtime from window globals.\n * Checks both `window.lokascript` and `window.hyperfixi`.\n */\nexport function resolveRuntime(): LokaScriptInstance | null {\n if (typeof window === 'undefined') return null;\n const win = window as unknown as LokaScriptWindow;\n return win.lokascript || win.hyperfixi || null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACQO,IAAM,mBAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AAAA,IACV;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,iBAAiB,aAAa,4BAA4B;AAAA,IAClE,EAAE,MAAM,kBAAkB,aAAa,8BAA8B;AAAA,EACvE;AAAA,EACA,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAiBL,KAAK;AACV;;;AC8DO,SAAS,iBAA4C;AAC1D,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,MAAM;AACZ,SAAO,IAAI,cAAc,IAAI,aAAa;AAC5C;;;AF/FO,IAAM,mBAAmB,iBAAiB;AAC1C,IAAM,qBAAqB;AAMlC,SAAS,kBAAkB,SAAsB,QAAmC;AAClF,QAAM,MAAM,OAAO,OAAO;AAG1B,MAAI,WAAwB;AAC5B,MAAI,OAAO,UAAU,OAAO,WAAW,MAAM;AAC3C,QAAI,OAAO,OAAO,WAAW,UAAU;AACrC,YAAM,QAAQ,SAAS,cAAc,OAAO,MAAM;AAClD,UAAI,iBAAiB,YAAa,YAAW;AAAA,IAC/C,WAAW,OAAO,kBAAkB,aAAa;AAC/C,iBAAW,OAAO;AAAA,IACpB;AAAA,EACF;AAEA,UAAQ,iBAAiB,SAAS,MAAM;AACtC,UAAM,QAAQ,SAAS,UAAU,SAAS,GAAG;AAC7C,aAAS,UAAU,OAAO,GAAG;AAC7B,aAAS;AAAA,MACP,IAAI,YAAY,QAAQ,mBAAmB,iBAAiB,EAAE,SAAS,KAAK,CAAC;AAAA,IAC/E;AAAA,EACF,CAAC;AACH;AAMA,eAAsB,mBAAmB,WAA+C;AACtF,QAAM,KAAK,aAAa,eAAe;AAEvC,MAAI,CAAC,IAAI;AACP,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY,CAAC,OAAO,QAAQ;AAAA,IAC5B,eAAe,CAAC;AAAA,IAChB,qBAAqB;AAAA,EACvB;AACA,QAAM,MAAM,GAAG,gBAAgB,GAAG,cAAc,IAAI,EAAE,QAAQ,oBAAI,IAAI,GAAG,SAAS,oBAAI,IAAI,EAAE;AAC5F,QAAM,GAAG,QAAQ,eAAe,GAAG;AACrC;AAGA,IAAI,eAAe,GAAG;AACpB,qBAAmB,EAAE,MAAM,QAAQ,KAAK;AAC1C;AAEA,IAAO,qBAAQ;AAAA,EACb,QAAQ,iBAAiB;AAAA,EACzB,UAAU;AAAA,EACV,UAAU;AACZ;","names":[]}
|
|
@@ -3,8 +3,8 @@ import {
|
|
|
3
3
|
toggleableMetadata,
|
|
4
4
|
toggleableSource,
|
|
5
5
|
toggleable_default
|
|
6
|
-
} from "../chunk-
|
|
7
|
-
import "../chunk-
|
|
6
|
+
} from "../chunk-GALKOMJ5.js";
|
|
7
|
+
import "../chunk-XYZ7FOXJ.js";
|
|
8
8
|
import "../chunk-6TJXDCAQ.js";
|
|
9
9
|
export {
|
|
10
10
|
toggleable_default as default,
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
// src/schemas/autodismiss.schema.ts
|
|
2
|
+
var autoDismissSchema = {
|
|
3
|
+
name: "AutoDismiss",
|
|
4
|
+
category: "ui",
|
|
5
|
+
tier: "core",
|
|
6
|
+
version: "1.0.0",
|
|
7
|
+
description: "Auto-removes elements after a delay with optional pause-on-hover",
|
|
8
|
+
parameters: [
|
|
9
|
+
{
|
|
10
|
+
name: "delay",
|
|
11
|
+
type: "number",
|
|
12
|
+
optional: true,
|
|
13
|
+
default: 5e3,
|
|
14
|
+
description: "Time in ms before the element is removed"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
name: "pauseOnHover",
|
|
18
|
+
type: "boolean",
|
|
19
|
+
optional: true,
|
|
20
|
+
default: true,
|
|
21
|
+
description: "Pause the countdown when the mouse hovers over the element"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
name: "effect",
|
|
25
|
+
type: "string",
|
|
26
|
+
optional: true,
|
|
27
|
+
default: "none",
|
|
28
|
+
enum: ["fade", "none"],
|
|
29
|
+
description: 'Transition effect before removal: "fade" or "none"'
|
|
30
|
+
}
|
|
31
|
+
],
|
|
32
|
+
events: [
|
|
33
|
+
{ name: "autodismiss:start", description: "Fired when the countdown timer starts" },
|
|
34
|
+
{
|
|
35
|
+
name: "autodismiss:dismissed",
|
|
36
|
+
description: "Fired before removal (cancelable via preventDefault)"
|
|
37
|
+
},
|
|
38
|
+
{ name: "autodismiss:paused", description: "Fired when the timer is paused on hover" },
|
|
39
|
+
{ name: "autodismiss:resumed", description: "Fired when the timer resumes on mouseleave" }
|
|
40
|
+
],
|
|
41
|
+
source: `
|
|
42
|
+
behavior AutoDismiss(delay, pauseOnHover, effect)
|
|
43
|
+
init
|
|
44
|
+
if delay is undefined
|
|
45
|
+
set delay to 5000
|
|
46
|
+
end
|
|
47
|
+
if pauseOnHover is undefined
|
|
48
|
+
set pauseOnHover to true
|
|
49
|
+
end
|
|
50
|
+
if effect is undefined
|
|
51
|
+
set effect to "none"
|
|
52
|
+
end
|
|
53
|
+
js(me, delay, effect, pauseOnHover)
|
|
54
|
+
me.dispatchEvent(new CustomEvent('autodismiss:start', { bubbles: true }));
|
|
55
|
+
var remaining = delay;
|
|
56
|
+
var startedAt = Date.now();
|
|
57
|
+
var timerId = null;
|
|
58
|
+
function dismiss() {
|
|
59
|
+
var ev = new CustomEvent('autodismiss:dismissed', { bubbles: true, cancelable: true });
|
|
60
|
+
me.dispatchEvent(ev);
|
|
61
|
+
if (ev.defaultPrevented) return;
|
|
62
|
+
if (effect === 'fade') {
|
|
63
|
+
me.style.transition = 'opacity 300ms';
|
|
64
|
+
me.style.opacity = '0';
|
|
65
|
+
setTimeout(function() { me.remove(); }, 300);
|
|
66
|
+
} else {
|
|
67
|
+
me.remove();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function start() {
|
|
71
|
+
startedAt = Date.now();
|
|
72
|
+
timerId = setTimeout(dismiss, remaining);
|
|
73
|
+
}
|
|
74
|
+
start();
|
|
75
|
+
if (pauseOnHover) {
|
|
76
|
+
me.addEventListener('mouseenter', function() {
|
|
77
|
+
if (timerId != null) {
|
|
78
|
+
clearTimeout(timerId);
|
|
79
|
+
timerId = null;
|
|
80
|
+
remaining -= Date.now() - startedAt;
|
|
81
|
+
if (remaining < 0) remaining = 0;
|
|
82
|
+
me.dispatchEvent(new CustomEvent('autodismiss:paused', { bubbles: true }));
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
me.addEventListener('mouseleave', function() {
|
|
86
|
+
if (timerId == null && me.isConnected) {
|
|
87
|
+
me.dispatchEvent(new CustomEvent('autodismiss:resumed', { bubbles: true }));
|
|
88
|
+
start();
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
end
|
|
93
|
+
end
|
|
94
|
+
end`.trim()
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export {
|
|
98
|
+
autoDismissSchema
|
|
99
|
+
};
|
|
100
|
+
//# sourceMappingURL=chunk-66U2RSYJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/schemas/autodismiss.schema.ts"],"sourcesContent":["import type { BehaviorSchema } from './types';\n\n/**\n * AutoDismiss Behavior Schema\n *\n * Auto-removes flash messages and toasts after a configurable delay.\n * Supports pause-on-hover and fade effect.\n */\nexport const autoDismissSchema: BehaviorSchema = {\n name: 'AutoDismiss',\n category: 'ui',\n tier: 'core',\n version: '1.0.0',\n description: 'Auto-removes elements after a delay with optional pause-on-hover',\n parameters: [\n {\n name: 'delay',\n type: 'number',\n optional: true,\n default: 5000,\n description: 'Time in ms before the element is removed',\n },\n {\n name: 'pauseOnHover',\n type: 'boolean',\n optional: true,\n default: true,\n description: 'Pause the countdown when the mouse hovers over the element',\n },\n {\n name: 'effect',\n type: 'string',\n optional: true,\n default: 'none',\n enum: ['fade', 'none'],\n description: 'Transition effect before removal: \"fade\" or \"none\"',\n },\n ],\n events: [\n { name: 'autodismiss:start', description: 'Fired when the countdown timer starts' },\n {\n name: 'autodismiss:dismissed',\n description: 'Fired before removal (cancelable via preventDefault)',\n },\n { name: 'autodismiss:paused', description: 'Fired when the timer is paused on hover' },\n { name: 'autodismiss:resumed', description: 'Fired when the timer resumes on mouseleave' },\n ],\n source: `\nbehavior AutoDismiss(delay, pauseOnHover, effect)\n init\n if delay is undefined\n set delay to 5000\n end\n if pauseOnHover is undefined\n set pauseOnHover to true\n end\n if effect is undefined\n set effect to \"none\"\n end\n js(me, delay, effect, pauseOnHover)\n me.dispatchEvent(new CustomEvent('autodismiss:start', { bubbles: true }));\n var remaining = delay;\n var startedAt = Date.now();\n var timerId = null;\n function dismiss() {\n var ev = new CustomEvent('autodismiss:dismissed', { bubbles: true, cancelable: true });\n me.dispatchEvent(ev);\n if (ev.defaultPrevented) return;\n if (effect === 'fade') {\n me.style.transition = 'opacity 300ms';\n me.style.opacity = '0';\n setTimeout(function() { me.remove(); }, 300);\n } else {\n me.remove();\n }\n }\n function start() {\n startedAt = Date.now();\n timerId = setTimeout(dismiss, remaining);\n }\n start();\n if (pauseOnHover) {\n me.addEventListener('mouseenter', function() {\n if (timerId != null) {\n clearTimeout(timerId);\n timerId = null;\n remaining -= Date.now() - startedAt;\n if (remaining < 0) remaining = 0;\n me.dispatchEvent(new CustomEvent('autodismiss:paused', { bubbles: true }));\n }\n });\n me.addEventListener('mouseleave', function() {\n if (timerId == null && me.isConnected) {\n me.dispatchEvent(new CustomEvent('autodismiss:resumed', { bubbles: true }));\n start();\n }\n });\n }\n end\n end\nend`.trim(),\n};\n"],"mappings":";AAQO,IAAM,oBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AAAA,IACV;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,qBAAqB,aAAa,wCAAwC;AAAA,IAClF;AAAA,MACE,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,EAAE,MAAM,sBAAsB,aAAa,0CAA0C;AAAA,IACrF,EAAE,MAAM,uBAAuB,aAAa,6CAA6C;AAAA,EAC3F;AAAA,EACA,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAqDL,KAAK;AACV;","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
clipboardSchema
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-WOTZO7K4.js";
|
|
4
4
|
import {
|
|
5
5
|
resolveRuntime
|
|
6
6
|
} from "./chunk-6TJXDCAQ.js";
|
|
@@ -96,4 +96,4 @@ export {
|
|
|
96
96
|
registerClipboard,
|
|
97
97
|
clipboard_default
|
|
98
98
|
};
|
|
99
|
-
//# sourceMappingURL=chunk-
|
|
99
|
+
//# sourceMappingURL=chunk-7O7UOSBH.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
scrollRevealSchema
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-URZGNPTQ.js";
|
|
4
4
|
import {
|
|
5
5
|
resolveRuntime
|
|
6
6
|
} from "./chunk-6TJXDCAQ.js";
|
|
@@ -64,4 +64,4 @@ export {
|
|
|
64
64
|
registerScrollReveal,
|
|
65
65
|
scrollreveal_default
|
|
66
66
|
};
|
|
67
|
-
//# sourceMappingURL=chunk-
|
|
67
|
+
//# sourceMappingURL=chunk-EKKJVXDZ.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
focusTrapSchema
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-OJ3YWO3W.js";
|
|
4
4
|
import {
|
|
5
5
|
resolveRuntime
|
|
6
6
|
} from "./chunk-6TJXDCAQ.js";
|
|
@@ -113,4 +113,4 @@ export {
|
|
|
113
113
|
registerFocusTrap,
|
|
114
114
|
focustrap_default
|
|
115
115
|
};
|
|
116
|
-
//# sourceMappingURL=chunk-
|
|
116
|
+
//# sourceMappingURL=chunk-F3CASJ7Q.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
toggleableSchema
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-XYZ7FOXJ.js";
|
|
4
4
|
import {
|
|
5
5
|
resolveRuntime
|
|
6
6
|
} from "./chunk-6TJXDCAQ.js";
|
|
@@ -59,4 +59,4 @@ export {
|
|
|
59
59
|
registerToggleable,
|
|
60
60
|
toggleable_default
|
|
61
61
|
};
|
|
62
|
-
//# sourceMappingURL=chunk-
|
|
62
|
+
//# sourceMappingURL=chunk-GALKOMJ5.js.map
|
|
@@ -14,7 +14,7 @@ var removableSchema = {
|
|
|
14
14
|
description: "Element that triggers removal (e.g., a close button)"
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
|
-
name: "
|
|
17
|
+
name: "confirmRemoval",
|
|
18
18
|
type: "boolean",
|
|
19
19
|
optional: true,
|
|
20
20
|
default: false,
|
|
@@ -34,15 +34,18 @@ var removableSchema = {
|
|
|
34
34
|
{ name: "removable:removed", description: "Fired after removal" }
|
|
35
35
|
],
|
|
36
36
|
source: `
|
|
37
|
-
behavior Removable(triggerEl,
|
|
37
|
+
behavior Removable(triggerEl, confirmRemoval, effect)
|
|
38
38
|
init
|
|
39
39
|
if triggerEl is undefined
|
|
40
40
|
set triggerEl to me
|
|
41
41
|
end
|
|
42
42
|
end
|
|
43
43
|
on click from triggerEl
|
|
44
|
-
if
|
|
45
|
-
|
|
44
|
+
if confirmRemoval
|
|
45
|
+
js(me)
|
|
46
|
+
if (!window.confirm("Are you sure?")) return "cancel";
|
|
47
|
+
end
|
|
48
|
+
if it is "cancel"
|
|
46
49
|
halt
|
|
47
50
|
end
|
|
48
51
|
end
|
|
@@ -60,4 +63,4 @@ end
|
|
|
60
63
|
export {
|
|
61
64
|
removableSchema
|
|
62
65
|
};
|
|
63
|
-
//# sourceMappingURL=chunk-
|
|
66
|
+
//# sourceMappingURL=chunk-HMU342XE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/schemas/removable.schema.ts"],"sourcesContent":["import type { BehaviorSchema } from './types';\n\n/**\n * Removable Behavior Schema\n *\n * Removes an element when a trigger is clicked.\n * Supports optional confirmation and transition effects.\n *\n * @since 1.2.0 — `trigger` parameter renamed to `triggerEl` to avoid\n * shadowing the hyperscript `trigger` command keyword. Users migrating\n * from v1.x should update: `install Removable(triggerEl: .close-btn)`.\n */\nexport const removableSchema: BehaviorSchema = {\n name: 'Removable',\n category: 'data',\n tier: 'common',\n version: '1.2.0',\n description: 'Makes elements removable on click',\n parameters: [\n {\n name: 'triggerEl',\n type: 'selector',\n optional: true,\n default: 'me',\n description: 'Element that triggers removal (e.g., a close button)',\n },\n {\n name: 'confirmRemoval',\n type: 'boolean',\n optional: true,\n default: false,\n description: 'Show confirmation dialog before removal',\n },\n {\n name: 'effect',\n type: 'string',\n optional: true,\n default: 'none',\n enum: ['fade', 'none'],\n description: 'Transition effect: \"fade\" or \"none\"',\n },\n ],\n events: [\n { name: 'removable:before', description: 'Fired before removal (cancelable)' },\n { name: 'removable:removed', description: 'Fired after removal' },\n ],\n source: `\nbehavior Removable(triggerEl, confirmRemoval, effect)\n init\n if triggerEl is undefined\n set triggerEl to me\n end\n end\n on click from triggerEl\n if confirmRemoval\n js(me)\n if (!window.confirm(\"Are you sure?\")) return \"cancel\";\n end\n if it is \"cancel\"\n halt\n end\n end\n trigger removable:before\n if effect is \"fade\"\n transition opacity to 0 over 300ms\n end\n trigger removable:removed\n remove me\n end\nend\n`.trim(),\n};\n"],"mappings":";AAYO,IAAM,kBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AAAA,IACV;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,oBAAoB,aAAa,oCAAoC;AAAA,IAC7E,EAAE,MAAM,qBAAqB,aAAa,sBAAsB;AAAA,EAClE;AAAA,EACA,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBR,KAAK;AACP;","names":[]}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
// src/schemas/tabs.schema.ts
|
|
2
|
+
var tabsSchema = {
|
|
3
|
+
name: "Tabs",
|
|
4
|
+
category: "ui",
|
|
5
|
+
tier: "core",
|
|
6
|
+
version: "1.0.0",
|
|
7
|
+
description: "WAI-ARIA compliant tabs with roving tabindex keyboard navigation. Auto-wires role, aria-selected, aria-controls, and aria-labelledby attributes.",
|
|
8
|
+
parameters: [
|
|
9
|
+
{
|
|
10
|
+
name: "orientation",
|
|
11
|
+
type: "string",
|
|
12
|
+
optional: true,
|
|
13
|
+
default: "horizontal",
|
|
14
|
+
enum: ["horizontal", "vertical"],
|
|
15
|
+
description: "Arrow key direction: horizontal (Left/Right) or vertical (Up/Down)"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
name: "activeTab",
|
|
19
|
+
type: "number",
|
|
20
|
+
optional: true,
|
|
21
|
+
default: 0,
|
|
22
|
+
description: "Initial active tab index (zero-based)"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
name: "wrap",
|
|
26
|
+
type: "boolean",
|
|
27
|
+
optional: true,
|
|
28
|
+
default: true,
|
|
29
|
+
description: "Wrap to first/last tab when navigating past the end"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
name: "activeClass",
|
|
33
|
+
type: "string",
|
|
34
|
+
optional: true,
|
|
35
|
+
default: "active",
|
|
36
|
+
description: "CSS class applied to the active tab and its panel"
|
|
37
|
+
}
|
|
38
|
+
],
|
|
39
|
+
events: [
|
|
40
|
+
{
|
|
41
|
+
name: "tabs:change",
|
|
42
|
+
description: "Fired before tab selection changes (cancelable via preventDefault)"
|
|
43
|
+
},
|
|
44
|
+
{ name: "tabs:changed", description: "Fired after tab selection has changed" }
|
|
45
|
+
],
|
|
46
|
+
requirements: [
|
|
47
|
+
'Sets role="tablist" on the tab container',
|
|
48
|
+
'Sets role="tab" on tab buttons and role="tabpanel" on content panels',
|
|
49
|
+
"Manages aria-selected, aria-controls, aria-labelledby, and tabindex",
|
|
50
|
+
"Keyboard: Arrow keys navigate, Home/End jump to first/last, Tab exits tablist"
|
|
51
|
+
],
|
|
52
|
+
source: `
|
|
53
|
+
behavior Tabs(orientation, activeTab, wrap, activeClass)
|
|
54
|
+
init
|
|
55
|
+
if orientation is undefined
|
|
56
|
+
set orientation to "horizontal"
|
|
57
|
+
end
|
|
58
|
+
if activeTab is undefined
|
|
59
|
+
set activeTab to 0
|
|
60
|
+
end
|
|
61
|
+
if wrap is undefined
|
|
62
|
+
set wrap to true
|
|
63
|
+
end
|
|
64
|
+
if activeClass is undefined
|
|
65
|
+
set activeClass to "active"
|
|
66
|
+
end
|
|
67
|
+
js(me, orientation, activeTab, wrap, activeClass)
|
|
68
|
+
var tabs = Array.from(me.querySelectorAll('[role="tab"]'));
|
|
69
|
+
var panels = Array.from(me.querySelectorAll('[role="tabpanel"]'));
|
|
70
|
+
if (tabs.length === 0 || panels.length === 0) return;
|
|
71
|
+
var tablist = me.querySelector('[role="tablist"]') || tabs[0].parentElement;
|
|
72
|
+
if (tablist) tablist.setAttribute('aria-orientation', orientation);
|
|
73
|
+
var count = Math.min(tabs.length, panels.length);
|
|
74
|
+
var idN = 0;
|
|
75
|
+
for (var i = 0; i < count; i++) {
|
|
76
|
+
if (!tabs[i].id) tabs[i].id = 'tab-' + (++idN);
|
|
77
|
+
if (!panels[i].id) panels[i].id = 'tabpanel-' + idN;
|
|
78
|
+
tabs[i].setAttribute('aria-controls', panels[i].id);
|
|
79
|
+
panels[i].setAttribute('aria-labelledby', tabs[i].id);
|
|
80
|
+
}
|
|
81
|
+
var cur = Math.max(0, Math.min(activeTab, count - 1));
|
|
82
|
+
function activate(idx, prev) {
|
|
83
|
+
if (idx === prev || idx < 0 || idx >= count) return false;
|
|
84
|
+
var ev = new CustomEvent('tabs:change', { bubbles: true, cancelable: true, detail: { index: idx, previousIndex: prev } });
|
|
85
|
+
me.dispatchEvent(ev);
|
|
86
|
+
if (ev.defaultPrevented) return false;
|
|
87
|
+
if (prev >= 0 && prev < count) {
|
|
88
|
+
tabs[prev].setAttribute('aria-selected', 'false');
|
|
89
|
+
tabs[prev].setAttribute('tabindex', '-1');
|
|
90
|
+
tabs[prev].classList.remove(activeClass);
|
|
91
|
+
panels[prev].setAttribute('aria-hidden', 'true');
|
|
92
|
+
panels[prev].classList.remove(activeClass);
|
|
93
|
+
}
|
|
94
|
+
tabs[idx].setAttribute('aria-selected', 'true');
|
|
95
|
+
tabs[idx].setAttribute('tabindex', '0');
|
|
96
|
+
tabs[idx].classList.add(activeClass);
|
|
97
|
+
panels[idx].setAttribute('aria-hidden', 'false');
|
|
98
|
+
panels[idx].classList.add(activeClass);
|
|
99
|
+
cur = idx;
|
|
100
|
+
me.dispatchEvent(new CustomEvent('tabs:changed', { bubbles: true, detail: { index: idx } }));
|
|
101
|
+
return true;
|
|
102
|
+
}
|
|
103
|
+
for (var j = 0; j < count; j++) {
|
|
104
|
+
tabs[j].setAttribute('aria-selected', 'false');
|
|
105
|
+
tabs[j].setAttribute('tabindex', '-1');
|
|
106
|
+
panels[j].setAttribute('aria-hidden', 'true');
|
|
107
|
+
panels[j].classList.remove(activeClass);
|
|
108
|
+
}
|
|
109
|
+
tabs[cur].setAttribute('aria-selected', 'true');
|
|
110
|
+
tabs[cur].setAttribute('tabindex', '0');
|
|
111
|
+
tabs[cur].classList.add(activeClass);
|
|
112
|
+
panels[cur].setAttribute('aria-hidden', 'false');
|
|
113
|
+
panels[cur].classList.add(activeClass);
|
|
114
|
+
for (var k = 0; k < count; k++) {
|
|
115
|
+
(function(idx) {
|
|
116
|
+
tabs[idx].addEventListener('click', function() { if (activate(idx, cur)) tabs[idx].focus(); });
|
|
117
|
+
})(k);
|
|
118
|
+
}
|
|
119
|
+
(tablist || me).addEventListener('keydown', function(e) {
|
|
120
|
+
var nk = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
|
|
121
|
+
var pk = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
|
|
122
|
+
var next = null;
|
|
123
|
+
if (e.key === nk) { next = cur + 1; if (next >= count) next = wrap ? 0 : null; }
|
|
124
|
+
else if (e.key === pk) { next = cur - 1; if (next < 0) next = wrap ? count - 1 : null; }
|
|
125
|
+
else if (e.key === 'Home') next = 0;
|
|
126
|
+
else if (e.key === 'End') next = count - 1;
|
|
127
|
+
if (next !== null) { e.preventDefault(); if (activate(next, cur)) tabs[next].focus(); }
|
|
128
|
+
});
|
|
129
|
+
end
|
|
130
|
+
end
|
|
131
|
+
end`.trim()
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
export {
|
|
135
|
+
tabsSchema
|
|
136
|
+
};
|
|
137
|
+
//# sourceMappingURL=chunk-HQDYH45I.js.map
|