aeico-components 0.1.8 → 0.1.10
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/README.md +0 -0
- package/dist/alert.cjs +20 -29
- package/dist/alert.cjs.map +3 -3
- package/dist/alert.js +20 -29
- package/dist/alert.js.map +3 -3
- package/dist/badge.cjs +19 -28
- package/dist/badge.cjs.map +3 -3
- package/dist/badge.js +19 -28
- package/dist/badge.js.map +3 -3
- package/dist/breadcrumb.cjs +22 -33
- package/dist/breadcrumb.cjs.map +3 -3
- package/dist/breadcrumb.js +22 -33
- package/dist/breadcrumb.js.map +3 -3
- package/dist/button-group.cjs +19 -28
- package/dist/button-group.cjs.map +3 -3
- package/dist/button-group.js +19 -28
- package/dist/button-group.js.map +3 -3
- package/dist/button.cjs +19 -29
- package/dist/button.cjs.map +3 -3
- package/dist/button.js +19 -29
- package/dist/button.js.map +3 -3
- package/dist/card.cjs +19 -29
- package/dist/card.cjs.map +3 -3
- package/dist/card.js +19 -29
- package/dist/card.js.map +3 -3
- package/dist/checkbox.cjs +21 -31
- package/dist/checkbox.cjs.map +3 -3
- package/dist/checkbox.js +21 -31
- package/dist/checkbox.js.map +3 -3
- package/dist/copy-button.cjs +25 -33
- package/dist/copy-button.cjs.map +2 -2
- package/dist/copy-button.js +25 -33
- package/dist/copy-button.js.map +3 -3
- package/dist/detail-group.cjs +19 -29
- package/dist/detail-group.cjs.map +3 -3
- package/dist/detail-group.js +19 -29
- package/dist/detail-group.js.map +3 -3
- package/dist/detail.cjs +19 -29
- package/dist/detail.cjs.map +3 -3
- package/dist/detail.js +19 -29
- package/dist/detail.js.map +3 -3
- package/dist/dialog.cjs +24 -32
- package/dist/dialog.cjs.map +2 -2
- package/dist/dialog.js +24 -32
- package/dist/dialog.js.map +3 -3
- package/dist/divider.cjs +20 -30
- package/dist/divider.cjs.map +3 -3
- package/dist/divider.js +20 -30
- package/dist/divider.js.map +3 -3
- package/dist/drawer.cjs +24 -32
- package/dist/drawer.cjs.map +2 -2
- package/dist/drawer.js +24 -32
- package/dist/drawer.js.map +3 -3
- package/dist/dropdown.cjs +31 -43
- package/dist/dropdown.cjs.map +3 -3
- package/dist/dropdown.js +31 -43
- package/dist/dropdown.js.map +3 -3
- package/dist/icon-button.cjs +25 -35
- package/dist/icon-button.cjs.map +3 -3
- package/dist/icon-button.js +25 -35
- package/dist/icon-button.js.map +3 -3
- package/dist/icon.cjs +20 -26
- package/dist/icon.cjs.map +2 -2
- package/dist/icon.js +20 -26
- package/dist/icon.js.map +2 -2
- package/dist/index.cjs +75 -113
- package/dist/index.cjs.map +3 -3
- package/dist/index.js +75 -113
- package/dist/index.js.map +3 -3
- package/dist/menu.cjs +20 -31
- package/dist/menu.cjs.map +3 -3
- package/dist/menu.js +20 -31
- package/dist/menu.js.map +3 -3
- package/dist/navbar.cjs +19 -29
- package/dist/navbar.cjs.map +3 -3
- package/dist/navbar.js +19 -29
- package/dist/navbar.js.map +3 -3
- package/dist/number-input.cjs +21 -31
- package/dist/number-input.cjs.map +3 -3
- package/dist/number-input.js +21 -31
- package/dist/number-input.js.map +3 -3
- package/dist/pagination.cjs +24 -33
- package/dist/pagination.cjs.map +2 -2
- package/dist/pagination.js +24 -33
- package/dist/pagination.js.map +3 -3
- package/dist/progress-bar.cjs +19 -29
- package/dist/progress-bar.cjs.map +3 -3
- package/dist/progress-bar.js +19 -29
- package/dist/progress-bar.js.map +3 -3
- package/dist/radio-group.cjs +24 -35
- package/dist/radio-group.cjs.map +3 -3
- package/dist/radio-group.js +24 -35
- package/dist/radio-group.js.map +3 -3
- package/dist/select.cjs +23 -34
- package/dist/select.cjs.map +3 -3
- package/dist/select.js +23 -34
- package/dist/select.js.map +3 -3
- package/dist/slider.cjs +21 -32
- package/dist/slider.cjs.map +3 -3
- package/dist/slider.js +21 -32
- package/dist/slider.js.map +3 -3
- package/dist/spinner.cjs +19 -29
- package/dist/spinner.cjs.map +3 -3
- package/dist/spinner.js +19 -29
- package/dist/spinner.js.map +3 -3
- package/dist/styles/layout.cjs +1 -1
- package/dist/styles/layout.js +1 -1
- package/dist/styles/radius.cjs +1 -1
- package/dist/styles/radius.js +1 -1
- package/dist/styles/variables.cjs +1 -1
- package/dist/styles/variables.js +1 -1
- package/dist/switch.cjs +26 -35
- package/dist/switch.cjs.map +3 -3
- package/dist/switch.js +26 -35
- package/dist/switch.js.map +3 -3
- package/dist/tabs.cjs +21 -30
- package/dist/tabs.cjs.map +3 -3
- package/dist/tabs.js +21 -30
- package/dist/tabs.js.map +3 -3
- package/dist/tag.cjs +19 -28
- package/dist/tag.cjs.map +3 -3
- package/dist/tag.js +19 -28
- package/dist/tag.js.map +3 -3
- package/dist/text-input.cjs +21 -31
- package/dist/text-input.cjs.map +3 -3
- package/dist/text-input.js +21 -31
- package/dist/text-input.js.map +3 -3
- package/dist/textarea.cjs +21 -31
- package/dist/textarea.cjs.map +3 -3
- package/dist/textarea.js +21 -31
- package/dist/textarea.js.map +3 -3
- package/dist/tooltip.cjs +19 -28
- package/dist/tooltip.cjs.map +3 -3
- package/dist/tooltip.js +19 -28
- package/dist/tooltip.js.map +3 -3
- package/dist/tree.cjs +25 -35
- package/dist/tree.cjs.map +3 -3
- package/dist/tree.js +25 -35
- package/dist/tree.js.map +3 -3
- package/dist/types/aeico-component.d.ts +1 -1
- package/dist/types/aeico-field.d.ts +1 -1
- package/dist/types/breadcrumb/breadcrumb-item.d.ts +0 -1
- package/dist/types/breadcrumb/breadcrumb.d.ts +2 -3
- package/dist/types/button-group/button-group.d.ts +1 -1
- package/dist/types/card/card.d.ts +0 -1
- package/dist/types/checkbox/checkbox.d.ts +0 -1
- package/dist/types/detail/detail.d.ts +0 -1
- package/dist/types/detail-group/detail-group.d.ts +1 -2
- package/dist/types/divider/divider.d.ts +0 -1
- package/dist/types/dropdown/dropdown-button.d.ts +4 -5
- package/dist/types/dropdown/dropdown-item.d.ts +3 -4
- package/dist/types/dropdown/dropdown.d.ts +4 -5
- package/dist/types/icon/icon.d.ts +0 -1
- package/dist/types/icon/registry.d.ts +1 -1
- package/dist/types/icon-button/icon-button.d.ts +0 -1
- package/dist/types/index.d.ts +4 -4
- package/dist/types/menu/menu-item.d.ts +3 -4
- package/dist/types/menu/menu.d.ts +3 -4
- package/dist/types/navbar/navbar.d.ts +5 -6
- package/dist/types/number-input/number-input.d.ts +0 -1
- package/dist/types/pagination/pagination.d.ts +0 -1
- package/dist/types/progress-bar/progress-bar.d.ts +0 -1
- package/dist/types/radio-group/radio-group.d.ts +0 -1
- package/dist/types/radio-group/radio.d.ts +6 -7
- package/dist/types/select/select-option.d.ts +0 -1
- package/dist/types/select/select.d.ts +0 -1
- package/dist/types/slider/defines.d.ts +5 -5
- package/dist/types/slider/slider.d.ts +0 -1
- package/dist/types/spinner/spinner.d.ts +1 -2
- package/dist/types/switch/switch.d.ts +0 -1
- package/dist/types/text-input/text-input.d.ts +0 -1
- package/dist/types/textarea/textarea.d.ts +0 -1
- package/dist/types/tree/tree-item.d.ts +1 -2
- package/dist/types/tree/tree.d.ts +0 -1
- package/package.json +5 -3
- package/src/aeico-component.ts +6 -5
- package/src/aeico-field.ts +2 -2
- package/src/alert/alert.ts +2 -2
- package/src/badge/badge.ts +2 -2
- package/src/breadcrumb/breadcrumb-item.ts +2 -4
- package/src/breadcrumb/breadcrumb.ts +4 -6
- package/src/button/button.ts +2 -2
- package/src/button-group/button-group.ts +3 -3
- package/src/card/card.ts +2 -4
- package/src/card/defines.ts +1 -1
- package/src/card/index.ts +1 -1
- package/src/checkbox/checkbox.ts +2 -4
- package/src/copy-button/copy-button.ts +1 -1
- package/src/detail/detail.ts +2 -4
- package/src/detail-group/detail-group.ts +2 -4
- package/src/dialog/dialog.ts +2 -2
- package/src/divider/divider.ts +2 -4
- package/src/drawer/drawer.ts +2 -2
- package/src/dropdown/dropdown-button.ts +6 -8
- package/src/dropdown/dropdown-item.ts +5 -7
- package/src/dropdown/dropdown.ts +7 -9
- package/src/icon/icon.ts +2 -4
- package/src/icon/registry.ts +1 -1
- package/src/icon-button/icon-button.ts +2 -4
- package/src/index.ts +4 -4
- package/src/menu/menu-item.ts +5 -7
- package/src/menu/menu.ts +4 -6
- package/src/navbar/navbar.ts +7 -9
- package/src/number-input/number-input.ts +1 -3
- package/src/pagination/pagination.ts +1 -3
- package/src/progress-bar/progress-bar.ts +1 -2
- package/src/radio-group/radio-group.ts +5 -7
- package/src/radio-group/radio.ts +8 -10
- package/src/select/select-option.ts +2 -4
- package/src/select/select.ts +4 -6
- package/src/slider/defines.ts +5 -5
- package/src/slider/slider.ts +5 -8
- package/src/spinner/spinner.ts +2 -4
- package/src/styles/components/action-button.css +1 -1
- package/src/styles/components/alert.css +1 -1
- package/src/styles/components/breadcrumb-item.css +2 -2
- package/src/styles/components/button.css +0 -1
- package/src/styles/components/divider.css +1 -1
- package/src/styles/components/dropdown-item.css +2 -2
- package/src/styles/components/dropdown.css +1 -1
- package/src/styles/layout.css +14 -14
- package/src/styles/radius.css +1 -1
- package/src/styles/variables.css +14 -16
- package/src/switch/switch.ts +2 -4
- package/src/tabs/tab-panel.ts +2 -2
- package/src/tabs/tab.ts +2 -2
- package/src/tabs/tabs.ts +2 -2
- package/src/tag/tag.ts +2 -2
- package/src/text-input/text-input.ts +2 -4
- package/src/textarea/textarea.ts +1 -3
- package/src/tooltip/tooltip.ts +1 -1
- package/src/tree/tree-item.ts +3 -5
- package/src/tree/tree.ts +2 -4
package/dist/tooltip.js
CHANGED
|
@@ -125,7 +125,7 @@ var variables_default = `:root,
|
|
|
125
125
|
--ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
|
|
126
126
|
--ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
|
|
127
127
|
|
|
128
|
-
/* Gray (neutral
|
|
128
|
+
/* Gray (neutral - base #6e6e6e) */
|
|
129
129
|
--ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
|
|
130
130
|
--ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
|
|
131
131
|
--ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
|
|
@@ -136,7 +136,7 @@ var variables_default = `:root,
|
|
|
136
136
|
--ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
|
|
137
137
|
--ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
|
|
138
138
|
|
|
139
|
-
/* Slate (blue-gray
|
|
139
|
+
/* Slate (blue-gray - base #64748b, used for 'secondary') */
|
|
140
140
|
--ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
|
|
141
141
|
--ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
|
|
142
142
|
--ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
|
|
@@ -172,7 +172,7 @@ var variables_default = `:root,
|
|
|
172
172
|
|
|
173
173
|
:root,
|
|
174
174
|
:host {
|
|
175
|
-
/* Hover / active mix (light default
|
|
175
|
+
/* Hover / active mix (light default - overridden in \xA7 6 dark) */
|
|
176
176
|
--ae-color-mix-hover: black 10%;
|
|
177
177
|
--ae-color-mix-active: black 20%;
|
|
178
178
|
|
|
@@ -206,7 +206,7 @@ var variables_default = `:root,
|
|
|
206
206
|
--ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
|
|
207
207
|
--ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
|
|
208
208
|
|
|
209
|
-
/* Secondary (Slate)
|
|
209
|
+
/* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
|
|
210
210
|
--ae-color-secondary: var(--ae-slate-500);
|
|
211
211
|
--ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
|
|
212
212
|
--ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
|
|
@@ -222,7 +222,7 @@ var variables_default = `:root,
|
|
|
222
222
|
:host {
|
|
223
223
|
color-scheme: light;
|
|
224
224
|
|
|
225
|
-
/* Gray UI aliases
|
|
225
|
+
/* Gray UI aliases - lighter palette steps for elements on white background */
|
|
226
226
|
--ae-color-gray-dark: var(--ae-gray-400);
|
|
227
227
|
--ae-color-gray: var(--ae-gray-300);
|
|
228
228
|
--ae-color-gray-light: var(--ae-gray-200);
|
|
@@ -254,7 +254,7 @@ var variables_default = `:root,
|
|
|
254
254
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
|
|
255
255
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
|
|
256
256
|
|
|
257
|
-
/* Subtle intent tokens
|
|
257
|
+
/* Subtle intent tokens - light context */
|
|
258
258
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
|
|
259
259
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
|
|
260
260
|
--ae-color-primary-text-emphasis: var(--ae-blue-700);
|
|
@@ -285,7 +285,7 @@ var variables_default = `:root,
|
|
|
285
285
|
--ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
|
|
286
286
|
--ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
|
|
287
287
|
|
|
288
|
-
/* Component tokens
|
|
288
|
+
/* Component tokens - light defaults */
|
|
289
289
|
--ae-action-btn-bg: var(--ae-gray-200);
|
|
290
290
|
--ae-action-btn-bg-hover: var(--ae-color-primary);
|
|
291
291
|
--ae-action-btn-color: var(--ae-gray-600);
|
|
@@ -320,14 +320,12 @@ var variables_default = `:root,
|
|
|
320
320
|
--ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
/* Border-radius tokens
|
|
323
|
+
/* Border-radius tokens - shared across all components */
|
|
324
324
|
:root,
|
|
325
325
|
:host {
|
|
326
326
|
/**
|
|
327
327
|
* Unified border-radius hook for all components.
|
|
328
328
|
*
|
|
329
|
-
* Not set by default \u2014 each component falls back to its own --ae-radius-*
|
|
330
|
-
* token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
|
|
331
329
|
*
|
|
332
330
|
* Usage:
|
|
333
331
|
* :root { --ae-border-radius: 0; } // global: all components square
|
|
@@ -349,7 +347,7 @@ var variables_default = `:root,
|
|
|
349
347
|
--ae-radius-circle: 50%;
|
|
350
348
|
}
|
|
351
349
|
|
|
352
|
-
/* Layout tokens
|
|
350
|
+
/* Layout tokens - defined on :root so all light DOM elements can use them */
|
|
353
351
|
:root,
|
|
354
352
|
:host {
|
|
355
353
|
--container-max-width: 1280px;
|
|
@@ -362,18 +360,18 @@ var variables_default = `:root,
|
|
|
362
360
|
:host-context([theme="dark"]) {
|
|
363
361
|
color-scheme: dark;
|
|
364
362
|
|
|
365
|
-
/* Hover / active
|
|
363
|
+
/* Hover / active - slightly gentler on dark backgrounds */
|
|
366
364
|
--ae-color-mix-hover: black 8%;
|
|
367
365
|
--ae-color-mix-active: black 16%;
|
|
368
366
|
|
|
369
|
-
/* Gray UI aliases
|
|
367
|
+
/* Gray UI aliases - darker palette steps for elements on dark background */
|
|
370
368
|
--ae-color-gray-dark: var(--ae-gray-800);
|
|
371
369
|
--ae-color-gray: var(--ae-gray-700);
|
|
372
370
|
--ae-color-gray-light: var(--ae-gray-600);
|
|
373
371
|
--ae-color-gray-lighter: var(--ae-gray-500);
|
|
374
372
|
--ae-color-gray-lightest: var(--ae-gray-400);
|
|
375
373
|
|
|
376
|
-
/* Secondary
|
|
374
|
+
/* Secondary - deeper base on dark background */
|
|
377
375
|
--ae-color-secondary: var(--ae-slate-700);
|
|
378
376
|
--ae-color-secondary-text: var(--ae-slate-300);
|
|
379
377
|
|
|
@@ -402,7 +400,7 @@ var variables_default = `:root,
|
|
|
402
400
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
|
|
403
401
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
|
|
404
402
|
|
|
405
|
-
/* Subtle intent tokens
|
|
403
|
+
/* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
|
|
406
404
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
|
|
407
405
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
|
|
408
406
|
--ae-color-primary-text-emphasis: var(--ae-blue-300);
|
|
@@ -433,7 +431,7 @@ var variables_default = `:root,
|
|
|
433
431
|
--ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
|
|
434
432
|
--ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
|
|
435
433
|
|
|
436
|
-
/* Component tokens
|
|
434
|
+
/* Component tokens - dark overrides */
|
|
437
435
|
--ae-action-btn-bg: var(--ae-color-gray);
|
|
438
436
|
--ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
|
|
439
437
|
--ae-action-btn-color: var(--ae-gray-400);
|
|
@@ -550,19 +548,12 @@ var tooltip_default = `:host {
|
|
|
550
548
|
|
|
551
549
|
// src/aeico-component.ts
|
|
552
550
|
import { AeicoElement } from "aeico";
|
|
553
|
-
|
|
554
|
-
// src/utils.ts
|
|
555
|
-
function toKebab(str) {
|
|
556
|
-
const cleaned = str.replace(/^[_\d]+/, "");
|
|
557
|
-
return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
|
558
|
-
}
|
|
559
|
-
|
|
560
|
-
// src/aeico-component.ts
|
|
561
551
|
var TAG_NAME_PREFIX = "ae";
|
|
562
552
|
var AeicoComponent = class extends AeicoElement {
|
|
563
|
-
static
|
|
564
|
-
const
|
|
565
|
-
|
|
553
|
+
static define(name) {
|
|
554
|
+
const prefix = `${TAG_NAME_PREFIX}-`;
|
|
555
|
+
const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
|
|
556
|
+
super.define(tagName);
|
|
566
557
|
}
|
|
567
558
|
};
|
|
568
559
|
var aeico_component_default = AeicoComponent;
|
|
@@ -705,7 +696,7 @@ __decorateElement(_init, 4, "trigger", _trigger_dec, Tooltip, _trigger);
|
|
|
705
696
|
__decorateElement(_init, 4, "open", _open_dec, Tooltip, _open);
|
|
706
697
|
__decoratorMetadata(_init, Tooltip);
|
|
707
698
|
__publicField(Tooltip, "styles", [variables_default, tooltip_default]);
|
|
708
|
-
Tooltip.
|
|
699
|
+
Tooltip.define("tooltip");
|
|
709
700
|
var tooltip_default2 = Tooltip;
|
|
710
701
|
export {
|
|
711
702
|
tooltip_default2 as Tooltip,
|
package/dist/tooltip.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tooltip.css", "../src/aeico-component.ts", "../src/
|
|
4
|
-
"sourcesContent": ["export default \":root,\\n:host {\\n --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n font-family: var(--ae-font-sans-serif);\\n --ae-blue: #0e639c;\\n --ae-green: #28a745;\\n --ae-red: #dc3545;\\n --ae-yellow: #ffc107;\\n --ae-cyan: #17a2b8;\\n --ae-gray: #6e6e6e;\\n --ae-slate: #64748b;\\n --ae-dark: #343a40;\\n --ae-light: #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n /* Blue */\\n --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n --ae-blue-500: var(--ae-blue);\\n --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n /* Green */\\n --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n --ae-green-500: var(--ae-green);\\n --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n /* Red */\\n --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n --ae-red-500: var(--ae-red);\\n --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n /* Yellow */\\n --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n --ae-yellow-500: var(--ae-yellow);\\n --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n /* Cyan */\\n --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n --ae-cyan-500: var(--ae-cyan);\\n --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n /* Gray (neutral \u2014 base #6e6e6e) */\\n --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n --ae-gray-500: var(--ae-gray);\\n --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */\\n --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n --ae-slate-500: var(--ae-slate);\\n --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n /* Dark (base #343a40) */\\n --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n --ae-dark-500: var(--ae-dark);\\n --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n /* Light (base #f8f9fa) */\\n --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n --ae-light-500: var(--ae-light);\\n --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n --ae-color-mix-hover: black 10%;\\n --ae-color-mix-active: black 20%;\\n\\n /* Primary (Blue) */\\n --ae-color-primary: var(--ae-blue-500);\\n --ae-color-primary-hover: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n --ae-color-primary-active: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n /* Success (Green) */\\n --ae-color-success: var(--ae-green-500);\\n --ae-color-success-hover: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n --ae-color-success-active: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n /* Danger (Red) */\\n --ae-color-danger: var(--ae-red-500);\\n --ae-color-danger-hover: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n --ae-color-danger-active: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n --ae-color-danger-disabled: color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n /* Warning (Yellow) */\\n --ae-color-warning: var(--ae-yellow-500);\\n --ae-color-warning-hover: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n --ae-color-warning-active: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n /* Info (Cyan) */\\n --ae-color-info: var(--ae-cyan-500);\\n --ae-color-info-hover: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n --ae-color-secondary: var(--ae-slate-500);\\n --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n --ae-color-secondary-text: var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n color-scheme: light;\\n\\n /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n --ae-color-gray-dark: var(--ae-gray-400);\\n --ae-color-gray: var(--ae-gray-300);\\n --ae-color-gray-light: var(--ae-gray-200);\\n --ae-color-gray-lighter: var(--ae-gray-100);\\n --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n /* Text */\\n --ae-color-text-main: var(--ae-dark-700);\\n --ae-color-text-muted: var(--ae-gray-600);\\n --ae-color-text-disabled: var(--ae-gray-300);\\n --ae-color-text-link: var(--ae-blue-500);\\n --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-light-500);\\n --ae-surface-base: white;\\n --ae-surface-raised: var(--ae-light-500);\\n --ae-surface-overlay: white;\\n --ae-color-overlay: rgba(0, 0, 0, 0.4);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(0, 0, 0, 0.08);\\n --ae-border-default: rgba(0, 0, 0, 0.15);\\n --ae-border-hover: rgba(0, 0, 0, 0.25);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n /* Subtle intent tokens \u2014 light context */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);\\n --ae-color-primary-text-emphasis: var(--ae-blue-700);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.08);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.40);\\n --ae-color-success-text-emphasis: var(--ae-green-700);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.08);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.40);\\n --ae-color-danger-text-emphasis: var(--ae-red-700);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.08);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.40);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-700);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.08);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.40);\\n --ae-color-info-text-emphasis: var(--ae-cyan-700);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.08);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n --ae-color-light-bg-subtle: var(--ae-gray-100); /* opaque on white: ~#e2e2e2 */\\n --ae-color-light-border-subtle: var(--ae-gray-200); /* opaque on white: ~#c4c4c4 */\\n\\n --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */\\n --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */\\n\\n /* Component tokens \u2014 light defaults */\\n --ae-action-btn-bg: var(--ae-gray-200);\\n --ae-action-btn-bg-hover: var(--ae-color-primary);\\n --ae-action-btn-color: var(--ae-gray-600);\\n --ae-action-btn-color-hover: white;\\n\\n --ae-clear-btn-bg-hover: var(--ae-color-danger);\\n --ae-clear-btn-color-hover: white;\\n\\n --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n --ae-reset-btn-bg: var(--ae-action-btn-bg);\\n --ae-reset-btn-bg-hover: var(--ae-action-btn-bg-hover);\\n --ae-reset-btn-color: var(--ae-action-btn-color);\\n --ae-reset-btn-color-hover: var(--ae-action-btn-color-hover);\\n --ae-reset-btn-transition: all 0.12s;\\n\\n --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n --ae-clear-btn-bg: var(--ae-action-btn-bg);\\n --ae-clear-btn-color: var(--ae-action-btn-color);\\n --ae-clear-btn-transition: all 0.12s;\\n}\\n\\n:root,\\n:host {\\n --ae-size-scale: 1;\\n --ae-size-base: calc(1rem * var(--ae-size-scale)); /* 16px */\\n --ae-size-xl: round(calc(var(--ae-size-l) * 1.125), 1px); /* 23px */\\n --ae-size-l: round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px); /* 20px */\\n --ae-size-m: var(--ae-size-base); /* 16px */\\n --ae-size-s: round(calc(var(--ae-size-m) / 1.125), 1px); /* 14px */\\n --ae-size-xs: round(calc(var(--ae-size-s) / 1.125), 1px); /* 12px */\\n --ae-size-2xs: round(calc(var(--ae-size-xs) / 1.125), 1px); /* 11px */\\n --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n /**\\n * Unified border-radius hook for all components.\\n *\\n * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n *\\n * Usage:\\n * :root { --ae-border-radius: 0; } // global: all components square\\n * :root { --ae-border-radius: 999px; } // global: all components pill\\n * ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n * .sidebar { --ae-border-radius: 8px; } // scoped: everything inside .sidebar\\n *\\n * To restore a component to its own default:\\n * ae-card { --ae-border-radius: initial; }\\n */\\n\\n --ae-radius-square: 0;\\n --ae-radius-xs: 2px;\\n --ae-radius-sm: 4px;\\n --ae-radius-md: 6px;\\n --ae-radius-lg: 8px;\\n --ae-radius-xl: 12px;\\n --ae-radius-pill: 999px;\\n --ae-radius-circle: 50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n --container-max-width: 1280px;\\n --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n color-scheme: dark;\\n\\n /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n --ae-color-mix-hover: black 8%;\\n --ae-color-mix-active: black 16%;\\n\\n /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n --ae-color-gray-dark: var(--ae-gray-800);\\n --ae-color-gray: var(--ae-gray-700);\\n --ae-color-gray-light: var(--ae-gray-600);\\n --ae-color-gray-lighter: var(--ae-gray-500);\\n --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n /* Secondary \u2014 deeper base on dark background */\\n --ae-color-secondary: var(--ae-slate-700);\\n --ae-color-secondary-text: var(--ae-slate-300);\\n\\n /* Text */\\n --ae-color-text-main: white;\\n --ae-color-text-muted: var(--ae-gray-200);\\n --ae-color-text-disabled: var(--ae-gray-500);\\n --ae-color-text-link: var(--ae-blue-300);\\n --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-gray-900);\\n --ae-surface-base: color-mix(in srgb, var(--ae-gray) 27%, black);\\n --ae-surface-raised: color-mix(in srgb, var(--ae-gray) 34%, black);\\n --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n --ae-color-overlay: rgba(0, 0, 0, 0.6);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(255, 255, 255, 0.08);\\n --ae-border-default: rgba(255, 255, 255, 0.12);\\n --ae-border-hover: rgba(255, 255, 255, 0.20);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-color-primary-text-emphasis: var(--ae-blue-300);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.10);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.30);\\n --ae-color-success-text-emphasis: var(--ae-green-300);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.10);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.30);\\n --ae-color-danger-text-emphasis: var(--ae-red-300);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.10);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.30);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-300);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.10);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.30);\\n --ae-color-info-text-emphasis: var(--ae-cyan-300);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.10);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n --ae-color-light-bg-subtle: rgb(from var(--ae-light) r g b / 0.20);\\n --ae-color-light-border-subtle: rgb(from var(--ae-light) r g b / 0.25);\\n\\n --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);\\n --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);\\n\\n /* Component tokens \u2014 dark overrides */\\n --ae-action-btn-bg: var(--ae-color-gray);\\n --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n --ae-action-btn-color: var(--ae-gray-400);\\n --ae-action-btn-color-hover: var(--ae-cyan-300);\\n --ae-clear-btn-bg-hover: color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n --ae-clear-btn-color-hover: var(--ae-red-300);\\n}\\n\"", "export default \":host {\\n display: inline-flex;\\n position: relative;\\n vertical-align: middle;\\n\\n --ae-tooltip-z-index: 1000;\\n --ae-tooltip-bg: var(--ae-dark, #343a40);\\n --ae-tooltip-color: #fff;\\n --ae-tooltip-padding: 0.3125rem 0.625rem;\\n --ae-tooltip-font-size: 0.8125rem;\\n --ae-tooltip-arrow-size: 5px;\\n --ae-tooltip-gap: 6px;\\n --ae-tooltip-max-width: 20rem;\\n}\\n\\n:host-context([theme=\\\"dark\\\"]) {\\n --ae-tooltip-bg: var(--ae-light, #f8f9fa);\\n --ae-tooltip-color: var(--ae-dark, #343a40);\\n}\\n\\n.tooltip-panel {\\n display: none;\\n position: fixed;\\n z-index: var(--ae-tooltip-z-index);\\n background: var(--ae-tooltip-bg);\\n color: var(--ae-tooltip-color);\\n padding: var(--ae-tooltip-padding);\\n font-size: var(--ae-tooltip-font-size);\\n font-family: inherit;\\n border-radius: var(--ae-border-radius, var(--ae-radius-sm));\\n line-height: 1.4;\\n white-space: nowrap;\\n max-width: var(--ae-tooltip-max-width);\\n pointer-events: none;\\n box-sizing: border-box;\\n}\\n\\n:host([open]) .tooltip-panel {\\n display: block;\\n}\\n\\n/* Arrow */\\n.tooltip-panel::after {\\n content: '';\\n position: absolute;\\n border: var(--ae-tooltip-arrow-size) solid transparent;\\n pointer-events: none;\\n}\\n\\n.placement-top::after,\\n.placement-top-start::after,\\n.placement-top-end::after {\\n top: 100%;\\n border-top-color: var(--ae-tooltip-bg);\\n}\\n\\n.placement-top::after {\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n\\n.placement-top-start::after {\\n left: calc(var(--ae-tooltip-arrow-size) * 2);\\n}\\n\\n.placement-top-end::after {\\n right: calc(var(--ae-tooltip-arrow-size) * 2);\\n}\\n\\n.placement-bottom::after,\\n.placement-bottom-start::after,\\n.placement-bottom-end::after {\\n bottom: 100%;\\n border-bottom-color: var(--ae-tooltip-bg);\\n}\\n\\n.placement-bottom::after {\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n\\n.placement-bottom-start::after {\\n left: calc(var(--ae-tooltip-arrow-size) * 2);\\n}\\n\\n.placement-bottom-end::after {\\n right: calc(var(--ae-tooltip-arrow-size) * 2);\\n}\\n\\n.placement-left::after {\\n left: 100%;\\n top: 50%;\\n transform: translateY(-50%);\\n border-left-color: var(--ae-tooltip-bg);\\n}\\n\\n.placement-right::after {\\n right: 100%;\\n top: 50%;\\n transform: translateY(-50%);\\n border-right-color: var(--ae-tooltip-bg);\\n}\\n\"", "\uFEFFimport { AeicoElement } from 'aeico';\nimport { toKebab } from './utils';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n static register(name?: string) {\n const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;\n\n super.register(tagName);\n }\n}\n\nexport default AeicoComponent;\n", "export const SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport function toKebab(str: string): string {\n const cleaned = str.replace(/^[_\\d]+/, '');\n\n return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n", "import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport tooltipStyle from '../styles/components/tooltip.css';\nimport AeicoComponent from '../aeico-component';\nimport { html, prop } from 'aeico';\nimport type { TooltipPlacement, TooltipTrigger } from './defines';\n\n/**\n * Tooltip Component\n *\n * A floating label that appears on hover or focus around its trigger content.\n * Wrap any element in `<ae-tooltip>` and provide content via the `content`\n * attribute (plain text) or the `tooltip` named slot (rich HTML).\n *\n * @example\n * ```html\n * <ae-tooltip content=\"Save file\">\n * <ae-button>Save</ae-button>\n * </ae-tooltip>\n *\n * <ae-tooltip placement=\"bottom-start\">\n * <span slot=\"tooltip\"><strong>Bold</strong> tip</span>\n * <ae-icon-button name=\"info\"></ae-icon-button>\n * </ae-tooltip>\n * ```\n */\nclass Tooltip extends AeicoComponent {\n protected static styles = [styleVariables, tooltipStyle];\n\n @prop({ type: String })\n accessor content: string | undefined;\n\n @prop({ type: String })\n accessor placement: TooltipPlacement = 'top';\n\n @prop({ type: Boolean })\n accessor disabled: boolean = false;\n\n @prop({ type: String })\n accessor trigger: TooltipTrigger = 'hover';\n\n @prop({ type: Boolean })\n accessor open: boolean = false;\n\n private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n this.listen('mouseenter', this._handleMouseEnter);\n this.listen('mouseleave', this._handleMouseLeave);\n this.listen('focusin', this._handleFocusin);\n this.listen('focusout', this._handleFocusout);\n this.listen('click', this._handleClick);\n\n this._outsideClickHandler = (e: MouseEvent) => {\n if (!this.open) return;\n if (!e.composedPath().includes(this)) this.open = false;\n };\n document.addEventListener('click', this._outsideClickHandler);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this._outsideClickHandler) {\n document.removeEventListener('click', this._outsideClickHandler);\n this._outsideClickHandler = null;\n }\n }\n\n private _handleMouseEnter = () => {\n if (this.trigger !== 'hover') return;\n if (this.disabled) return;\n this.open = true;\n };\n\n private _handleMouseLeave = () => {\n if (this.trigger !== 'hover') return;\n this.open = false;\n };\n\n private _handleFocusin = () => {\n if (this.trigger !== 'hover') return;\n if (this.disabled) return;\n this.open = true;\n };\n\n private _handleFocusout = () => {\n if (this.trigger !== 'hover') return;\n this.open = false;\n };\n\n private _handleClick = () => {\n if (this.trigger !== 'click') return;\n if (this.disabled) return;\n this.open = !this.open;\n };\n\n private _updatePosition() {\n const panel = this.shadowRoot?.querySelector<HTMLElement>('.tooltip-panel');\n if (!panel) return;\n\n const host = this.getBoundingClientRect();\n const panelRect = panel.getBoundingClientRect();\n const gap = 6; // Match --ae-tooltip-gap: 6px\n const pw = panelRect.width;\n const ph = panelRect.height;\n\n let top: number;\n let left: number;\n\n switch (this.placement) {\n case 'top-start':\n top = host.top - ph - gap;\n left = host.left;\n break;\n case 'top-end':\n top = host.top - ph - gap;\n left = host.right - pw;\n break;\n case 'bottom':\n top = host.bottom + gap;\n left = host.left + host.width / 2 - pw / 2;\n break;\n case 'bottom-start':\n top = host.bottom + gap;\n left = host.left;\n break;\n case 'bottom-end':\n top = host.bottom + gap;\n left = host.right - pw;\n break;\n case 'left':\n top = host.top + host.height / 2 - ph / 2;\n left = host.left - pw - gap;\n break;\n case 'right':\n top = host.top + host.height / 2 - ph / 2;\n left = host.right + gap;\n break;\n default: // 'top'\n top = host.top - ph - gap;\n left = host.left + host.width / 2 - pw / 2;\n }\n\n panel.style.top = `${top}px`;\n panel.style.left = `${left}px`;\n }\n\n protected onUpdated(changedProps: Map<string, unknown>) {\n if (changedProps.has('open') && this.open) {\n this._updatePosition();\n }\n }\n\n protected render() {\n return html(({ div, span, slot }) => {\n slot();\n div(\n {\n className: `tooltip-panel placement-${this.placement ?? 'top'}`,\n role: 'tooltip',\n 'aria-hidden': String(!this.open),\n },\n () => {\n slot({ name: 'tooltip' }, () => {\n span({ textContent: this.content ?? '' });\n });\n },\n );\n });\n }\n}\n\nTooltip.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tooltip': Tooltip;\n }\n}\n\nexport type TooltipProps = InferProps<typeof Tooltip>;\nexport default Tooltip;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAO,oBAAQ;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;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;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;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;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
|
|
3
|
+
"sources": ["css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tooltip.css", "../src/aeico-component.ts", "../src/tooltip/tooltip.ts"],
|
|
4
|
+
"sourcesContent": ["export default \":root,\\n:host {\\n --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n font-family: var(--ae-font-sans-serif);\\n --ae-blue: #0e639c;\\n --ae-green: #28a745;\\n --ae-red: #dc3545;\\n --ae-yellow: #ffc107;\\n --ae-cyan: #17a2b8;\\n --ae-gray: #6e6e6e;\\n --ae-slate: #64748b;\\n --ae-dark: #343a40;\\n --ae-light: #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n /* Blue */\\n --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n --ae-blue-500: var(--ae-blue);\\n --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n /* Green */\\n --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n --ae-green-500: var(--ae-green);\\n --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n /* Red */\\n --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n --ae-red-500: var(--ae-red);\\n --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n /* Yellow */\\n --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n --ae-yellow-500: var(--ae-yellow);\\n --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n /* Cyan */\\n --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n --ae-cyan-500: var(--ae-cyan);\\n --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n /* Gray (neutral - base #6e6e6e) */\\n --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n --ae-gray-500: var(--ae-gray);\\n --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n /* Slate (blue-gray - base #64748b, used for 'secondary') */\\n --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n --ae-slate-500: var(--ae-slate);\\n --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n /* Dark (base #343a40) */\\n --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n --ae-dark-500: var(--ae-dark);\\n --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n /* Light (base #f8f9fa) */\\n --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n --ae-light-500: var(--ae-light);\\n --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n /* Hover / active mix (light default - overridden in \u00A7 6 dark) */\\n --ae-color-mix-hover: black 10%;\\n --ae-color-mix-active: black 20%;\\n\\n /* Primary (Blue) */\\n --ae-color-primary: var(--ae-blue-500);\\n --ae-color-primary-hover: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n --ae-color-primary-active: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n /* Success (Green) */\\n --ae-color-success: var(--ae-green-500);\\n --ae-color-success-hover: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n --ae-color-success-active: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n /* Danger (Red) */\\n --ae-color-danger: var(--ae-red-500);\\n --ae-color-danger-hover: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n --ae-color-danger-active: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n --ae-color-danger-disabled: color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n /* Warning (Yellow) */\\n --ae-color-warning: var(--ae-yellow-500);\\n --ae-color-warning-hover: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n --ae-color-warning-active: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n /* Info (Cyan) */\\n --ae-color-info: var(--ae-cyan-500);\\n --ae-color-info-hover: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n /* Secondary (Slate) - base differs per theme, overridden in \u00A7 6 dark */\\n --ae-color-secondary: var(--ae-slate-500);\\n --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n --ae-color-secondary-text: var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n color-scheme: light;\\n\\n /* Gray UI aliases - lighter palette steps for elements on white background */\\n --ae-color-gray-dark: var(--ae-gray-400);\\n --ae-color-gray: var(--ae-gray-300);\\n --ae-color-gray-light: var(--ae-gray-200);\\n --ae-color-gray-lighter: var(--ae-gray-100);\\n --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n /* Text */\\n --ae-color-text-main: var(--ae-dark-700);\\n --ae-color-text-muted: var(--ae-gray-600);\\n --ae-color-text-disabled: var(--ae-gray-300);\\n --ae-color-text-link: var(--ae-blue-500);\\n --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-light-500);\\n --ae-surface-base: white;\\n --ae-surface-raised: var(--ae-light-500);\\n --ae-surface-overlay: white;\\n --ae-color-overlay: rgba(0, 0, 0, 0.4);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(0, 0, 0, 0.08);\\n --ae-border-default: rgba(0, 0, 0, 0.15);\\n --ae-border-hover: rgba(0, 0, 0, 0.25);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n /* Subtle intent tokens - light context */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);\\n --ae-color-primary-text-emphasis: var(--ae-blue-700);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.08);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.40);\\n --ae-color-success-text-emphasis: var(--ae-green-700);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.08);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.40);\\n --ae-color-danger-text-emphasis: var(--ae-red-700);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.08);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.40);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-700);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.08);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.40);\\n --ae-color-info-text-emphasis: var(--ae-cyan-700);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.08);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n --ae-color-light-bg-subtle: var(--ae-gray-100); /* opaque on white: ~#e2e2e2 */\\n --ae-color-light-border-subtle: var(--ae-gray-200); /* opaque on white: ~#c4c4c4 */\\n\\n --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */\\n --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */\\n\\n /* Component tokens - light defaults */\\n --ae-action-btn-bg: var(--ae-gray-200);\\n --ae-action-btn-bg-hover: var(--ae-color-primary);\\n --ae-action-btn-color: var(--ae-gray-600);\\n --ae-action-btn-color-hover: white;\\n\\n --ae-clear-btn-bg-hover: var(--ae-color-danger);\\n --ae-clear-btn-color-hover: white;\\n\\n --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n --ae-reset-btn-bg: var(--ae-action-btn-bg);\\n --ae-reset-btn-bg-hover: var(--ae-action-btn-bg-hover);\\n --ae-reset-btn-color: var(--ae-action-btn-color);\\n --ae-reset-btn-color-hover: var(--ae-action-btn-color-hover);\\n --ae-reset-btn-transition: all 0.12s;\\n\\n --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n --ae-clear-btn-bg: var(--ae-action-btn-bg);\\n --ae-clear-btn-color: var(--ae-action-btn-color);\\n --ae-clear-btn-transition: all 0.12s;\\n}\\n\\n:root,\\n:host {\\n --ae-size-scale: 1;\\n --ae-size-base: calc(1rem * var(--ae-size-scale)); /* 16px */\\n --ae-size-xl: round(calc(var(--ae-size-l) * 1.125), 1px); /* 23px */\\n --ae-size-l: round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px); /* 20px */\\n --ae-size-m: var(--ae-size-base); /* 16px */\\n --ae-size-s: round(calc(var(--ae-size-m) / 1.125), 1px); /* 14px */\\n --ae-size-xs: round(calc(var(--ae-size-s) / 1.125), 1px); /* 12px */\\n --ae-size-2xs: round(calc(var(--ae-size-xs) / 1.125), 1px); /* 11px */\\n --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */\\n}\\n\\n/* Border-radius tokens - shared across all components */\\n:root,\\n:host {\\n /**\\n * Unified border-radius hook for all components.\\n *\\n *\\n * Usage:\\n * :root { --ae-border-radius: 0; } // global: all components square\\n * :root { --ae-border-radius: 999px; } // global: all components pill\\n * ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n * .sidebar { --ae-border-radius: 8px; } // scoped: everything inside .sidebar\\n *\\n * To restore a component to its own default:\\n * ae-card { --ae-border-radius: initial; }\\n */\\n\\n --ae-radius-square: 0;\\n --ae-radius-xs: 2px;\\n --ae-radius-sm: 4px;\\n --ae-radius-md: 6px;\\n --ae-radius-lg: 8px;\\n --ae-radius-xl: 12px;\\n --ae-radius-pill: 999px;\\n --ae-radius-circle: 50%;\\n}\\n\\n/* Layout tokens - defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n --container-max-width: 1280px;\\n --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n color-scheme: dark;\\n\\n /* Hover / active - slightly gentler on dark backgrounds */\\n --ae-color-mix-hover: black 8%;\\n --ae-color-mix-active: black 16%;\\n\\n /* Gray UI aliases - darker palette steps for elements on dark background */\\n --ae-color-gray-dark: var(--ae-gray-800);\\n --ae-color-gray: var(--ae-gray-700);\\n --ae-color-gray-light: var(--ae-gray-600);\\n --ae-color-gray-lighter: var(--ae-gray-500);\\n --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n /* Secondary - deeper base on dark background */\\n --ae-color-secondary: var(--ae-slate-700);\\n --ae-color-secondary-text: var(--ae-slate-300);\\n\\n /* Text */\\n --ae-color-text-main: white;\\n --ae-color-text-muted: var(--ae-gray-200);\\n --ae-color-text-disabled: var(--ae-gray-500);\\n --ae-color-text-link: var(--ae-blue-300);\\n --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-gray-900);\\n --ae-surface-base: color-mix(in srgb, var(--ae-gray) 27%, black);\\n --ae-surface-raised: color-mix(in srgb, var(--ae-gray) 34%, black);\\n --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n --ae-color-overlay: rgba(0, 0, 0, 0.6);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(255, 255, 255, 0.08);\\n --ae-border-default: rgba(255, 255, 255, 0.12);\\n --ae-border-hover: rgba(255, 255, 255, 0.20);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-color-primary-text-emphasis: var(--ae-blue-300);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.10);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.30);\\n --ae-color-success-text-emphasis: var(--ae-green-300);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.10);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.30);\\n --ae-color-danger-text-emphasis: var(--ae-red-300);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.10);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.30);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-300);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.10);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.30);\\n --ae-color-info-text-emphasis: var(--ae-cyan-300);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.10);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n --ae-color-light-bg-subtle: rgb(from var(--ae-light) r g b / 0.20);\\n --ae-color-light-border-subtle: rgb(from var(--ae-light) r g b / 0.25);\\n\\n --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);\\n --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);\\n\\n /* Component tokens - dark overrides */\\n --ae-action-btn-bg: var(--ae-color-gray);\\n --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n --ae-action-btn-color: var(--ae-gray-400);\\n --ae-action-btn-color-hover: var(--ae-cyan-300);\\n --ae-clear-btn-bg-hover: color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n --ae-clear-btn-color-hover: var(--ae-red-300);\\n}\\n\"", "export default \":host {\\n display: inline-flex;\\n position: relative;\\n vertical-align: middle;\\n\\n --ae-tooltip-z-index: 1000;\\n --ae-tooltip-bg: var(--ae-dark, #343a40);\\n --ae-tooltip-color: #fff;\\n --ae-tooltip-padding: 0.3125rem 0.625rem;\\n --ae-tooltip-font-size: 0.8125rem;\\n --ae-tooltip-arrow-size: 5px;\\n --ae-tooltip-gap: 6px;\\n --ae-tooltip-max-width: 20rem;\\n}\\n\\n:host-context([theme=\\\"dark\\\"]) {\\n --ae-tooltip-bg: var(--ae-light, #f8f9fa);\\n --ae-tooltip-color: var(--ae-dark, #343a40);\\n}\\n\\n.tooltip-panel {\\n display: none;\\n position: fixed;\\n z-index: var(--ae-tooltip-z-index);\\n background: var(--ae-tooltip-bg);\\n color: var(--ae-tooltip-color);\\n padding: var(--ae-tooltip-padding);\\n font-size: var(--ae-tooltip-font-size);\\n font-family: inherit;\\n border-radius: var(--ae-border-radius, var(--ae-radius-sm));\\n line-height: 1.4;\\n white-space: nowrap;\\n max-width: var(--ae-tooltip-max-width);\\n pointer-events: none;\\n box-sizing: border-box;\\n}\\n\\n:host([open]) .tooltip-panel {\\n display: block;\\n}\\n\\n/* Arrow */\\n.tooltip-panel::after {\\n content: '';\\n position: absolute;\\n border: var(--ae-tooltip-arrow-size) solid transparent;\\n pointer-events: none;\\n}\\n\\n.placement-top::after,\\n.placement-top-start::after,\\n.placement-top-end::after {\\n top: 100%;\\n border-top-color: var(--ae-tooltip-bg);\\n}\\n\\n.placement-top::after {\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n\\n.placement-top-start::after {\\n left: calc(var(--ae-tooltip-arrow-size) * 2);\\n}\\n\\n.placement-top-end::after {\\n right: calc(var(--ae-tooltip-arrow-size) * 2);\\n}\\n\\n.placement-bottom::after,\\n.placement-bottom-start::after,\\n.placement-bottom-end::after {\\n bottom: 100%;\\n border-bottom-color: var(--ae-tooltip-bg);\\n}\\n\\n.placement-bottom::after {\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n\\n.placement-bottom-start::after {\\n left: calc(var(--ae-tooltip-arrow-size) * 2);\\n}\\n\\n.placement-bottom-end::after {\\n right: calc(var(--ae-tooltip-arrow-size) * 2);\\n}\\n\\n.placement-left::after {\\n left: 100%;\\n top: 50%;\\n transform: translateY(-50%);\\n border-left-color: var(--ae-tooltip-bg);\\n}\\n\\n.placement-right::after {\\n right: 100%;\\n top: 50%;\\n transform: translateY(-50%);\\n border-right-color: var(--ae-tooltip-bg);\\n}\\n\"", "import { AeicoElement } from 'aeico';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n static define(name: string) {\n const prefix = `${TAG_NAME_PREFIX}-`;\n\n const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;\n\n super.define(tagName);\n }\n}\n\nexport default AeicoComponent;\n", "import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport tooltipStyle from '../styles/components/tooltip.css';\nimport AeicoComponent from '../aeico-component';\nimport { html, prop } from 'aeico';\nimport type { TooltipPlacement, TooltipTrigger } from './defines';\n\n/**\n * Tooltip Component\n *\n * A floating label that appears on hover or focus around its trigger content.\n * Wrap any element in `<ae-tooltip>` and provide content via the `content`\n * attribute (plain text) or the `tooltip` named slot (rich HTML).\n *\n * @example\n * ```html\n * <ae-tooltip content=\"Save file\">\n * <ae-button>Save</ae-button>\n * </ae-tooltip>\n *\n * <ae-tooltip placement=\"bottom-start\">\n * <span slot=\"tooltip\"><strong>Bold</strong> tip</span>\n * <ae-icon-button name=\"info\"></ae-icon-button>\n * </ae-tooltip>\n * ```\n */\nclass Tooltip extends AeicoComponent {\n protected static styles = [styleVariables, tooltipStyle];\n\n @prop({ type: String })\n accessor content: string | undefined;\n\n @prop({ type: String })\n accessor placement: TooltipPlacement = 'top';\n\n @prop({ type: Boolean })\n accessor disabled: boolean = false;\n\n @prop({ type: String })\n accessor trigger: TooltipTrigger = 'hover';\n\n @prop({ type: Boolean })\n accessor open: boolean = false;\n\n private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n this.listen('mouseenter', this._handleMouseEnter);\n this.listen('mouseleave', this._handleMouseLeave);\n this.listen('focusin', this._handleFocusin);\n this.listen('focusout', this._handleFocusout);\n this.listen('click', this._handleClick);\n\n this._outsideClickHandler = (e: MouseEvent) => {\n if (!this.open) return;\n if (!e.composedPath().includes(this)) this.open = false;\n };\n document.addEventListener('click', this._outsideClickHandler);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this._outsideClickHandler) {\n document.removeEventListener('click', this._outsideClickHandler);\n this._outsideClickHandler = null;\n }\n }\n\n private _handleMouseEnter = () => {\n if (this.trigger !== 'hover') return;\n if (this.disabled) return;\n this.open = true;\n };\n\n private _handleMouseLeave = () => {\n if (this.trigger !== 'hover') return;\n this.open = false;\n };\n\n private _handleFocusin = () => {\n if (this.trigger !== 'hover') return;\n if (this.disabled) return;\n this.open = true;\n };\n\n private _handleFocusout = () => {\n if (this.trigger !== 'hover') return;\n this.open = false;\n };\n\n private _handleClick = () => {\n if (this.trigger !== 'click') return;\n if (this.disabled) return;\n this.open = !this.open;\n };\n\n private _updatePosition() {\n const panel = this.shadowRoot?.querySelector<HTMLElement>('.tooltip-panel');\n if (!panel) return;\n\n const host = this.getBoundingClientRect();\n const panelRect = panel.getBoundingClientRect();\n const gap = 6; // Match --ae-tooltip-gap: 6px\n const pw = panelRect.width;\n const ph = panelRect.height;\n\n let top: number;\n let left: number;\n\n switch (this.placement) {\n case 'top-start':\n top = host.top - ph - gap;\n left = host.left;\n break;\n case 'top-end':\n top = host.top - ph - gap;\n left = host.right - pw;\n break;\n case 'bottom':\n top = host.bottom + gap;\n left = host.left + host.width / 2 - pw / 2;\n break;\n case 'bottom-start':\n top = host.bottom + gap;\n left = host.left;\n break;\n case 'bottom-end':\n top = host.bottom + gap;\n left = host.right - pw;\n break;\n case 'left':\n top = host.top + host.height / 2 - ph / 2;\n left = host.left - pw - gap;\n break;\n case 'right':\n top = host.top + host.height / 2 - ph / 2;\n left = host.right + gap;\n break;\n default: // 'top'\n top = host.top - ph - gap;\n left = host.left + host.width / 2 - pw / 2;\n }\n\n panel.style.top = `${top}px`;\n panel.style.left = `${left}px`;\n }\n\n protected onUpdated(changedProps: Map<string, unknown>) {\n if (changedProps.has('open') && this.open) {\n this._updatePosition();\n }\n }\n\n protected render() {\n return html(({ div, span, slot }) => {\n slot();\n div(\n {\n className: `tooltip-panel placement-${this.placement ?? 'top'}`,\n role: 'tooltip',\n 'aria-hidden': String(!this.open),\n },\n () => {\n slot({ name: 'tooltip' }, () => {\n span({ textContent: this.content ?? '' });\n });\n },\n );\n });\n }\n}\n\nTooltip.define('tooltip');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tooltip': Tooltip;\n }\n}\n\nexport type TooltipProps = InferProps<typeof Tooltip>;\nexport default Tooltip;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAO,oBAAQ;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;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;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;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;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;;;ACAf,IAAO,kBAAQ;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAf,SAAS,oBAAoB;AAE7B,IAAM,kBAAkB;AAKxB,IAAM,iBAAN,cAA6B,aAAa;AAAA,EACxC,OAAO,OAAO,MAAc;AAC1B,UAAM,SAAS,GAAG,eAAe;AAEjC,UAAM,UAAU,KAAK,WAAW,MAAM,IAAI,OAAO,GAAG,MAAM,GAAG,IAAI;AAEjE,UAAM,OAAO,OAAO;AAAA,EACtB;AACF;AAEA,IAAO,0BAAQ;;;ACbf,SAAS,MAAM,YAAY;AAJ3B;AA0BA,IAAM,UAAN,eAAsB,8BAGpB,gBAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,kBAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,iBAAC,KAAK,EAAE,MAAM,QAAQ,CAAC,IAGvB,gBAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,aAAC,KAAK,EAAE,MAAM,QAAQ,CAAC,IAfH,IAAe;AAAA,EAArC;AAAA;AAIE,uBAAS,UAAT;AAGA,uBAAS,YAA8B,kBAAvC,iBAAuC,SAAvC;AAGA,uBAAS,WAAoB,kBAA7B,iBAA6B,SAA7B;AAGA,uBAAS,UAA0B,kBAAnC,iBAAmC,WAAnC;AAGA,uBAAS,OAAgB,kBAAzB,iBAAyB,SAAzB;AAEA,wBAAQ,wBAAyD;AAyBjE,wBAAQ,qBAAoB,MAAM;AAChC,UAAI,KAAK,YAAY,QAAS;AAC9B,UAAI,KAAK,SAAU;AACnB,WAAK,OAAO;AAAA,IACd;AAEA,wBAAQ,qBAAoB,MAAM;AAChC,UAAI,KAAK,YAAY,QAAS;AAC9B,WAAK,OAAO;AAAA,IACd;AAEA,wBAAQ,kBAAiB,MAAM;AAC7B,UAAI,KAAK,YAAY,QAAS;AAC9B,UAAI,KAAK,SAAU;AACnB,WAAK,OAAO;AAAA,IACd;AAEA,wBAAQ,mBAAkB,MAAM;AAC9B,UAAI,KAAK,YAAY,QAAS;AAC9B,WAAK,OAAO;AAAA,IACd;AAEA,wBAAQ,gBAAe,MAAM;AAC3B,UAAI,KAAK,YAAY,QAAS;AAC9B,UAAI,KAAK,SAAU;AACnB,WAAK,OAAO,CAAC,KAAK;AAAA,IACpB;AAAA;AAAA,EAjDA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,OAAO,cAAc,KAAK,iBAAiB;AAChD,SAAK,OAAO,cAAc,KAAK,iBAAiB;AAChD,SAAK,OAAO,WAAW,KAAK,cAAc;AAC1C,SAAK,OAAO,YAAY,KAAK,eAAe;AAC5C,SAAK,OAAO,SAAS,KAAK,YAAY;AAEtC,SAAK,uBAAuB,CAAC,MAAkB;AAC7C,UAAI,CAAC,KAAK,KAAM;AAChB,UAAI,CAAC,EAAE,aAAa,EAAE,SAAS,IAAI,EAAG,MAAK,OAAO;AAAA,IACpD;AACA,aAAS,iBAAiB,SAAS,KAAK,oBAAoB;AAAA,EAC9D;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,QAAI,KAAK,sBAAsB;AAC7B,eAAS,oBAAoB,SAAS,KAAK,oBAAoB;AAC/D,WAAK,uBAAuB;AAAA,IAC9B;AAAA,EACF;AAAA,EA8BQ,kBAAkB;AACxB,UAAM,QAAQ,KAAK,YAAY,cAA2B,gBAAgB;AAC1E,QAAI,CAAC,MAAO;AAEZ,UAAM,OAAO,KAAK,sBAAsB;AACxC,UAAM,YAAY,MAAM,sBAAsB;AAC9C,UAAM,MAAM;AACZ,UAAM,KAAK,UAAU;AACrB,UAAM,KAAK,UAAU;AAErB,QAAI;AACJ,QAAI;AAEJ,YAAQ,KAAK,WAAW;AAAA,MACtB,KAAK;AACH,cAAM,KAAK,MAAM,KAAK;AACtB,eAAO,KAAK;AACZ;AAAA,MACF,KAAK;AACH,cAAM,KAAK,MAAM,KAAK;AACtB,eAAO,KAAK,QAAQ;AACpB;AAAA,MACF,KAAK;AACH,cAAM,KAAK,SAAS;AACpB,eAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,KAAK;AACzC;AAAA,MACF,KAAK;AACH,cAAM,KAAK,SAAS;AACpB,eAAO,KAAK;AACZ;AAAA,MACF,KAAK;AACH,cAAM,KAAK,SAAS;AACpB,eAAO,KAAK,QAAQ;AACpB;AAAA,MACF,KAAK;AACH,cAAM,KAAK,MAAM,KAAK,SAAS,IAAI,KAAK;AACxC,eAAO,KAAK,OAAO,KAAK;AACxB;AAAA,MACF,KAAK;AACH,cAAM,KAAK,MAAM,KAAK,SAAS,IAAI,KAAK;AACxC,eAAO,KAAK,QAAQ;AACpB;AAAA,MACF;AACE,cAAM,KAAK,MAAM,KAAK;AACtB,eAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,KAAK;AAAA,IAC7C;AAEA,UAAM,MAAM,MAAM,GAAG,GAAG;AACxB,UAAM,MAAM,OAAO,GAAG,IAAI;AAAA,EAC5B;AAAA,EAEU,UAAU,cAAoC;AACtD,QAAI,aAAa,IAAI,MAAM,KAAK,KAAK,MAAM;AACzC,WAAK,gBAAgB;AAAA,IACvB;AAAA,EACF;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,KAAK,MAAM,KAAK,MAAM;AACnC,WAAK;AACL;AAAA,QACE;AAAA,UACE,WAAW,2BAA2B,KAAK,aAAa,KAAK;AAAA,UAC7D,MAAM;AAAA,UACN,eAAe,OAAO,CAAC,KAAK,IAAI;AAAA,QAClC;AAAA,QACA,MAAM;AACJ,eAAK,EAAE,MAAM,UAAU,GAAG,MAAM;AAC9B,iBAAK,EAAE,aAAa,KAAK,WAAW,GAAG,CAAC;AAAA,UAC1C,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAjJA;AAIW;AAGA;AAGA;AAGA;AAGA;AAZT,4BAAS,WADT,cAHI,SAIK;AAGT,4BAAS,aADT,gBANI,SAOK;AAGT,4BAAS,YADT,eATI,SAUK;AAGT,4BAAS,WADT,cAZI,SAaK;AAGT,4BAAS,QADT,WAfI,SAgBK;AAhBX,2BAAM;AACJ,cADI,SACa,UAAS,CAAC,mBAAgB,eAAY;AAkJzD,QAAQ,OAAO,SAAS;AASxB,IAAOA,mBAAQ;",
|
|
6
6
|
"names": ["tooltip_default"]
|
|
7
7
|
}
|
package/dist/tree.cjs
CHANGED
|
@@ -166,7 +166,7 @@ var require_variables = __commonJS({
|
|
|
166
166
|
--ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
|
|
167
167
|
--ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
|
|
168
168
|
|
|
169
|
-
/* Gray (neutral
|
|
169
|
+
/* Gray (neutral - base #6e6e6e) */
|
|
170
170
|
--ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
|
|
171
171
|
--ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
|
|
172
172
|
--ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
|
|
@@ -177,7 +177,7 @@ var require_variables = __commonJS({
|
|
|
177
177
|
--ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
|
|
178
178
|
--ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
|
|
179
179
|
|
|
180
|
-
/* Slate (blue-gray
|
|
180
|
+
/* Slate (blue-gray - base #64748b, used for 'secondary') */
|
|
181
181
|
--ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
|
|
182
182
|
--ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
|
|
183
183
|
--ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
|
|
@@ -213,7 +213,7 @@ var require_variables = __commonJS({
|
|
|
213
213
|
|
|
214
214
|
:root,
|
|
215
215
|
:host {
|
|
216
|
-
/* Hover / active mix (light default
|
|
216
|
+
/* Hover / active mix (light default - overridden in \xA7 6 dark) */
|
|
217
217
|
--ae-color-mix-hover: black 10%;
|
|
218
218
|
--ae-color-mix-active: black 20%;
|
|
219
219
|
|
|
@@ -247,7 +247,7 @@ var require_variables = __commonJS({
|
|
|
247
247
|
--ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
|
|
248
248
|
--ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
|
|
249
249
|
|
|
250
|
-
/* Secondary (Slate)
|
|
250
|
+
/* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
|
|
251
251
|
--ae-color-secondary: var(--ae-slate-500);
|
|
252
252
|
--ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
|
|
253
253
|
--ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
|
|
@@ -263,7 +263,7 @@ var require_variables = __commonJS({
|
|
|
263
263
|
:host {
|
|
264
264
|
color-scheme: light;
|
|
265
265
|
|
|
266
|
-
/* Gray UI aliases
|
|
266
|
+
/* Gray UI aliases - lighter palette steps for elements on white background */
|
|
267
267
|
--ae-color-gray-dark: var(--ae-gray-400);
|
|
268
268
|
--ae-color-gray: var(--ae-gray-300);
|
|
269
269
|
--ae-color-gray-light: var(--ae-gray-200);
|
|
@@ -295,7 +295,7 @@ var require_variables = __commonJS({
|
|
|
295
295
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
|
|
296
296
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
|
|
297
297
|
|
|
298
|
-
/* Subtle intent tokens
|
|
298
|
+
/* Subtle intent tokens - light context */
|
|
299
299
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
|
|
300
300
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
|
|
301
301
|
--ae-color-primary-text-emphasis: var(--ae-blue-700);
|
|
@@ -326,7 +326,7 @@ var require_variables = __commonJS({
|
|
|
326
326
|
--ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
|
|
327
327
|
--ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
|
|
328
328
|
|
|
329
|
-
/* Component tokens
|
|
329
|
+
/* Component tokens - light defaults */
|
|
330
330
|
--ae-action-btn-bg: var(--ae-gray-200);
|
|
331
331
|
--ae-action-btn-bg-hover: var(--ae-color-primary);
|
|
332
332
|
--ae-action-btn-color: var(--ae-gray-600);
|
|
@@ -361,14 +361,12 @@ var require_variables = __commonJS({
|
|
|
361
361
|
--ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
|
|
362
362
|
}
|
|
363
363
|
|
|
364
|
-
/* Border-radius tokens
|
|
364
|
+
/* Border-radius tokens - shared across all components */
|
|
365
365
|
:root,
|
|
366
366
|
:host {
|
|
367
367
|
/**
|
|
368
368
|
* Unified border-radius hook for all components.
|
|
369
369
|
*
|
|
370
|
-
* Not set by default \u2014 each component falls back to its own --ae-radius-*
|
|
371
|
-
* token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
|
|
372
370
|
*
|
|
373
371
|
* Usage:
|
|
374
372
|
* :root { --ae-border-radius: 0; } // global: all components square
|
|
@@ -390,7 +388,7 @@ var require_variables = __commonJS({
|
|
|
390
388
|
--ae-radius-circle: 50%;
|
|
391
389
|
}
|
|
392
390
|
|
|
393
|
-
/* Layout tokens
|
|
391
|
+
/* Layout tokens - defined on :root so all light DOM elements can use them */
|
|
394
392
|
:root,
|
|
395
393
|
:host {
|
|
396
394
|
--container-max-width: 1280px;
|
|
@@ -403,18 +401,18 @@ var require_variables = __commonJS({
|
|
|
403
401
|
:host-context([theme="dark"]) {
|
|
404
402
|
color-scheme: dark;
|
|
405
403
|
|
|
406
|
-
/* Hover / active
|
|
404
|
+
/* Hover / active - slightly gentler on dark backgrounds */
|
|
407
405
|
--ae-color-mix-hover: black 8%;
|
|
408
406
|
--ae-color-mix-active: black 16%;
|
|
409
407
|
|
|
410
|
-
/* Gray UI aliases
|
|
408
|
+
/* Gray UI aliases - darker palette steps for elements on dark background */
|
|
411
409
|
--ae-color-gray-dark: var(--ae-gray-800);
|
|
412
410
|
--ae-color-gray: var(--ae-gray-700);
|
|
413
411
|
--ae-color-gray-light: var(--ae-gray-600);
|
|
414
412
|
--ae-color-gray-lighter: var(--ae-gray-500);
|
|
415
413
|
--ae-color-gray-lightest: var(--ae-gray-400);
|
|
416
414
|
|
|
417
|
-
/* Secondary
|
|
415
|
+
/* Secondary - deeper base on dark background */
|
|
418
416
|
--ae-color-secondary: var(--ae-slate-700);
|
|
419
417
|
--ae-color-secondary-text: var(--ae-slate-300);
|
|
420
418
|
|
|
@@ -443,7 +441,7 @@ var require_variables = __commonJS({
|
|
|
443
441
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
|
|
444
442
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
|
|
445
443
|
|
|
446
|
-
/* Subtle intent tokens
|
|
444
|
+
/* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
|
|
447
445
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
|
|
448
446
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
|
|
449
447
|
--ae-color-primary-text-emphasis: var(--ae-blue-300);
|
|
@@ -474,7 +472,7 @@ var require_variables = __commonJS({
|
|
|
474
472
|
--ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
|
|
475
473
|
--ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
|
|
476
474
|
|
|
477
|
-
/* Component tokens
|
|
475
|
+
/* Component tokens - dark overrides */
|
|
478
476
|
--ae-action-btn-bg: var(--ae-color-gray);
|
|
479
477
|
--ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
|
|
480
478
|
--ae-action-btn-color: var(--ae-gray-400);
|
|
@@ -524,20 +522,12 @@ module.exports = __toCommonJS(tree_exports);
|
|
|
524
522
|
|
|
525
523
|
// src/aeico-component.ts
|
|
526
524
|
var import_aeico = require("aeico");
|
|
527
|
-
|
|
528
|
-
// src/utils.ts
|
|
529
|
-
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
530
|
-
function toKebab(str) {
|
|
531
|
-
const cleaned = str.replace(/^[_\d]+/, "");
|
|
532
|
-
return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
|
533
|
-
}
|
|
534
|
-
|
|
535
|
-
// src/aeico-component.ts
|
|
536
525
|
var TAG_NAME_PREFIX = "ae";
|
|
537
526
|
var AeicoComponent = class extends import_aeico.AeicoElement {
|
|
538
|
-
static
|
|
539
|
-
const
|
|
540
|
-
|
|
527
|
+
static define(name) {
|
|
528
|
+
const prefix = `${TAG_NAME_PREFIX}-`;
|
|
529
|
+
const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
|
|
530
|
+
super.define(tagName);
|
|
541
531
|
}
|
|
542
532
|
};
|
|
543
533
|
var aeico_component_default = AeicoComponent;
|
|
@@ -552,6 +542,9 @@ var import_aeico3 = require("aeico");
|
|
|
552
542
|
var import_tree_item = __toESM(require_tree_item(), 1);
|
|
553
543
|
var import_variables2 = __toESM(require_variables(), 1);
|
|
554
544
|
|
|
545
|
+
// src/utils.ts
|
|
546
|
+
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
547
|
+
|
|
555
548
|
// src/icon/icon.ts
|
|
556
549
|
var import_aeico2 = require("aeico");
|
|
557
550
|
var import_variables = __toESM(require_variables(), 1);
|
|
@@ -565,7 +558,7 @@ var defaultViewBox = "0 0 24 24";
|
|
|
565
558
|
// src/icon/registry.ts
|
|
566
559
|
var IconRegistry = class {
|
|
567
560
|
static _icons = /* @__PURE__ */ new Map();
|
|
568
|
-
/** Names registered via addBuiltIn
|
|
561
|
+
/** Names registered via addBuiltIn - can be overridden by user add() calls */
|
|
569
562
|
static _builtInKeys = /* @__PURE__ */ new Set();
|
|
570
563
|
/** Register user icons. Always takes priority over built-in icons. */
|
|
571
564
|
static add(icons) {
|
|
@@ -617,7 +610,6 @@ registry_default.addBuiltIn({
|
|
|
617
610
|
|
|
618
611
|
// src/icon/icon.ts
|
|
619
612
|
var Icon = class extends aeico_component_default {
|
|
620
|
-
static tagName = "icon";
|
|
621
613
|
static props = {
|
|
622
614
|
name: { type: String },
|
|
623
615
|
size: { type: String },
|
|
@@ -677,7 +669,7 @@ var Icon = class extends aeico_component_default {
|
|
|
677
669
|
});
|
|
678
670
|
}
|
|
679
671
|
};
|
|
680
|
-
Icon.
|
|
672
|
+
Icon.define("icon");
|
|
681
673
|
|
|
682
674
|
// src/tree/tree-item.ts
|
|
683
675
|
var _autoKeyCounter = 0;
|
|
@@ -876,9 +868,8 @@ __decorateElement(_init, 4, "selected", _selected_dec, TreeItem, _selected);
|
|
|
876
868
|
__decorateElement(_init, 4, "checked", _checked_dec, TreeItem, _checked);
|
|
877
869
|
__decorateElement(_init, 4, "indeterminate", _indeterminate_dec, TreeItem, _indeterminate);
|
|
878
870
|
__decoratorMetadata(_init, TreeItem);
|
|
879
|
-
__publicField(TreeItem, "tagName", "tree-item");
|
|
880
871
|
__publicField(TreeItem, "styles", [import_variables2.default, import_tree_item.default]);
|
|
881
|
-
TreeItem.
|
|
872
|
+
TreeItem.define("tree-item");
|
|
882
873
|
var tree_item_default = TreeItem;
|
|
883
874
|
|
|
884
875
|
// src/tree/tree.ts
|
|
@@ -1049,9 +1040,8 @@ __decorateElement(_init2, 4, "defaultExpandAll", _defaultExpandAll_dec, Tree, _d
|
|
|
1049
1040
|
__decorateElement(_init2, 4, "selectedKey", _selectedKey_dec, Tree, _selectedKey);
|
|
1050
1041
|
__decorateElement(_init2, 4, "icon", _icon_dec2, Tree, _icon2);
|
|
1051
1042
|
__decoratorMetadata(_init2, Tree);
|
|
1052
|
-
__publicField(Tree, "tagName", "tree");
|
|
1053
1043
|
__publicField(Tree, "styles", [import_variables3.default, import_tree.default]);
|
|
1054
|
-
Tree.
|
|
1044
|
+
Tree.define("tree");
|
|
1055
1045
|
var tree_default = Tree;
|
|
1056
1046
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1057
1047
|
0 && (module.exports = {
|