@public-ui/theme-default 1.7.10 → 1.7.12

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.
Files changed (3) hide show
  1. package/dist/index.cjs +152 -2374
  2. package/dist/index.mjs +152 -2374
  3. package/package.json +11 -8
package/dist/index.cjs CHANGED
@@ -387,2381 +387,159 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
387
387
 
388
388
  const KoliBri = new te("kol", KeyEnum, TagEnum);
389
389
 
390
- const css = (input) => input.join(``);
390
+ var css_248z$B = ":host {\n --border-radius: var(--kolibri-border-radius, 5px);\n --font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, 16px);\n --spacing: var(--kolibri-spacing, 0.25rem);\n --border-width: var(--kolibri-border-width, 1px);\n --color-primary: var(--kolibri-color-primary, #004b76);\n --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n --color-danger: var(--kolibri-color-danger, #c0003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n}\n\n:host {\n background-color: transparent;\n /* Reset global background-color defined by components */\n font-family: var(--font-family);\n font-size: var(--font-size);\n}\n\n* {\n box-sizing: border-box;\n}\n\n*:not(i) {\n font-family: var(--font-family);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 0;\n padding: 0;\n}\n\n*[tabindex]:focus,\nkol-input:not(.checkbox, .radio) .input:focus-within,\nkol-input:is(.checkbox, .radio) input:focus,\nsummary:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\nkol-heading-wc {\n font-weight: 700;\n}\n\nkol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n}\n\nkol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n}\n\nkol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n}\n\nkol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: 0.5rem 0.75rem;\n}\n\nkol-span-wc,\nkol-span-wc > span {\n gap: 0.5rem;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}";
391
+ const globalCss = css_248z$B;
392
+
393
+ var css_248z$A = "abbr {\n border-bottom: dashed var(--color-text) 1px;\n text-decoration: none !important;\n}";
394
+ const abbrCss = css_248z$A;
395
+
396
+ var css_248z$z = "kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n text-align: left;\n}\n\n:host > div > kol-heading-wc button {\n border-radius: var(--border-radius);\n min-height: 2.2rem;\n padding: 12px 8px;\n}\n\n:host > div > kol-heading-wc button kol-span-wc {\n font-weight: 700;\n font-size: 1.125rem;\n line-height: 20px;\n gap: 0.5rem;\n}\n\n:host > div > kol-heading-wc button kol-span-wc > span {\n gap: 0.5em;\n}\n\n:host > div > kol-heading-wc button kol-icon {\n color: var(--color-primary);\n}\n\n:host > div {\n width: 100%;\n height: 100%;\n display: grid;\n}\n\n:host > div div[class=header],\n:host > div[class*=open] div[class=content] {\n margin: 0;\n}\n\n:host > div div[class=content] {\n padding-left: 2.25em;\n padding-bottom: 12px;\n padding-right: 8px;\n}\n\nbutton:focus {\n outline: none;\n}\n\n:host > .accordion:focus-within {\n border-radius: var(--border-radius);\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}";
397
+ const accordionCss = css_248z$z;
398
+
399
+ var css_248z$y = ".msg {\n border-width: 0;\n}\n\nkol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n}\n\nkol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n}\n\nkol-alert-wc > .heading > div {\n display: grid;\n gap: 0.25rem;\n}\n\n.msg > .heading > kol-icon {\n place-self: baseline;\n}\n\nkol-alert-wc > .heading > kol-button-wc.close {\n place-self: center;\n}\n\n.msg {\n align-items: start;\n}\n\n.default {\n border-color: var(--color-subtle);\n}\n\n.default.msg .heading-icon {\n color: var(--color-subtle);\n}\n\n.error {\n border-color: var(--color-danger);\n}\n\n.error.msg .heading-icon {\n color: var(--color-danger);\n}\n\n.info {\n border-color: var(--color-primary);\n}\n\n.info.msg .heading-icon {\n color: var(--color-primary);\n}\n\n.success {\n border-color: var(--color-success);\n}\n\n.success.msg .heading-icon {\n color: var(--color-success);\n}\n\n.warning {\n border-color: var(--color-warning);\n}\n\n.warning.msg .heading-icon {\n color: var(--color-warning);\n}\n\n.heading-icon {\n color: var(--color-light);\n}\n\nkol-alert-wc .heading .heading-icon {\n padding: 0;\n}\n\n.msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n}\n\n.msg > .heading > div > kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n}\n\n.msg.default .heading > div > kol-heading-wc {\n color: var(--color-subtle);\n}\n\n.msg.error .heading > div > kol-heading-wc {\n color: var(--color-danger);\n}\n\n.msg.info .heading > div > kol-heading-wc {\n color: var(--color-primary);\n}\n\n.msg.success .heading > div > kol-heading-wc {\n color: var(--color-success);\n}\n\n.msg.warning .heading > div > kol-heading-wc {\n color: var(--color-warning);\n}\n\n.msg.default .close .icon {\n color: var(--color-subtle);\n}\n\n.msg.error .close .icon {\n color: var(--color-danger);\n}\n\n.msg.info .close .icon {\n color: var(--color-primary);\n}\n\n.msg.success .close .icon {\n color: var(--color-success);\n}\n\n.msg.warning .close .icon {\n color: var(--color-warning);\n}\n\n.card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n flex-direction: column;\n}\n\n.card > .heading {\n padding: 0.5rem 1rem;\n}\n\n.card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n}\n\n.card > .heading > div {\n width: 100%;\n min-height: 1.25rem;\n}\n\n.card > .heading .heading-icon {\n justify-self: right;\n margin-top: -4px;\n}\n\n.card > .heading kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: 1.25rem;\n line-height: 1.25rem;\n}\n\n.card > .heading kol-heading-wc > * {\n margin: auto 0;\n}\n\n.card > .content {\n padding: 1rem;\n}\n\n.card.default > .heading {\n background-color: var(--color-subtle);\n}\n\n.card.error > .heading {\n background-color: var(--color-danger);\n}\n\n.card.info > .heading {\n background-color: var(--color-primary);\n}\n\n.card.success > .heading {\n background-color: var(--color-success);\n}\n\n.card.warning > .heading {\n background-color: var(--color-warning);\n}\n\n:is(.error, .info, .success, .warning) .heading-icon {\n font-size: 1.25rem;\n}\n\n.card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n}\n\n.card.default .close {\n background-color: var(--color-subtle);\n}\n\n.card.error .close {\n background-color: var(--color-danger);\n}\n\n.card.info .close {\n background-color: var(--color-primary);\n}\n\n.card.success .close {\n background-color: var(--color-success);\n}\n\n.card.warning .close {\n background-color: var(--color-warning);\n}\n\n.close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n}\n\n.close > button.hide-label kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: 1.2rem;\n}\n\n.close > button:active {\n box-shadow: none;\n outline: none;\n}";
400
+ const alertCss = css_248z$y;
401
+
402
+ var css_248z$x = ":host {\n display: inline-block;\n font-size: inherit;\n}\n\n:host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n}\n\n:host > span.smart-button {\n align-items: center;\n}\n\n:host > span kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n}\n\n:host > span kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: 0.2rem;\n}\n\n:host > span kol-span-wc {\n padding: 0.25rem 0.75rem;\n}\n\n:host > span > kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: 0.5rem;\n}\n\n:host > span > kol-span-wc > span {\n display: flex;\n gap: 0.25rem;\n}";
403
+ const badgeCss = css_248z$x;
404
+
405
+ var css_248z$w = "li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {\n font-size: 0.75rem;\n color: var(--color-subtle);\n}\n\nkol-link::part(icon) {\n font-size: 1.25rem;\n}\n\nul li > :is(span, kol-link) {\n line-height: 1.25rem;\n height: 20px;\n}\n\nul li:last-child > span {\n color: var(--color-subtle);\n}";
406
+ const breadcrumbCss = css_248z$w;
407
+
408
+ var css_248z$v = ":is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n}\n\n:is(a, button) > kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n}\n\n:is(a, button):disabled > kol-span-wc {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.primary :is(a, button) > kol-span-wc,\n.primary :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n}\n\n.secondary :is(a, button) > kol-span-wc,\n.secondary :is(a, button):disabled:hover > kol-span-wc,\n.normal :is(a, button) > kol-span-wc,\n.normal :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.danger :is(a, button) > kol-span-wc,\n.danger :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n}\n\n.ghost :is(a, button) > kol-span-wc,\n.ghost :is(a, button):disabled:hover > kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n}\n\n/*-----------*/\n.primary :is(a, button):active > kol-span-wc,\n.primary :is(a, button):hover > kol-span-wc,\n.secondary :is(a, button):active > kol-span-wc,\n.secondary :is(a, button):hover > kol-span-wc,\n.normal :is(a, button):active > kol-span-wc,\n.normal :is(a, button):hover > kol-span-wc,\n.danger :is(a, button):active > kol-span-wc,\n.danger :is(a, button):hover > kol-span-wc,\n.ghost :is(a, button):active > kol-span-wc,\n.ghost :is(a, button):hover > kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n.danger :is(a, button):active > kol-span-wc,\n.danger :is(a, button):hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n}\n\n:is(a, button):disabled:hover > kol-span-wc,\n:is(a, button):focus:hover > kol-span-wc {\n box-shadow: none;\n}\n\n.primary :is(a, button):active > kol-span-wc,\n.secondary :is(a, button):active > kol-span-wc,\n.normal :is(a, button):active > kol-span-wc,\n.danger :is(a, button):active > kol-span-wc,\n.ghost :is(a, button):active > kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n}\n\n:is(a, button).hide-label > kol-span-wc {\n padding: 0.8rem;\n width: unset;\n}\n\n:is(a, button).hide-label > kol-span-wc > span > span {\n display: none;\n}\n\n:is(a, button).loading > kol-span-wc kol-icon {\n animation: spin 5s infinite linear;\n}\n\n/** small ghost button */\n.ghost :is(a, button).small > kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n}\n\n.ghost :is(a, button).small > kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n}\n\n.ghost :is(a, button).small:active > kol-span-wc > span,\n.ghost :is(a, button).small:hover > kol-span-wc > span,\n.ghost :is(a, button).small.transparent:active > kol-span-wc > span,\n.ghost :is(a, button).small.transparent:hover > kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n/** :is(a,button) with transparent background */\n:is(a, button).transparent > kol-span-wc > span,\n.ghost :is(a, button).small.transparent > kol-span-wc > span,\n:is(a, button).transparent > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n}";
409
+ const buttonCss = css_248z$v;
410
+
411
+ var css_248z$u = ":host > kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n}";
412
+ const buttonGroupCss = css_248z$u;
413
+
414
+ var css_248z$t = ":is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n font-size: inherit;\n}\n\n:is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n}\n\n:is(a, button):hover {\n text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n color: var(--visited);\n}\n\n.hidden {\n display: none;\n visibility: hidden;\n}\n\n.skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n}\n\n.skip:focus {\n background: white;\n left: unset;\n position: unset;\n}";
415
+ const buttonLinkCss = css_248z$t;
416
+
417
+ var css_248z$s = "/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n:host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 0.25rem var(--color-subtle);\n border-radius: var(--border-radius);\n}\n\n:host kol-heading-wc {\n line-height: 1.75rem;\n}\n\n:host div.header {\n padding: 1rem 1rem 0.5rem 1rem;\n}\n\n:host div.content {\n padding: 0.5rem 1rem 1rem;\n overflow: hidden;\n}\n\n:host div.footer {\n padding: 0.5rem 1rem;\n}";
418
+ const cardCss = css_248z$s;
419
+
420
+ var css_248z$r = "details > summary {\n border-radius: var(--border-radius);\n}\n\ndetails kol-indented-text {\n margin: 0.25rem 0 0 0.65rem;\n}\n\nkol-icon {\n font-size: 1.2rem;\n}";
421
+ const detailsCss = css_248z$r;
422
+
423
+ var css_248z$q = "h1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n color: inherit;\n font-style: normal;\n}\n\nh1,\nh2,\nh3 {\n font-weight: 700;\n}\n\nh1 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n}\n\nh2 {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\nh3 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n}";
424
+ const headingCss = css_248z$q;
425
+
426
+ var css_248z$p = ":host {\n width: 1em;\n height: 1em;\n}\n\n:host > i {\n width: 1em;\n height: 1em;\n}";
427
+ const iconCss = css_248z$p;
428
+
429
+ var css_248z$o = ":host > div {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0px 0px var(--color-primary-variant);\n padding: 0 0.5rem;\n width: 100%;\n}";
430
+ const indentedTextCss = css_248z$o;
431
+
432
+ var css_248z$n = ":host kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: 0.4rem;\n}\n\n:host kol-input.default {\n grid-template-columns: 1.5rem auto;\n}\n\n:host kol-input.switch {\n grid-template-columns: 3.5rem auto;\n}\n\n:host kol-input.button {\n gap: 0.4rem 0;\n}\n\n.checkbox-container {\n justify-content: flex-start;\n}\n\n:host kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n}\n\n:host kol-input > div.input input {\n margin: 0px;\n}\n\n:host kol-input > label {\n cursor: pointer;\n order: 3;\n}\n\n:host kol-input > kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n}\n\n:host kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n:host kol-input.error input:focus,\nkol-input.error select:focus,\nkol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n}\n\n:host kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n:host input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: 24px;\n font-size: 1rem;\n}\n\n:host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\n:host input:focus:hover {\n box-shadow: none;\n}\n\n:host input:active {\n box-shadow: none;\n}\n\n:host kol-alert {\n display: block;\n width: 100%;\n}\n\n/* CHECKBOX */\n:host kol-input label span {\n margin-top: 0.125rem;\n}\n\n:host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n:host kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n}\n\n:host kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n}\n\n:host kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n}\n\n:host kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n}\n\n:host kol-input.default .icon {\n color: var(--color-light);\n margin-left: 0.25rem;\n}\n\n:host kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n outline: transparent solid 1px;\n}\n\n:host kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n}\n\n:host kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n}\n\n:host kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n}\n\n:host kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n}\n\n.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n}\n.switch.checked .icon {\n transform: translate(2em, -50%);\n}\n.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n}\n\n:host .disabled {\n opacity: 0.33;\n}\n\n.button:focus-within {\n border-radius: var(--border-radius);\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n}";
433
+ const inputCheckboxCss = css_248z$n;
434
+
435
+ var css_248z$m = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput[type=color] {\n border: none;\n min-height: 40px !important;\n}\n\ninput[type=color] {\n background-color: transparent;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
436
+ const inputColorCss = css_248z$m;
437
+
438
+ var css_248z$l = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
439
+ const inputDateCss = css_248z$l;
440
+
441
+ var css_248z$k = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
442
+ const inputEmailCss = css_248z$k;
443
+
444
+ var css_248z$j = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\nkol-input .input input[type=file] {\n padding-top: calc(0.5em + 2px);\n}\n\ninput {\n border: none;\n}\n\ninput[type=file] {\n background-color: transparent;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(button, input, label, option, select, textarea) {\n opacity: 1;\n}\n\nkol-input.disabled :is(input, select, textarea, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
445
+ const inputFileCss = css_248z$j;
446
+
447
+ var css_248z$i = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
448
+ const inputNumberCss = css_248z$i;
449
+
450
+ var css_248z$h = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(button, input, label, option, select, textarea) {\n opacity: 1;\n}\n\nkol-input.disabled :is(input, select, textarea, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
451
+ const inputPasswordCss = css_248z$h;
452
+
453
+ var css_248z$g = "label {\n cursor: pointer;\n display: grid;\n line-height: 20px;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n}\n\ninput {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: 24px;\n}\n\ninput:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\ninput:focus:hover {\n box-shadow: none;\n}\n\ninput:hover {\n border-color: var(--color-primary);\n}\n\nkol-alert {\n display: block;\n width: 100%;\n}\n\n.required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n/* RADIO */\nfieldset {\n border: 0px;\n margin: 0px;\n padding: 0px;\n display: grid;\n gap: 0.25em;\n}\n\nfieldset div {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n}\n\nfieldset div label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n}\n\nfieldset div label span {\n margin-top: 0.125em;\n}\n\nfieldset div input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n}\n\nfieldset div input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n}\n\nfieldset div input[type=radio]:checked:before {\n background-color: var(--color-primary);\n}\n\nfieldset div input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n}\n\nkol-alert.error {\n order: 1;\n}\n\nfieldset legend {\n order: 2;\n display: contents;\n}\n\nfieldset kol-input {\n order: 3;\n}\n\nfieldset.error {\n padding-left: 1rem;\n border-left: 3px solid var(--color-danger);\n}\n\nkol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nfieldset.error input:focus,\nfieldset.error select:focus,\nfieldset.error textarea:focus {\n outline-color: var(--color-danger) !important;\n}\n\nfieldset.error kol-alert.error {\n margin-left: -0.25em;\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.disabled {\n opacity: 0.33;\n}\n\nfieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n}\n\nfieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n}\n\nfieldset .input-slot {\n gap: var(--spacing);\n}\n\nfieldset div label {\n padding-left: 0;\n}";
454
+ const inputRadioCss = css_248z$g;
455
+
456
+ var css_248z$f = ".inputs-wrapper {\n gap: 1rem;\n}\n\nkol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input.icon-left > kol-icon:first-child {\n margin-right: 0.5rem;\n}\n\n.input.icon-right > kol-icon:last-child {\n margin-left: 0.5rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\nkol-input.disabled :is(.input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
457
+ const inputRangeCss = css_248z$f;
458
+
459
+ var css_248z$e = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n}";
460
+ const inputTextCss = css_248z$e;
461
+
462
+ var css_248z$d = ":is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n}\n\n:is(a, button) > kol-span-wc {\n font-weight: 700;\n border-radius: var(--a11y-min-size);\n border-style: solid;\n outline-width: calc(var(--border-width) * 2);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n}\n\n:is(a, button):disabled > kol-span-wc {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.primary :is(a, button) > kol-span-wc,\n.primary :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n}\n\n.secondary :is(a, button) > kol-span-wc,\n.secondary :is(a, button):disabled:hover > kol-span-wc,\n.normal :is(a, button) > kol-span-wc,\n.normal :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.danger :is(a, button) > kol-span-wc,\n.danger :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n}\n\n.ghost :is(a, button) > kol-span-wc,\n.ghost :is(a, button):disabled:hover > kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n}\n\n/*-----------*/\n.primary :is(a, button):active > kol-span-wc,\n.primary :is(a, button):hover > kol-span-wc,\n.secondary :is(a, button):active > kol-span-wc,\n.secondary :is(a, button):hover > kol-span-wc,\n.normal :is(a, button):active > kol-span-wc,\n.normal :is(a, button):hover > kol-span-wc,\n.danger :is(a, button):active > kol-span-wc,\n.danger :is(a, button):hover > kol-span-wc,\n.ghost :is(a, button):active > kol-span-wc,\n.ghost :is(a, button):hover > kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n.danger :is(a, button):active > kol-span-wc,\n.danger :is(a, button):hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n}\n\n:is(a, button):disabled:hover > kol-span-wc,\n:is(a, button):focus:hover > kol-span-wc {\n box-shadow: none;\n}\n\n.primary :is(a, button):active > kol-span-wc,\n.secondary :is(a, button):active > kol-span-wc,\n.normal :is(a, button):active > kol-span-wc,\n.danger :is(a, button):active > kol-span-wc,\n.ghost :is(a, button):active > kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n}\n\n:is(a, button).hide-label > kol-span-wc {\n padding: 0.8rem;\n width: unset;\n}\n\n:is(a, button).hide-label > kol-span-wc > span > span {\n display: none;\n}\n\n:is(a, button).loading > kol-span-wc kol-icon {\n animation: spin 5s infinite linear;\n}\n\n/** small ghost button */\n.ghost :is(a, button).small > kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n}\n\n.ghost :is(a, button).small > kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n}\n\n.ghost :is(a, button).small:active > kol-span-wc > span,\n.ghost :is(a, button).small:hover > kol-span-wc > span,\n.ghost :is(a, button).small.transparent:active > kol-span-wc > span,\n.ghost :is(a, button).small.transparent:hover > kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n/** :is(a,button) with transparent background */\n:is(a, button).transparent > kol-span-wc > span,\n.ghost :is(a, button).small.transparent > kol-span-wc > span,\n:is(a, button).transparent > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n}";
463
+ const linkButtonCss = css_248z$d;
464
+
465
+ var css_248z$c = ":is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n}\n\n:is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n}\n\n:is(a, button):hover {\n text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n color: var(--visited);\n}\n\n.hidden {\n display: none;\n visibility: hidden;\n}\n\n.skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n}\n\n.skip:focus {\n background: white;\n left: unset;\n position: unset;\n}";
466
+ const linkCss = css_248z$c;
467
+
468
+ var css_248z$b = ":host .overlay .modal {\n max-height: calc(100% - 32px);\n}";
469
+ const modalCss = css_248z$b;
470
+
471
+ var css_248z$a = "* {\n margin: 0;\n padding: 0;\n}\n\nnav {\n font-family: var(--font-family);\n font-size: var(--font-size);\n background-color: var(--color-mute);\n width: 100%;\n}\n\nul {\n list-style: none;\n}\n\nkol-link-wc,\na {\n height: 100%;\n min-height: var(--a11y-min-size);\n display: flex;\n place-items: center;\n}\n\n.entry > kol-span-wc > span {\n width: 100%;\n}\n\n.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {\n background-color: var(--color-light);\n text-decoration: none;\n color: var(--color-primary);\n width: 100%;\n display: flex;\n align-items: center;\n font-style: normal;\n line-height: 1.5rem;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n letter-spacing: 0.175px;\n}\n\n.entry > :is(kol-link-wc, kol-button-wc):first-child :is(a, button) {\n color: var(--color-primary);\n text-decoration: none;\n}\n\n.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {\n border-left-color: var(--color-primary-variant);\n background-color: var(--color-primary-variant);\n}\n\n.entry > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child:hover > :is(a, button, span) {\n color: var(--color-primary-variant);\n font-weight: 700;\n letter-spacing: unset;\n}\n\n.selected > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {\n background-color: var(--color-primary-variant);\n color: var(--color-primary);\n font-weight: 700;\n}\n\n.selected > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child > :is(a, button, span) {\n font-weight: 700;\n}\n\n.selected :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {\n color: var(--color-primary-variant);\n letter-spacing: unset;\n}\n\n.entry > kol-span-wc > span,\n.entry :is(a, button) {\n border-left-color: transparent;\n border-left-style: solid;\n border-left-width: 0.5rem;\n padding: 0.75rem 0.5rem 0.75rem 0.25rem;\n}\n\n.selected :is(a, button),\n[exportparts*=selected] a {\n border-left-color: var(--color-primary);\n}\n\n/** Compact mode */\n.entry.compact :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {\n place-items: center;\n}\n\n.entry.compact > kol-span-wc > span {\n flex-direction: column;\n}\n\n.entry.compact > kol-span-wc > span,\n.entry.compact :is(a, button) {\n padding-left: 0;\n}";
472
+ const navCss = css_248z$a;
473
+
474
+ var css_248z$9 = ":host {\n display: grid;\n gap: 1rem;\n}\n\n:host .navigation-list {\n display: inline-flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n}\n\n:host .selected button {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n display: grid;\n place-items: center;\n font-family: var(--font-family);\n cursor: not-allowed;\n font-weight: 700;\n border-radius: 50%;\n border: none;\n font-style: normal;\n text-align: center;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n color: var(--color-primary);\n background-color: var(--color-mute-variant);\n}\n\n:host > div > span {\n align-self: flex-end;\n padding-bottom: 0.5rem;\n color: var(--color-primary);\n}";
475
+ const paginationCss = css_248z$9;
476
+
477
+ var css_248z$8 = ":host progress,\n:host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n}\n\n:host svg line:first-child,\n:host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n}\n\n:host svg line:last-child,\n:host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n}\n\n.cycle .progress {\n stroke: var(--color-primary-variant);\n}";
478
+ const progressCss = css_248z$8;
479
+
480
+ var css_248z$7 = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\nselect {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 2rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\nselect:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(select, label, option) {\n opacity: 1;\n}\n\nkol-input.disabled :is(select, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n}\n\nselect[multiple] {\n overflow: auto;\n}\n\nselect option {\n margin: 1px 0;\n padding: 0.5em;\n border-radius: var(--border-radius);\n cursor: pointer;\n}\n\nselect option:disabled {\n cursor: not-allowed;\n}\n\noption:active:not(:disabled),\noption:checked:not(:disabled),\noption:focus:not(:disabled),\noption:hover:not(:disabled) {\n background: var(--color-primary-variant);\n color: var(--color-light);\n}";
481
+ const selectCss = css_248z$7;
482
+
483
+ var css_248z$6 = "kol-link-wc > a > kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1rem;\n padding: 8px 14px;\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n}";
484
+ const skipNavCss = css_248z$6;
485
+
486
+ var css_248z$5 = ".spin {\n display: inline-block;\n height: 1rem;\n position: relative;\n width: 3rem;\n}\n\n.spin span {\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n border: 0.1rem solid rgb(255, 255, 255);\n border-radius: 50%;\n height: 0.8rem;\n width: 0.8rem;\n top: 0.1rem;\n position: absolute;\n}\n\n.spin span:nth-child(1) {\n background-color: #fc0;\n z-index: 0;\n animation: 2s ease 0s infinite normal none running spin1;\n left: 0.1rem;\n}\n\n.spin span:nth-child(2) {\n background-color: #f00;\n z-index: 1;\n animation: 2s ease 0s infinite normal none running spin2;\n left: 0.1rem;\n}\n\n.spin span:nth-child(3) {\n background-color: #000;\n z-index: 1;\n animation: 2s ease 0s infinite normal none running spin2;\n left: 1.1rem;\n}\n\n.spin span:nth-child(4) {\n background-color: #666;\n z-index: 0;\n animation: 2s ease 0s infinite normal none running spin3;\n left: 2.1rem;\n}\n\n@keyframes spin1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes spin2 {\n 0% {\n transform: translate(0px, 0px);\n }\n 100% {\n transform: translate(1rem, 0px);\n }\n}\n@keyframes spin3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n}";
487
+ const spinCss = css_248z$5;
488
+
489
+ var css_248z$4 = ".popover {\n background: #fff;\n}";
490
+ const splitButtonCss = css_248z$4;
491
+
492
+ var css_248z$3 = ":host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n}\n\n:host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5rem;\n}\n\nth {\n font-weight: normal;\n color: var(--color-primary);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\n.table {\n padding: 0.5rem;\n}\n\n.table:has(caption:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\nth {\n background-color: var(--color-light);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntr:nth-child(even) {\n background-color: var(--color-mute);\n}\n\nth,\ntd {\n padding: 0.5rem;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n div.pagination kol-pagination {\n display: flex;\n align-items: center;\n }\n}";
493
+ const tableCss = css_248z$3;
494
+
495
+ var css_248z$2 = "button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n:host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n}\n\nbutton {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: 18px;\n line-height: 22px;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n}\n\nbutton:hover {\n color: var(--color-primary);\n}\n\nbutton.primary,\nbutton.selected {\n color: var(--color-primary);\n}\n\nbutton kol-span-wc > span {\n border-bottom: 0.25em solid;\n}\n\nbutton kol-span-wc > span {\n gap: 0.5rem;\n}\n\n:host > div > div {\n padding: 0.25em 0;\n}\n\ndiv[role=tabpanel] {\n height: 100%;\n}\n\ndiv.grid {\n height: 100%;\n}\n\n:host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n}\n\n:host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n}\n\n:host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > div {\n display: grid;\n}\n\n:host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n order: 1;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n display: grid;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n width: 100%;\n}\n\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n}\n\n:host kol-button-group-wc button {\n border: none;\n}";
496
+ const tabsCss = css_248z$2;
497
+
498
+ var css_248z$1 = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .counter {\n order: 4;\n}\n\nkol-input .hint {\n order: 5;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ntextarea {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ntextarea:read-only,\ntextarea:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.disabled {\n opacity: 0.33;\n}\n\nselect[multiple],\ntextarea {\n overflow: auto;\n}\n\ntextarea {\n display: block;\n}\n\n.input {\n position: relative;\n}";
499
+ const textareaCss = css_248z$1;
500
+
501
+ var css_248z = ":host {\n top: 1rem;\n right: 1rem;\n width: 440px;\n}\n\n.toast {\n margin-top: 1rem;\n}";
502
+ const toastContainerCss = css_248z;
503
+
391
504
  const DEFAULT = KoliBri.createTheme("default", {
392
- GLOBAL: css`
393
- :host {
394
- --border-radius: var(--kolibri-border-radius, 5px);
395
- --font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);
396
- --font-size: var(--kolibri-font-size, 16px);
397
- --spacing: var(--kolibri-spacing, 0.25rem);
398
- --border-width: var(--kolibri-border-width, 1px);
399
- --color-primary: var(--kolibri-color-primary, #004b76);
400
- --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);
401
- --color-danger: var(--kolibri-color-danger, #c0003c);
402
- --color-warning: var(--kolibri-color-warning, #c44931);
403
- --color-success: var(--kolibri-color-success, #005c45);
404
- --color-subtle: var(--kolibri-color-subtle, #576164);
405
- --color-light: var(--kolibri-color-light, #ffffff);
406
- --color-text: var(--kolibri-color-text, #202020);
407
- --color-mute: var(--kolibri-color-mute, #f2f3f4);
408
- --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);
409
- }
410
- :host {
411
- background-color: transparent; /* Reset global background-color defined by components */
412
- font-family: var(--font-family);
413
- font-size: var(--font-size);
414
- }
415
- * {
416
- box-sizing: border-box;
417
- }
418
- *:not(i) {
419
- font-family: var(--font-family);
420
- }
421
- h1,
422
- h2,
423
- h3,
424
- h4,
425
- h5,
426
- h6 {
427
- margin: 0;
428
- padding: 0;
429
- }
430
- *[tabindex]:focus,
431
- kol-input:not(.checkbox, .radio) .input:focus-within,
432
- kol-input:is(.checkbox, .radio) input:focus,
433
- summary:focus {
434
- cursor: pointer;
435
- outline-color: var(--color-primary-variant);
436
- outline-offset: 2px;
437
- outline-style: solid;
438
- outline-width: 3px;
439
- transition: outline-offset 0.2s linear;
440
- }
441
- kol-heading-wc {
442
- font-weight: 700;
443
- }
444
- kol-tooltip-wc .tooltip-floating {
445
- border: var(--border-width) solid var(--color-subtle);
446
- border-radius: var(--border-radius);
447
- }
448
- kol-tooltip-wc .tooltip-arrow {
449
- border: var(--border-width) solid var(--color-subtle);
450
- }
451
- kol-tooltip-wc .tooltip-area {
452
- background-color: var(--color-light);
453
- }
454
- kol-tooltip-wc .tooltip-content {
455
- border-radius: var(--border-radius);
456
- line-height: 1.5;
457
- padding: 0.5rem 0.75rem;
458
- }
459
- kol-span-wc,
460
- kol-span-wc > span {
461
- gap: 0.5rem;
462
- }
463
-
464
- @keyframes spin {
465
- 0% {
466
- transform: rotate(0deg);
467
- }
468
- 100% {
469
- transform: rotate(360deg);
470
- }
471
- }
472
- `,
473
- "KOL-BUTTON": css`
474
- :is(a, button):focus {
475
- outline: none;
476
- }
477
- :is(a, button):focus kol-span-wc {
478
- outline-color: var(--color-primary-variant);
479
- outline-offset: 2px;
480
- outline-style: solid;
481
- outline-width: calc(var(--border-width) * 2);
482
- transition: outline-offset 0.2s linear;
483
- }
484
- :is(a, button) > kol-span-wc {
485
- font-weight: 700;
486
- border-radius: var(--border-radius);
487
- border-style: solid;
488
- border-width: var(--border-width);
489
- min-height: var(--a11y-min-size);
490
- min-width: var(--a11y-min-size);
491
- padding: 8px 14px;
492
- text-align: center;
493
- transition-duration: 0.5s;
494
- transition-property: background-color, color, border-color;
495
- }
496
- :is(a, button):disabled > kol-span-wc {
497
- cursor: not-allowed;
498
- opacity: 0.5;
499
- }
500
- .primary :is(a, button) > kol-span-wc,
501
- .primary :is(a, button):disabled:hover > kol-span-wc {
502
- background-color: var(--color-primary);
503
- border-color: var(--color-primary);
504
- color: var(--color-light);
505
- }
506
- .secondary :is(a, button) > kol-span-wc,
507
- .secondary :is(a, button):disabled:hover > kol-span-wc,
508
- .normal :is(a, button) > kol-span-wc,
509
- .normal :is(a, button):disabled:hover > kol-span-wc {
510
- background-color: var(--color-light);
511
- border-color: var(--color-primary);
512
- color: var(--color-primary);
513
- }
514
- .danger :is(a, button) > kol-span-wc,
515
- .danger :is(a, button):disabled:hover > kol-span-wc {
516
- background-color: var(--color-danger);
517
- border-color: var(--color-danger);
518
- color: var(--color-light);
519
- }
520
- .ghost :is(a, button) > kol-span-wc,
521
- .ghost :is(a, button):disabled:hover > kol-span-wc {
522
- border-color: var(--color-light);
523
- background-color: var(--color-light);
524
- box-shadow: none;
525
- color: var(--color-primary);
526
- } /*-----------*/
527
- .primary :is(a, button):active > kol-span-wc,
528
- .primary :is(a, button):hover > kol-span-wc,
529
- .secondary :is(a, button):active > kol-span-wc,
530
- .secondary :is(a, button):hover > kol-span-wc,
531
- .normal :is(a, button):active > kol-span-wc,
532
- .normal :is(a, button):hover > kol-span-wc,
533
- .danger :is(a, button):active > kol-span-wc,
534
- .danger :is(a, button):hover > kol-span-wc,
535
- .ghost :is(a, button):active > kol-span-wc,
536
- .ghost :is(a, button):hover > kol-span-wc {
537
- background-color: var(--color-primary-variant);
538
- border-color: var(--color-primary-variant);
539
- box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
540
- color: var(--color-light);
541
- }
542
- .danger :is(a, button):active > kol-span-wc,
543
- .danger :is(a, button):hover > kol-span-wc {
544
- background-color: var(--color-danger);
545
- border-color: var(--color-danger);
546
- }
547
- :is(a, button):disabled:hover > kol-span-wc,
548
- :is(a, button):focus:hover > kol-span-wc {
549
- box-shadow: none;
550
- }
551
- .primary :is(a, button):active > kol-span-wc,
552
- .secondary :is(a, button):active > kol-span-wc,
553
- .normal :is(a, button):active > kol-span-wc,
554
- .danger :is(a, button):active > kol-span-wc,
555
- .ghost :is(a, button):active > kol-span-wc {
556
- border-color: var(--color-light);
557
- box-shadow: none;
558
- outline: none;
559
- }
560
- :is(a, button).hide-label > kol-span-wc {
561
- padding: 0.8rem;
562
- width: unset;
563
- }
564
- :is(a, button).hide-label > kol-span-wc > span > span {
565
- display: none;
566
- }
567
- :is(a, button).loading > kol-span-wc kol-icon {
568
- animation: spin 5s infinite linear;
569
- }
570
- /** small ghost button */
571
- .ghost :is(a, button).small > kol-span-wc {
572
- border: none;
573
- background-color: transparent;
574
- box-shadow: none;
575
- }
576
- .ghost :is(a, button).small > kol-span-wc > span {
577
- border-radius: 1.5em;
578
- border-style: solid;
579
- border-width: var(--border-width);
580
- border-color: var(--color-light);
581
- background-color: var(--color-light);
582
- }
583
- .ghost :is(a, button).small:active > kol-span-wc > span,
584
- .ghost :is(a, button).small:hover > kol-span-wc > span,
585
- .ghost :is(a, button).small.transparent:active > kol-span-wc > span,
586
- .ghost :is(a, button).small.transparent:hover > kol-span-wc > span {
587
- background-color: var(--color-primary-variant);
588
- border-color: var(--color-primary-variant);
589
- box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
590
- color: var(--color-light);
591
- } /** :is(a,button) with transparent background */
592
- :is(a, button).transparent > kol-span-wc > span,
593
- .ghost :is(a, button).small.transparent > kol-span-wc > span,
594
- :is(a, button).transparent > kol-span-wc {
595
- background-color: transparent;
596
- border-color: transparent;
597
- }
598
- `,
599
- "KOL-INPUT-TEXT": css`
600
- kol-input {
601
- gap: 0.25rem;
602
- }
603
- kol-input .error {
604
- order: 1;
605
- }
606
- kol-input label {
607
- order: 2;
608
- }
609
- kol-input .input {
610
- order: 3;
611
- }
612
- kol-input .hint {
613
- order: 4;
614
- font-size: 0.9rem;
615
- font-style: italic;
616
- }
617
- input {
618
- border: none;
619
- }
620
- input::placeholder {
621
- color: var(--color-subtle);
622
- }
623
- .input {
624
- background-color: var(--color-light);
625
- border-color: var(--color-subtle);
626
- border-radius: var(--border-radius);
627
- border-style: solid;
628
- border-width: 2px;
629
- padding: 0 0.5rem;
630
- }
631
- .input > kol-icon {
632
- width: 1rem;
633
- }
634
- .input:is(.icon-left, .icon-right) {
635
- padding-left: 1rem;
636
- padding-right: 1rem;
637
- }
638
- .input:is(.icon-left, .icon-right) input {
639
- padding-left: 0.5rem;
640
- padding-right: 0.5rem;
641
- }
642
- .input > input:first-child {
643
- padding-left: var(--spacing);
644
- }
645
- .input > input:last-child {
646
- padding-right: var(--spacing);
647
- }
648
- .input:hover {
649
- border-color: var(--color-primary);
650
- }
651
- input:read-only,
652
- input:disabled {
653
- cursor: not-allowed;
654
- }
655
- .required label > span::after {
656
- content: '*';
657
- padding-left: 0.125em;
658
- }
659
- kol-input.error {
660
- border-left: 3px solid var(--color-danger);
661
- padding-left: 1rem;
662
- }
663
- kol-input.error .input:focus-within {
664
- outline-color: var(--color-danger) !important;
665
- }
666
- kol-input.error kol-alert.error {
667
- color: var(--color-danger);
668
- font-weight: 700;
669
- }
670
- kol-input.disabled :is(input, label) {
671
- opacity: 1;
672
- }
673
- kol-input.disabled :is(input, .input) {
674
- background-color: var(--color-mute);
675
- border-color: var(--color-mute-variant);
676
- }
677
- `,
678
- "KOL-INPUT-PASSWORD": css`
679
- kol-input {
680
- gap: 0.25rem;
681
- }
682
- kol-input .error {
683
- order: 1;
684
- }
685
- kol-input label {
686
- order: 2;
687
- }
688
- kol-input .input {
689
- order: 3;
690
- }
691
- kol-input .hint {
692
- order: 4;
693
- font-size: 0.9rem;
694
- font-style: italic;
695
- }
696
- input {
697
- border: none;
698
- }
699
- input::placeholder {
700
- color: var(--color-subtle);
701
- }
702
- .input {
703
- background-color: var(--color-light);
704
- border-color: var(--color-subtle);
705
- border-radius: var(--border-radius);
706
- border-style: solid;
707
- border-width: 2px;
708
- padding: 0 0.5rem;
709
- }
710
- .input > kol-icon {
711
- width: 1rem;
712
- }
713
- .input:is(.icon-left, .icon-right) {
714
- padding-left: 1rem;
715
- padding-right: 1rem;
716
- }
717
- .input:is(.icon-left, .icon-right) input {
718
- padding-left: 0.5rem;
719
- padding-right: 0.5rem;
720
- }
721
- .input > input:first-child {
722
- padding-left: var(--spacing);
723
- }
724
- .input > input:last-child {
725
- padding-right: var(--spacing);
726
- }
727
- .input:hover {
728
- border-color: var(--color-primary);
729
- }
730
- input:read-only,
731
- input:disabled {
732
- cursor: not-allowed;
733
- }
734
- .required label > span::after {
735
- content: '*';
736
- padding-left: 0.125em;
737
- }
738
- kol-input.error {
739
- border-left: 3px solid var(--color-danger);
740
- padding-left: 1rem;
741
- }
742
- kol-input.error .input:focus-within {
743
- outline-color: var(--color-danger) !important;
744
- }
745
- kol-input.error kol-alert.error {
746
- color: var(--color-danger);
747
- font-weight: 700;
748
- }
749
- kol-input.disabled :is(button, input, label, option, select, textarea) {
750
- opacity: 1;
751
- }
752
- kol-input.disabled :is(input, select, textarea, .input) {
753
- background-color: var(--color-mute);
754
- border-color: var(--color-mute-variant);
755
- color: var(--color-text);
756
- }
757
- `,
758
- "KOL-INPUT-NUMBER": css`
759
- kol-input {
760
- gap: 0.25rem;
761
- }
762
- kol-input .error {
763
- order: 1;
764
- }
765
- kol-input label {
766
- order: 2;
767
- }
768
- kol-input .input {
769
- order: 3;
770
- }
771
- kol-input .hint {
772
- order: 4;
773
- font-size: 0.9rem;
774
- font-style: italic;
775
- }
776
- input {
777
- border: none;
778
- }
779
- input::placeholder {
780
- color: var(--color-subtle);
781
- }
782
- .input {
783
- background-color: var(--color-light);
784
- border-color: var(--color-subtle);
785
- border-radius: var(--border-radius);
786
- border-style: solid;
787
- border-width: 2px;
788
- padding: 0 0.5rem;
789
- }
790
- .input > kol-icon {
791
- width: 1rem;
792
- }
793
- .input:is(.icon-left, .icon-right) {
794
- padding-left: 1rem;
795
- padding-right: 1rem;
796
- }
797
- .input:is(.icon-left, .icon-right) input {
798
- padding-left: 0.5rem;
799
- padding-right: 0.5rem;
800
- }
801
- .input > input:first-child {
802
- padding-left: var(--spacing);
803
- }
804
- .input > input:last-child {
805
- padding-right: var(--spacing);
806
- }
807
- .input:hover {
808
- border-color: var(--color-primary);
809
- }
810
- input:read-only,
811
- input:disabled {
812
- cursor: not-allowed;
813
- }
814
- .required label > span::after {
815
- content: '*';
816
- padding-left: 0.125em;
817
- }
818
- kol-input.error {
819
- border-left: 3px solid var(--color-danger);
820
- padding-left: 1rem;
821
- }
822
- kol-input.error .input:focus-within {
823
- outline-color: var(--color-danger) !important;
824
- }
825
- kol-input.error kol-alert.error {
826
- color: var(--color-danger);
827
- font-weight: 700;
828
- }
829
- kol-input.disabled :is(input, label) {
830
- opacity: 1;
831
- }
832
- kol-input.disabled :is(input, .input) {
833
- background-color: var(--color-mute);
834
- border-color: var(--color-mute-variant);
835
- color: var(--color-text);
836
- }
837
- `,
838
- "KOL-INPUT-DATE": css`
839
- kol-input {
840
- gap: 0.25rem;
841
- }
842
- kol-input .error {
843
- order: 1;
844
- }
845
- kol-input label {
846
- order: 2;
847
- }
848
- kol-input .input {
849
- order: 3;
850
- }
851
- kol-input .hint {
852
- order: 4;
853
- font-size: 0.9rem;
854
- font-style: italic;
855
- }
856
- input {
857
- border: none;
858
- }
859
- input::placeholder {
860
- color: var(--color-subtle);
861
- }
862
- .input {
863
- background-color: var(--color-light);
864
- border-color: var(--color-subtle);
865
- border-radius: var(--border-radius);
866
- border-style: solid;
867
- border-width: 2px;
868
- padding: 0 0.5rem;
869
- }
870
- .input > kol-icon {
871
- width: 1rem;
872
- }
873
- .input:is(.icon-left, .icon-right) {
874
- padding-left: 1rem;
875
- padding-right: 1rem;
876
- }
877
- .input:is(.icon-left, .icon-right) input {
878
- padding-left: 0.5rem;
879
- padding-right: 0.5rem;
880
- }
881
- .input > input:first-child {
882
- padding-left: var(--spacing);
883
- }
884
- .input > input:last-child {
885
- padding-right: var(--spacing);
886
- }
887
- .input:hover {
888
- border-color: var(--color-primary);
889
- }
890
- input:disabled {
891
- cursor: not-allowed;
892
- }
893
- .required label > span::after {
894
- content: '*';
895
- padding-left: 0.125em;
896
- }
897
- kol-input.error {
898
- border-left: 3px solid var(--color-danger);
899
- padding-left: 1rem;
900
- }
901
- kol-input.error .input:focus-within {
902
- outline-color: var(--color-danger) !important;
903
- }
904
- kol-input.error kol-alert.error {
905
- color: var(--color-danger);
906
- font-weight: 700;
907
- }
908
- kol-input.disabled :is(input, label) {
909
- opacity: 1;
910
- }
911
- kol-input.disabled :is(input, .input) {
912
- background-color: var(--color-mute);
913
- border-color: var(--color-mute-variant);
914
- color: var(--color-text);
915
- }
916
- `,
917
- "KOL-INPUT-EMAIL": css`
918
- kol-input {
919
- gap: 0.25rem;
920
- }
921
- kol-input .error {
922
- order: 1;
923
- }
924
- kol-input label {
925
- order: 2;
926
- }
927
- kol-input .input {
928
- order: 3;
929
- }
930
- kol-input .hint {
931
- order: 4;
932
- font-size: 0.9rem;
933
- font-style: italic;
934
- }
935
- input {
936
- border: none;
937
- }
938
- input::placeholder {
939
- color: var(--color-subtle);
940
- }
941
- .input {
942
- background-color: var(--color-light);
943
- border-color: var(--color-subtle);
944
- border-radius: var(--border-radius);
945
- border-style: solid;
946
- border-width: 2px;
947
- padding: 0 0.5rem;
948
- }
949
- .input > kol-icon {
950
- width: 1rem;
951
- }
952
- .input:is(.icon-left, .icon-right) {
953
- padding-left: 1rem;
954
- padding-right: 1rem;
955
- }
956
- .input:is(.icon-left, .icon-right) input {
957
- padding-left: 0.5rem;
958
- padding-right: 0.5rem;
959
- }
960
- .input > input:first-child {
961
- padding-left: var(--spacing);
962
- }
963
- .input > input:last-child {
964
- padding-right: var(--spacing);
965
- }
966
- .input:hover {
967
- border-color: var(--color-primary);
968
- }
969
- input:read-only,
970
- input:disabled {
971
- cursor: not-allowed;
972
- }
973
- .required label > span::after {
974
- content: '*';
975
- padding-left: 0.125em;
976
- }
977
- kol-input.error {
978
- border-left: 3px solid var(--color-danger);
979
- padding-left: 1rem;
980
- }
981
- kol-input.error .input:focus-within {
982
- outline-color: var(--color-danger) !important;
983
- }
984
- kol-input.error kol-alert.error {
985
- color: var(--color-danger);
986
- font-weight: 700;
987
- }
988
- kol-input.disabled :is(input, label) {
989
- opacity: 1;
990
- }
991
- kol-input.disabled :is(input, .input) {
992
- background-color: var(--color-mute);
993
- border-color: var(--color-mute-variant);
994
- color: var(--color-text);
995
- }
996
- `,
997
- "KOL-INPUT-FILE": css`
998
- kol-input {
999
- gap: 0.25rem;
1000
- }
1001
- kol-input .error {
1002
- order: 1;
1003
- }
1004
- kol-input label {
1005
- order: 2;
1006
- }
1007
- kol-input .input {
1008
- order: 3;
1009
- }
1010
- kol-input .hint {
1011
- order: 4;
1012
- font-size: 0.9rem;
1013
- font-style: italic;
1014
- }
1015
- kol-input .input input[type='file'] {
1016
- padding-top: calc(0.5em + 2px);
1017
- }
1018
- input {
1019
- border: none;
1020
- }
1021
- input[type='file'] {
1022
- background-color: transparent;
1023
- }
1024
- input::placeholder {
1025
- color: var(--color-subtle);
1026
- }
1027
- .input {
1028
- background-color: var(--color-light);
1029
- border-color: var(--color-subtle);
1030
- border-radius: var(--border-radius);
1031
- border-style: solid;
1032
- border-width: 2px;
1033
- padding: 0 0.5rem;
1034
- }
1035
- .input > kol-icon {
1036
- width: 1rem;
1037
- }
1038
- .input:is(.icon-left, .icon-right) {
1039
- padding-left: 1rem;
1040
- padding-right: 1rem;
1041
- }
1042
- .input:is(.icon-left, .icon-right) input {
1043
- padding-left: 0.5rem;
1044
- padding-right: 0.5rem;
1045
- }
1046
- .input > input:first-child {
1047
- padding-left: var(--spacing);
1048
- }
1049
- .input > input:last-child {
1050
- padding-right: var(--spacing);
1051
- }
1052
- .input:hover {
1053
- border-color: var(--color-primary);
1054
- }
1055
- input:read-only,
1056
- input:disabled {
1057
- cursor: not-allowed;
1058
- }
1059
- .required label > span::after {
1060
- content: '*';
1061
- padding-left: 0.125em;
1062
- }
1063
- kol-input.error {
1064
- border-left: 3px solid var(--color-danger);
1065
- padding-left: 1rem;
1066
- }
1067
- kol-input.error .input:focus-within {
1068
- outline-color: var(--color-danger) !important;
1069
- }
1070
- kol-input.error kol-alert.error {
1071
- color: var(--color-danger);
1072
- font-weight: 700;
1073
- }
1074
- kol-input.disabled :is(button, input, label, option, select, textarea) {
1075
- opacity: 1;
1076
- }
1077
- kol-input.disabled :is(input, select, textarea, .input) {
1078
- background-color: var(--color-mute);
1079
- border-color: var(--color-mute-variant);
1080
- color: var(--color-text);
1081
- }
1082
- `,
1083
- "KOL-TEXTAREA": css`
1084
- kol-input {
1085
- gap: 0.25rem;
1086
- }
1087
- kol-input .error {
1088
- order: 1;
1089
- }
1090
- kol-input label {
1091
- order: 2;
1092
- }
1093
- kol-input .input {
1094
- order: 3;
1095
- }
1096
- kol-input .counter {
1097
- order: 4;
1098
- }
1099
- kol-input .hint {
1100
- order: 5;
1101
- font-size: 0.9rem;
1102
- font-style: italic;
1103
- }
1104
- textarea {
1105
- border: none;
1106
- }
1107
- input::placeholder {
1108
- color: var(--color-subtle);
1109
- }
1110
- .input {
1111
- background-color: var(--color-light);
1112
- border-color: var(--color-subtle);
1113
- border-radius: var(--border-radius);
1114
- border-style: solid;
1115
- border-width: 2px;
1116
- padding: 0 0.5rem;
1117
- }
1118
- .input > kol-icon {
1119
- width: 1rem;
1120
- }
1121
- .input:is(.icon-left, .icon-right) {
1122
- padding-left: 1rem;
1123
- padding-right: 1rem;
1124
- }
1125
- .input:is(.icon-left, .icon-right) input {
1126
- padding-left: 0.5rem;
1127
- padding-right: 0.5rem;
1128
- }
1129
- .input > input:first-child {
1130
- padding-left: var(--spacing);
1131
- }
1132
- .input > input:last-child {
1133
- padding-right: var(--spacing);
1134
- }
1135
- .input:hover {
1136
- border-color: var(--color-primary);
1137
- }
1138
- textarea:read-only,
1139
- textarea:disabled {
1140
- cursor: not-allowed;
1141
- }
1142
- .required label > span::after {
1143
- content: '*';
1144
- padding-left: 0.125em;
1145
- }
1146
- kol-input.error {
1147
- border-left: 3px solid var(--color-danger);
1148
- padding-left: 1rem;
1149
- }
1150
- kol-input.error .input:focus-within {
1151
- outline-color: var(--color-danger) !important;
1152
- }
1153
- kol-input.error kol-alert.error {
1154
- color: var(--color-danger);
1155
- font-weight: 700;
1156
- }
1157
- .disabled {
1158
- opacity: 0.33;
1159
- }
1160
- select[multiple],
1161
- textarea {
1162
- overflow: auto;
1163
- }
1164
- textarea {
1165
- display: block;
1166
- }
1167
- .input {
1168
- position: relative;
1169
- }
1170
- `,
1171
- "KOL-ALERT": css`
1172
- .msg {
1173
- border-width: 0;
1174
- }
1175
- kol-alert-wc {
1176
- border-width: var(--border-width);
1177
- border-style: solid;
1178
- border-radius: var(--border-radius);
1179
- display: flex;
1180
- width: 100%;
1181
- overflow: unset;
1182
- border-color: transparent;
1183
- background-color: var(--color-light);
1184
- }
1185
- kol-alert-wc > .heading {
1186
- display: flex;
1187
- gap: 0.5em;
1188
- place-items: center;
1189
- }
1190
- kol-alert-wc > .heading > div {
1191
- display: grid;
1192
- gap: 0.25rem;
1193
- }
1194
- .msg > .heading > kol-icon {
1195
- place-self: baseline;
1196
- }
1197
- kol-alert-wc > .heading > kol-button-wc.close {
1198
- place-self: center;
1199
- }
1200
- .msg {
1201
- align-items: start;
1202
- }
1203
- .default {
1204
- border-color: var(--color-subtle);
1205
- }
1206
- .default.msg .heading-icon {
1207
- color: var(--color-subtle);
1208
- }
1209
- .error {
1210
- border-color: var(--color-danger);
1211
- }
1212
- .error.msg .heading-icon {
1213
- color: var(--color-danger);
1214
- }
1215
- .info {
1216
- border-color: var(--color-primary);
1217
- }
1218
- .info.msg .heading-icon {
1219
- color: var(--color-primary);
1220
- }
1221
- .success {
1222
- border-color: var(--color-success);
1223
- }
1224
- .success.msg .heading-icon {
1225
- color: var(--color-success);
1226
- }
1227
- .warning {
1228
- border-color: var(--color-warning);
1229
- }
1230
- .warning.msg .heading-icon {
1231
- color: var(--color-warning);
1232
- }
1233
- .heading-icon {
1234
- color: var(--color-light);
1235
- }
1236
- kol-alert-wc .heading .heading-icon {
1237
- padding: 0;
1238
- }
1239
- .msg > .heading > .heading-icon {
1240
- padding-top: 0;
1241
- place-items: baseline;
1242
- }
1243
- .msg > .heading > div > kol-heading-wc {
1244
- padding-top: calc(--var-spacing / 2);
1245
- }
1246
- .msg.default .heading > div > kol-heading-wc {
1247
- color: var(--color-subtle);
1248
- }
1249
- .msg.error .heading > div > kol-heading-wc {
1250
- color: var(--color-danger);
1251
- }
1252
- .msg.info .heading > div > kol-heading-wc {
1253
- color: var(--color-primary);
1254
- }
1255
- .msg.success .heading > div > kol-heading-wc {
1256
- color: var(--color-success);
1257
- }
1258
- .msg.warning .heading > div > kol-heading-wc {
1259
- color: var(--color-warning);
1260
- }
1261
- .msg.default .close .icon {
1262
- color: var(--color-subtle);
1263
- }
1264
- .msg.error .close .icon {
1265
- color: var(--color-danger);
1266
- }
1267
- .msg.info .close .icon {
1268
- color: var(--color-primary);
1269
- }
1270
- .msg.success .close .icon {
1271
- color: var(--color-success);
1272
- }
1273
- .msg.warning .close .icon {
1274
- color: var(--color-warning);
1275
- }
1276
- .card {
1277
- border-width: var(--border-width);
1278
- border-style: solid;
1279
- filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
1280
- flex-direction: column;
1281
- }
1282
- .card > .heading {
1283
- padding: 0.5rem 1rem;
1284
- }
1285
- .card[_has-closer] > .heading {
1286
- padding-top: 0;
1287
- padding-bottom: 0;
1288
- padding-right: 0;
1289
- }
1290
- .card > .heading > div {
1291
- width: 100%;
1292
- min-height: 1.25rem;
1293
- }
1294
- .card > .heading .heading-icon {
1295
- justify-self: right;
1296
- margin-top: -4px;
1297
- }
1298
- .card > .heading kol-heading-wc {
1299
- width: 100%;
1300
- color: var(--color-light);
1301
- display: flex;
1302
- font-size: 1.25rem;
1303
- line-height: 1.25rem;
1304
- }
1305
- .card > .heading kol-heading-wc > * {
1306
- margin: auto 0;
1307
- }
1308
- .card > .content {
1309
- padding: 1rem;
1310
- }
1311
- .card.default > .heading {
1312
- background-color: var(--color-subtle);
1313
- }
1314
- .card.error > .heading {
1315
- background-color: var(--color-danger);
1316
- }
1317
- .card.info > .heading {
1318
- background-color: var(--color-primary);
1319
- }
1320
- .card.success > .heading {
1321
- background-color: var(--color-success);
1322
- }
1323
- .card.warning > .heading {
1324
- background-color: var(--color-warning);
1325
- }
1326
- :is(.error, .info, .success, .warning) .heading-icon {
1327
- font-size: 1.25rem;
1328
- }
1329
- .card > div > .content {
1330
- grid-row: 2;
1331
- grid-column: 1 / span 2;
1332
- }
1333
- .card.default .close {
1334
- background-color: var(--color-subtle);
1335
- }
1336
- .card.error .close {
1337
- background-color: var(--color-danger);
1338
- }
1339
- .card.info .close {
1340
- background-color: var(--color-primary);
1341
- }
1342
- .card.success .close {
1343
- background-color: var(--color-success);
1344
- }
1345
- .card.warning .close {
1346
- background-color: var(--color-warning);
1347
- }
1348
- .close > button {
1349
- border-radius: 50%; /* visible on focus */
1350
- color: var(--color-light);
1351
- cursor: pointer;
1352
- height: var(--a11y-min-size);
1353
- width: var(--a11y-min-size);
1354
- }
1355
- .close > button.hide-label kol-icon {
1356
- display: flex;
1357
- width: 1em;
1358
- height: 1em;
1359
- font-size: 1.2rem;
1360
- }
1361
- .close > button:active {
1362
- box-shadow: none;
1363
- outline: none;
1364
- }
1365
- `,
1366
- "KOL-HEADING": css`
1367
- h1,
1368
- h2,
1369
- h3,
1370
- h4,
1371
- h5,
1372
- h6 {
1373
- color: inherit;
1374
- font-style: normal;
1375
- }
1376
- h1,
1377
- h2,
1378
- h3 {
1379
- font-weight: 700;
1380
- }
1381
- h1 {
1382
- font-size: 1.5rem;
1383
- line-height: 1.75rem;
1384
- }
1385
- h2 {
1386
- font-size: 1.25rem;
1387
- line-height: 1.75rem;
1388
- }
1389
- h3 {
1390
- font-size: 1.125rem;
1391
- line-height: 1.5rem;
1392
- }
1393
- `,
1394
- "KOL-BADGE": css`
1395
- :host {
1396
- display: inline-block;
1397
- font-size: inherit;
1398
- }
1399
- :host > span {
1400
- border-radius: var(--border-radius);
1401
- display: inline-flex;
1402
- font-style: normal;
1403
- }
1404
- :host > span.smart-button {
1405
- align-items: center;
1406
- }
1407
- :host > span kol-button-wc:hover > button {
1408
- background-color: var(--color-primary-variant);
1409
- color: var(--color-light);
1410
- }
1411
- :host > span kol-button-wc > button {
1412
- color: inherit;
1413
- border-top-right-radius: var(--border-radius);
1414
- border-bottom-right-radius: var(--border-radius);
1415
- padding: 0.2rem;
1416
- }
1417
- :host > span kol-span-wc {
1418
- padding: 0.25rem 0.75rem;
1419
- }
1420
- :host > span > kol-span-wc {
1421
- align-items: center;
1422
- font-style: normal;
1423
- gap: 0.5rem;
1424
- }
1425
- :host > span > kol-span-wc > span {
1426
- display: flex;
1427
- gap: 0.25rem;
1428
- }
1429
- `,
1430
- "KOL-BUTTON-GROUP": css`
1431
- :host > kol-button-group-wc {
1432
- display: flex;
1433
- flex-wrap: wrap;
1434
- gap: var(--spacing);
1435
- }
1436
- `,
1437
- "KOL-INDENTED-TEXT": css`
1438
- :host > div {
1439
- background-color: var(--color-light);
1440
- border-left: none;
1441
- box-shadow: -2px 0px 0px var(--color-primary-variant);
1442
- padding: 0 0.5rem;
1443
- width: 100%;
1444
- }
1445
- `,
1446
- "KOL-LINK": css`
1447
- :is(a, button) {
1448
- color: var(--color-primary);
1449
- font-style: normal;
1450
- font-weight: 400;
1451
- text-decoration-line: underline;
1452
- }
1453
- :is(a, button):focus {
1454
- outline: none;
1455
- }
1456
- :is(a, button):focus kol-span-wc {
1457
- border-radius: var(--border-radius);
1458
- outline: var(--border-width) solid;
1459
- }
1460
- :is(a, button):hover {
1461
- text-decoration-thickness: 0.25em;
1462
- }
1463
- :is(a, button):visited {
1464
- color: var(--visited);
1465
- }
1466
- .hidden {
1467
- display: none;
1468
- visibility: hidden;
1469
- }
1470
- .skip {
1471
- left: -99999px;
1472
- overflow: hidden;
1473
- position: absolute;
1474
- z-index: 9999999;
1475
- line-height: 1em;
1476
- }
1477
- .skip:focus {
1478
- background: white;
1479
- left: unset;
1480
- position: unset;
1481
- }
1482
- `,
1483
- "KOL-DETAILS": css`
1484
- details > summary {
1485
- border-radius: var(--border-radius);
1486
- }
1487
- details kol-indented-text {
1488
- margin: 0.25rem 0 0 0.65rem;
1489
- }
1490
- kol-icon {
1491
- font-size: 1.2rem;
1492
- }
1493
- `,
1494
- "KOL-SPIN": css`
1495
- .spin {
1496
- display: inline-block;
1497
- height: 1rem;
1498
- position: relative;
1499
- width: 3rem;
1500
- }
1501
- .spin span {
1502
- animation-timing-function: cubic-bezier(0, 1, 1, 0);
1503
- border: 0.1rem solid rgb(255, 255, 255);
1504
- border-radius: 50%;
1505
- height: 0.8rem;
1506
- width: 0.8rem;
1507
- top: 0.1rem;
1508
- position: absolute;
1509
- }
1510
- .spin span:nth-child(1) {
1511
- background-color: #fc0;
1512
- z-index: 0;
1513
- animation: 2s ease 0s infinite normal none running spin1;
1514
- left: 0.1rem;
1515
- }
1516
- .spin span:nth-child(2) {
1517
- background-color: #f00;
1518
- z-index: 1;
1519
- animation: 2s ease 0s infinite normal none running spin2;
1520
- left: 0.1rem;
1521
- }
1522
- .spin span:nth-child(3) {
1523
- background-color: #000;
1524
- z-index: 1;
1525
- animation: 2s ease 0s infinite normal none running spin2;
1526
- left: 1.1rem;
1527
- }
1528
- .spin span:nth-child(4) {
1529
- background-color: #666;
1530
- z-index: 0;
1531
- animation: 2s ease 0s infinite normal none running spin3;
1532
- left: 2.1rem;
1533
- }
1534
- @keyframes spin1 {
1535
- 0% {
1536
- transform: scale(0);
1537
- }
1538
- 100% {
1539
- transform: scale(1);
1540
- }
1541
- }
1542
- @keyframes spin2 {
1543
- 0% {
1544
- transform: translate(0px, 0px);
1545
- }
1546
- 100% {
1547
- transform: translate(1rem, 0px);
1548
- }
1549
- }
1550
- @keyframes spin3 {
1551
- 0% {
1552
- transform: scale(1);
1553
- }
1554
- 100% {
1555
- transform: scale(0);
1556
- }
1557
- }
1558
- `,
1559
- "KOL-PROGRESS": css`
1560
- :host progress,
1561
- :host span {
1562
- display: block;
1563
- height: 0px;
1564
- overflow: hidden;
1565
- width: 0px;
1566
- }
1567
- :host svg line:first-child,
1568
- :host svg circle:first-child {
1569
- fill: transparent;
1570
- stroke: var(--color-mute-variant);
1571
- }
1572
- :host svg line:last-child,
1573
- :host svg circle:last-child {
1574
- fill: transparent;
1575
- stroke: var(--color-primary);
1576
- }
1577
-
1578
- .cycle .progress {
1579
- stroke: var(--color-primary-variant);
1580
- }
1581
- `,
1582
- "KOL-SELECT": css`
1583
- kol-input {
1584
- gap: 0.25rem;
1585
- }
1586
- kol-input .error {
1587
- order: 1;
1588
- }
1589
- kol-input label {
1590
- order: 2;
1591
- }
1592
- kol-input .input {
1593
- order: 3;
1594
- }
1595
- kol-input .hint {
1596
- order: 4;
1597
- font-size: 0.9rem;
1598
- font-style: italic;
1599
- }
1600
- select {
1601
- border: none;
1602
- }
1603
- input::placeholder {
1604
- color: var(--color-subtle);
1605
- }
1606
- .input {
1607
- background-color: var(--color-light);
1608
- border-color: var(--color-subtle);
1609
- border-radius: var(--border-radius);
1610
- border-style: solid;
1611
- border-width: 2px;
1612
- padding: 0 0.5rem;
1613
- }
1614
- .input > kol-icon {
1615
- width: 2rem;
1616
- }
1617
- .input:is(.icon-left, .icon-right) {
1618
- padding-left: 1rem;
1619
- padding-right: 1rem;
1620
- }
1621
- .input:is(.icon-left, .icon-right) input {
1622
- padding-left: 0.5rem;
1623
- padding-right: 0.5rem;
1624
- }
1625
- .input > input:first-child {
1626
- padding-left: var(--spacing);
1627
- }
1628
- .input > input:last-child {
1629
- padding-right: var(--spacing);
1630
- }
1631
- .input:hover {
1632
- border-color: var(--color-primary);
1633
- }
1634
- select:disabled {
1635
- cursor: not-allowed;
1636
- }
1637
- .required label > span::after {
1638
- content: '*';
1639
- padding-left: 0.125em;
1640
- }
1641
- kol-input.error {
1642
- border-left: 3px solid var(--color-danger);
1643
- padding-left: 1rem;
1644
- }
1645
- kol-input.error .input:focus-within {
1646
- outline-color: var(--color-danger) !important;
1647
- }
1648
- kol-input.error kol-alert.error {
1649
- color: var(--color-danger);
1650
- font-weight: 700;
1651
- }
1652
- kol-input.disabled :is(select, label, option) {
1653
- opacity: 1;
1654
- }
1655
- kol-input.disabled :is(select, .input) {
1656
- background-color: var(--color-mute);
1657
- border-color: var(--color-mute-variant);
1658
- }
1659
- select[multiple] {
1660
- overflow: auto;
1661
- }
1662
- select option {
1663
- margin: 1px 0;
1664
- padding: 0.5em;
1665
- border-radius: var(--border-radius);
1666
- cursor: pointer;
1667
- }
1668
- select option:disabled {
1669
- cursor: not-allowed;
1670
- }
1671
- option:active:not(:disabled),
1672
- option:checked:not(:disabled),
1673
- option:focus:not(:disabled),
1674
- option:hover:not(:disabled) {
1675
- background: var(--color-primary-variant);
1676
- color: var(--color-light);
1677
- }
1678
- `,
1679
- "KOL-INPUT-COLOR": css`
1680
- kol-input {
1681
- gap: 0.25rem;
1682
- }
1683
- kol-input .error {
1684
- order: 1;
1685
- }
1686
- kol-input label {
1687
- order: 2;
1688
- }
1689
- kol-input .input {
1690
- order: 3;
1691
- }
1692
- kol-input .hint {
1693
- order: 4;
1694
- font-size: 0.9rem;
1695
- font-style: italic;
1696
- }
1697
- input {
1698
- border: none;
1699
- }
1700
- input[type='color'] {
1701
- border: none;
1702
- min-height: 40px !important;
1703
- }
1704
- input[type='color'] {
1705
- background-color: transparent;
1706
- }
1707
- input::placeholder {
1708
- color: var(--color-subtle);
1709
- }
1710
- .input {
1711
- background-color: var(--color-light);
1712
- border-color: var(--color-subtle);
1713
- border-radius: var(--border-radius);
1714
- border-style: solid;
1715
- border-width: 2px;
1716
- padding: 0 0.5rem;
1717
- }
1718
- .input > kol-icon {
1719
- width: 1rem;
1720
- }
1721
- .input:is(.icon-left, .icon-right) {
1722
- padding-left: 1rem;
1723
- padding-right: 1rem;
1724
- }
1725
- .input:is(.icon-left, .icon-right) input {
1726
- padding-left: 0.5rem;
1727
- padding-right: 0.5rem;
1728
- }
1729
- .input > input:first-child {
1730
- padding-left: var(--spacing);
1731
- }
1732
- .input > input:last-child {
1733
- padding-right: var(--spacing);
1734
- }
1735
- .input:hover {
1736
- border-color: var(--color-primary);
1737
- }
1738
- input:read-only,
1739
- input:disabled {
1740
- cursor: not-allowed;
1741
- }
1742
- .required label > span::after {
1743
- content: '*';
1744
- padding-left: 0.125em;
1745
- }
1746
- kol-input.error {
1747
- border-left: 3px solid var(--color-danger);
1748
- padding-left: 1rem;
1749
- }
1750
- kol-input.error .input:focus-within {
1751
- outline-color: var(--color-danger) !important;
1752
- }
1753
- kol-input.error kol-alert.error {
1754
- color: var(--color-danger);
1755
- font-weight: 700;
1756
- }
1757
- kol-input.disabled :is(input, label) {
1758
- opacity: 1;
1759
- }
1760
- kol-input.disabled :is(input, .input) {
1761
- background-color: var(--color-mute);
1762
- border-color: var(--color-mute-variant);
1763
- color: var(--color-text);
1764
- }
1765
- `,
1766
- "KOL-ACCORDION": css`
1767
- kol-span-wc > span {
1768
- display: flex;
1769
- place-items: baseline center;
1770
- text-align: left;
1771
- }
1772
- :host > div > kol-heading-wc button {
1773
- border-radius: var(--border-radius);
1774
- min-height: 2.2rem;
1775
- padding: 12px 8px;
1776
- }
1777
- :host > div > kol-heading-wc button kol-span-wc {
1778
- font-weight: 700;
1779
- font-size: 1.125rem;
1780
- line-height: 20px;
1781
- gap: 0.5rem;
1782
- }
1783
- :host > div > kol-heading-wc button kol-span-wc > span {
1784
- gap: 0.5em;
1785
- }
1786
- :host > div > kol-heading-wc button kol-icon {
1787
- color: var(--color-primary);
1788
- }
1789
- :host > div {
1790
- width: 100%;
1791
- height: 100%;
1792
- display: grid;
1793
- }
1794
- :host > div div[class='header'],
1795
- :host > div[class*='open'] div[class='content'] {
1796
- margin: 0;
1797
- }
1798
- :host > div div[class='content'] {
1799
- padding-left: 2.25em;
1800
- padding-bottom: 12px;
1801
- padding-right: 8px;
1802
- }
1803
- button:focus {
1804
- outline: none;
1805
- }
1806
- :host > .accordion:focus-within {
1807
- border-radius: var(--border-radius);
1808
- cursor: pointer;
1809
- outline-color: var(--color-primary-variant);
1810
- outline-offset: 2px;
1811
- outline-style: solid;
1812
- outline-width: 3px;
1813
- transition: outline-offset 0.2s linear;
1814
- }
1815
- `,
1816
- "KOL-TABLE": css`
1817
- :host * {
1818
- hyphens: var(--hyphens);
1819
- font-family: var(--font-family);
1820
- line-height: var(--line-height);
1821
- word-break: break-word;
1822
- }
1823
- :host > div {
1824
- overflow-x: auto;
1825
- overflow-y: hidden;
1826
- }
1827
- caption {
1828
- padding: 0.5rem;
1829
- }
1830
- th {
1831
- font-weight: normal;
1832
- color: var(--color-primary);
1833
- }
1834
- :host table thead tr:first-child th,
1835
- :host table thead tr:first-child td {
1836
- border-width: 0;
1837
- border-top-width: calc(var(--border-width) * 2);
1838
- border-style: solid;
1839
- border-color: var(--color-primary-variant);
1840
- }
1841
- .table {
1842
- padding: 0.5rem;
1843
- }
1844
- .table:has(caption:focus) {
1845
- outline-color: var(--color-primary-variant);
1846
- outline-offset: 2px;
1847
- outline-style: solid;
1848
- outline-width: 3px;
1849
- transition: outline-offset 0.2s linear;
1850
- }
1851
- table {
1852
- width: 100%;
1853
- border-spacing: 0;
1854
- }
1855
- table,
1856
- :host table thead tr:last-child th,
1857
- :host table thead tr:last-child td {
1858
- border-width: 0;
1859
- border-bottom-width: calc(var(--border-width) * 2);
1860
- border-style: solid;
1861
- border-color: var(--color-primary-variant);
1862
- }
1863
- th {
1864
- background-color: var(--color-light);
1865
- }
1866
- th div {
1867
- width: 100%;
1868
- display: flex;
1869
- gap: 0.5rem;
1870
- grid-template-columns: 1fr auto;
1871
- align-items: center;
1872
- }
1873
- tr:nth-child(even) {
1874
- background-color: var(--color-mute);
1875
- }
1876
- th,
1877
- td {
1878
- padding: 0.5rem;
1879
- }
1880
- th[aria-sort='ascending'],
1881
- th[aria-sort='descending'] {
1882
- font-weight: 700;
1883
- }
1884
- @media (min-width: 1024px) {
1885
- div.pagination kol-pagination {
1886
- display: flex;
1887
- align-items: center;
1888
- }
1889
- }
1890
- `,
1891
- "KOL-NAV": css`
1892
- * {
1893
- margin: 0;
1894
- padding: 0;
1895
- }
1896
- nav {
1897
- font-family: var(--font-family);
1898
- font-size: var(--font-size);
1899
- background-color: var(--color-mute);
1900
- width: 100%;
1901
- }
1902
- ul {
1903
- list-style: none;
1904
- }
1905
- kol-link-wc,
1906
- a {
1907
- height: 100%;
1908
- min-height: var(--a11y-min-size);
1909
- display: flex;
1910
- place-items: center;
1911
- }
1912
- .entry > kol-span-wc > span {
1913
- width: 100%;
1914
- }
1915
- .entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
1916
- background-color: var(--color-light);
1917
- text-decoration: none;
1918
- color: var(--color-primary);
1919
- width: 100%;
1920
- display: flex;
1921
- align-items: center;
1922
- font-style: normal;
1923
- line-height: 1.5rem;
1924
- min-height: var(--a11y-min-size);
1925
- min-width: var(--a11y-min-size);
1926
- transition-duration: 0.5s;
1927
- transition-property: background-color, color, border-color;
1928
- letter-spacing: 0.175px;
1929
- }
1930
- .entry > :is(kol-link-wc, kol-button-wc):first-child :is(a, button) {
1931
- color: var(--color-primary);
1932
- text-decoration: none;
1933
- }
1934
- .entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
1935
- border-left-color: var(--color-primary-variant);
1936
- background-color: var(--color-primary-variant);
1937
- }
1938
- .entry > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child:hover > :is(a, button, span) {
1939
- color: var(--color-primary-variant);
1940
- font-weight: 700;
1941
- letter-spacing: unset;
1942
- }
1943
- .selected > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
1944
- background-color: var(--color-primary-variant);
1945
- color: var(--color-primary);
1946
- font-weight: 700;
1947
- }
1948
- .selected > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child > :is(a, button, span) {
1949
- font-weight: 700;
1950
- }
1951
- .selected :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
1952
- color: var(--color-primary-variant);
1953
- letter-spacing: unset;
1954
- }
1955
- .entry > kol-span-wc > span,
1956
- .entry :is(a, button) {
1957
- border-left-color: transparent;
1958
- border-left-style: solid;
1959
- border-left-width: 0.5rem;
1960
- padding: 0.75rem 0.5rem 0.75rem 0.25rem;
1961
- }
1962
- .selected :is(a, button),
1963
- [exportparts*='selected'] a {
1964
- border-left-color: var(--color-primary);
1965
- } /** Compact mode */
1966
- .entry.compact :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
1967
- place-items: center;
1968
- }
1969
- .entry.compact > kol-span-wc > span {
1970
- flex-direction: column;
1971
- }
1972
- .entry.compact > kol-span-wc > span,
1973
- .entry.compact :is(a, button) {
1974
- padding-left: 0;
1975
- }
1976
- `,
1977
- "KOL-CARD": css`
1978
- /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */
1979
- :host > div {
1980
- display: grid;
1981
- width: 100%;
1982
- height: 100%;
1983
- background-color: var(--color-light);
1984
- grid-template-rows: min-content 2fr min-content;
1985
- box-shadow: 0 0 0.25rem var(--color-subtle);
1986
- border-radius: var(--border-radius);
1987
- }
1988
- :host kol-heading-wc {
1989
- line-height: 1.75rem;
1990
- }
1991
- :host div.header {
1992
- padding: 1rem 1rem 0.5rem 1rem;
1993
- }
1994
- :host div.content {
1995
- padding: 0.5rem 1rem 1rem;
1996
- overflow: hidden;
1997
- }
1998
- :host div.footer {
1999
- padding: 0.5rem 1rem;
2000
- }
2001
- `,
2002
- "KOL-INPUT-CHECKBOX": css`
2003
- :host kol-input {
2004
- display: grid;
2005
- align-items: center;
2006
- justify-items: left;
2007
- width: 100%;
2008
- min-height: var(--a11y-min-size);
2009
- gap: 0.4rem;
2010
- }
2011
- :host kol-input.default {
2012
- grid-template-columns: 1.5rem auto;
2013
- }
2014
- :host kol-input.switch {
2015
- grid-template-columns: 3.5rem auto;
2016
- }
2017
- :host kol-input.button {
2018
- gap: 0.4rem 0;
2019
- }
2020
- .checkbox-container {
2021
- justify-content: flex-start;
2022
- }
2023
- :host kol-input > div.input {
2024
- display: inherit;
2025
- min-height: var(--a11y-min-size);
2026
- order: 2;
2027
- }
2028
- :host kol-input > div.input input {
2029
- margin: 0px;
2030
- }
2031
- :host kol-input > label {
2032
- cursor: pointer;
2033
- order: 3;
2034
- }
2035
- :host kol-input > kol-alert.error {
2036
- order: 1;
2037
- padding-top: calc(var(--spacing) / 2);
2038
- grid-column: span 2 / auto;
2039
- }
2040
- :host kol-input.error {
2041
- border-left: 3px solid var(--color-danger);
2042
- padding-left: 1rem;
2043
- }
2044
- :host kol-input.error input:focus,
2045
- kol-input.error select:focus,
2046
- kol-input.error textarea:focus {
2047
- outline-color: var(--color-danger) !important;
2048
- }
2049
- :host kol-input.error kol-alert.error {
2050
- color: var(--color-danger);
2051
- font-weight: 700;
2052
- }
2053
- :host input {
2054
- cursor: pointer;
2055
- order: 1;
2056
- width: 100%;
2057
- border-color: var(--color-subtle);
2058
- border-width: 2px;
2059
- border-style: solid;
2060
- border-radius: var(--border-radius);
2061
- line-height: 24px;
2062
- font-size: 1rem;
2063
- }
2064
- :host input:hover {
2065
- border-color: var(--color-primary);
2066
- box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
2067
- }
2068
- :host input:focus:hover {
2069
- box-shadow: none;
2070
- }
2071
- :host input:active {
2072
- box-shadow: none;
2073
- }
2074
- :host kol-alert {
2075
- display: block;
2076
- width: 100%;
2077
- } /* CHECKBOX */
2078
- :host kol-input label span {
2079
- margin-top: 0.125rem;
2080
- }
2081
- :host .required label > span::after {
2082
- content: '*';
2083
- padding-left: 0.125em;
2084
- }
2085
- :host kol-input input[type='checkbox'] {
2086
- appearance: none;
2087
- background-color: white;
2088
- cursor: pointer;
2089
- transition: 0.5s;
2090
- }
2091
- :host kol-input input[type='checkbox']:checked {
2092
- background-color: var(--color-primary);
2093
- border-color: var(--color-primary);
2094
- }
2095
- :host kol-input.default input[type='checkbox'] {
2096
- border-radius: var(--border-radius);
2097
- height: calc(6 * 0.25rem);
2098
- min-width: calc(6 * 0.25rem);
2099
- width: calc(6 * 0.25rem);
2100
- }
2101
- :host kol-input.default input[type='checkbox']:indeterminate {
2102
- background-color: var(--color-primary);
2103
- }
2104
- :host kol-input.default .icon {
2105
- color: var(--color-light);
2106
- margin-left: 0.25rem;
2107
- }
2108
- :host kol-input.switch input[type='checkbox'] {
2109
- background-color: var(--color-subtle);
2110
- border-radius: 1.25em;
2111
- border-width: 0;
2112
- display: block;
2113
- height: 1.5em;
2114
- min-width: 3.5em;
2115
- position: relative;
2116
- width: 3.5em;
2117
- }
2118
- :host kol-input.switch input[type='checkbox']:before {
2119
- width: 1.25em;
2120
- height: 1.25em;
2121
- left: calc(0.25em - 2px);
2122
- top: calc(0.25em - 2px);
2123
- border-radius: 1.25em;
2124
- background-color: white;
2125
- position: absolute;
2126
- }
2127
- :host kol-input.switch input[type='checkbox']:checked {
2128
- background-color: var(--color-primary);
2129
- }
2130
- :host kol-input.switch input[type='checkbox']:checked:before {
2131
- transform: translateX(2em);
2132
- }
2133
- :host kol-input.switch input[type='checkbox']:indeterminate:before {
2134
- transform: translateX(1em);
2135
- }
2136
- .switch {
2137
- & .icon {
2138
- width: 1.25em;
2139
- height: 1.25em;
2140
- left: 2px;
2141
- }
2142
-
2143
- &.checked .icon {
2144
- transform: translate(2em, -50%);
2145
- }
2146
-
2147
- &.indeterminate .icon {
2148
- transform: translate(1em, -50%);
2149
- }
2150
- }
2151
- :host .disabled {
2152
- opacity: 0.33;
2153
- }
2154
- .button:focus-within {
2155
- border-radius: var(--border-radius);
2156
- outline-color: var(--color-primary-variant);
2157
- outline-offset: 2px;
2158
- outline-style: solid;
2159
- outline-width: calc(var(--border-width) * 2);
2160
- }
2161
- `,
2162
- "KOL-INPUT-RADIO": css`
2163
- label {
2164
- cursor: pointer;
2165
- display: grid;
2166
- line-height: 20px;
2167
- gap: calc(var(--spacing) * 2);
2168
- width: 100%;
2169
- }
2170
- input {
2171
- cursor: pointer;
2172
- width: 100%;
2173
- border-color: var(--color-subtle);
2174
- border-width: 2px;
2175
- border-style: solid;
2176
- border-radius: 5px;
2177
- line-height: 24px;
2178
- }
2179
- input:hover {
2180
- border-color: var(--color-primary);
2181
- box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
2182
- }
2183
- input:focus:hover {
2184
- box-shadow: none;
2185
- }
2186
- input:hover {
2187
- border-color: var(--color-primary);
2188
- }
2189
- kol-alert {
2190
- display: block;
2191
- width: 100%;
2192
- }
2193
- .required legend > span::after {
2194
- content: '*';
2195
- padding-left: 0.125em;
2196
- } /* RADIO */
2197
- fieldset {
2198
- border: 0px;
2199
- margin: 0px;
2200
- padding: 0px;
2201
- display: grid;
2202
- gap: 0.25em;
2203
- }
2204
- fieldset div {
2205
- align-items: center;
2206
- cursor: pointer;
2207
- display: flex;
2208
- flex-direction: row;
2209
- gap: 0.5rem;
2210
- margin: 0;
2211
- min-height: var(--a11y-min-size);
2212
- position: relative;
2213
- }
2214
- fieldset div label {
2215
- cursor: pointer;
2216
- display: flex;
2217
- padding-left: calc(var(--spacing) / 2);
2218
- width: 100%;
2219
- }
2220
- fieldset div label span {
2221
- margin-top: 0.125em;
2222
- }
2223
- fieldset div input[type='radio'] {
2224
- appearance: none;
2225
- transition: 0.5s;
2226
- border-radius: 100%;
2227
- height: calc(6 * 0.25rem);
2228
- min-width: calc(6 * 0.25rem);
2229
- width: calc(6 * 0.25rem);
2230
- }
2231
- fieldset div input[type='radio']:before {
2232
- content: '';
2233
- cursor: pointer;
2234
- border-radius: 100%;
2235
- display: block;
2236
- }
2237
- fieldset div input[type='radio']:checked:before {
2238
- background-color: var(--color-primary);
2239
- }
2240
- fieldset div input[type='radio']:disabled {
2241
- cursor: not-allowed;
2242
- background-color: var(--color-mute-variant);
2243
- }
2244
- kol-alert.error {
2245
- order: 1;
2246
- }
2247
- fieldset legend {
2248
- order: 2;
2249
- display: contents;
2250
- }
2251
- fieldset kol-input {
2252
- order: 3;
2253
- }
2254
- fieldset.error {
2255
- padding-left: 1rem;
2256
- border-left: 3px solid var(--color-danger);
2257
- }
2258
- kol-alert.error {
2259
- color: var(--color-danger);
2260
- font-weight: 700;
2261
- }
2262
- fieldset.error input:focus,
2263
- fieldset.error select:focus,
2264
- fieldset.error textarea:focus {
2265
- outline-color: var(--color-danger) !important;
2266
- }
2267
- fieldset.error kol-alert.error {
2268
- margin-left: -0.25em;
2269
- color: var(--color-danger);
2270
- font-weight: 700;
2271
- }
2272
- .disabled {
2273
- opacity: 0.33;
2274
- }
2275
- fieldset.horizontal {
2276
- display: flex;
2277
- flex-wrap: wrap;
2278
- gap: var(--spacing) calc(var(--spacing) * 2);
2279
- }
2280
- fieldset.horizontal legend {
2281
- display: inline-block;
2282
- margin-bottom: calc(var(--spacing) / 2);
2283
- }
2284
- fieldset .input-slot {
2285
- gap: var(--spacing);
2286
- }
2287
- fieldset div label {
2288
- padding-left: 0;
2289
- }
2290
- `,
2291
- "KOL-TOAST-CONTAINER": css`
2292
- :host {
2293
- top: 1rem;
2294
- right: 1rem;
2295
- width: 440px;
2296
- }
2297
- `,
2298
- "KOL-TOAST": css`
2299
- .toast {
2300
- margin-top: 1rem;
2301
- }
2302
- `,
2303
- "KOL-TABS": css`
2304
- button:disabled {
2305
- opacity: 0.5;
2306
- cursor: not-allowed;
2307
- }
2308
- :host kol-button-group-wc {
2309
- display: inline-flex;
2310
- gap: 2rem;
2311
- flex-wrap: wrap;
2312
- }
2313
- button {
2314
- box-sizing: border-box;
2315
- background-color: transparent;
2316
- border: 0;
2317
- border-radius: var(--border-radius);
2318
- font-style: normal;
2319
- font-weight: 700;
2320
- font-size: 18px;
2321
- line-height: 22px;
2322
- min-height: var(--a11y-min-size);
2323
- min-width: var(--a11y-min-size);
2324
- color: var(--color-subtle);
2325
- padding: 0;
2326
- }
2327
- button:hover {
2328
- color: var(--color-primary);
2329
- }
2330
- button.primary,
2331
- button.selected {
2332
- color: var(--color-primary);
2333
- }
2334
- button kol-span-wc > span {
2335
- border-bottom: 0.25em solid;
2336
- }
2337
- button kol-span-wc > span {
2338
- gap: 0.5rem;
2339
- }
2340
- :host > div > div {
2341
- padding: 0.25em 0;
2342
- }
2343
- div[role='tabpanel'] {
2344
- height: 100%;
2345
- }
2346
- div.grid {
2347
- height: 100%;
2348
- }
2349
- :host > .tabs-align-right {
2350
- display: grid;
2351
- grid-template-columns: 1fr auto;
2352
- }
2353
- :host > .tabs-align-right kol-button-group-wc {
2354
- display: grid;
2355
- order: 2;
2356
- }
2357
- :host > .tabs-align-left {
2358
- display: grid;
2359
- grid-template-columns: auto 1fr;
2360
- }
2361
- :host > .tabs-align-left kol-button-group-wc {
2362
- display: grid;
2363
- order: 0;
2364
- }
2365
- :host > .tabs-align-bottom {
2366
- display: grid;
2367
- grid-template-rows: 1fr auto;
2368
- }
2369
- :host > .tabs-align-bottom kol-button-group-wc {
2370
- order: 2;
2371
- }
2372
- :host > .tabs-align-bottom kol-button-group-wc > div {
2373
- display: flex;
2374
- }
2375
- :host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {
2376
- margin: 0px 1rem 0px 0px;
2377
- }
2378
- :host > .tabs-align-bottom > kol-button-group-wc > div > div {
2379
- margin: 0px 1rem;
2380
- }
2381
- :host > .tabs-align-top {
2382
- display: grid;
2383
- grid-template-rows: auto 1fr;
2384
- }
2385
- :host > .tabs-align-top kol-button-group-wc {
2386
- order: 0;
2387
- }
2388
- :host > .tabs-align-top kol-button-group-wc > div {
2389
- display: flex;
2390
- }
2391
- :host > .tabs-align-top > kol-button-group-wc > div > div:first-child {
2392
- margin: 0px 1rem 0px 0px;
2393
- }
2394
- :host > .tabs-align-top > kol-button-group-wc > div > div {
2395
- margin: 0px 1rem;
2396
- }
2397
- :host > div {
2398
- display: grid;
2399
- }
2400
- :host > div.tabs-align-left {
2401
- grid-template-columns: auto 1fr;
2402
- }
2403
- :host > div.tabs-align-right {
2404
- grid-template-columns: 1fr auto;
2405
- }
2406
- :host > .tabs-align-left kol-button-group-wc,
2407
- :host > .tabs-align-top kol-button-group-wc {
2408
- order: 0;
2409
- }
2410
- :host > .tabs-align-bottom kol-button-group-wc,
2411
- :host > .tabs-align-right kol-button-group-wc {
2412
- order: 1;
2413
- }
2414
- :host > .tabs-align-left kol-button-group-wc,
2415
- :host > .tabs-align-right kol-button-group-wc {
2416
- gap: inherit;
2417
- }
2418
- :host > div.tabs-align-left kol-button-group-wc > div,
2419
- :host > div.tabs-align-left kol-button-group-wc > div > div,
2420
- :host > div.tabs-align-right kol-button-group-wc > div,
2421
- :host > div.tabs-align-right kol-button-group-wc > div > div {
2422
- display: grid;
2423
- }
2424
- :host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,
2425
- :host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {
2426
- width: 100%;
2427
- }
2428
- :host > div.tabs-align-bottom kol-button-group-wc div,
2429
- :host > div.tabs-align-top kol-button-group-wc div {
2430
- display: flex;
2431
- flex-wrap: wrap;
2432
- }
2433
- :host kol-button-group-wc button {
2434
- border: none;
2435
- }
2436
- `,
2437
- "KOL-PAGINATION": css`
2438
- :host {
2439
- display: grid;
2440
- gap: 1rem;
2441
- }
2442
- :host .navigation-list {
2443
- display: inline-flex;
2444
- flex-wrap: wrap;
2445
- align-items: center;
2446
- gap: 0.5rem;
2447
- }
2448
- :host .selected button {
2449
- min-width: var(--a11y-min-size);
2450
- min-height: var(--a11y-min-size);
2451
- display: grid;
2452
- place-items: center;
2453
- font-family: var(--font-family);
2454
- cursor: not-allowed;
2455
- font-weight: 700;
2456
- border-radius: 50%;
2457
- border: none;
2458
- font-style: normal;
2459
- text-align: center;
2460
- width: inherit;
2461
- transition-duration: 0.5s;
2462
- transition-property: background-color, color, border-color;
2463
- color: var(--color-primary);
2464
- background-color: var(--color-mute-variant);
2465
- }
2466
- :host > div > span {
2467
- align-self: flex-end;
2468
- padding-bottom: 0.5rem;
2469
- color: var(--color-primary);
2470
- }
2471
- `,
2472
- "KOL-INPUT-RANGE": css`
2473
- .inputs-wrapper {
2474
- gap: 1rem;
2475
- }
2476
- kol-input {
2477
- gap: 0.25rem;
2478
- }
2479
- kol-input .error {
2480
- order: 1;
2481
- }
2482
- kol-input label {
2483
- order: 2;
2484
- }
2485
- kol-input .input {
2486
- order: 3;
2487
- }
2488
- kol-input .hint {
2489
- order: 4;
2490
- font-size: 0.9rem;
2491
- font-style: italic;
2492
- }
2493
- input::placeholder {
2494
- color: var(--color-subtle);
2495
- }
2496
- .input {
2497
- background-color: var(--color-light);
2498
- border-color: var(--color-subtle);
2499
- border-radius: var(--border-radius);
2500
- border-style: solid;
2501
- border-width: 2px;
2502
- padding: 0 0.5rem;
2503
- }
2504
- .input > kol-icon {
2505
- width: 1rem;
2506
- }
2507
- .input.icon-left > kol-icon:first-child {
2508
- margin-right: 0.5rem;
2509
- }
2510
- .input.icon-right > kol-icon:last-child {
2511
- margin-left: 0.5rem;
2512
- }
2513
- .input:is(.icon-left, .icon-right) {
2514
- padding-left: 1rem;
2515
- padding-right: 1rem;
2516
- }
2517
- .input:hover {
2518
- border-color: var(--color-primary);
2519
- }
2520
- input:read-only,
2521
- input:disabled {
2522
- cursor: not-allowed;
2523
- }
2524
- .required label > span::after {
2525
- content: '*';
2526
- padding-left: 0.125em;
2527
- }
2528
- kol-input.error {
2529
- border-left: 3px solid var(--color-danger);
2530
- padding-left: 1rem;
2531
- }
2532
- kol-input.error .input:focus-within {
2533
- outline-color: var(--color-danger) !important;
2534
- }
2535
- kol-input.error kol-alert.error {
2536
- color: var(--color-danger);
2537
- font-weight: 700;
2538
- }
2539
- kol-input.disabled :is(input, label) {
2540
- opacity: 1;
2541
- }
2542
- kol-input.disabled :is(.input) {
2543
- background-color: var(--color-mute);
2544
- border-color: var(--color-mute-variant);
2545
- color: var(--color-text);
2546
- }
2547
- `,
2548
- "KOL-LINK-BUTTON": css`
2549
- :is(a, button):focus {
2550
- outline: none;
2551
- }
2552
- :is(a, button):focus kol-span-wc {
2553
- outline-color: var(--color-primary-variant);
2554
- outline-offset: 2px;
2555
- outline-style: solid;
2556
- outline-width: calc(var(--border-width) * 2);
2557
- transition: outline-offset 0.2s linear;
2558
- }
2559
- :is(a, button) > kol-span-wc {
2560
- font-weight: 700;
2561
- border-radius: var(--a11y-min-size);
2562
- border-style: solid;
2563
- outline-width: calc(var(--border-width) * 2);
2564
- min-height: var(--a11y-min-size);
2565
- min-width: var(--a11y-min-size);
2566
- padding: 8px 14px;
2567
- text-align: center;
2568
- transition-duration: 0.5s;
2569
- transition-property: background-color, color, border-color;
2570
- }
2571
- :is(a, button):disabled > kol-span-wc {
2572
- cursor: not-allowed;
2573
- opacity: 0.5;
2574
- }
2575
- .primary :is(a, button) > kol-span-wc,
2576
- .primary :is(a, button):disabled:hover > kol-span-wc {
2577
- background-color: var(--color-primary);
2578
- border-color: var(--color-primary);
2579
- color: var(--color-light);
2580
- }
2581
- .secondary :is(a, button) > kol-span-wc,
2582
- .secondary :is(a, button):disabled:hover > kol-span-wc,
2583
- .normal :is(a, button) > kol-span-wc,
2584
- .normal :is(a, button):disabled:hover > kol-span-wc {
2585
- background-color: var(--color-light);
2586
- border-color: var(--color-primary);
2587
- color: var(--color-primary);
2588
- }
2589
- .danger :is(a, button) > kol-span-wc,
2590
- .danger :is(a, button):disabled:hover > kol-span-wc {
2591
- background-color: var(--color-danger);
2592
- border-color: var(--color-danger);
2593
- color: var(--color-light);
2594
- }
2595
- .ghost :is(a, button) > kol-span-wc,
2596
- .ghost :is(a, button):disabled:hover > kol-span-wc {
2597
- border-color: var(--color-light);
2598
- background-color: var(--color-light);
2599
- box-shadow: none;
2600
- color: var(--color-primary);
2601
- } /*-----------*/
2602
- .primary :is(a, button):active > kol-span-wc,
2603
- .primary :is(a, button):hover > kol-span-wc,
2604
- .secondary :is(a, button):active > kol-span-wc,
2605
- .secondary :is(a, button):hover > kol-span-wc,
2606
- .normal :is(a, button):active > kol-span-wc,
2607
- .normal :is(a, button):hover > kol-span-wc,
2608
- .danger :is(a, button):active > kol-span-wc,
2609
- .danger :is(a, button):hover > kol-span-wc,
2610
- .ghost :is(a, button):active > kol-span-wc,
2611
- .ghost :is(a, button):hover > kol-span-wc {
2612
- background-color: var(--color-primary-variant);
2613
- border-color: var(--color-primary-variant);
2614
- box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
2615
- color: var(--color-light);
2616
- }
2617
- .danger :is(a, button):active > kol-span-wc,
2618
- .danger :is(a, button):hover > kol-span-wc {
2619
- background-color: var(--color-danger);
2620
- border-color: var(--color-danger);
2621
- }
2622
- :is(a, button):disabled:hover > kol-span-wc,
2623
- :is(a, button):focus:hover > kol-span-wc {
2624
- box-shadow: none;
2625
- }
2626
- .primary :is(a, button):active > kol-span-wc,
2627
- .secondary :is(a, button):active > kol-span-wc,
2628
- .normal :is(a, button):active > kol-span-wc,
2629
- .danger :is(a, button):active > kol-span-wc,
2630
- .ghost :is(a, button):active > kol-span-wc {
2631
- border-color: var(--color-light);
2632
- box-shadow: none;
2633
- outline: none;
2634
- }
2635
- :is(a, button).hide-label > kol-span-wc {
2636
- padding: 0.8rem;
2637
- width: unset;
2638
- }
2639
- :is(a, button).hide-label > kol-span-wc > span > span {
2640
- display: none;
2641
- }
2642
- :is(a, button).loading > kol-span-wc kol-icon {
2643
- animation: spin 5s infinite linear;
2644
- }
2645
- /** small ghost button */
2646
- .ghost :is(a, button).small > kol-span-wc {
2647
- border: none;
2648
- background-color: transparent;
2649
- box-shadow: none;
2650
- }
2651
- .ghost :is(a, button).small > kol-span-wc > span {
2652
- border-radius: 1.5em;
2653
- border-style: solid;
2654
- border-width: var(--border-width);
2655
- border-color: var(--color-light);
2656
- background-color: var(--color-light);
2657
- }
2658
- .ghost :is(a, button).small:active > kol-span-wc > span,
2659
- .ghost :is(a, button).small:hover > kol-span-wc > span,
2660
- .ghost :is(a, button).small.transparent:active > kol-span-wc > span,
2661
- .ghost :is(a, button).small.transparent:hover > kol-span-wc > span {
2662
- background-color: var(--color-primary-variant);
2663
- border-color: var(--color-primary-variant);
2664
- box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
2665
- color: var(--color-light);
2666
- } /** :is(a,button) with transparent background */
2667
- :is(a, button).transparent > kol-span-wc > span,
2668
- .ghost :is(a, button).small.transparent > kol-span-wc > span,
2669
- :is(a, button).transparent > kol-span-wc {
2670
- background-color: transparent;
2671
- border-color: transparent;
2672
- }
2673
- `,
2674
- "KOL-BUTTON-LINK": css`
2675
- :is(a, button) {
2676
- color: var(--color-primary);
2677
- font-style: normal;
2678
- font-weight: 400;
2679
- text-decoration-line: underline;
2680
- font-size: inherit;
2681
- }
2682
- :is(a, button):focus {
2683
- outline: none;
2684
- }
2685
- :is(a, button):focus kol-span-wc {
2686
- border-radius: var(--border-radius);
2687
- outline: calc(var(--border-width) * 2) solid;
2688
- }
2689
- :is(a, button):hover {
2690
- text-decoration-thickness: 0.25em;
2691
- }
2692
- :is(a, button):visited {
2693
- color: var(--visited);
2694
- }
2695
- .hidden {
2696
- display: none;
2697
- visibility: hidden;
2698
- }
2699
- .skip {
2700
- left: -99999px;
2701
- overflow: hidden;
2702
- position: absolute;
2703
- z-index: 9999999;
2704
- }
2705
- .skip:focus {
2706
- background: white;
2707
- left: unset;
2708
- position: unset;
2709
- }
2710
- `,
2711
- "KOL-ABBR": css`
2712
- abbr {
2713
- border-bottom: dashed var(--color-text) 1px;
2714
- text-decoration: none !important;
2715
- }
2716
- `,
2717
- "KOL-BREADCRUMB": css`
2718
- li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {
2719
- font-size: 0.75rem;
2720
- color: var(--color-subtle);
2721
- }
2722
- kol-link::part(icon) {
2723
- font-size: 1.25rem;
2724
- }
2725
- ul li > :is(span, kol-link) {
2726
- line-height: 1.25rem;
2727
- height: 20px;
2728
- }
2729
- ul li:last-child > span {
2730
- color: var(--color-subtle);
2731
- }
2732
- `,
2733
- "KOL-MODAL": css`
2734
- :host .overlay .modal {
2735
- max-height: calc(100% - 32px);
2736
- }
2737
- `,
2738
- "KOL-ICON": css`
2739
- :host {
2740
- width: 1em;
2741
- height: 1em;
2742
- }
2743
- :host > i {
2744
- width: 1em;
2745
- height: 1em;
2746
- }
2747
- `,
2748
- "KOL-SKIP-NAV": css`
2749
- kol-link-wc > a > kol-span-wc {
2750
- border-radius: var(--a11y-min-size);
2751
- border-style: solid;
2752
- border-width: var(--border-width);
2753
- gap: calc(var(--spacing) * 2);
2754
- line-height: 1rem;
2755
- padding: 8px 14px;
2756
- background-color: var(--color-primary-variant);
2757
- border-color: var(--color-primary-variant);
2758
- color: var(--color-light);
2759
- cursor: pointer;
2760
- }
2761
- `,
2762
- "KOL-SPLIT-BUTTON": `.popover {
2763
- background: #fff;
2764
- }`
505
+ GLOBAL: globalCss,
506
+ "KOL-ABBR": abbrCss,
507
+ "KOL-ACCORDION": accordionCss,
508
+ "KOL-ALERT": alertCss,
509
+ "KOL-BADGE": badgeCss,
510
+ "KOL-BREADCRUMB": breadcrumbCss,
511
+ "KOL-BUTTON": buttonCss,
512
+ "KOL-BUTTON-GROUP": buttonGroupCss,
513
+ "KOL-BUTTON-LINK": buttonLinkCss,
514
+ "KOL-CARD": cardCss,
515
+ "KOL-DETAILS": detailsCss,
516
+ "KOL-HEADING": headingCss,
517
+ "KOL-ICON": iconCss,
518
+ "KOL-INDENTED-TEXT": indentedTextCss,
519
+ "KOL-INPUT-CHECKBOX": inputCheckboxCss,
520
+ "KOL-INPUT-COLOR": inputColorCss,
521
+ "KOL-INPUT-DATE": inputDateCss,
522
+ "KOL-INPUT-EMAIL": inputEmailCss,
523
+ "KOL-INPUT-FILE": inputFileCss,
524
+ "KOL-INPUT-NUMBER": inputNumberCss,
525
+ "KOL-INPUT-PASSWORD": inputPasswordCss,
526
+ "KOL-INPUT-RADIO": inputRadioCss,
527
+ "KOL-INPUT-RANGE": inputRangeCss,
528
+ "KOL-INPUT-TEXT": inputTextCss,
529
+ "KOL-LINK": linkCss,
530
+ "KOL-LINK-BUTTON": linkButtonCss,
531
+ "KOL-MODAL": modalCss,
532
+ "KOL-NAV": navCss,
533
+ "KOL-PAGINATION": paginationCss,
534
+ "KOL-PROGRESS": progressCss,
535
+ "KOL-SELECT": selectCss,
536
+ "KOL-SKIP-NAV": skipNavCss,
537
+ "KOL-SPIN": spinCss,
538
+ "KOL-SPLIT-BUTTON": splitButtonCss,
539
+ "KOL-TABLE": tableCss,
540
+ "KOL-TABS": tabsCss,
541
+ "KOL-TEXTAREA": textareaCss,
542
+ "KOL-TOAST-CONTAINER": toastContainerCss
2765
543
  });
2766
544
 
2767
545
  exports.DEFAULT = DEFAULT;