@public-ui/theme-default 2.0.6 → 2.0.8
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 +13 -12
- package/dist/index.mjs +13 -12
- package/package.json +6 -6
package/dist/index.cjs
CHANGED
|
@@ -674,6 +674,7 @@ const devHint = (msg, options) => {
|
|
|
674
674
|
devCache.add(msg);
|
|
675
675
|
Log.debug([msg].concat(options?.details || []), {
|
|
676
676
|
classifier: `\u{1F4BB} dev`,
|
|
677
|
+
forceLog: !!options?.force,
|
|
677
678
|
overwriteStyle: "; background-color: #f09"
|
|
678
679
|
});
|
|
679
680
|
}
|
|
@@ -709,7 +710,7 @@ const avatarCss = css_248z$A;
|
|
|
709
710
|
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
711
|
const badgeCss = css_248z$z;
|
|
711
712
|
|
|
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
|
|
713
|
+
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 }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
713
714
|
const breadcrumbCss = css_248z$y;
|
|
714
715
|
|
|
715
716
|
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}";
|
|
@@ -739,31 +740,31 @@ const indentedTextCss = css_248z$q;
|
|
|
739
740
|
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
741
|
const inputCheckboxCss = css_248z$p;
|
|
741
742
|
|
|
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
|
|
743
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
743
744
|
const inputColorCss = css_248z$o;
|
|
744
745
|
|
|
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
|
|
746
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
746
747
|
const inputDateCss = css_248z$n;
|
|
747
748
|
|
|
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
|
|
749
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
749
750
|
const inputEmailCss = css_248z$m;
|
|
750
751
|
|
|
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
|
|
752
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
752
753
|
const inputFileCss = css_248z$l;
|
|
753
754
|
|
|
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
|
|
755
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
755
756
|
const inputNumberCss = css_248z$k;
|
|
756
757
|
|
|
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
|
|
758
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
758
759
|
const inputPasswordCss = css_248z$j;
|
|
759
760
|
|
|
760
761
|
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
762
|
const inputRadioCss = css_248z$i;
|
|
762
763
|
|
|
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
|
|
764
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
764
765
|
const inputRangeCss = css_248z$h;
|
|
765
766
|
|
|
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
|
|
767
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
767
768
|
const inputTextCss = css_248z$g;
|
|
768
769
|
|
|
769
770
|
var css_248z$f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
|
|
@@ -787,7 +788,7 @@ const paginationCss = css_248z$a;
|
|
|
787
788
|
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
789
|
const progressCss = css_248z$9;
|
|
789
790
|
|
|
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
|
|
791
|
+
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 :not(.disabled) .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 .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 kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
791
792
|
const selectCss = css_248z$8;
|
|
792
793
|
|
|
793
794
|
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}";
|
|
@@ -799,10 +800,10 @@ const splitButtonCss = css_248z$6;
|
|
|
799
800
|
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
801
|
const tableCss = css_248z$5;
|
|
801
802
|
|
|
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
|
|
803
|
+
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 padding-bottom: 0.25em;\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
804
|
const tabsCss = css_248z$4;
|
|
804
805
|
|
|
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
|
+
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 :not(.disabled) .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 kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
806
807
|
const textareaCss = css_248z$3;
|
|
807
808
|
|
|
808
809
|
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}";
|
package/dist/index.mjs
CHANGED
|
@@ -672,6 +672,7 @@ const devHint = (msg, options) => {
|
|
|
672
672
|
devCache.add(msg);
|
|
673
673
|
Log.debug([msg].concat(options?.details || []), {
|
|
674
674
|
classifier: `\u{1F4BB} dev`,
|
|
675
|
+
forceLog: !!options?.force,
|
|
675
676
|
overwriteStyle: "; background-color: #f09"
|
|
676
677
|
});
|
|
677
678
|
}
|
|
@@ -707,7 +708,7 @@ const avatarCss = css_248z$A;
|
|
|
707
708
|
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}";
|
|
708
709
|
const badgeCss = css_248z$z;
|
|
709
710
|
|
|
710
|
-
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
|
|
711
|
+
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 }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
711
712
|
const breadcrumbCss = css_248z$y;
|
|
712
713
|
|
|
713
714
|
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}";
|
|
@@ -737,31 +738,31 @@ const indentedTextCss = css_248z$q;
|
|
|
737
738
|
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}";
|
|
738
739
|
const inputCheckboxCss = css_248z$p;
|
|
739
740
|
|
|
740
|
-
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
|
|
741
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
741
742
|
const inputColorCss = css_248z$o;
|
|
742
743
|
|
|
743
|
-
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
|
|
744
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
744
745
|
const inputDateCss = css_248z$n;
|
|
745
746
|
|
|
746
|
-
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
|
|
747
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
747
748
|
const inputEmailCss = css_248z$m;
|
|
748
749
|
|
|
749
|
-
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
|
|
750
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
750
751
|
const inputFileCss = css_248z$l;
|
|
751
752
|
|
|
752
|
-
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
|
|
753
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
753
754
|
const inputNumberCss = css_248z$k;
|
|
754
755
|
|
|
755
|
-
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
|
|
756
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
756
757
|
const inputPasswordCss = css_248z$j;
|
|
757
758
|
|
|
758
759
|
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}";
|
|
759
760
|
const inputRadioCss = css_248z$i;
|
|
760
761
|
|
|
761
|
-
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
|
|
762
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
762
763
|
const inputRangeCss = css_248z$h;
|
|
763
764
|
|
|
764
|
-
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
|
|
765
|
+
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 :not(.disabled) .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 .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
765
766
|
const inputTextCss = css_248z$g;
|
|
766
767
|
|
|
767
768
|
var css_248z$f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
|
|
@@ -785,7 +786,7 @@ const paginationCss = css_248z$a;
|
|
|
785
786
|
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}";
|
|
786
787
|
const progressCss = css_248z$9;
|
|
787
788
|
|
|
788
|
-
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
|
|
789
|
+
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 :not(.disabled) .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 .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 kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
789
790
|
const selectCss = css_248z$8;
|
|
790
791
|
|
|
791
792
|
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}";
|
|
@@ -797,10 +798,10 @@ const splitButtonCss = css_248z$6;
|
|
|
797
798
|
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}";
|
|
798
799
|
const tableCss = css_248z$5;
|
|
799
800
|
|
|
800
|
-
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
|
|
801
|
+
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 padding-bottom: 0.25em;\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}";
|
|
801
802
|
const tabsCss = css_248z$4;
|
|
802
803
|
|
|
803
|
-
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}";
|
|
804
|
+
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 :not(.disabled) .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 kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
804
805
|
const textareaCss = css_248z$3;
|
|
805
806
|
|
|
806
807
|
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}";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/theme-default",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.8",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": "https://github.com/public-ui/kolibri",
|
|
@@ -38,11 +38,11 @@
|
|
|
38
38
|
"wcag"
|
|
39
39
|
],
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@public-ui/schema": "2.0.
|
|
42
|
-
"@public-ui/visual-tests": "2.0.
|
|
41
|
+
"@public-ui/schema": "2.0.8",
|
|
42
|
+
"@public-ui/visual-tests": "2.0.8",
|
|
43
43
|
"@types/node": "ts5.3",
|
|
44
|
-
"@typescript-eslint/eslint-plugin": "7.0.
|
|
45
|
-
"@typescript-eslint/parser": "7.0.
|
|
44
|
+
"@typescript-eslint/eslint-plugin": "7.0.2",
|
|
45
|
+
"@typescript-eslint/parser": "7.0.2",
|
|
46
46
|
"eslint": "8.56.0",
|
|
47
47
|
"eslint-plugin-no-loops": "0.3.0",
|
|
48
48
|
"rollup-plugin-postcss": "4.0.2",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"unbuild": "1.2.1"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
|
-
"@public-ui/components": "2.0.
|
|
53
|
+
"@public-ui/components": "2.0.8"
|
|
54
54
|
},
|
|
55
55
|
"sideEffects": false,
|
|
56
56
|
"type": "module",
|