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/dialog.cjs
CHANGED
|
@@ -113,7 +113,7 @@ var require_variables = __commonJS({
|
|
|
113
113
|
--ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
|
|
114
114
|
--ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
|
|
115
115
|
|
|
116
|
-
/* Gray (neutral
|
|
116
|
+
/* Gray (neutral - base #6e6e6e) */
|
|
117
117
|
--ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
|
|
118
118
|
--ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
|
|
119
119
|
--ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
|
|
@@ -124,7 +124,7 @@ var require_variables = __commonJS({
|
|
|
124
124
|
--ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
|
|
125
125
|
--ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
|
|
126
126
|
|
|
127
|
-
/* Slate (blue-gray
|
|
127
|
+
/* Slate (blue-gray - base #64748b, used for 'secondary') */
|
|
128
128
|
--ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
|
|
129
129
|
--ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
|
|
130
130
|
--ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
|
|
@@ -160,7 +160,7 @@ var require_variables = __commonJS({
|
|
|
160
160
|
|
|
161
161
|
:root,
|
|
162
162
|
:host {
|
|
163
|
-
/* Hover / active mix (light default
|
|
163
|
+
/* Hover / active mix (light default - overridden in \xA7 6 dark) */
|
|
164
164
|
--ae-color-mix-hover: black 10%;
|
|
165
165
|
--ae-color-mix-active: black 20%;
|
|
166
166
|
|
|
@@ -194,7 +194,7 @@ var require_variables = __commonJS({
|
|
|
194
194
|
--ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
|
|
195
195
|
--ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
|
|
196
196
|
|
|
197
|
-
/* Secondary (Slate)
|
|
197
|
+
/* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
|
|
198
198
|
--ae-color-secondary: var(--ae-slate-500);
|
|
199
199
|
--ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
|
|
200
200
|
--ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
|
|
@@ -210,7 +210,7 @@ var require_variables = __commonJS({
|
|
|
210
210
|
:host {
|
|
211
211
|
color-scheme: light;
|
|
212
212
|
|
|
213
|
-
/* Gray UI aliases
|
|
213
|
+
/* Gray UI aliases - lighter palette steps for elements on white background */
|
|
214
214
|
--ae-color-gray-dark: var(--ae-gray-400);
|
|
215
215
|
--ae-color-gray: var(--ae-gray-300);
|
|
216
216
|
--ae-color-gray-light: var(--ae-gray-200);
|
|
@@ -242,7 +242,7 @@ var require_variables = __commonJS({
|
|
|
242
242
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
|
|
243
243
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
|
|
244
244
|
|
|
245
|
-
/* Subtle intent tokens
|
|
245
|
+
/* Subtle intent tokens - light context */
|
|
246
246
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
|
|
247
247
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
|
|
248
248
|
--ae-color-primary-text-emphasis: var(--ae-blue-700);
|
|
@@ -273,7 +273,7 @@ var require_variables = __commonJS({
|
|
|
273
273
|
--ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
|
|
274
274
|
--ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
|
|
275
275
|
|
|
276
|
-
/* Component tokens
|
|
276
|
+
/* Component tokens - light defaults */
|
|
277
277
|
--ae-action-btn-bg: var(--ae-gray-200);
|
|
278
278
|
--ae-action-btn-bg-hover: var(--ae-color-primary);
|
|
279
279
|
--ae-action-btn-color: var(--ae-gray-600);
|
|
@@ -308,14 +308,12 @@ var require_variables = __commonJS({
|
|
|
308
308
|
--ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
|
|
309
309
|
}
|
|
310
310
|
|
|
311
|
-
/* Border-radius tokens
|
|
311
|
+
/* Border-radius tokens - shared across all components */
|
|
312
312
|
:root,
|
|
313
313
|
:host {
|
|
314
314
|
/**
|
|
315
315
|
* Unified border-radius hook for all components.
|
|
316
316
|
*
|
|
317
|
-
* Not set by default \u2014 each component falls back to its own --ae-radius-*
|
|
318
|
-
* token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
|
|
319
317
|
*
|
|
320
318
|
* Usage:
|
|
321
319
|
* :root { --ae-border-radius: 0; } // global: all components square
|
|
@@ -337,7 +335,7 @@ var require_variables = __commonJS({
|
|
|
337
335
|
--ae-radius-circle: 50%;
|
|
338
336
|
}
|
|
339
337
|
|
|
340
|
-
/* Layout tokens
|
|
338
|
+
/* Layout tokens - defined on :root so all light DOM elements can use them */
|
|
341
339
|
:root,
|
|
342
340
|
:host {
|
|
343
341
|
--container-max-width: 1280px;
|
|
@@ -350,18 +348,18 @@ var require_variables = __commonJS({
|
|
|
350
348
|
:host-context([theme="dark"]) {
|
|
351
349
|
color-scheme: dark;
|
|
352
350
|
|
|
353
|
-
/* Hover / active
|
|
351
|
+
/* Hover / active - slightly gentler on dark backgrounds */
|
|
354
352
|
--ae-color-mix-hover: black 8%;
|
|
355
353
|
--ae-color-mix-active: black 16%;
|
|
356
354
|
|
|
357
|
-
/* Gray UI aliases
|
|
355
|
+
/* Gray UI aliases - darker palette steps for elements on dark background */
|
|
358
356
|
--ae-color-gray-dark: var(--ae-gray-800);
|
|
359
357
|
--ae-color-gray: var(--ae-gray-700);
|
|
360
358
|
--ae-color-gray-light: var(--ae-gray-600);
|
|
361
359
|
--ae-color-gray-lighter: var(--ae-gray-500);
|
|
362
360
|
--ae-color-gray-lightest: var(--ae-gray-400);
|
|
363
361
|
|
|
364
|
-
/* Secondary
|
|
362
|
+
/* Secondary - deeper base on dark background */
|
|
365
363
|
--ae-color-secondary: var(--ae-slate-700);
|
|
366
364
|
--ae-color-secondary-text: var(--ae-slate-300);
|
|
367
365
|
|
|
@@ -390,7 +388,7 @@ var require_variables = __commonJS({
|
|
|
390
388
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
|
|
391
389
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
|
|
392
390
|
|
|
393
|
-
/* Subtle intent tokens
|
|
391
|
+
/* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
|
|
394
392
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
|
|
395
393
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
|
|
396
394
|
--ae-color-primary-text-emphasis: var(--ae-blue-300);
|
|
@@ -421,7 +419,7 @@ var require_variables = __commonJS({
|
|
|
421
419
|
--ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
|
|
422
420
|
--ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
|
|
423
421
|
|
|
424
|
-
/* Component tokens
|
|
422
|
+
/* Component tokens - dark overrides */
|
|
425
423
|
--ae-action-btn-bg: var(--ae-color-gray);
|
|
426
424
|
--ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
|
|
427
425
|
--ae-action-btn-color: var(--ae-gray-400);
|
|
@@ -475,20 +473,12 @@ var import_dialog = __toESM(require_dialog(), 1);
|
|
|
475
473
|
|
|
476
474
|
// src/aeico-component.ts
|
|
477
475
|
var import_aeico = require("aeico");
|
|
478
|
-
|
|
479
|
-
// src/utils.ts
|
|
480
|
-
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
481
|
-
function toKebab(str) {
|
|
482
|
-
const cleaned = str.replace(/^[_\d]+/, "");
|
|
483
|
-
return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
// src/aeico-component.ts
|
|
487
476
|
var TAG_NAME_PREFIX = "ae";
|
|
488
477
|
var AeicoComponent = class extends import_aeico.AeicoElement {
|
|
489
|
-
static
|
|
490
|
-
const
|
|
491
|
-
|
|
478
|
+
static define(name) {
|
|
479
|
+
const prefix = `${TAG_NAME_PREFIX}-`;
|
|
480
|
+
const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
|
|
481
|
+
super.define(tagName);
|
|
492
482
|
}
|
|
493
483
|
};
|
|
494
484
|
var aeico_component_default = AeicoComponent;
|
|
@@ -496,6 +486,9 @@ var aeico_component_default = AeicoComponent;
|
|
|
496
486
|
// src/dialog/dialog.ts
|
|
497
487
|
var import_aeico3 = require("aeico");
|
|
498
488
|
|
|
489
|
+
// src/utils.ts
|
|
490
|
+
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
491
|
+
|
|
499
492
|
// src/icon/icon.ts
|
|
500
493
|
var import_aeico2 = require("aeico");
|
|
501
494
|
var import_variables = __toESM(require_variables(), 1);
|
|
@@ -509,7 +502,7 @@ var defaultViewBox = "0 0 24 24";
|
|
|
509
502
|
// src/icon/registry.ts
|
|
510
503
|
var IconRegistry = class {
|
|
511
504
|
static _icons = /* @__PURE__ */ new Map();
|
|
512
|
-
/** Names registered via addBuiltIn
|
|
505
|
+
/** Names registered via addBuiltIn - can be overridden by user add() calls */
|
|
513
506
|
static _builtInKeys = /* @__PURE__ */ new Set();
|
|
514
507
|
/** Register user icons. Always takes priority over built-in icons. */
|
|
515
508
|
static add(icons) {
|
|
@@ -561,7 +554,6 @@ registry_default.addBuiltIn({
|
|
|
561
554
|
|
|
562
555
|
// src/icon/icon.ts
|
|
563
556
|
var Icon = class extends aeico_component_default {
|
|
564
|
-
static tagName = "icon";
|
|
565
557
|
static props = {
|
|
566
558
|
name: { type: String },
|
|
567
559
|
size: { type: String },
|
|
@@ -621,7 +613,7 @@ var Icon = class extends aeico_component_default {
|
|
|
621
613
|
});
|
|
622
614
|
}
|
|
623
615
|
};
|
|
624
|
-
Icon.
|
|
616
|
+
Icon.define("icon");
|
|
625
617
|
|
|
626
618
|
// src/dialog/dialog.ts
|
|
627
619
|
var Dialog = class extends aeico_component_default {
|
|
@@ -731,7 +723,7 @@ var Dialog = class extends aeico_component_default {
|
|
|
731
723
|
return this._dialogEl?.open ?? false;
|
|
732
724
|
}
|
|
733
725
|
};
|
|
734
|
-
Dialog.
|
|
726
|
+
Dialog.define("dialog");
|
|
735
727
|
var dialog_default = Dialog;
|
|
736
728
|
// Annotate the CommonJS export names for ESM import in node:
|
|
737
729
|
0 && (module.exports = {
|
package/dist/dialog.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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/dialog.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/size.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/icon.css", "../src/dialog/index.ts", "../src/dialog/dialog.ts", "../src/aeico-component.ts", "../src/utils.ts", "../src/icon/icon.ts", "../src/icon/defines.ts", "../src/icon/registry.ts", "../src/icon/built-in-icons.ts"],
|
|
4
|
-
"sourcesContent": ["module.exports = \":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\"", "module.exports = \":host {\\n display: contents;\\n}\\n\\ndialog {\\n display: none;\\n flex-direction: column;\\n border: none;\\n border-radius: var(--ae-border-radius, var(--ae-radius-lg));\\n padding: 0;\\n max-width: min(90vw, 600px);\\n max-height: 90vh;\\n background: var(--ae-surface-overlay);\\n color: var(--ae-color-text-main);\\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\\n overflow: hidden;\\n}\\n\\ndialog[open] {\\n display: flex;\\n animation: dialog-slide-in 0.2s ease;\\n}\\n\\ndialog::backdrop {\\n background: var(--color-overlay);\\n animation: dialog-backdrop-in 0.2s ease;\\n}\\n\\n@keyframes dialog-backdrop-in {\\n from { opacity: 0; }\\n to { opacity: 1; }\\n}\\n\\n@keyframes dialog-slide-in {\\n from {\\n opacity: 0;\\n transform: scale(0.96) translateY(-8px);\\n }\\n to {\\n opacity: 1;\\n transform: scale(1) translateY(0);\\n }\\n}\\n\\nheader {\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n padding: 16px 20px;\\n border-bottom: 1px solid var(--ae-border-subtle);\\n flex-shrink: 0;\\n}\\n\\n.label {\\n flex: 1;\\n font-size: var(--ae-size-m, 1rem);\\n font-weight: 500;\\n margin: 0;\\n color: var(--ae-color-text-main);\\n}\\n\\n.close-btn {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-shrink: 0;\\n width: 28px;\\n height: 28px;\\n padding: 0;\\n border: none;\\n border-radius: var(--ae-border-radius, var(--ae-radius-sm));\\n background: transparent;\\n color: var(--ae-color-text-muted);\\n font-size: 18px;\\n line-height: 1;\\n cursor: pointer;\\n transition: background 0.15s, color 0.15s;\\n}\\n\\n.close-btn:hover {\\n background: var(--ae-border-subtle);\\n color: var(--ae-color-text-main);\\n}\\n\\n.body {\\n flex: 1;\\n overflow-y: auto;\\n padding: 20px;\\n}\\n\\nfooter {\\n display: flex;\\n align-items: center;\\n justify-content: flex-end;\\n gap: 8px;\\n padding: 12px 20px;\\n border-top: 1px solid var(--ae-border-subtle);\\n flex-shrink: 0;\\n}\\n\\n::slotted([data-align-left]) {\\n margin-right: auto;\\n}\\n\"", "module.exports = \":host([size=\\\"xs\\\"]) { font-size: var(--ae-size-xs); }\\n:host([size=\\\"sm\\\"]) { font-size: var(--ae-size-s); }\\n:host([size=\\\"md\\\"]) { font-size: var(--ae-size-m); }\\n:host([size=\\\"lg\\\"]) { font-size: var(--ae-size-l); }\\n:host([size=\\\"xl\\\"]) { font-size: var(--ae-size-xl); }\\n:host([size=\\\"3xs\\\"]) { font-size: var(--ae-size-3xs); }\\n:host([size=\\\"2xs\\\"]) { font-size: var(--ae-size-2xs); }\\n\"", "module.exports = \":host {\\n --ae-color-solid: var(--ae-color-gray);\\n --ae-color-solid-hover: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n --ae-color-solid-active: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n --ae-color-on-solid: var(--ae-color-text-main);\\n --ae-color-border: var(--ae-color-gray);\\n --ae-color-border-hover: color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n --ae-color-accent: var(--ae-color-text-muted);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-border-subtle);\\n --ae-color-subtle-hover: var(--ae-border-default);\\n --ae-color-bg-subtle: var(--ae-border-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n --ae-color-solid: var(--ae-color-primary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-primary);\\n --ae-color-accent: var(--ae-color-text-link);\\n --ae-color-accent-hover: var(--ae-color-text-link-hover);\\n --ae-color-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-blue) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-primary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n --ae-color-solid: var(--ae-color-secondary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-secondary-hover);\\n --ae-color-accent: var(--ae-color-secondary-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: rgb(from var(--ae-slate) r g b / 0.06);\\n --ae-color-subtle-hover: rgb(from var(--ae-slate) r g b / 0.12);\\n --ae-color-bg-subtle: var(--ae-color-secondary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-secondary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n --ae-color-solid: var(--ae-color-success);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-success);\\n --ae-color-accent: var(--ae-color-success-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-success-hover);\\n --ae-color-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-green) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-success-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n --ae-color-solid: var(--ae-color-danger);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-danger);\\n --ae-color-accent: var(--ae-color-danger-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-danger-hover);\\n --ae-color-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-red) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-danger-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n --ae-color-solid: var(--ae-color-warning);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-color-warning);\\n --ae-color-accent: var(--ae-color-warning-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-warning-hover);\\n --ae-color-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-yellow) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-warning-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n --ae-color-solid: var(--ae-color-info);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-info);\\n --ae-color-accent: var(--ae-color-info-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-info-hover);\\n --ae-color-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-cyan) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-info-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n --ae-color-solid: var(--ae-light);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-border-hover);\\n --ae-color-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-light-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n --ae-color-solid: var(--ae-dark-500);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-dark-500);\\n --ae-color-accent: var(--ae-color-text-main);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-dark-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-main);\\n --ae-color-border-subtle: var(--ae-color-dark-border-subtle);\\n}\\n\"", "module.exports = \":host {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 20px;\\n width: 1em;\\n height: 1em;\\n color: inherit;\\n flex-shrink: 0;\\n line-height: 0;\\n vertical-align: middle;\\n}\\n\\n:host([color]) {\\n color: var(--ae-color-solid);\\n}\\n\\n.icon-svg {\\n display: block;\\n width: 100%;\\n height: 100%;\\n fill: var(--icon-fill, currentColor);\\n stroke: var(--icon-stroke, none);\\n stroke-width: var(--icon-stroke-width, 2);\\n stroke-linecap: var(--icon-stroke-linecap, round);\\n stroke-linejoin: var(--icon-stroke-linejoin, round);\\n pointer-events: none;\\n overflow: visible;\\n}\\n\"", "export { default, default as Dialog } from './dialog';\nexport type { DialogProps } from './dialog';\n", "\uFEFFimport type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport style from '../styles/components/dialog.css';\nimport AeicoComponent from '../aeico-component';\nimport { html, tags } from 'aeico';\nimport '../icon/icon';\n\nclass Dialog extends AeicoComponent {\n static props: Props = {\n label: { type: String },\n width: { type: String },\n height: { type: String },\n modal: { type: Boolean },\n closable: { type: Boolean },\n header: { type: Boolean },\n closeOnOverlayClick: { type: Boolean },\n };\n\n declare label?: string;\n declare width?: string;\n declare height?: string;\n declare modal?: boolean;\n declare closable?: boolean;\n declare header?: boolean;\n declare closeOnOverlayClick?: boolean;\n\n protected static styles = [styleVariables, style];\n\n private _dialogEl: HTMLDialogElement | null = null;\n private _hasFooter = false;\n\n protected render() {\n return html(({ dialog, div, header, footer, span, button, slot }) => {\n this._dialogEl = dialog(\n {\n '@click': this._handleDialogClick,\n '@close': this._handleNativeClose,\n style: {\n width: this.width || '',\n height: this.height || '',\n },\n },\n () => {\n if (this.header !== false) {\n header({}, () => {\n slot({ name: 'header' }, () => {\n span({ className: 'label', textContent: this.label || '' });\n });\n if (this.closable !== false) {\n const { aeIcon } = tags;\n button(\n {\n className: 'close-btn',\n 'aria-label': 'close',\n '@click': () => this.close(),\n },\n () => {\n aeIcon({ name: 'close' });\n },\n );\n }\n });\n }\n\n div({ className: 'body' }, () => {\n slot();\n });\n\n footer(\n {\n style: { display: this._hasFooter ? '' : 'none' },\n },\n () => {\n slot({ name: 'footer', '@slotchange': this._handleFooterSlotChange });\n },\n );\n },\n );\n });\n }\n\n private _handleDialogClick = (e: Event) => {\n const mouseEvent = e as MouseEvent;\n const path = mouseEvent.composedPath();\n\n for (const el of path) {\n if (el instanceof Element && el.hasAttribute('data-close')) {\n this.close();\n return;\n }\n if (el === this._dialogEl) break;\n }\n\n if (this.modal !== false && this.closeOnOverlayClick !== false) {\n if (mouseEvent.target === this._dialogEl) {\n const rect = this._dialogEl!.getBoundingClientRect();\n const outside =\n mouseEvent.clientX < rect.left ||\n mouseEvent.clientX > rect.right ||\n mouseEvent.clientY < rect.top ||\n mouseEvent.clientY > rect.bottom;\n if (outside) {\n this.close();\n }\n }\n }\n };\n\n private _handleNativeClose = () => {\n this.emit('close', { detail: { target: this } });\n };\n\n private _handleFooterSlotChange = (e: Event) => {\n const slotEl = e.target as HTMLSlotElement;\n const hasContent = slotEl.assignedElements().length > 0;\n if (hasContent !== this._hasFooter) {\n this._hasFooter = hasContent;\n this.update();\n }\n };\n\n open() {\n if (!this._dialogEl) return;\n if (this.modal !== false) {\n this._dialogEl.showModal();\n } else {\n this._dialogEl.show();\n }\n this.emit('open', { detail: { target: this } });\n }\n\n close() {\n this._dialogEl?.close();\n }\n\n isOpen(): boolean {\n return this._dialogEl?.open ?? false;\n }\n}\n\nDialog.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-dialog': Dialog;\n }\n}\n\nexport default Dialog;\nexport type DialogProps = InferProps<typeof Dialog>;\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", "\uFEFFimport type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport style from '../styles/components/icon.css';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\nimport './built-in-icons';\n\nclass Icon extends AeicoComponent {\n static tagName = 'icon';\n\n static props: Props = {\n name: { type: String },\n size: { type: String },\n color: { type: String },\n stroke: { type: Boolean },\n strokeWidth: { type: Number },\n };\n\n declare name?: string;\n declare size?: IconSize;\n declare color?: IconColor;\n declare stroke?: boolean;\n declare strokeWidth?: number;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n protected render() {\n const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n // Numeric size: set font-size directly (string sizes are handled by size.css)\n const numericSize = Number(this.size);\n if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n this.style.setProperty('font-size', `${numericSize}px`);\n } else {\n this.style.removeProperty('font-size');\n }\n\n if (!def) return;\n\n const { paths } = def;\n const isMultiPath = Array.isArray(paths);\n\n // Stroke CSS variables only apply in single-path mode (component props)\n if (!isMultiPath) {\n const useStroke =\n this.stroke ?? (this.strokeWidth !== undefined ? true : (def.stroke ?? false));\n const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;\n\n if (useStroke) {\n this.style.setProperty('--icon-fill', 'none');\n this.style.setProperty('--icon-stroke', 'currentColor');\n this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n } else {\n this.style.removeProperty('--icon-fill');\n this.style.removeProperty('--icon-stroke');\n this.style.removeProperty('--icon-stroke-width');\n }\n } else {\n this.style.removeProperty('--icon-fill');\n this.style.removeProperty('--icon-stroke');\n this.style.removeProperty('--icon-stroke-width');\n }\n\n return html(({ svg, path }) => {\n svg(\n {\n className: 'icon-svg',\n viewBox: def.viewBox ?? defaultViewBox,\n 'aria-hidden': 'true',\n xmlns: SVG_NS,\n },\n () => {\n if (typeof paths === 'string') {\n path({ d: paths });\n } else {\n for (const p of paths) {\n const attrs: Record<string, unknown> = { d: p.d };\n if (p.fill) attrs.style = { fill: p.fill };\n path(attrs);\n }\n }\n },\n );\n });\n }\n}\n\nIcon.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-icon': Icon;\n }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n", "export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'info';\n\nexport interface IconPathDef {\n d: string;\n fill?: string;\n stroke?: boolean;\n strokeWidth?: number;\n}\n\nexport interface IconDefinition {\n paths: string | IconPathDef[];\n viewBox?: string;\n stroke?: boolean;\n strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n", "import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n private static _icons: Map<string, IconDefinition> = new Map();\n /** Names registered via addBuiltIn \u2014 can be overridden by user add() calls */\n private static _builtInKeys: Set<string> = new Set();\n\n /** Register user icons. Always takes priority over built-in icons. */\n static add(icons: IconRegistryData) {\n for (const [name, data] of Object.entries(icons)) {\n if (typeof data === 'string') {\n this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n } else {\n this._icons.set(name, data);\n }\n // Mark as user-defined (removes built-in status)\n this._builtInKeys.delete(name);\n }\n }\n\n /**\n * Register built-in icons provided by the library.\n * A built-in icon will NOT overwrite an icon already registered by the user.\n */\n static addBuiltIn(icons: IconRegistryData) {\n for (const [name, data] of Object.entries(icons)) {\n // Skip if the user has already registered this icon\n if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;\n if (typeof data === 'string') {\n this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n } else {\n this._icons.set(name, data);\n }\n this._builtInKeys.add(name);\n }\n }\n\n static get(name: string): IconDefinition | undefined {\n return this._icons.get(name);\n }\n\n static has(name: string): boolean {\n return this._icons.has(name);\n }\n}\n\nexport default IconRegistry;\n", "/**\n * Built-in system icons used internally by aeico components.\n * These are pre-registered so components work out of the box.\n * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).\n *\n * All paths use the Material Design 24\u00D724 viewBox.\n */\nimport IconRegistry from './registry';\n\nIconRegistry.addBuiltIn({\n copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',\n check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',\n 'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',\n 'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',\n 'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',\n 'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',\n 'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',\n 'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',\n close:\n 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n});\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["module.exports = \":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\"", "module.exports = \":host {\\n display: contents;\\n}\\n\\ndialog {\\n display: none;\\n flex-direction: column;\\n border: none;\\n border-radius: var(--ae-border-radius, var(--ae-radius-lg));\\n padding: 0;\\n max-width: min(90vw, 600px);\\n max-height: 90vh;\\n background: var(--ae-surface-overlay);\\n color: var(--ae-color-text-main);\\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\\n overflow: hidden;\\n}\\n\\ndialog[open] {\\n display: flex;\\n animation: dialog-slide-in 0.2s ease;\\n}\\n\\ndialog::backdrop {\\n background: var(--color-overlay);\\n animation: dialog-backdrop-in 0.2s ease;\\n}\\n\\n@keyframes dialog-backdrop-in {\\n from { opacity: 0; }\\n to { opacity: 1; }\\n}\\n\\n@keyframes dialog-slide-in {\\n from {\\n opacity: 0;\\n transform: scale(0.96) translateY(-8px);\\n }\\n to {\\n opacity: 1;\\n transform: scale(1) translateY(0);\\n }\\n}\\n\\nheader {\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n padding: 16px 20px;\\n border-bottom: 1px solid var(--ae-border-subtle);\\n flex-shrink: 0;\\n}\\n\\n.label {\\n flex: 1;\\n font-size: var(--ae-size-m, 1rem);\\n font-weight: 500;\\n margin: 0;\\n color: var(--ae-color-text-main);\\n}\\n\\n.close-btn {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-shrink: 0;\\n width: 28px;\\n height: 28px;\\n padding: 0;\\n border: none;\\n border-radius: var(--ae-border-radius, var(--ae-radius-sm));\\n background: transparent;\\n color: var(--ae-color-text-muted);\\n font-size: 18px;\\n line-height: 1;\\n cursor: pointer;\\n transition: background 0.15s, color 0.15s;\\n}\\n\\n.close-btn:hover {\\n background: var(--ae-border-subtle);\\n color: var(--ae-color-text-main);\\n}\\n\\n.body {\\n flex: 1;\\n overflow-y: auto;\\n padding: 20px;\\n}\\n\\nfooter {\\n display: flex;\\n align-items: center;\\n justify-content: flex-end;\\n gap: 8px;\\n padding: 12px 20px;\\n border-top: 1px solid var(--ae-border-subtle);\\n flex-shrink: 0;\\n}\\n\\n::slotted([data-align-left]) {\\n margin-right: auto;\\n}\\n\"", "module.exports = \":host([size=\\\"xs\\\"]) { font-size: var(--ae-size-xs); }\\n:host([size=\\\"sm\\\"]) { font-size: var(--ae-size-s); }\\n:host([size=\\\"md\\\"]) { font-size: var(--ae-size-m); }\\n:host([size=\\\"lg\\\"]) { font-size: var(--ae-size-l); }\\n:host([size=\\\"xl\\\"]) { font-size: var(--ae-size-xl); }\\n:host([size=\\\"3xs\\\"]) { font-size: var(--ae-size-3xs); }\\n:host([size=\\\"2xs\\\"]) { font-size: var(--ae-size-2xs); }\\n\"", "module.exports = \":host {\\n --ae-color-solid: var(--ae-color-gray);\\n --ae-color-solid-hover: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n --ae-color-solid-active: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n --ae-color-on-solid: var(--ae-color-text-main);\\n --ae-color-border: var(--ae-color-gray);\\n --ae-color-border-hover: color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n --ae-color-accent: var(--ae-color-text-muted);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-border-subtle);\\n --ae-color-subtle-hover: var(--ae-border-default);\\n --ae-color-bg-subtle: var(--ae-border-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n --ae-color-solid: var(--ae-color-primary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-primary);\\n --ae-color-accent: var(--ae-color-text-link);\\n --ae-color-accent-hover: var(--ae-color-text-link-hover);\\n --ae-color-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-blue) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-primary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n --ae-color-solid: var(--ae-color-secondary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-secondary-hover);\\n --ae-color-accent: var(--ae-color-secondary-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: rgb(from var(--ae-slate) r g b / 0.06);\\n --ae-color-subtle-hover: rgb(from var(--ae-slate) r g b / 0.12);\\n --ae-color-bg-subtle: var(--ae-color-secondary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-secondary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n --ae-color-solid: var(--ae-color-success);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-success);\\n --ae-color-accent: var(--ae-color-success-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-success-hover);\\n --ae-color-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-green) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-success-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n --ae-color-solid: var(--ae-color-danger);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-danger);\\n --ae-color-accent: var(--ae-color-danger-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-danger-hover);\\n --ae-color-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-red) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-danger-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n --ae-color-solid: var(--ae-color-warning);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-color-warning);\\n --ae-color-accent: var(--ae-color-warning-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-warning-hover);\\n --ae-color-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-yellow) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-warning-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n --ae-color-solid: var(--ae-color-info);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-info);\\n --ae-color-accent: var(--ae-color-info-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-info-hover);\\n --ae-color-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-cyan) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-info-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n --ae-color-solid: var(--ae-light);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-border-hover);\\n --ae-color-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-light-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n --ae-color-solid: var(--ae-dark-500);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-dark-500);\\n --ae-color-accent: var(--ae-color-text-main);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-dark-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-main);\\n --ae-color-border-subtle: var(--ae-color-dark-border-subtle);\\n}\\n\"", "module.exports = \":host {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 20px;\\n width: 1em;\\n height: 1em;\\n color: inherit;\\n flex-shrink: 0;\\n line-height: 0;\\n vertical-align: middle;\\n}\\n\\n:host([color]) {\\n color: var(--ae-color-solid);\\n}\\n\\n.icon-svg {\\n display: block;\\n width: 100%;\\n height: 100%;\\n fill: var(--icon-fill, currentColor);\\n stroke: var(--icon-stroke, none);\\n stroke-width: var(--icon-stroke-width, 2);\\n stroke-linecap: var(--icon-stroke-linecap, round);\\n stroke-linejoin: var(--icon-stroke-linejoin, round);\\n pointer-events: none;\\n overflow: visible;\\n}\\n\"", "export { default, default as Dialog } from './dialog';\nexport type { DialogProps } from './dialog';\n", "import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport style from '../styles/components/dialog.css';\nimport AeicoComponent from '../aeico-component';\nimport { html, tags } from 'aeico';\nimport '../icon/icon';\n\nclass Dialog extends AeicoComponent {\n static props: Props = {\n label: { type: String },\n width: { type: String },\n height: { type: String },\n modal: { type: Boolean },\n closable: { type: Boolean },\n header: { type: Boolean },\n closeOnOverlayClick: { type: Boolean },\n };\n\n declare label?: string;\n declare width?: string;\n declare height?: string;\n declare modal?: boolean;\n declare closable?: boolean;\n declare header?: boolean;\n declare closeOnOverlayClick?: boolean;\n\n protected static styles = [styleVariables, style];\n\n private _dialogEl: HTMLDialogElement | null = null;\n private _hasFooter = false;\n\n protected render() {\n return html(({ dialog, div, header, footer, span, button, slot }) => {\n this._dialogEl = dialog(\n {\n '@click': this._handleDialogClick,\n '@close': this._handleNativeClose,\n style: {\n width: this.width || '',\n height: this.height || '',\n },\n },\n () => {\n if (this.header !== false) {\n header({}, () => {\n slot({ name: 'header' }, () => {\n span({ className: 'label', textContent: this.label || '' });\n });\n if (this.closable !== false) {\n const { aeIcon } = tags;\n button(\n {\n className: 'close-btn',\n 'aria-label': 'close',\n '@click': () => this.close(),\n },\n () => {\n aeIcon({ name: 'close' });\n },\n );\n }\n });\n }\n\n div({ className: 'body' }, () => {\n slot();\n });\n\n footer(\n {\n style: { display: this._hasFooter ? '' : 'none' },\n },\n () => {\n slot({ name: 'footer', '@slotchange': this._handleFooterSlotChange });\n },\n );\n },\n );\n });\n }\n\n private _handleDialogClick = (e: Event) => {\n const mouseEvent = e as MouseEvent;\n const path = mouseEvent.composedPath();\n\n for (const el of path) {\n if (el instanceof Element && el.hasAttribute('data-close')) {\n this.close();\n return;\n }\n if (el === this._dialogEl) break;\n }\n\n if (this.modal !== false && this.closeOnOverlayClick !== false) {\n if (mouseEvent.target === this._dialogEl) {\n const rect = this._dialogEl!.getBoundingClientRect();\n const outside =\n mouseEvent.clientX < rect.left ||\n mouseEvent.clientX > rect.right ||\n mouseEvent.clientY < rect.top ||\n mouseEvent.clientY > rect.bottom;\n if (outside) {\n this.close();\n }\n }\n }\n };\n\n private _handleNativeClose = () => {\n this.emit('close', { detail: { target: this } });\n };\n\n private _handleFooterSlotChange = (e: Event) => {\n const slotEl = e.target as HTMLSlotElement;\n const hasContent = slotEl.assignedElements().length > 0;\n if (hasContent !== this._hasFooter) {\n this._hasFooter = hasContent;\n this.update();\n }\n };\n\n open() {\n if (!this._dialogEl) return;\n if (this.modal !== false) {\n this._dialogEl.showModal();\n } else {\n this._dialogEl.show();\n }\n this.emit('open', { detail: { target: this } });\n }\n\n close() {\n this._dialogEl?.close();\n }\n\n isOpen(): boolean {\n return this._dialogEl?.open ?? false;\n }\n}\n\nDialog.define('dialog');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-dialog': Dialog;\n }\n}\n\nexport default Dialog;\nexport type DialogProps = InferProps<typeof Dialog>;\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", "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, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport style from '../styles/components/icon.css';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\nimport './built-in-icons';\n\nclass Icon extends AeicoComponent {\n static props: Props = {\n name: { type: String },\n size: { type: String },\n color: { type: String },\n stroke: { type: Boolean },\n strokeWidth: { type: Number },\n };\n\n declare name?: string;\n declare size?: IconSize;\n declare color?: IconColor;\n declare stroke?: boolean;\n declare strokeWidth?: number;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n protected render() {\n const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n // Numeric size: set font-size directly (string sizes are handled by size.css)\n const numericSize = Number(this.size);\n if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n this.style.setProperty('font-size', `${numericSize}px`);\n } else {\n this.style.removeProperty('font-size');\n }\n\n if (!def) return;\n\n const { paths } = def;\n const isMultiPath = Array.isArray(paths);\n\n // Stroke CSS variables only apply in single-path mode (component props)\n if (!isMultiPath) {\n const useStroke =\n this.stroke ?? (this.strokeWidth !== undefined ? true : (def.stroke ?? false));\n const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;\n\n if (useStroke) {\n this.style.setProperty('--icon-fill', 'none');\n this.style.setProperty('--icon-stroke', 'currentColor');\n this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n } else {\n this.style.removeProperty('--icon-fill');\n this.style.removeProperty('--icon-stroke');\n this.style.removeProperty('--icon-stroke-width');\n }\n } else {\n this.style.removeProperty('--icon-fill');\n this.style.removeProperty('--icon-stroke');\n this.style.removeProperty('--icon-stroke-width');\n }\n\n return html(({ svg, path }) => {\n svg(\n {\n className: 'icon-svg',\n viewBox: def.viewBox ?? defaultViewBox,\n 'aria-hidden': 'true',\n xmlns: SVG_NS,\n },\n () => {\n if (typeof paths === 'string') {\n path({ d: paths });\n } else {\n for (const p of paths) {\n const attrs: Record<string, unknown> = { d: p.d };\n if (p.fill) attrs.style = { fill: p.fill };\n path(attrs);\n }\n }\n },\n );\n });\n }\n}\n\nIcon.define('icon');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-icon': Icon;\n }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n", "export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'info';\n\nexport interface IconPathDef {\n d: string;\n fill?: string;\n stroke?: boolean;\n strokeWidth?: number;\n}\n\nexport interface IconDefinition {\n paths: string | IconPathDef[];\n viewBox?: string;\n stroke?: boolean;\n strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n", "import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n private static _icons: Map<string, IconDefinition> = new Map();\n /** Names registered via addBuiltIn - can be overridden by user add() calls */\n private static _builtInKeys: Set<string> = new Set();\n\n /** Register user icons. Always takes priority over built-in icons. */\n static add(icons: IconRegistryData) {\n for (const [name, data] of Object.entries(icons)) {\n if (typeof data === 'string') {\n this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n } else {\n this._icons.set(name, data);\n }\n // Mark as user-defined (removes built-in status)\n this._builtInKeys.delete(name);\n }\n }\n\n /**\n * Register built-in icons provided by the library.\n * A built-in icon will NOT overwrite an icon already registered by the user.\n */\n static addBuiltIn(icons: IconRegistryData) {\n for (const [name, data] of Object.entries(icons)) {\n // Skip if the user has already registered this icon\n if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;\n if (typeof data === 'string') {\n this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n } else {\n this._icons.set(name, data);\n }\n this._builtInKeys.add(name);\n }\n }\n\n static get(name: string): IconDefinition | undefined {\n return this._icons.get(name);\n }\n\n static has(name: string): boolean {\n return this._icons.has(name);\n }\n}\n\nexport default IconRegistry;\n", "/**\n * Built-in system icons used internally by aeico components.\n * These are pre-registered so components work out of the box.\n * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).\n *\n * All paths use the Material Design 24\u00D724 viewBox.\n */\nimport IconRegistry from './registry';\n\nIconRegistry.addBuiltIn({\n copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',\n check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',\n 'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',\n 'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',\n 'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',\n 'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',\n 'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',\n 'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',\n close:\n 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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",
|
|
6
6
|
"names": ["exports", "module", "exports", "module", "exports", "module", "exports", "module", "exports", "module", "import_variables", "import_aeico", "import_aeico", "styleVariables", "sizeCSS", "colorCSS", "style", "styleVariables", "style"]
|
|
7
7
|
}
|
package/dist/dialog.js
CHANGED
|
@@ -75,7 +75,7 @@ var variables_default = `:root,
|
|
|
75
75
|
--ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
|
|
76
76
|
--ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
|
|
77
77
|
|
|
78
|
-
/* Gray (neutral
|
|
78
|
+
/* Gray (neutral - base #6e6e6e) */
|
|
79
79
|
--ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
|
|
80
80
|
--ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
|
|
81
81
|
--ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
|
|
@@ -86,7 +86,7 @@ var variables_default = `:root,
|
|
|
86
86
|
--ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
|
|
87
87
|
--ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
|
|
88
88
|
|
|
89
|
-
/* Slate (blue-gray
|
|
89
|
+
/* Slate (blue-gray - base #64748b, used for 'secondary') */
|
|
90
90
|
--ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
|
|
91
91
|
--ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
|
|
92
92
|
--ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
|
|
@@ -122,7 +122,7 @@ var variables_default = `:root,
|
|
|
122
122
|
|
|
123
123
|
:root,
|
|
124
124
|
:host {
|
|
125
|
-
/* Hover / active mix (light default
|
|
125
|
+
/* Hover / active mix (light default - overridden in \xA7 6 dark) */
|
|
126
126
|
--ae-color-mix-hover: black 10%;
|
|
127
127
|
--ae-color-mix-active: black 20%;
|
|
128
128
|
|
|
@@ -156,7 +156,7 @@ var variables_default = `:root,
|
|
|
156
156
|
--ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
|
|
157
157
|
--ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
|
|
158
158
|
|
|
159
|
-
/* Secondary (Slate)
|
|
159
|
+
/* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
|
|
160
160
|
--ae-color-secondary: var(--ae-slate-500);
|
|
161
161
|
--ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
|
|
162
162
|
--ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
|
|
@@ -172,7 +172,7 @@ var variables_default = `:root,
|
|
|
172
172
|
:host {
|
|
173
173
|
color-scheme: light;
|
|
174
174
|
|
|
175
|
-
/* Gray UI aliases
|
|
175
|
+
/* Gray UI aliases - lighter palette steps for elements on white background */
|
|
176
176
|
--ae-color-gray-dark: var(--ae-gray-400);
|
|
177
177
|
--ae-color-gray: var(--ae-gray-300);
|
|
178
178
|
--ae-color-gray-light: var(--ae-gray-200);
|
|
@@ -204,7 +204,7 @@ var variables_default = `:root,
|
|
|
204
204
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
|
|
205
205
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
|
|
206
206
|
|
|
207
|
-
/* Subtle intent tokens
|
|
207
|
+
/* Subtle intent tokens - light context */
|
|
208
208
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
|
|
209
209
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
|
|
210
210
|
--ae-color-primary-text-emphasis: var(--ae-blue-700);
|
|
@@ -235,7 +235,7 @@ var variables_default = `:root,
|
|
|
235
235
|
--ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
|
|
236
236
|
--ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
|
|
237
237
|
|
|
238
|
-
/* Component tokens
|
|
238
|
+
/* Component tokens - light defaults */
|
|
239
239
|
--ae-action-btn-bg: var(--ae-gray-200);
|
|
240
240
|
--ae-action-btn-bg-hover: var(--ae-color-primary);
|
|
241
241
|
--ae-action-btn-color: var(--ae-gray-600);
|
|
@@ -270,14 +270,12 @@ var variables_default = `:root,
|
|
|
270
270
|
--ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
|
|
271
271
|
}
|
|
272
272
|
|
|
273
|
-
/* Border-radius tokens
|
|
273
|
+
/* Border-radius tokens - shared across all components */
|
|
274
274
|
:root,
|
|
275
275
|
:host {
|
|
276
276
|
/**
|
|
277
277
|
* Unified border-radius hook for all components.
|
|
278
278
|
*
|
|
279
|
-
* Not set by default \u2014 each component falls back to its own --ae-radius-*
|
|
280
|
-
* token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
|
|
281
279
|
*
|
|
282
280
|
* Usage:
|
|
283
281
|
* :root { --ae-border-radius: 0; } // global: all components square
|
|
@@ -299,7 +297,7 @@ var variables_default = `:root,
|
|
|
299
297
|
--ae-radius-circle: 50%;
|
|
300
298
|
}
|
|
301
299
|
|
|
302
|
-
/* Layout tokens
|
|
300
|
+
/* Layout tokens - defined on :root so all light DOM elements can use them */
|
|
303
301
|
:root,
|
|
304
302
|
:host {
|
|
305
303
|
--container-max-width: 1280px;
|
|
@@ -312,18 +310,18 @@ var variables_default = `:root,
|
|
|
312
310
|
:host-context([theme="dark"]) {
|
|
313
311
|
color-scheme: dark;
|
|
314
312
|
|
|
315
|
-
/* Hover / active
|
|
313
|
+
/* Hover / active - slightly gentler on dark backgrounds */
|
|
316
314
|
--ae-color-mix-hover: black 8%;
|
|
317
315
|
--ae-color-mix-active: black 16%;
|
|
318
316
|
|
|
319
|
-
/* Gray UI aliases
|
|
317
|
+
/* Gray UI aliases - darker palette steps for elements on dark background */
|
|
320
318
|
--ae-color-gray-dark: var(--ae-gray-800);
|
|
321
319
|
--ae-color-gray: var(--ae-gray-700);
|
|
322
320
|
--ae-color-gray-light: var(--ae-gray-600);
|
|
323
321
|
--ae-color-gray-lighter: var(--ae-gray-500);
|
|
324
322
|
--ae-color-gray-lightest: var(--ae-gray-400);
|
|
325
323
|
|
|
326
|
-
/* Secondary
|
|
324
|
+
/* Secondary - deeper base on dark background */
|
|
327
325
|
--ae-color-secondary: var(--ae-slate-700);
|
|
328
326
|
--ae-color-secondary-text: var(--ae-slate-300);
|
|
329
327
|
|
|
@@ -352,7 +350,7 @@ var variables_default = `:root,
|
|
|
352
350
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
|
|
353
351
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
|
|
354
352
|
|
|
355
|
-
/* Subtle intent tokens
|
|
353
|
+
/* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
|
|
356
354
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
|
|
357
355
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
|
|
358
356
|
--ae-color-primary-text-emphasis: var(--ae-blue-300);
|
|
@@ -383,7 +381,7 @@ var variables_default = `:root,
|
|
|
383
381
|
--ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
|
|
384
382
|
--ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
|
|
385
383
|
|
|
386
|
-
/* Component tokens
|
|
384
|
+
/* Component tokens - dark overrides */
|
|
387
385
|
--ae-action-btn-bg: var(--ae-color-gray);
|
|
388
386
|
--ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
|
|
389
387
|
--ae-action-btn-color: var(--ae-gray-400);
|
|
@@ -398,20 +396,12 @@ var dialog_default = ":host {\n display: contents;\n}\n\ndialog {\n display: n
|
|
|
398
396
|
|
|
399
397
|
// src/aeico-component.ts
|
|
400
398
|
import { AeicoElement } from "aeico";
|
|
401
|
-
|
|
402
|
-
// src/utils.ts
|
|
403
|
-
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
404
|
-
function toKebab(str) {
|
|
405
|
-
const cleaned = str.replace(/^[_\d]+/, "");
|
|
406
|
-
return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
// src/aeico-component.ts
|
|
410
399
|
var TAG_NAME_PREFIX = "ae";
|
|
411
400
|
var AeicoComponent = class extends AeicoElement {
|
|
412
|
-
static
|
|
413
|
-
const
|
|
414
|
-
|
|
401
|
+
static define(name) {
|
|
402
|
+
const prefix = `${TAG_NAME_PREFIX}-`;
|
|
403
|
+
const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
|
|
404
|
+
super.define(tagName);
|
|
415
405
|
}
|
|
416
406
|
};
|
|
417
407
|
var aeico_component_default = AeicoComponent;
|
|
@@ -419,6 +409,9 @@ var aeico_component_default = AeicoComponent;
|
|
|
419
409
|
// src/dialog/dialog.ts
|
|
420
410
|
import { html as html2, tags } from "aeico";
|
|
421
411
|
|
|
412
|
+
// src/utils.ts
|
|
413
|
+
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
414
|
+
|
|
422
415
|
// src/icon/icon.ts
|
|
423
416
|
import { html } from "aeico";
|
|
424
417
|
|
|
@@ -437,7 +430,7 @@ var defaultViewBox = "0 0 24 24";
|
|
|
437
430
|
// src/icon/registry.ts
|
|
438
431
|
var IconRegistry = class {
|
|
439
432
|
static _icons = /* @__PURE__ */ new Map();
|
|
440
|
-
/** Names registered via addBuiltIn
|
|
433
|
+
/** Names registered via addBuiltIn - can be overridden by user add() calls */
|
|
441
434
|
static _builtInKeys = /* @__PURE__ */ new Set();
|
|
442
435
|
/** Register user icons. Always takes priority over built-in icons. */
|
|
443
436
|
static add(icons) {
|
|
@@ -489,7 +482,6 @@ registry_default.addBuiltIn({
|
|
|
489
482
|
|
|
490
483
|
// src/icon/icon.ts
|
|
491
484
|
var Icon = class extends aeico_component_default {
|
|
492
|
-
static tagName = "icon";
|
|
493
485
|
static props = {
|
|
494
486
|
name: { type: String },
|
|
495
487
|
size: { type: String },
|
|
@@ -549,7 +541,7 @@ var Icon = class extends aeico_component_default {
|
|
|
549
541
|
});
|
|
550
542
|
}
|
|
551
543
|
};
|
|
552
|
-
Icon.
|
|
544
|
+
Icon.define("icon");
|
|
553
545
|
|
|
554
546
|
// src/dialog/dialog.ts
|
|
555
547
|
var Dialog = class extends aeico_component_default {
|
|
@@ -659,7 +651,7 @@ var Dialog = class extends aeico_component_default {
|
|
|
659
651
|
return this._dialogEl?.open ?? false;
|
|
660
652
|
}
|
|
661
653
|
};
|
|
662
|
-
Dialog.
|
|
654
|
+
Dialog.define("dialog");
|
|
663
655
|
var dialog_default2 = Dialog;
|
|
664
656
|
export {
|
|
665
657
|
dialog_default2 as Dialog,
|