@public-ui/theme-default 2.2.18-rc.3 → 2.2.19-e9c0b593384d660ec86496ebc4ea0d46381cd328.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +2 -2
  2. package/dist/index.mjs +2 -2
  3. package/package.json +6 -6
package/dist/index.cjs CHANGED
@@ -993,7 +993,7 @@ var css_248z$g = "@layer kol-theme-component {\n :is(a, button) {\n color: v
993
993
 
994
994
  var css_248z$f = "@layer kol-theme-component {\n :host {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n .kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n color: var(--color-primary);\n display: flex;\n min-height: var(--a11y-min-size);\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 2px solid transparent;\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n border-left-color: transparent;\n font-weight: normal;\n }\n .expand-button .button:hover {\n color: var(--color-light);\n background-color: var(--color-primary);\n }\n .expand-button .button:focus-visible {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n .toggle-button :is(a, button) > .kol-span-wc,\n .toggle-button :is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n box-shadow: none;\n border-color: var(--color-light);\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n font-weight: 700;\n }\n .toggle-button :is(a, button):active > .kol-span-wc,\n .toggle-button :is(a, button):hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n}";
995
995
 
996
- var css_248z$e = "@layer kol-theme-component {\n .button:focus {\n outline: none;\n }\n .button-inner {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected button {\n opacity: 1;\n }\n .selected .button-inner {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n}";
996
+ var css_248z$e = "@layer kol-theme-component {\n .button:focus {\n outline: none;\n }\n .button-inner {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected button {\n opacity: 1;\n }\n .selected .button-inner {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-input {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n .kol-input select {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n height: var(--a11y-min-size);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .kol-input select:hover, .kol-input select:focus {\n border-color: var(--color-primary);\n }\n}";
997
997
 
998
998
  var css_248z$d = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n font-weight: 700;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-secondary);\n border-color: var(--color-primary);\n }\n .tertiary:is(a, button) > .kol-span-wc,\n .tertiary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-text);\n background-color: var(--color-light);\n border-color: var(--color-text);\n }\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n box-shadow: none;\n border-color: var(--color-light);\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 .tertiary:is(a, button):active > .kol-span-wc,\n .tertiary: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 color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\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 .tertiary: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 box-shadow: none;\n outline: none;\n border-color: var(--color-light);\n }\n :is(a, button).hide-label > .kol-span-wc {\n width: unset;\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\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 background-color: transparent;\n box-shadow: none;\n border: none;\n }\n .ghost:is(a, button).small > .kol-span-wc > span {\n background-color: var(--color-light);\n border-color: var(--color-light);\n border-style: solid;\n border-radius: 1.5em;\n border-width: var(--border-width);\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 color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\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 .kol-popover-button__popover {\n padding: var(--spacing);\n border: var(--border-width) solid var(--color-primary);\n }\n}";
999
999
 
@@ -1001,7 +1001,7 @@ var css_248z$c = "@layer kol-theme-component {\n svg line:first-child,\n svg c
1001
1001
 
1002
1002
  var css_248z$b = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::-moz-placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}\n@layer kol-theme-component {\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n border-radius: var(--border-radius);\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
1003
1003
 
1004
- var css_248z$a = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .single-select__input::-moz-placeholder {\n color: var(--color-subtle);\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .single-select__item .radio-label {\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n padding: 0;\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\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 .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1004
+ var css_248z$a = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .single-select__input::-moz-placeholder {\n color: var(--color-subtle);\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .single-select__item .radio-label {\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n align-self: center;\n }\n .single-select__item:not(.single-select__item--disabled)[aria-selected], .single-select__item:not(.single-select__item--disabled):focus, .single-select__item:not(.single-select__item--disabled).highlighted {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n outline: 0;\n }\n .single-select__item--disabled:focus {\n outline: 0;\n cursor: not-allowed;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n padding: 0;\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\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 .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1005
1005
 
1006
1006
  var css_248z$9 = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n border-style: solid;\n border-radius: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n cursor: pointer;\n }\n}";
1007
1007
 
package/dist/index.mjs CHANGED
@@ -991,7 +991,7 @@ var css_248z$g = "@layer kol-theme-component {\n :is(a, button) {\n color: v
991
991
 
992
992
  var css_248z$f = "@layer kol-theme-component {\n :host {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n .kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n color: var(--color-primary);\n display: flex;\n min-height: var(--a11y-min-size);\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 2px solid transparent;\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n border-left-color: transparent;\n font-weight: normal;\n }\n .expand-button .button:hover {\n color: var(--color-light);\n background-color: var(--color-primary);\n }\n .expand-button .button:focus-visible {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n .toggle-button :is(a, button) > .kol-span-wc,\n .toggle-button :is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n box-shadow: none;\n border-color: var(--color-light);\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n font-weight: 700;\n }\n .toggle-button :is(a, button):active > .kol-span-wc,\n .toggle-button :is(a, button):hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n}";
993
993
 
994
- var css_248z$e = "@layer kol-theme-component {\n .button:focus {\n outline: none;\n }\n .button-inner {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected button {\n opacity: 1;\n }\n .selected .button-inner {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n}";
994
+ var css_248z$e = "@layer kol-theme-component {\n .button:focus {\n outline: none;\n }\n .button-inner {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected button {\n opacity: 1;\n }\n .selected .button-inner {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-input {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n .kol-input select {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n height: var(--a11y-min-size);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .kol-input select:hover, .kol-input select:focus {\n border-color: var(--color-primary);\n }\n}";
995
995
 
996
996
  var css_248z$d = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n font-weight: 700;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-secondary);\n border-color: var(--color-primary);\n }\n .tertiary:is(a, button) > .kol-span-wc,\n .tertiary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-text);\n background-color: var(--color-light);\n border-color: var(--color-text);\n }\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n box-shadow: none;\n border-color: var(--color-light);\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 .tertiary:is(a, button):active > .kol-span-wc,\n .tertiary: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 color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\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 .tertiary: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 box-shadow: none;\n outline: none;\n border-color: var(--color-light);\n }\n :is(a, button).hide-label > .kol-span-wc {\n width: unset;\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\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 background-color: transparent;\n box-shadow: none;\n border: none;\n }\n .ghost:is(a, button).small > .kol-span-wc > span {\n background-color: var(--color-light);\n border-color: var(--color-light);\n border-style: solid;\n border-radius: 1.5em;\n border-width: var(--border-width);\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 color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\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 .kol-popover-button__popover {\n padding: var(--spacing);\n border: var(--border-width) solid var(--color-primary);\n }\n}";
997
997
 
@@ -999,7 +999,7 @@ var css_248z$c = "@layer kol-theme-component {\n svg line:first-child,\n svg c
999
999
 
1000
1000
  var css_248z$b = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::-moz-placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}\n@layer kol-theme-component {\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n border-radius: var(--border-radius);\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
1001
1001
 
1002
- var css_248z$a = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .single-select__input::-moz-placeholder {\n color: var(--color-subtle);\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .single-select__item .radio-label {\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n padding: 0;\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\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 .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1002
+ var css_248z$a = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .single-select__input::-moz-placeholder {\n color: var(--color-subtle);\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .single-select__item .radio-label {\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n align-self: center;\n }\n .single-select__item:not(.single-select__item--disabled)[aria-selected], .single-select__item:not(.single-select__item--disabled):focus, .single-select__item:not(.single-select__item--disabled).highlighted {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n outline: 0;\n }\n .single-select__item--disabled:focus {\n outline: 0;\n cursor: not-allowed;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n padding: 0;\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\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 .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1003
1003
 
1004
1004
  var css_248z$9 = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n border-style: solid;\n border-radius: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n cursor: pointer;\n }\n}";
1005
1005
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "2.2.18-rc.3",
3
+ "version": "2.2.19-e9c0b593384d660ec86496ebc4ea0d46381cd328.0",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -48,7 +48,7 @@
48
48
  "@rollup/plugin-typescript": "12.3.0",
49
49
  "@typescript-eslint/eslint-plugin": "7.18.0",
50
50
  "@typescript-eslint/parser": "7.18.0",
51
- "autoprefixer": "10.4.22",
51
+ "autoprefixer": "10.4.23",
52
52
  "cpy-cli": "6.0.0",
53
53
  "cross-env": "10.1.0",
54
54
  "eslint": "8.57.1",
@@ -57,14 +57,14 @@
57
57
  "postcss": "8.5.6",
58
58
  "rollup": "4.53.3",
59
59
  "rollup-plugin-postcss": "4.0.2",
60
- "sass-embedded": "1.93.3",
60
+ "sass-embedded": "1.96.0",
61
61
  "typescript": "5.9.3",
62
62
  "unbuild": "3.6.1",
63
- "@public-ui/components": "2.2.18-rc.3",
64
- "@public-ui/visual-tests": "2.2.18-rc.3"
63
+ "@public-ui/visual-tests": "2.2.19-e9c0b593384d660ec86496ebc4ea0d46381cd328.0",
64
+ "@public-ui/components": "2.2.19-e9c0b593384d660ec86496ebc4ea0d46381cd328.0"
65
65
  },
66
66
  "peerDependencies": {
67
- "@public-ui/components": "2.2.18-rc.3"
67
+ "@public-ui/components": "2.2.19-e9c0b593384d660ec86496ebc4ea0d46381cd328.0"
68
68
  },
69
69
  "exports": {
70
70
  ".": {