@public-ui/themes 2.2.18-rc.2 → 2.2.18

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 +1 -1
  2. package/dist/index.mjs +1 -1
  3. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -1142,7 +1142,7 @@ var css_248z$2c = "@layer kol-theme-component {\n svg line:first-child,\n svg
1142
1142
 
1143
1143
  var css_248z$2b = "@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}";
1144
1144
 
1145
- var css_248z$2a = "@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}";
1145
+ var css_248z$2a = "@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}";
1146
1146
 
1147
1147
  var css_248z$29 = "@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}";
1148
1148
 
package/dist/index.mjs CHANGED
@@ -1140,7 +1140,7 @@ var css_248z$2c = "@layer kol-theme-component {\n svg line:first-child,\n svg
1140
1140
 
1141
1141
  var css_248z$2b = "@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}";
1142
1142
 
1143
- var css_248z$2a = "@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}";
1143
+ var css_248z$2a = "@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}";
1144
1144
 
1145
1145
  var css_248z$29 = "@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}";
1146
1146
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/themes",
3
- "version": "2.2.18-rc.2",
3
+ "version": "2.2.18",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -58,10 +58,10 @@
58
58
  "rollup-plugin-postcss": "4.0.2",
59
59
  "sass-embedded": "1.93.3",
60
60
  "typescript": "5.9.3",
61
- "@public-ui/components": "2.2.18-rc.2"
61
+ "@public-ui/components": "2.2.18"
62
62
  },
63
63
  "peerDependencies": {
64
- "@public-ui/components": "2.2.18-rc.2"
64
+ "@public-ui/components": "2.2.18"
65
65
  },
66
66
  "sideEffects": false,
67
67
  "type": "module",