@public-ui/theme-default 2.0.4 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +157 -131
- package/dist/index.d.ts +4 -0
- package/dist/index.mjs +157 -131
- package/package.json +7 -7
package/dist/index.cjs
CHANGED
|
@@ -586,78 +586,88 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
|
|
|
586
586
|
TagEnum2[TagEnum2["input-radio"] = 24] = "input-radio";
|
|
587
587
|
TagEnum2[TagEnum2["input-range"] = 25] = "input-range";
|
|
588
588
|
TagEnum2[TagEnum2["input-text"] = 26] = "input-text";
|
|
589
|
-
TagEnum2[TagEnum2["
|
|
590
|
-
TagEnum2[TagEnum2["link
|
|
591
|
-
TagEnum2[TagEnum2["link-
|
|
592
|
-
TagEnum2[TagEnum2["
|
|
593
|
-
TagEnum2[TagEnum2["
|
|
594
|
-
TagEnum2[TagEnum2["
|
|
595
|
-
TagEnum2[TagEnum2["
|
|
596
|
-
TagEnum2[TagEnum2["
|
|
597
|
-
TagEnum2[TagEnum2["
|
|
598
|
-
TagEnum2[TagEnum2["
|
|
599
|
-
TagEnum2[TagEnum2["
|
|
600
|
-
TagEnum2[TagEnum2["
|
|
601
|
-
TagEnum2[TagEnum2["
|
|
602
|
-
TagEnum2[TagEnum2["
|
|
603
|
-
TagEnum2[TagEnum2["
|
|
604
|
-
TagEnum2[TagEnum2["
|
|
605
|
-
TagEnum2[TagEnum2["
|
|
606
|
-
TagEnum2[TagEnum2["
|
|
607
|
-
TagEnum2[TagEnum2["
|
|
589
|
+
TagEnum2[TagEnum2["kolibri"] = 27] = "kolibri";
|
|
590
|
+
TagEnum2[TagEnum2["link"] = 28] = "link";
|
|
591
|
+
TagEnum2[TagEnum2["link-button"] = 29] = "link-button";
|
|
592
|
+
TagEnum2[TagEnum2["link-group"] = 30] = "link-group";
|
|
593
|
+
TagEnum2[TagEnum2["logo"] = 31] = "logo";
|
|
594
|
+
TagEnum2[TagEnum2["modal"] = 32] = "modal";
|
|
595
|
+
TagEnum2[TagEnum2["nav"] = 33] = "nav";
|
|
596
|
+
TagEnum2[TagEnum2["pagination"] = 34] = "pagination";
|
|
597
|
+
TagEnum2[TagEnum2["progress"] = 35] = "progress";
|
|
598
|
+
TagEnum2[TagEnum2["select"] = 36] = "select";
|
|
599
|
+
TagEnum2[TagEnum2["separator"] = 37] = "separator";
|
|
600
|
+
TagEnum2[TagEnum2["skip-nav"] = 38] = "skip-nav";
|
|
601
|
+
TagEnum2[TagEnum2["spin"] = 39] = "spin";
|
|
602
|
+
TagEnum2[TagEnum2["split-button"] = 40] = "split-button";
|
|
603
|
+
TagEnum2[TagEnum2["symbol"] = 41] = "symbol";
|
|
604
|
+
TagEnum2[TagEnum2["table"] = 42] = "table";
|
|
605
|
+
TagEnum2[TagEnum2["tabs"] = 43] = "tabs";
|
|
606
|
+
TagEnum2[TagEnum2["textarea"] = 44] = "textarea";
|
|
607
|
+
TagEnum2[TagEnum2["toast-container"] = 45] = "toast-container";
|
|
608
|
+
TagEnum2[TagEnum2["toolbar"] = 46] = "toolbar";
|
|
609
|
+
TagEnum2[TagEnum2["tooltip"] = 47] = "tooltip";
|
|
610
|
+
TagEnum2[TagEnum2["tree"] = 48] = "tree";
|
|
611
|
+
TagEnum2[TagEnum2["tree-item"] = 49] = "tree-item";
|
|
608
612
|
return TagEnum2;
|
|
609
613
|
})(TagEnum || {});
|
|
610
|
-
|
|
611
|
-
const
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
614
|
+
let DEV_MODE = null;
|
|
615
|
+
const getDevMode = () => DEV_MODE === true;
|
|
616
|
+
const LOG_STYLE = "color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000";
|
|
617
|
+
const mapToArray = (msg) => {
|
|
618
|
+
return Array.isArray(msg) ? msg : [msg];
|
|
619
|
+
};
|
|
620
|
+
const getLogLabel = (label) => {
|
|
621
|
+
return `%c${label}`;
|
|
622
|
+
};
|
|
623
|
+
const handleClassifier = (label, classifier) => {
|
|
624
|
+
if (typeof classifier === "string" && classifier.length > 0) {
|
|
625
|
+
return `${getLogLabel(label)} | ${classifier}`;
|
|
626
|
+
} else {
|
|
627
|
+
return getLogLabel(label);
|
|
621
628
|
}
|
|
622
|
-
|
|
623
|
-
|
|
629
|
+
};
|
|
630
|
+
const getShield = (label, options) => {
|
|
631
|
+
return [handleClassifier(label, options?.classifier), `${LOG_STYLE};${options?.overwriteStyle || ""}`];
|
|
632
|
+
};
|
|
633
|
+
const isDevModeOrForceLog = (devMode, forceLog) => devMode() || forceLog === true;
|
|
634
|
+
class Logger {
|
|
635
|
+
constructor(label, devMode) {
|
|
636
|
+
this.label = label;
|
|
637
|
+
this.devMode = devMode;
|
|
624
638
|
}
|
|
625
|
-
|
|
626
|
-
if (options?.forceLog
|
|
627
|
-
console.debug(...
|
|
639
|
+
debug(msg, options) {
|
|
640
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
641
|
+
console.debug(...getShield(this.label, options), ...mapToArray(msg));
|
|
628
642
|
}
|
|
629
643
|
}
|
|
630
|
-
|
|
631
|
-
if (options?.forceLog
|
|
632
|
-
console.info(...
|
|
644
|
+
info(msg, options) {
|
|
645
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
646
|
+
console.info(...getShield(this.label, options), ...mapToArray(msg));
|
|
633
647
|
}
|
|
634
648
|
}
|
|
635
|
-
|
|
636
|
-
if (options?.forceLog
|
|
637
|
-
console.trace(...
|
|
649
|
+
trace(msg, options) {
|
|
650
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
651
|
+
console.trace(...getShield(this.label, options), ...mapToArray(msg));
|
|
638
652
|
}
|
|
639
653
|
}
|
|
640
|
-
|
|
641
|
-
if (options?.forceLog
|
|
642
|
-
console.warn(...
|
|
654
|
+
warn(msg, options) {
|
|
655
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
656
|
+
console.warn(...getShield(this.label, options), ...mapToArray(msg));
|
|
643
657
|
}
|
|
644
658
|
}
|
|
645
|
-
|
|
646
|
-
if (options?.forceLog
|
|
647
|
-
console.error(...
|
|
659
|
+
error(msg, options) {
|
|
660
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
661
|
+
console.error(...getShield(this.label, options), ...mapToArray(msg));
|
|
648
662
|
}
|
|
649
663
|
}
|
|
650
|
-
|
|
651
|
-
if (options?.forceLog
|
|
652
|
-
throw new Error(...
|
|
664
|
+
throw(msg, options) {
|
|
665
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
666
|
+
throw new Error(...getShield(this.label, options), ...mapToArray(msg));
|
|
653
667
|
}
|
|
654
668
|
}
|
|
655
|
-
}
|
|
656
|
-
|
|
657
|
-
Log.shield = {
|
|
658
|
-
label: "%cKoliBri",
|
|
659
|
-
style: "color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000"
|
|
660
|
-
};
|
|
669
|
+
}
|
|
670
|
+
const Log = new Logger("KoliBri", getDevMode);
|
|
661
671
|
const devCache = /* @__PURE__ */ new Set();
|
|
662
672
|
const devHint = (msg, options) => {
|
|
663
673
|
if (devCache.has(msg) === false || !!options?.force) {
|
|
@@ -681,122 +691,135 @@ try {
|
|
|
681
691
|
|
|
682
692
|
const KoliBri = new te("kol", KeyEnum, TagEnum);
|
|
683
693
|
|
|
684
|
-
var css_248z$
|
|
685
|
-
const globalCss = css_248z$
|
|
694
|
+
var css_248z$E = "@layer kol-theme-global {\n :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 :host {\n background-color: transparent; /* Reset global background-color defined by components */\n }\n * {\n box-sizing: border-box;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n kol-input:is(.checkbox, .radio) input:focus,\n summary: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 kol-heading-wc {\n font-weight: 700;\n }\n kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: 0.5rem 0.75rem;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.5rem;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}";
|
|
695
|
+
const globalCss = css_248z$E;
|
|
696
|
+
|
|
697
|
+
var css_248z$D = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) 1px;\n text-decoration: none !important;\n }\n}";
|
|
698
|
+
const abbrCss = css_248z$D;
|
|
699
|
+
|
|
700
|
+
var css_248z$C = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n text-align: left;\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 :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 :host > div > kol-heading-wc button kol-span-wc > span {\n gap: 0.5em;\n }\n :host > div > kol-heading-wc button kol-icon {\n color: var(--color-primary);\n font-size: 1rem;\n }\n :host > div {\n width: 100%;\n height: 100%;\n display: grid;\n }\n :host > div div[class=header],\n :host > div[class*=open] div[class=content] {\n margin: 0;\n }\n :host > div div[class=content] {\n padding-left: 2.25em;\n padding-bottom: 12px;\n padding-right: 8px;\n }\n button:focus {\n outline: none;\n }\n :host > .accordion:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n}";
|
|
701
|
+
const accordionCss = css_248z$C;
|
|
702
|
+
|
|
703
|
+
var css_248z$B = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .msg {\n border-width: 0;\n }\n kol-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 kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n kol-alert-wc > .heading > div {\n display: grid;\n gap: 0.25rem;\n }\n .msg > .heading > kol-icon {\n place-self: baseline;\n }\n kol-alert-wc > .heading > kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\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 .card > .heading {\n padding: 0.5rem 1rem;\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: 1.25rem;\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: -4px;\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 .card > .heading kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: 1rem;\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: 1.25rem;\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%; /* 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 .close > button.hide-label kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: 1.2rem;\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
|
|
704
|
+
const alertCss = css_248z$B;
|
|
705
|
+
|
|
706
|
+
var css_248z$A = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
|
|
707
|
+
const avatarCss = css_248z$A;
|
|
686
708
|
|
|
687
|
-
var css_248z$z = "@layer kol-theme-component {\n
|
|
688
|
-
const
|
|
709
|
+
var css_248z$z = "@layer kol-theme-component {\n :host {\n display: inline-block;\n font-family: var(--font-family);\n font-size: inherit;\n }\n :host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n :host > span.smart-button {\n align-items: center;\n }\n :host > span kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\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 :host > span kol-span-wc {\n padding: 0.25rem 0.75rem;\n }\n :host > span > kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: 0.5rem;\n }\n :host > span > kol-span-wc > span {\n display: flex;\n gap: 0.25rem;\n }\n}";
|
|
710
|
+
const badgeCss = css_248z$z;
|
|
689
711
|
|
|
690
|
-
var css_248z$y = "@layer kol-theme-component {\n
|
|
691
|
-
const
|
|
712
|
+
var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {\n font-size: 0.75rem;\n color: var(--color-subtle);\n }\n kol-link::part(icon) {\n font-size: 1.25rem;\n }\n ul li > :is(span, kol-link) {\n line-height: 1.25rem;\n height: 20px;\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
713
|
+
const breadcrumbCss = css_248z$y;
|
|
692
714
|
|
|
693
|
-
var css_248z$x = "@layer kol-theme-component {\n
|
|
694
|
-
const
|
|
715
|
+
var css_248z$x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\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 .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 .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 .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 .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 .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 .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 :is(a, button):disabled:hover > kol-span-wc,\n :is(a, button):focus:hover > kol-span-wc {\n box-shadow: none;\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 :is(a, button).hide-label > kol-span-wc {\n padding: 0.8rem;\n width: unset;\n }\n :is(a, button).hide-label > kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > kol-span-wc kol-icon {\n animation: spin 5s infinite linear;\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 .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 .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 /** :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 }\n .access-key-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
|
|
716
|
+
const buttonCss = css_248z$x;
|
|
695
717
|
|
|
696
|
-
var css_248z$w = "@layer kol-theme-component {\n :host
|
|
697
|
-
const
|
|
718
|
+
var css_248z$w = "@layer kol-theme-component {\n :host > kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
|
|
719
|
+
const buttonGroupCss = css_248z$w;
|
|
698
720
|
|
|
699
|
-
var css_248z$v = "@layer kol-theme-component {\n
|
|
700
|
-
const
|
|
721
|
+
var css_248z$v = "@layer kol-theme-component {\n :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 :is(a, button):focus {\n outline: none;\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 a:hover:not([aria-disabled]),\n button:hover:not([disabled]) {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .access-key-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
|
|
722
|
+
const buttonLinkCss = css_248z$v;
|
|
701
723
|
|
|
702
|
-
var css_248z$u = "@layer kol-theme-component {\n :
|
|
703
|
-
const
|
|
724
|
+
var css_248z$u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* 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 :host kol-heading-wc {\n line-height: 1.75rem;\n }\n :host div.header {\n padding: 1rem 1rem 0.5rem 1rem;\n }\n :host div.content {\n padding: 0.5rem 1rem 1rem;\n overflow: hidden;\n }\n :host div.footer {\n padding: 0.5rem 1rem;\n }\n}";
|
|
725
|
+
const cardCss = css_248z$u;
|
|
704
726
|
|
|
705
|
-
var css_248z$t = "@layer kol-theme-component {\n
|
|
706
|
-
const
|
|
727
|
+
var css_248z$t = "@layer kol-theme-component {\n details > summary {\n border-radius: var(--border-radius);\n font-family: var(--font-family);\n }\n details kol-indented-text {\n margin: 0.25rem 0 0 0.65rem;\n }\n kol-icon {\n font-size: 1.2rem;\n }\n}";
|
|
728
|
+
const detailsCss = css_248z$t;
|
|
707
729
|
|
|
708
|
-
var css_248z$s = "@layer kol-theme-component {\n
|
|
709
|
-
const
|
|
730
|
+
var css_248z$s = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n color: inherit;\n font-style: normal;\n font-family: var(--font-family);\n }\n .headline-h1,\n .headline-h2,\n .headline-h3 {\n font-weight: 700;\n }\n .headline-h1 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n }\n .headline-h2 {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n .headline-h3 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n }\n}";
|
|
731
|
+
const headingCss = css_248z$s;
|
|
710
732
|
|
|
711
|
-
var css_248z$r = "@layer kol-theme-component {\n
|
|
712
|
-
const
|
|
733
|
+
var css_248z$r = "@layer kol-theme-component {\n :host {\n width: 1em;\n height: 1em;\n }\n :host > i {\n width: 1em;\n height: 1em;\n }\n}";
|
|
734
|
+
const iconCss = css_248z$r;
|
|
713
735
|
|
|
714
|
-
var css_248z$q = "@layer kol-theme-component {\n
|
|
715
|
-
const
|
|
736
|
+
var css_248z$q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :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 }\n}";
|
|
737
|
+
const indentedTextCss = css_248z$q;
|
|
716
738
|
|
|
717
|
-
var css_248z$p = "@layer kol-theme-component {\n .
|
|
718
|
-
const
|
|
739
|
+
var css_248z$p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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 :host kol-input.default {\n grid-template-columns: 1.5rem auto;\n }\n :host kol-input.switch {\n grid-template-columns: 3.5rem auto;\n }\n :host kol-input.button {\n gap: 0.4rem 0;\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n :host kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n :host kol-input > div.input input {\n margin: 0px;\n }\n :host kol-input > label {\n cursor: pointer;\n order: 3;\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 :host kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n :host kol-input.error input:focus,\n kol-input.error select:focus,\n kol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n :host kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\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 :host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host kol-alert {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host kol-input label span {\n margin-top: 0.125rem;\n }\n :host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n :host kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n :host kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\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 :host kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n :host kol-input.default .icon {\n color: var(--color-light);\n margin-left: 0.25rem;\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 :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 :host kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n :host kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n :host kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\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 .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n}";
|
|
740
|
+
const inputCheckboxCss = css_248z$p;
|
|
719
741
|
|
|
720
|
-
var css_248z$o = "@layer kol-theme-component {\n :host {\n
|
|
721
|
-
const
|
|
742
|
+
var css_248z$o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n border: none;\n }\n input[type=color] {\n border: none;\n min-height: 40px !important;\n }\n input[type=color] {\n background-color: transparent;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
743
|
+
const inputColorCss = css_248z$o;
|
|
722
744
|
|
|
723
|
-
var css_248z$n = "@layer kol-theme-component {\n :host
|
|
724
|
-
const
|
|
745
|
+
var css_248z$n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
746
|
+
const inputDateCss = css_248z$n;
|
|
725
747
|
|
|
726
|
-
var css_248z$m = "@layer kol-theme-component {\n :host
|
|
727
|
-
const
|
|
748
|
+
var css_248z$m = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
749
|
+
const inputEmailCss = css_248z$m;
|
|
728
750
|
|
|
729
|
-
var css_248z$l = "@layer kol-theme-component {\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n
|
|
730
|
-
const
|
|
751
|
+
var css_248z$l = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2px);\n }\n input {\n border: none;\n }\n input[type=file] {\n background-color: transparent;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-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 }\n}";
|
|
752
|
+
const inputFileCss = css_248z$l;
|
|
731
753
|
|
|
732
|
-
var css_248z$k = "@layer kol-theme-component {\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(input,
|
|
733
|
-
const
|
|
754
|
+
var css_248z$k = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
755
|
+
const inputNumberCss = css_248z$k;
|
|
734
756
|
|
|
735
|
-
var css_248z$j = "@layer kol-theme-component {\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(input,
|
|
736
|
-
const
|
|
757
|
+
var css_248z$j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-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 }\n}";
|
|
758
|
+
const inputPasswordCss = css_248z$j;
|
|
737
759
|
|
|
738
|
-
var css_248z$i = "@layer kol-theme-component {\n
|
|
739
|
-
const
|
|
760
|
+
var css_248z$i = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: 20px;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\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 input:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n kol-alert {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0px;\n margin: 0px;\n padding: 0px;\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\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 .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper 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 .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n kol-alert.error {\n order: 1;\n }\n fieldset legend {\n order: 2;\n display: contents;\n }\n fieldset kol-input {\n order: 3;\n }\n fieldset.error {\n border-left: 3px solid var(--color-danger);\n color: var(--color-danger);\n font-weight: 700;\n padding-left: 1rem;\n }\n fieldset.error input:focus,\n fieldset.error select:focus,\n fieldset.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n fieldset.error kol-alert.error {\n margin-left: -0.25em;\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n}";
|
|
761
|
+
const inputRadioCss = css_248z$i;
|
|
740
762
|
|
|
741
|
-
var css_248z$h = "@layer kol-theme-component {\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input
|
|
742
|
-
const
|
|
763
|
+
var css_248z$h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .inputs-wrapper {\n gap: 1rem;\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input.icon-left > kol-icon:first-child {\n margin-right: 0.5rem;\n }\n .input.icon-right > kol-icon:last-child {\n margin-left: 0.5rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(.input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
764
|
+
const inputRangeCss = css_248z$h;
|
|
743
765
|
|
|
744
|
-
var css_248z$g = "@layer kol-theme-component {\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(
|
|
745
|
-
const
|
|
766
|
+
var css_248z$g = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
|
|
767
|
+
const inputTextCss = css_248z$g;
|
|
746
768
|
|
|
747
|
-
var css_248z$f = "@layer kol-theme-component {\n
|
|
748
|
-
const
|
|
769
|
+
var css_248z$f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
|
|
770
|
+
const kolibriCss = css_248z$f;
|
|
749
771
|
|
|
750
|
-
var css_248z$e = "@layer kol-theme-component {\n
|
|
751
|
-
const
|
|
772
|
+
var css_248z$e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus {\n outline: none;\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 :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 .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 .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 .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 .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 .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 .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 :is(a, button):disabled:hover > kol-span-wc,\n :is(a, button):focus:hover > kol-span-wc {\n box-shadow: none;\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 :is(a, button).hide-label > kol-span-wc {\n padding: 0.8rem;\n width: unset;\n }\n :is(a, button).hide-label > kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > kol-span-wc kol-icon {\n animation: spin 5s infinite linear;\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 .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 .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 /** :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 }\n}";
|
|
773
|
+
const linkButtonCss = css_248z$e;
|
|
752
774
|
|
|
753
|
-
var css_248z$d = "@layer kol-theme-component {\n
|
|
754
|
-
const
|
|
775
|
+
var css_248z$d = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n a:hover:not([aria-disabled]),\n button:hover:not([disabled]) {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n}";
|
|
776
|
+
const linkCss = css_248z$d;
|
|
755
777
|
|
|
756
|
-
var css_248z$c = "@layer kol-theme-component {\n :
|
|
757
|
-
const
|
|
778
|
+
var css_248z$c = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32px);\n }\n}";
|
|
779
|
+
const modalCss = css_248z$c;
|
|
758
780
|
|
|
759
|
-
var css_248z$b = "@layer kol-theme-component {\n :
|
|
760
|
-
const
|
|
781
|
+
var css_248z$b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n nav {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: 0.5rem;\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n border-left: 2px solid transparent;\n padding-left: 0.5rem;\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 1rem;\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: 1rem;\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n font-weight: normal;\n border-left-color: transparent;\n }\n .expand-button {\n margin-left: 0.5rem;\n }\n .expand-button .button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-button .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n}";
|
|
782
|
+
const navCss = css_248z$b;
|
|
761
783
|
|
|
762
|
-
var css_248z$a = "@layer kol-theme-component {\n :host .
|
|
763
|
-
const
|
|
784
|
+
var css_248z$a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\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 .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected .button-inner {\n background-color: var(--color-mute-variant);\n border-radius: var(--a11y-min-size);\n border: 0;\n }\n}";
|
|
785
|
+
const paginationCss = css_248z$a;
|
|
764
786
|
|
|
765
|
-
var css_248z$9 = "@layer kol-theme-component {\n
|
|
766
|
-
const
|
|
787
|
+
var css_248z$9 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n}";
|
|
788
|
+
const progressCss = css_248z$9;
|
|
767
789
|
|
|
768
|
-
var css_248z$8 = "@layer kol-theme-component {\n .
|
|
769
|
-
const
|
|
790
|
+
var css_248z$8 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n }\n select {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 2rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n select:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n kol-input.disabled :is(select, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: 1px 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n background: var(--color-primary-variant);\n color: var(--color-light);\n }\n}";
|
|
791
|
+
const selectCss = css_248z$8;
|
|
770
792
|
|
|
771
|
-
var css_248z$7 = "@layer kol-theme-component {\n :host
|
|
772
|
-
const
|
|
793
|
+
var css_248z$7 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n 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 }\n}";
|
|
794
|
+
const skipNavCss = css_248z$7;
|
|
773
795
|
|
|
774
|
-
var css_248z$6 = "@layer kol-theme-component {\n
|
|
775
|
-
const
|
|
796
|
+
var css_248z$6 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .popover {\n background: #fff;\n }\n}";
|
|
797
|
+
const splitButtonCss = css_248z$6;
|
|
776
798
|
|
|
777
|
-
var css_248z$5 = "@layer kol-theme-component {\n
|
|
778
|
-
const
|
|
799
|
+
var css_248z$5 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5rem;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\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 .table {\n padding: 0.5rem;\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 table {\n width: 100%;\n border-spacing: 0;\n }\n table,\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 th {\n background-color: var(--color-light);\n }\n th div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: 0.5rem;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n @media (min-width: 1024px) {\n div.pagination kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
|
|
800
|
+
const tableCss = css_248z$5;
|
|
779
801
|
|
|
780
|
-
var css_248z$4 = "@layer kol-theme-component {\n
|
|
781
|
-
const
|
|
802
|
+
var css_248z$4 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n }\n button {\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 button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) kol-span-wc > span {\n border-bottom: 0.25em solid transparent;\n }\n button.selected kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button kol-span-wc > span {\n gap: 0.5rem;\n }\n kol-icon {\n font-size: 1rem;\n }\n :host > div > div {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\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 :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 :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 :host kol-button-group-wc button {\n border: none;\n }\n}";
|
|
803
|
+
const tabsCss = css_248z$4;
|
|
782
804
|
|
|
783
|
-
var css_248z$3 = "@layer kol-theme-component {\n :host
|
|
784
|
-
const
|
|
805
|
+
var css_248z$3 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .counter {\n order: 4;\n }\n kol-input .hint {\n order: 5;\n font-size: 0.9rem;\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n}";
|
|
806
|
+
const textareaCss = css_248z$3;
|
|
785
807
|
|
|
786
|
-
var css_248z$2 = "@layer kol-theme-component {\n
|
|
787
|
-
const
|
|
808
|
+
var css_248z$2 = "@layer kol-theme-component {\n :host {\n top: 1rem;\n right: 1rem;\n width: 440px;\n }\n .toast {\n margin-top: 1rem;\n }\n}";
|
|
809
|
+
const toastContainerCss = css_248z$2;
|
|
788
810
|
|
|
789
|
-
var css_248z$1 = "@layer kol-theme-component {\n
|
|
790
|
-
const
|
|
811
|
+
var css_248z$1 = "@layer kol-theme-component {\n .tree-item ul {\n list-style: disc inside;\n border-left: 2px solid;\n padding-left: 0.4rem;\n margin-left: 2rem;\n margin-top: 0.4rem;\n }\n .tree-item li {\n margin: 0.4rem 0;\n }\n .tree-item .toggle-button {\n align-items: center;\n border: 1px solid var(--color-primary);\n display: inline-flex;\n height: 1.6rem;\n justify-content: center;\n margin-right: 0.4rem;\n width: 1.6rem;\n }\n .tree-link {\n display: inline-block;\n padding: 0.4rem;\n }\n .tree-link.active {\n background: var(--color-primary-variant);\n color: var(--color-light);\n }\n}";
|
|
812
|
+
const treeItemCss = css_248z$1;
|
|
791
813
|
|
|
792
|
-
var css_248z = "@layer kol-theme-component {\n :
|
|
793
|
-
const
|
|
814
|
+
var css_248z = "@layer kol-theme-component {\n .tree:focus-within {\n outline: 1px solid var(--color-primary);\n }\n}";
|
|
815
|
+
const treeCss = css_248z;
|
|
794
816
|
|
|
795
817
|
const DEFAULT = KoliBri.createTheme("default", {
|
|
796
818
|
GLOBAL: globalCss,
|
|
797
819
|
"KOL-ABBR": abbrCss,
|
|
798
820
|
"KOL-ACCORDION": accordionCss,
|
|
799
821
|
"KOL-ALERT": alertCss,
|
|
822
|
+
"KOL-AVATAR": avatarCss,
|
|
800
823
|
"KOL-BADGE": badgeCss,
|
|
801
824
|
"KOL-BREADCRUMB": breadcrumbCss,
|
|
802
825
|
"KOL-BUTTON": buttonCss,
|
|
@@ -817,6 +840,7 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
817
840
|
"KOL-INPUT-RADIO": inputRadioCss,
|
|
818
841
|
"KOL-INPUT-RANGE": inputRangeCss,
|
|
819
842
|
"KOL-INPUT-TEXT": inputTextCss,
|
|
843
|
+
"KOL-KOLIBRI": kolibriCss,
|
|
820
844
|
"KOL-LINK": linkCss,
|
|
821
845
|
"KOL-LINK-BUTTON": linkButtonCss,
|
|
822
846
|
"KOL-MODAL": modalCss,
|
|
@@ -829,7 +853,9 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
829
853
|
"KOL-TABLE": tableCss,
|
|
830
854
|
"KOL-TABS": tabsCss,
|
|
831
855
|
"KOL-TEXTAREA": textareaCss,
|
|
832
|
-
"KOL-TOAST-CONTAINER": toastContainerCss
|
|
856
|
+
"KOL-TOAST-CONTAINER": toastContainerCss,
|
|
857
|
+
"KOL-TREE": treeCss,
|
|
858
|
+
"KOL-TREE-ITEM": treeItemCss
|
|
833
859
|
});
|
|
834
860
|
|
|
835
861
|
exports.DEFAULT = DEFAULT;
|