@public-ui/themes 3.0.2-rc.3 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1203,7 +1203,7 @@ var css_248z$1H = "/* forward the rem function */\n@layer kol-theme-component {\
1203
1203
 
1204
1204
  var css_248z$1G = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\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 flex-direction: column;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n padding-left: 0.125em;\n }\n .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field {\n border: 0;\n display: grid;\n margin: 0;\n padding: 0;\n }\n .kol-form-field--error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field__label {\n display: inline-block;\n padding: 0;\n }\n .kol-form-field__input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__input--orientation-horizontal {\n margin-top: calc(var(--spacing) / 2);\n gap: var(--spacing) calc(var(--spacing) * 2);\n }\n .kol-field-control__label {\n padding-top: 0.1em;\n }\n .kol-input-radio__input {\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 50%;\n line-height: 1.5;\n }\n .kol-input-radio__input:not(:disabled):hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .kol-input-radio__input:focus {\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-radio__input:focus:hover {\n box-shadow: none;\n }\n .kol-input-radio__input:checked:before {\n background-color: var(--color-primary);\n }\n .kol-input-radio__input:disabled {\n background-color: var(--color-mute-variant);\n }\n .kol-input--error:focus {\n outline-color: var(--color-danger);\n }\n .kol-field-control__hint,\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-alert--type-error {\n margin-left: -0.25em;\n }\n}";
1205
1205
 
1206
- var css_248z$1F = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\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 flex-direction: column;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input-range__inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
1206
+ var css_248z$1F = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\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 flex-direction: column;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input-range__inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-range__input--number {\n text-align: right;\n }\n}";
1207
1207
 
1208
1208
  var css_248z$1E = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\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 flex-direction: column;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input {\n background-color: transparent;\n border: none;\n }\n .kol-input::placeholder {\n color: var(--color-subtle);\n }\n}";
1209
1209
 
package/dist/index.mjs CHANGED
@@ -1201,7 +1201,7 @@ var css_248z$1H = "/* forward the rem function */\n@layer kol-theme-component {\
1201
1201
 
1202
1202
  var css_248z$1G = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\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 flex-direction: column;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n padding-left: 0.125em;\n }\n .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field {\n border: 0;\n display: grid;\n margin: 0;\n padding: 0;\n }\n .kol-form-field--error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field__label {\n display: inline-block;\n padding: 0;\n }\n .kol-form-field__input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__input--orientation-horizontal {\n margin-top: calc(var(--spacing) / 2);\n gap: var(--spacing) calc(var(--spacing) * 2);\n }\n .kol-field-control__label {\n padding-top: 0.1em;\n }\n .kol-input-radio__input {\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 50%;\n line-height: 1.5;\n }\n .kol-input-radio__input:not(:disabled):hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .kol-input-radio__input:focus {\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-radio__input:focus:hover {\n box-shadow: none;\n }\n .kol-input-radio__input:checked:before {\n background-color: var(--color-primary);\n }\n .kol-input-radio__input:disabled {\n background-color: var(--color-mute-variant);\n }\n .kol-input--error:focus {\n outline-color: var(--color-danger);\n }\n .kol-field-control__hint,\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-alert--type-error {\n margin-left: -0.25em;\n }\n}";
1203
1203
 
1204
- var css_248z$1F = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\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 flex-direction: column;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input-range__inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
1204
+ var css_248z$1F = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\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 flex-direction: column;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input-range__inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-range__input--number {\n text-align: right;\n }\n}";
1205
1205
 
1206
1206
  var css_248z$1E = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\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 flex-direction: column;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input {\n background-color: transparent;\n border: none;\n }\n .kol-input::placeholder {\n color: var(--color-subtle);\n }\n}";
1207
1207
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/themes",
3
- "version": "3.0.2-rc.3",
3
+ "version": "3.0.2",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -57,10 +57,10 @@
57
57
  "rollup-plugin-postcss": "4.0.2",
58
58
  "sass-embedded": "1.89.2",
59
59
  "typescript": "5.8.3",
60
- "@public-ui/components": "3.0.2-rc.3"
60
+ "@public-ui/components": "3.0.2"
61
61
  },
62
62
  "peerDependencies": {
63
- "@public-ui/components": "3.0.2-rc.3"
63
+ "@public-ui/components": "3.0.2"
64
64
  },
65
65
  "sideEffects": false,
66
66
  "type": "module",