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

package/assets/kolicons/style.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "kolicons";
-  src: url('kolicons.eot?t=1766164320249'); /* IE9*/
-  src: url('kolicons.eot?t=1766164320249#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("kolicons.woff2?t=1766164320249") format("woff2"),
-  url("kolicons.woff?t=1766164320249") format("woff"),
-  url('kolicons.ttf?t=1766164320249') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('kolicons.svg?t=1766164320249#kolicons') format('svg'); /* iOS 4.1- */
+  src: url('kolicons.eot?t=1766411598417'); /* IE9*/
+  src: url('kolicons.eot?t=1766411598417#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("kolicons.woff2?t=1766411598417") format("woff2"),
+  url("kolicons.woff?t=1766411598417") format("woff"),
+  url('kolicons.ttf?t=1766411598417') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('kolicons.svg?t=1766411598417#kolicons') format('svg'); /* iOS 4.1- */
 }
 
 [class^="kolicon-"], [class*=" kolicon-"] {

package/dist/ecl-ec/index.d.ts

@@ -6,6 +6,7 @@ export declare const ECL_EC: (patch: (name: string, map: {
     "KOL-ABBR"?: string | undefined;
     "KOL-BUTTON"?: string | undefined;
     "KOL-DETAILS"?: string | undefined;
+    "KOL-DIALOG"?: string | undefined;
     "KOL-FORM"?: string | undefined;
     "KOL-LINK"?: string | undefined;
     "KOL-NAV"?: string | undefined;

package/dist/ecl-eu/index.d.ts

@@ -6,6 +6,7 @@ export declare const ECL_EU: (patch: (name: string, map: {
     "KOL-ABBR"?: string | undefined;
     "KOL-BUTTON"?: string | undefined;
     "KOL-DETAILS"?: string | undefined;
+    "KOL-DIALOG"?: string | undefined;
     "KOL-FORM"?: string | undefined;
     "KOL-LINK"?: string | undefined;
     "KOL-NAV"?: string | undefined;

package/dist/index.cjs

@@ -420,47 +420,48 @@ var TagEnum;
     TagEnum[TagEnum["card"] = 8] = "card";
     TagEnum[TagEnum["combobox"] = 9] = "combobox";
     TagEnum[TagEnum["details"] = 10] = "details";
-    TagEnum[TagEnum["drawer"] = 11] = "drawer";
-    TagEnum[TagEnum["form"] = 12] = "form";
-    TagEnum[TagEnum["heading"] = 13] = "heading";
-    TagEnum[TagEnum["icon"] = 14] = "icon";
-    TagEnum[TagEnum["image"] = 15] = "image";
-    TagEnum[TagEnum["input-checkbox"] = 16] = "input-checkbox";
-    TagEnum[TagEnum["input-color"] = 17] = "input-color";
-    TagEnum[TagEnum["input-date"] = 18] = "input-date";
-    TagEnum[TagEnum["input-email"] = 19] = "input-email";
-    TagEnum[TagEnum["input-file"] = 20] = "input-file";
-    TagEnum[TagEnum["input-number"] = 21] = "input-number";
-    TagEnum[TagEnum["input-password"] = 22] = "input-password";
-    TagEnum[TagEnum["input-radio"] = 23] = "input-radio";
-    TagEnum[TagEnum["input-range"] = 24] = "input-range";
-    TagEnum[TagEnum["input-text"] = 25] = "input-text";
-    TagEnum[TagEnum["kolibri"] = 26] = "kolibri";
-    TagEnum[TagEnum["link"] = 27] = "link";
-    TagEnum[TagEnum["link-button"] = 28] = "link-button";
-    TagEnum[TagEnum["logo"] = 29] = "logo";
-    TagEnum[TagEnum["modal"] = 30] = "modal";
-    TagEnum[TagEnum["nav"] = 31] = "nav";
-    TagEnum[TagEnum["pagination"] = 32] = "pagination";
-    TagEnum[TagEnum["popover-button"] = 33] = "popover-button";
-    TagEnum[TagEnum["progress"] = 34] = "progress";
-    TagEnum[TagEnum["quote"] = 35] = "quote";
-    TagEnum[TagEnum["select"] = 36] = "select";
-    TagEnum[TagEnum["single-select"] = 37] = "single-select";
-    TagEnum[TagEnum["skip-nav"] = 38] = "skip-nav";
-    TagEnum[TagEnum["spin"] = 39] = "spin";
-    TagEnum[TagEnum["split-button"] = 40] = "split-button";
-    TagEnum[TagEnum["symbol"] = 41] = "symbol";
-    TagEnum[TagEnum["table"] = 42] = "table";
-    TagEnum[TagEnum["table-stateful"] = 43] = "table-stateful";
-    TagEnum[TagEnum["table-stateless"] = 44] = "table-stateless";
-    TagEnum[TagEnum["tabs"] = 45] = "tabs";
-    TagEnum[TagEnum["textarea"] = 46] = "textarea";
-    TagEnum[TagEnum["toast-container"] = 47] = "toast-container";
-    TagEnum[TagEnum["toolbar"] = 48] = "toolbar";
-    TagEnum[TagEnum["tooltip"] = 49] = "tooltip";
-    TagEnum[TagEnum["tree"] = 50] = "tree";
-    TagEnum[TagEnum["tree-item"] = 51] = "tree-item";
+    TagEnum[TagEnum["dialog"] = 11] = "dialog";
+    TagEnum[TagEnum["drawer"] = 12] = "drawer";
+    TagEnum[TagEnum["form"] = 13] = "form";
+    TagEnum[TagEnum["heading"] = 14] = "heading";
+    TagEnum[TagEnum["icon"] = 15] = "icon";
+    TagEnum[TagEnum["image"] = 16] = "image";
+    TagEnum[TagEnum["input-checkbox"] = 17] = "input-checkbox";
+    TagEnum[TagEnum["input-color"] = 18] = "input-color";
+    TagEnum[TagEnum["input-date"] = 19] = "input-date";
+    TagEnum[TagEnum["input-email"] = 20] = "input-email";
+    TagEnum[TagEnum["input-file"] = 21] = "input-file";
+    TagEnum[TagEnum["input-number"] = 22] = "input-number";
+    TagEnum[TagEnum["input-password"] = 23] = "input-password";
+    TagEnum[TagEnum["input-radio"] = 24] = "input-radio";
+    TagEnum[TagEnum["input-range"] = 25] = "input-range";
+    TagEnum[TagEnum["input-text"] = 26] = "input-text";
+    TagEnum[TagEnum["kolibri"] = 27] = "kolibri";
+    TagEnum[TagEnum["link"] = 28] = "link";
+    TagEnum[TagEnum["link-button"] = 29] = "link-button";
+    TagEnum[TagEnum["logo"] = 30] = "logo";
+    TagEnum[TagEnum["modal"] = 31] = "modal";
+    TagEnum[TagEnum["nav"] = 32] = "nav";
+    TagEnum[TagEnum["pagination"] = 33] = "pagination";
+    TagEnum[TagEnum["popover-button"] = 34] = "popover-button";
+    TagEnum[TagEnum["progress"] = 35] = "progress";
+    TagEnum[TagEnum["quote"] = 36] = "quote";
+    TagEnum[TagEnum["select"] = 37] = "select";
+    TagEnum[TagEnum["single-select"] = 38] = "single-select";
+    TagEnum[TagEnum["skip-nav"] = 39] = "skip-nav";
+    TagEnum[TagEnum["spin"] = 40] = "spin";
+    TagEnum[TagEnum["split-button"] = 41] = "split-button";
+    TagEnum[TagEnum["symbol"] = 42] = "symbol";
+    TagEnum[TagEnum["table"] = 43] = "table";
+    TagEnum[TagEnum["table-stateful"] = 44] = "table-stateful";
+    TagEnum[TagEnum["table-stateless"] = 45] = "table-stateless";
+    TagEnum[TagEnum["tabs"] = 46] = "tabs";
+    TagEnum[TagEnum["textarea"] = 47] = "textarea";
+    TagEnum[TagEnum["toast-container"] = 48] = "toast-container";
+    TagEnum[TagEnum["toolbar"] = 49] = "toolbar";
+    TagEnum[TagEnum["tooltip"] = 50] = "tooltip";
+    TagEnum[TagEnum["tree"] = 51] = "tree";
+    TagEnum[TagEnum["tree-item"] = 52] = "tree-item";
 })(TagEnum || (TagEnum = {}));
 const MODES = ['development', 'production', 'test'];
 let runtimeMode = 'production';
@@ -1218,7 +1219,7 @@ var css_248z$_ = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 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}";
 
-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}";
+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}";
 
 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}";
 
@@ -1350,7 +1351,7 @@ var css_248z$j = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 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}";
 
-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}";
+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}";
 
 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}";