@public-ui/theme-default 4.0.0-beta.0 → 4.0.0-rc.0

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export declare const DEFAULT: (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.mjs

@@ -418,47 +418,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';
@@ -1220,7 +1221,7 @@ var css_248z$j = "/* forward the rem function */\n@layer kol-theme-component {\n
 
 var css_248z$i = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-weight: 400;\n    font-style: normal;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    outline: var(--border-width) solid;\n    border-radius: var(--border-radius);\n    position: relative;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-link {\n    line-height: 1;\n  }\n}";
 
-var css_248z$h = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    width: 100%;\n    height: 100%;\n  }\n  .kol-card__header {\n    display: block;\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: 0 calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__content ::slotted(p:first-child) {\n    margin-top: 0;\n  }\n  .kol-card__content ::slotted(p:last-child) {\n    margin-bottom: 0;\n  }\n  .kol-card__close-button {\n    color: var(--color-primary);\n    background: transparent;\n    cursor: pointer;\n  }\n  .kol-card__close-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-card__close-button .kol-button:focus, .kol-card__close-button .kol-button:hover {\n    color: var(--color-light);\n    background-color: var(--color-danger);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-top-right-radius: var(--border-radius);\n  }\n  .kol-modal__card {\n    box-shadow: 0 0 4px var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n}";
+var css_248z$h = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    width: 100%;\n    height: 100%;\n  }\n  .kol-card__header {\n    display: block;\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: 0 calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__content ::slotted(p:first-child) {\n    margin-top: 0;\n  }\n  .kol-card__content ::slotted(p:last-child) {\n    margin-bottom: 0;\n  }\n  .kol-card__close-button {\n    color: var(--color-primary);\n    background: transparent;\n    cursor: pointer;\n  }\n  .kol-card__close-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-card__close-button .kol-button:focus, .kol-card__close-button .kol-button:hover {\n    color: var(--color-light);\n    background-color: var(--color-danger);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-top-right-radius: var(--border-radius);\n  }\n  .kol-dialog__card,\n  .kol-modal__card {\n    box-shadow: 0 0 4px var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n}";
 
 var css_248z$g = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    background-color: var(--color-mute);\n  }\n  .kol-nav {\n    --kol-nav-item-padding-left: 0;\n    --kol-nav-item-padding-right: 16;\n  }\n  .kol-nav__list {\n    list-style: none;\n    --kol-nav-nested-padding-left: calc(var(--kol-nav-item-padding-left) + 8);\n  }\n  .kol-nav__list-item {\n    --kol-nav-item-padding-left: calc(var(--kol-nav-nested-padding-left) + 8);\n  }\n  .kol-nav__entry--link {\n    display: flex;\n  }\n  .kol-nav__entry .kol-link,\n  .kol-nav__entry .kol-button {\n    color: var(--color-primary);\n    display: flex;\n    min-height: var(--a11y-min-size);\n    padding-right: calc(var(--kol-nav-item-padding-right) * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    text-decoration: none;\n  }\n  .kol-nav__entry .kol-link:focus-visible,\n  .kol-nav__entry .kol-button:focus-visible {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__list .kol-nav__entry .kol-link,\n  .kol-nav__list .kol-nav__entry .kol-button {\n    padding-left: calc(var(--kol-nav-item-padding-left) * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 2px solid transparent;\n  }\n  .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n  .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n    border-left-color: var(--color-primary);\n  }\n  .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n  .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n    font-weight: bold;\n  }\n  .kol-nav__entry .kol-link:hover .kol-span__label,\n  .kol-nav__entry .kol-button:hover .kol-span__label {\n    text-decoration: underline;\n  }\n  .kol-nav__toggle-button .kol-button {\n    margin-bottom: calc(5 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-nav__toggle-button .kol-button:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-nav__toggle-button .kol-button {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: 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: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    justify-content: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-nav__toggle-button .kol-button__text .kol-span__container {\n    justify-content: center;\n  }\n  .kol-nav__toggle-button .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text {\n    width: unset;\n    padding: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));\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-nav__toggle-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__toggle-button .kol-button:disabled:hover .kol-nav__toggle-button .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n}";