@public-ui/theme-default 1.7.10-rc.0 → 1.7.11

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