@public-ui/theme-ecl 4.0.0-beta.0 → 4.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -418,47 +418,48 @@ var TagEnum;
418
418
  TagEnum[TagEnum["card"] = 8] = "card";
419
419
  TagEnum[TagEnum["combobox"] = 9] = "combobox";
420
420
  TagEnum[TagEnum["details"] = 10] = "details";
421
- TagEnum[TagEnum["drawer"] = 11] = "drawer";
422
- TagEnum[TagEnum["form"] = 12] = "form";
423
- TagEnum[TagEnum["heading"] = 13] = "heading";
424
- TagEnum[TagEnum["icon"] = 14] = "icon";
425
- TagEnum[TagEnum["image"] = 15] = "image";
426
- TagEnum[TagEnum["input-checkbox"] = 16] = "input-checkbox";
427
- TagEnum[TagEnum["input-color"] = 17] = "input-color";
428
- TagEnum[TagEnum["input-date"] = 18] = "input-date";
429
- TagEnum[TagEnum["input-email"] = 19] = "input-email";
430
- TagEnum[TagEnum["input-file"] = 20] = "input-file";
431
- TagEnum[TagEnum["input-number"] = 21] = "input-number";
432
- TagEnum[TagEnum["input-password"] = 22] = "input-password";
433
- TagEnum[TagEnum["input-radio"] = 23] = "input-radio";
434
- TagEnum[TagEnum["input-range"] = 24] = "input-range";
435
- TagEnum[TagEnum["input-text"] = 25] = "input-text";
436
- TagEnum[TagEnum["kolibri"] = 26] = "kolibri";
437
- TagEnum[TagEnum["link"] = 27] = "link";
438
- TagEnum[TagEnum["link-button"] = 28] = "link-button";
439
- TagEnum[TagEnum["logo"] = 29] = "logo";
440
- TagEnum[TagEnum["modal"] = 30] = "modal";
441
- TagEnum[TagEnum["nav"] = 31] = "nav";
442
- TagEnum[TagEnum["pagination"] = 32] = "pagination";
443
- TagEnum[TagEnum["popover-button"] = 33] = "popover-button";
444
- TagEnum[TagEnum["progress"] = 34] = "progress";
445
- TagEnum[TagEnum["quote"] = 35] = "quote";
446
- TagEnum[TagEnum["select"] = 36] = "select";
447
- TagEnum[TagEnum["single-select"] = 37] = "single-select";
448
- TagEnum[TagEnum["skip-nav"] = 38] = "skip-nav";
449
- TagEnum[TagEnum["spin"] = 39] = "spin";
450
- TagEnum[TagEnum["split-button"] = 40] = "split-button";
451
- TagEnum[TagEnum["symbol"] = 41] = "symbol";
452
- TagEnum[TagEnum["table"] = 42] = "table";
453
- TagEnum[TagEnum["table-stateful"] = 43] = "table-stateful";
454
- TagEnum[TagEnum["table-stateless"] = 44] = "table-stateless";
455
- TagEnum[TagEnum["tabs"] = 45] = "tabs";
456
- TagEnum[TagEnum["textarea"] = 46] = "textarea";
457
- TagEnum[TagEnum["toast-container"] = 47] = "toast-container";
458
- TagEnum[TagEnum["toolbar"] = 48] = "toolbar";
459
- TagEnum[TagEnum["tooltip"] = 49] = "tooltip";
460
- TagEnum[TagEnum["tree"] = 50] = "tree";
461
- TagEnum[TagEnum["tree-item"] = 51] = "tree-item";
421
+ TagEnum[TagEnum["dialog"] = 11] = "dialog";
422
+ TagEnum[TagEnum["drawer"] = 12] = "drawer";
423
+ TagEnum[TagEnum["form"] = 13] = "form";
424
+ TagEnum[TagEnum["heading"] = 14] = "heading";
425
+ TagEnum[TagEnum["icon"] = 15] = "icon";
426
+ TagEnum[TagEnum["image"] = 16] = "image";
427
+ TagEnum[TagEnum["input-checkbox"] = 17] = "input-checkbox";
428
+ TagEnum[TagEnum["input-color"] = 18] = "input-color";
429
+ TagEnum[TagEnum["input-date"] = 19] = "input-date";
430
+ TagEnum[TagEnum["input-email"] = 20] = "input-email";
431
+ TagEnum[TagEnum["input-file"] = 21] = "input-file";
432
+ TagEnum[TagEnum["input-number"] = 22] = "input-number";
433
+ TagEnum[TagEnum["input-password"] = 23] = "input-password";
434
+ TagEnum[TagEnum["input-radio"] = 24] = "input-radio";
435
+ TagEnum[TagEnum["input-range"] = 25] = "input-range";
436
+ TagEnum[TagEnum["input-text"] = 26] = "input-text";
437
+ TagEnum[TagEnum["kolibri"] = 27] = "kolibri";
438
+ TagEnum[TagEnum["link"] = 28] = "link";
439
+ TagEnum[TagEnum["link-button"] = 29] = "link-button";
440
+ TagEnum[TagEnum["logo"] = 30] = "logo";
441
+ TagEnum[TagEnum["modal"] = 31] = "modal";
442
+ TagEnum[TagEnum["nav"] = 32] = "nav";
443
+ TagEnum[TagEnum["pagination"] = 33] = "pagination";
444
+ TagEnum[TagEnum["popover-button"] = 34] = "popover-button";
445
+ TagEnum[TagEnum["progress"] = 35] = "progress";
446
+ TagEnum[TagEnum["quote"] = 36] = "quote";
447
+ TagEnum[TagEnum["select"] = 37] = "select";
448
+ TagEnum[TagEnum["single-select"] = 38] = "single-select";
449
+ TagEnum[TagEnum["skip-nav"] = 39] = "skip-nav";
450
+ TagEnum[TagEnum["spin"] = 40] = "spin";
451
+ TagEnum[TagEnum["split-button"] = 41] = "split-button";
452
+ TagEnum[TagEnum["symbol"] = 42] = "symbol";
453
+ TagEnum[TagEnum["table"] = 43] = "table";
454
+ TagEnum[TagEnum["table-stateful"] = 44] = "table-stateful";
455
+ TagEnum[TagEnum["table-stateless"] = 45] = "table-stateless";
456
+ TagEnum[TagEnum["tabs"] = 46] = "tabs";
457
+ TagEnum[TagEnum["textarea"] = 47] = "textarea";
458
+ TagEnum[TagEnum["toast-container"] = 48] = "toast-container";
459
+ TagEnum[TagEnum["toolbar"] = 49] = "toolbar";
460
+ TagEnum[TagEnum["tooltip"] = 50] = "tooltip";
461
+ TagEnum[TagEnum["tree"] = 51] = "tree";
462
+ TagEnum[TagEnum["tree-item"] = 52] = "tree-item";
462
463
  })(TagEnum || (TagEnum = {}));
463
464
  const MODES = ['development', 'production', 'test'];
464
465
  let runtimeMode = 'production';
@@ -1216,7 +1217,7 @@ var css_248z$_ = "/* forward the rem function */\n@layer kol-theme-component {\n
1216
1217
 
1217
1218
  var css_248z$Z = "@layer kol-theme-component {\n .kol-link {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n}";
1218
1219
 
1219
- var css_248z$Y = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card {\n background-color: white;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n }\n .kol-card__header {\n display: inline-flex;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n font-size: 1.25em;\n font-weight: 700;\n line-height: 1.75em;\n font-style: normal;\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n}\n@layer kol-theme-component {\n .kol-modal__card {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
1220
+ var css_248z$Y = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card {\n background-color: white;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n }\n .kol-card__header {\n display: inline-flex;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n font-size: 1.25em;\n font-weight: 700;\n line-height: 1.75em;\n font-style: normal;\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n}\n@layer kol-theme-component {\n .kol-dialog__card,\n .kol-modal__card {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
1220
1221
 
1221
1222
  var css_248z$X = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-nav__navigation {\n background-color: var(--color-blue);\n }\n .kol-nav__list {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list-item {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n }\n .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-nav__expand-button .kol-button {\n background-color: var(--color-blue-130);\n height: 100%;\n margin: auto;\n }\n .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .kol-nav__toggle-button .kol-button {\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-nav__toggle-button .kol-button {\n --text-focus-outline-color: var(--color-black);\n }\n .kol-nav__toggle-button .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-nav__toggle-button .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-nav__toggle-button .kol-button--ghost:hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-nav__toggle-button .kol-button__text {\n color: var(--text-color) !important;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n border-style: solid;\n border-radius: 0;\n min-width: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n text-decoration: none !important;\n }\n .kol-nav__toggle-button .kol-button--ghost:focus .kol-nav__toggle-button .kol-button__text {\n outline-offset: -2px;\n }\n .kol-link {\n text-decoration: none;\n }\n .kol-span {\n color: var(--color-white);\n border-color: transparent;\n border-style: solid;\n height: 100%;\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n justify-items: start;\n font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :is(.kol-button, .kol-link):focus-within .kol-span {\n border-color: var(--color-white);\n }\n :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n text-decoration: underline;\n }\n}";
1222
1223
 
@@ -1348,7 +1349,7 @@ var css_248z$j = "/* forward the rem function */\n@layer kol-theme-component {\n
1348
1349
 
1349
1350
  var css_248z$i = "@layer kol-theme-component {\n .kol-link {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n}";
1350
1351
 
1351
- var css_248z$h = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card {\n background-color: white;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n }\n .kol-card__header {\n display: inline-flex;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n font-size: 1.25em;\n font-weight: 700;\n line-height: 1.75;\n font-style: normal;\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n}\n@layer kol-theme-component {\n .kol-modal__card {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
1352
+ var css_248z$h = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card {\n background-color: white;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n }\n .kol-card__header {\n display: inline-flex;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n font-size: 1.25em;\n font-weight: 700;\n line-height: 1.75;\n font-style: normal;\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n}\n@layer kol-theme-component {\n .kol-dialog__card,\n .kol-modal__card {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
1352
1353
 
1353
1354
  var css_248z$g = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-nav__navigation {\n background-color: var(--color-blue);\n }\n .kol-nav__list {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list-item {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n }\n .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n border-top-width: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-nav__expand-button .kol-button {\n background-color: var(--color-blue-130);\n height: 100%;\n margin: auto;\n }\n .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .kol-nav__toggle-button .kol-button {\n --kolibri-spacing: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n border-radius: 4px;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-nav__toggle-button .kol-button--ghost {\n --text-color: #0e47cb;\n --text-focus-outline-color: #0e47cb;\n }\n .kol-nav__toggle-button .kol-button--ghost:hover {\n --text-color: #0e47cb;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: none;\n }\n .kol-nav__toggle-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-radius: 4px;\n min-width: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16 * 1rem / var(--kolibri-root-font-size, 16))/calc(20 * 1rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n text-decoration: none !important;\n }\n .kol-nav__toggle-button .kol-button__text:active, .kol-nav__toggle-button .kol-button__text:hover {\n box-shadow: 0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4 * 1rem / var(--kolibri-root-font-size, 16)) calc(5 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-nav__toggle-button .kol-button:focus-visible .kol-nav__toggle-button .kol-button__text {\n outline: var(--text-focus-outline-color) solid calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n outline-offset: -4px;\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-link {\n text-decoration: none;\n }\n .kol-span {\n color: var(--color-white);\n border-color: transparent;\n border-style: solid;\n height: 100%;\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n justify-items: start;\n font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :is(.kol-button, .kol-link):focus-within .kol-span {\n border-color: var(--color-white);\n }\n :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n text-decoration: underline;\n }\n}";
1354
1355