@public-ui/theme-ecl 3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0 → 3.0.2-rc.1

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 (6) hide show
  1. package/README.md +170 -3
  2. package/dist/index.cjs +6 -6
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.mjs +6 -6
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +4 -4
package/README.md CHANGED
@@ -17,9 +17,9 @@ The ECL themes provide styling according to the Styleguides of the European Comm
17
17
  You can install the KoliBri themes with `npm`, `pnpm` or `yarn`:
18
18
 
19
19
  ```bash
20
- npm i -g @public-ui/theme-ecl
21
- pnpm i -g @public-ui/theme-ecl
22
- yarn add -g @public-ui/theme-ecl
20
+ npm i @public-ui/theme-ecl
21
+ pnpm i @public-ui/theme-ecl
22
+ yarn add @public-ui/theme-ecl
23
23
  ```
24
24
 
25
25
  ## Usage
@@ -44,3 +44,170 @@ register(
44
44
  /* Handle errors */
45
45
  });
46
46
  ```
47
+
48
+ ## Design Tokens
49
+
50
+ The token values are read from `src/ecl-ec/global.scss` and `src/ecl-eu/global.scss` and control the colors, fonts and spacing of the components.
51
+
52
+ ### ECL EC Theme
53
+
54
+ | Token | Default value | Meaning |
55
+ | ----------------------- | --------------------- | ----------------------- |
56
+ | `--color-blue` | `#004494` | Primary blue tone |
57
+ | `--color-yellow` | `#ffd617` | Primary yellow tone |
58
+ | `--color-grey` | `#404040` | Base gray |
59
+ | `--color-blue-130` | `#002f67` | Darker blue shade |
60
+ | `--color-blue-120` | `#003776` | Darker blue shade |
61
+ | `--color-blue-110` | `#003d84` | Darker blue shade |
62
+ | `--color-blue-100` | `var(--color-blue)` | Base blue |
63
+ | `--color-blue-75` | `#4073af` | Lighter blue shade |
64
+ | `--color-blue-50` | `#bfd0e4` | Very light blue shade |
65
+ | `--color-blue-25` | `#bfd0e4` | Very light blue shade |
66
+ | `--color-blue-5` | `#f2f5f9` | Almost white |
67
+ | `--color-yellow-120` | `#f8ae21` | Darker yellow shade |
68
+ | `--color-yellow-110` | `#fbc11d` | Darker yellow shade |
69
+ | `--color-yellow-100` | `var(--color-yellow)` | Base yellow |
70
+ | `--color-yellow-75` | `#ffde39` | Lighter yellow shade |
71
+ | `--color-yellow-50` | `#ffe879` | Lighter yellow shade |
72
+ | `--color-yellow-25` | `#fff4bb` | Very light yellow shade |
73
+ | `--color-grey-100` | `var(--color-grey)` | Base gray |
74
+ | `--color-grey-75` | `#707070` | Medium gray |
75
+ | `--color-grey-50` | `#9f9f9f` | Light gray |
76
+ | `--color-grey-25` | `#cfcfcf` | Light gray |
77
+ | `--color-grey-20` | `#d9d9d9` | Very light gray |
78
+ | `--color-grey-15` | `#e3e3e3` | Very light gray |
79
+ | `--color-grey-10` | `#ebebeb` | Very light gray |
80
+ | `--color-grey-5` | `#f5f5f5` | Almost white |
81
+ | `--color-grey-3` | `#f9f9f9` | Almost white |
82
+ | `--color-blue-n` | `#006fb4` | Additional blue tone |
83
+ | `--color-orange` | `#f29527` | Orange for notices |
84
+ | `--color-green` | `#467a39` | Green for success |
85
+ | `--color-red` | `#da2131` | Red for errors |
86
+ | `--color-red-1xx` | `#981722` | Dark red tone |
87
+ | `--color-black` | `#000` | Black |
88
+ | `--color-white` | `#fff` | White |
89
+ | `--font-family` | `Arial, sans-serif` | Default font |
90
+ | `--font-size` | `#{rem(16)}` | Base font size |
91
+ | `--font-weight` | `400` | Regular font weight |
92
+ | `--font-weight-bold` | `600` | Bold font |
93
+ | `--line-height` | `1.5` | Line height text |
94
+ | `--line-height-heading` | `1.2` | Line height headings |
95
+ | `--spacing-4xl` | `#{rem(64)}` | Largest spacing |
96
+ | `--spacing-3xl` | `#{rem(48)}` | Very large spacing |
97
+ | `--spacing-2xl` | `#{rem(40)}` | Very large spacing |
98
+ | `--spacing-xl` | `#{rem(32)}` | Large spacing |
99
+ | `--spacing-l` | `#{rem(24)}` | Large spacing |
100
+ | `--spacing-m` | `#{rem(16)}` | Standard spacing |
101
+ | `--spacing-s` | `#{rem(12)}` | Small spacing |
102
+ | `--spacing-xs` | `#{rem(8)}` | Very small spacing |
103
+ | `--spacing-2xs` | `#{rem(4)}` | Tiny spacing |
104
+
105
+ ### ECL EU Theme
106
+
107
+ | Token | Default value | Meaning |
108
+ | ------------------------- | ------------------- | ----------------------- |
109
+ | `--color-blue` | `#0e47cb` | Primary blue tone |
110
+ | `--color-blue-140` | `#082b7a` | Very dark blue shade |
111
+ | `--color-blue-130` | `#082b7a` | Very dark blue shade |
112
+ | `--color-blue-120` | `#0b39a2` | Darker blue shade |
113
+ | `--color-blue-110` | `#0d40b7` | Darker blue shade |
114
+ | `--color-blue-100` | `#0e47cb` | Base blue |
115
+ | `--color-blue-80` | `#3e6cd5` | Lighter blue shade |
116
+ | `--color-blue-60` | `#6e91e0` | Lighter blue shade |
117
+ | `--color-blue-40` | `#9fb5ea` | Very light blue shade |
118
+ | `--color-blue-20` | `#cfdaf5` | Very light blue shade |
119
+ | `--color-blue-10` | `#e7edfa` | Very light blue shade |
120
+ | `--color-blue-5` | `#f3f6fc` | Almost white |
121
+ | `--color-yellow` | `#ffcc00` | Primary yellow tone |
122
+ | `--color-yellow-140` | `#997a00` | Very dark yellow shade |
123
+ | `--color-yellow-130` | `#b38f00` | Very dark yellow shade |
124
+ | `--color-yellow-120` | `#cca300` | Darker yellow shade |
125
+ | `--color-yellow-110` | `#e6b800` | Darker yellow shade |
126
+ | `--color-yellow-100` | `#ffcc00` | Base yellow |
127
+ | `--color-yellow-80` | `#ffd633` | Lighter yellow shade |
128
+ | `--color-yellow-60` | `#ffe066` | Lighter yellow shade |
129
+ | `--color-yellow-40` | `#ffeb99` | Very light yellow shade |
130
+ | `--color-yellow-20` | `#fff5cc` | Very light yellow shade |
131
+ | `--color-yellow-10` | `#fffae6` | Very light yellow shade |
132
+ | `--color-yellow-5` | `#fffcf2` | Almost white |
133
+ | `--color-grey` | `#262b38` | Dark gray |
134
+ | `--color-grey-140` | `#171a22` | Very dark gray |
135
+ | `--color-grey-130` | `#1b1e27` | Very dark gray |
136
+ | `--color-grey-120` | `#1e222d` | Darker gray |
137
+ | `--color-grey-110` | `#222732` | Darker gray |
138
+ | `--color-grey-100` | `#262b38` | Base gray |
139
+ | `--color-grey-80` | `#515560` | Medium gray |
140
+ | `--color-grey-75` | `#515560` | Medium gray |
141
+ | `--color-grey-60` | `#7d8088` | Light gray |
142
+ | `--color-grey-40` | `#a8aaaf` | Light gray |
143
+ | `--color-grey-20` | `#d4d5d7` | Very light gray |
144
+ | `--color-grey-10` | `#e9eaeb` | Very light gray |
145
+ | `--color-grey-5` | `#f4f5f5` | Almost white |
146
+ | `--color-grey-3` | `#f9f9f9` | Almost white |
147
+ | `--color-orange` | `#ff6200` | Orange tone |
148
+ | `--color-orange-140` | `#993b00` | Very dark orange |
149
+ | `--color-orange-130` | `#b34500` | Very dark orange |
150
+ | `--color-orange-120` | `#cc4e00` | Darker orange |
151
+ | `--color-orange-110` | `#e65800` | Darker orange |
152
+ | `--color-orange-100` | `#e65800` | Base orange |
153
+ | `--color-orange-80` | `#ff8133` | Light orange |
154
+ | `--color-orange-60` | `#ff914d` | Light orange |
155
+ | `--color-orange-40` | `#ffb180` | Very light orange |
156
+ | `--color-orange-20` | `#ffd0b3` | Very light orange |
157
+ | `--color-orange-10` | `#ffefe6` | Very light orange |
158
+ | `--color-orange-5` | `#fff7f2` | Almost white |
159
+ | `--color-green` | `#00c991` | Green for success |
160
+ | `--color-green-140` | `#007957` | Very dark green |
161
+ | `--color-green-130` | `#008d66` | Very dark green |
162
+ | `--color-green-120` | `#008d66` | Darker green |
163
+ | `--color-green-110` | `#00b583` | Darker green |
164
+ | `--color-green-100` | `#00c991` | Base green |
165
+ | `--color-green-80` | `#00c991` | Light green |
166
+ | `--color-green-60` | `#66dfbd` | Light green |
167
+ | `--color-green-40` | `#99e9d3` | Very light green |
168
+ | `--color-green-20` | `#ccf4e9` | Very light green |
169
+ | `--color-green-10` | `#e6faf4` | Very light green |
170
+ | `--color-green-5` | `#f2fcf9` | Almost white |
171
+ | `--color-red` | `#ef0044` | Red for errors |
172
+ | `--color-red-140` | `#8f0029` | Very dark red |
173
+ | `--color-red-130` | `#a70030` | Very dark red |
174
+ | `--color-red-120` | `#bf0036` | Darker red |
175
+ | `--color-red-110` | `#d7003d` | Darker red |
176
+ | `--color-red-100` | `#ef0044` | Base red |
177
+ | `--color-red-80` | `#f23369` | Helles Rot |
178
+ | `--color-red-60` | `#f5668f` | Helles Rot |
179
+ | `--color-red-40` | `#f999b4` | Very light red |
180
+ | `--color-red-20` | `#fcccda` | Very light red |
181
+ | `--color-red-10` | `#fde6ec` | Very light red |
182
+ | `--color-red-5` | `#fef2f5` | Almost white |
183
+ | `--color-accent-blue-100` | `#00e9ff` | Blue accent color |
184
+ | `--color-accent-blue-30` | `#b3f8ff` | Very light accent color |
185
+ | `--color-purple` | `#510dcd` | Purple accent |
186
+ | `--color-purple-140` | `#31087b` | Very dark purple |
187
+ | `--color-purple-130` | `#390990` | Very dark purple |
188
+ | `--color-purple-120` | `#410aa4` | Darker purple |
189
+ | `--color-purple-110` | `#490cb9` | Darker purple |
190
+ | `--color-purple-100` | `#510dcd` | Base purple |
191
+ | `--color-purple-80` | `#743dd7` | Lighter purple |
192
+ | `--color-purple-60` | `#976ee1` | Lighter purple |
193
+ | `--color-purple-40` | `#bf9af1` | Very light purple |
194
+ | `--color-purple-20` | `#dccff5` | Very light purple |
195
+ | `--color-purple-10` | `#eee7fa` | Very light purple |
196
+ | `--color-purple-5` | `#eee7fa` | Very light purple |
197
+ | `--color-white` | `#fff` | White |
198
+ | `--color-black` | `#000` | Black |
199
+ | `--font-family` | `Arial, sans-serif` | Default font |
200
+ | `--font-size` | `#{rem(16)}` | Base font size |
201
+ | `--font-weight-regular` | `400` | Regular font weight |
202
+ | `--font-weight-bold` | `700` | Bold font |
203
+ | `--line-height-regular` | `1.5` | Line height text |
204
+ | `--line-height-heading` | `1.2` | Line height headings |
205
+ | `--spacing-4xl` | `#{rem(64)}` | Largest spacing |
206
+ | `--spacing-3xl` | `#{rem(48)}` | Very large spacing |
207
+ | `--spacing-2xl` | `#{rem(40)}` | Very large spacing |
208
+ | `--spacing-xl` | `#{rem(32)}` | Large spacing |
209
+ | `--spacing-l` | `#{rem(24)}` | Large spacing |
210
+ | `--spacing-m` | `#{rem(16)}` | Standard spacing |
211
+ | `--spacing-s` | `#{rem(12)}` | Small spacing |
212
+ | `--spacing-xs` | `#{rem(8)}` | Very small spacing |
213
+ | `--spacing-2xs` | `#{rem(4)}` | Tiny spacing |
package/dist/index.cjs CHANGED
@@ -1090,7 +1090,7 @@ var css_248z$X = "@layer kol-theme-component {\n .kol-modal__card {\n box-sh
1090
1090
 
1091
1091
  var css_248z$W = "@layer kol-theme-component {\n .kol-nav__navigation {\n background-color: var(--color-blue);\n }\n .kol-nav__list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list-item {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n }\n .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-nav__expand-button .kol-button {\n background-color: var(--color-blue-130);\n margin: auto;\n height: 100%;\n }\n .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .kol-nav__toggle-button .kol-button {\n appearance: none;\n outline: none;\n text-decoration: none;\n --text-focus-outline-color: var(--color-black);\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline-offset: -4px;\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__toggle-button .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-nav__toggle-button .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-nav__toggle-button .kol-button--ghost:hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-nav__toggle-button .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color) !important;\n text-decoration: none !important;\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n .kol-nav__toggle-button .kol-button--ghost:focus .kol-nav__toggle-button .kol-button__text {\n outline-offset: -2px;\n }\n .kol-link {\n text-decoration: none;\n }\n .kol-span {\n border-color: transparent;\n border-style: solid;\n border-width: 2px;\n color: var(--color-white);\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n justify-items: start;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 100%;\n }\n :is(.kol-button, .kol-link):focus-within .kol-span {\n border-color: var(--color-white);\n }\n :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n text-decoration: underline;\n }\n}";
1092
1092
 
1093
- var css_248z$V = "@layer kol-theme-component {\n :host {\n display: grid;\n }\n .kol-button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n .kol-button__text {\n background-color: var(--color-yellow);\n border: 2px solid var(--color-yellow);\n color: var(--color-black);\n font-weight: var(--font-weight-bold);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n }\n .kol-button:not(:disabled):hover .kol-button__text {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .kol-button:focus .kol-button__text {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n opacity: 1;\n text-decoration: underline;\n }\n .kol-button:disabled .kol-button__text {\n cursor: not-allowed;\n opacity: 0.5;\n }\n}";
1093
+ var css_248z$V = "@layer kol-theme-component {\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination {\n display: grid;\n }\n .kol-pagination .kol-button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n .kol-pagination .kol-button__text {\n background-color: var(--color-yellow);\n border: 2px solid var(--color-yellow);\n color: var(--color-black);\n font-weight: var(--font-weight-bold);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n }\n .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .kol-pagination .kol-button:disabled .kol-button__text {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-pagination__button--selected .kol-button:not(:disabled) {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n opacity: 1;\n text-decoration: underline;\n }\n}";
1094
1094
 
1095
1095
  var css_248z$U = "@layer kol-theme-component {\n .kol-button {\n appearance: none;\n outline: none;\n text-decoration: none;\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button:focus {\n outline-offset: -4px;\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-button--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--secondary:not(:disabled):hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-button--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-button--normal:not(:disabled):hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--ghost:not(:disabled):hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: -6px;\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: -2px;\n }\n}";
1096
1096
 
@@ -1106,9 +1106,9 @@ var css_248z$P = "@layer kol-theme-component {\n .cycle {\n padding: calc(2r
1106
1106
 
1107
1107
  var css_248z$O = "@layer kol-theme-component {\n .kol-split-button {\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-blue);\n }\n .kol-split-button .kol-popover__content {\n background-color: #fff;\n }\n .kol-split-button .kol-button .kol-span {\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n }\n .kol-split-button__horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .kol-split-button .kol-button {\n appearance: none;\n outline: none;\n text-decoration: none;\n --text-focus-outline-color: var(--color-black);\n }\n .kol-split-button .kol-button:focus {\n outline-offset: -4px;\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-split-button .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-split-button .kol-button--primary:not(:disabled):hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-split-button .kol-button--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-split-button .kol-button--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-split-button .kol-button--secondary:not(:disabled):hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-split-button .kol-button--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-split-button .kol-button--normal:not(:disabled):hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-split-button .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-split-button .kol-button--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-split-button .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-split-button .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-split-button .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-split-button .kol-button--ghost:not(:disabled):hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-split-button .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-split-button .kol-button--secondary:focus .kol-split-button .kol-button__text {\n outline-offset: -6px;\n }\n .kol-split-button .kol-button--ghost:focus .kol-split-button .kol-button__text {\n outline-offset: -2px;\n }\n}";
1108
1108
 
1109
- var css_248z$N = "@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: 2px;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table {\n display: block;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n background-color: var(--color-white);\n font-weight: normal;\n color: var(--color-midnight);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--radio:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-white);\n }\n .kol-table__selection-icon {\n color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-blue);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-table-stateful__pagination {\n overflow-x: auto;\n overflow-y: hidden;\n grid-auto-flow: column;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}";
1109
+ var css_248z$N = "@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: 2px;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination {\n display: grid;\n }\n .kol-pagination .kol-button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n .kol-pagination .kol-button__text {\n background-color: var(--color-yellow);\n border: 2px solid var(--color-yellow);\n color: var(--color-black);\n font-weight: var(--font-weight-bold);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n }\n .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .kol-pagination .kol-button:disabled .kol-button__text {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-pagination__button--selected .kol-button:not(:disabled) {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n opacity: 1;\n text-decoration: underline;\n }\n .kol-table {\n display: block;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n background-color: var(--color-white);\n font-weight: normal;\n color: var(--color-midnight);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--radio:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-white);\n }\n .kol-table__selection-icon {\n color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-blue);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-table-stateful__pagination {\n overflow-x: auto;\n overflow-y: hidden;\n grid-auto-flow: column;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}";
1110
1110
 
1111
- var css_248z$M = "@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: 2px;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table {\n display: block;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n background-color: var(--color-white);\n font-weight: normal;\n color: var(--color-midnight);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--radio:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-white);\n }\n .kol-table__selection-icon {\n color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-blue);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n}";
1111
+ var css_248z$M = "@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: 2px;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination {\n display: grid;\n }\n .kol-pagination .kol-button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n .kol-pagination .kol-button__text {\n background-color: var(--color-yellow);\n border: 2px solid var(--color-yellow);\n color: var(--color-black);\n font-weight: var(--font-weight-bold);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n }\n .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .kol-pagination .kol-button:disabled .kol-button__text {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-pagination__button--selected .kol-button:not(:disabled) {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n opacity: 1;\n text-decoration: underline;\n }\n .kol-table {\n display: block;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n background-color: var(--color-white);\n font-weight: normal;\n color: var(--color-midnight);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--radio:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-white);\n }\n .kol-table__selection-icon {\n color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-blue);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n}";
1112
1112
 
1113
1113
  var css_248z$L = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs__button-group {\n border-bottom: 1px solid var(--color-grey-25);\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n color: var(--color-blue-130);\n }\n .kol-tabs .kol-button:focus .kol-span {\n outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button.selected .kol-span {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 -3px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .kol-tabs .kol-button .kol-span {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n}";
1114
1114
 
@@ -1222,7 +1222,7 @@ var css_248z$g = "@layer kol-theme-component {\n .kol-modal__card {\n box-sh
1222
1222
 
1223
1223
  var css_248z$f = "@layer kol-theme-component {\n .kol-nav__navigation {\n background-color: var(--color-blue);\n }\n .kol-nav__list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list-item {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n }\n .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-nav__expand-button .kol-button {\n background-color: var(--color-blue-130);\n margin: auto;\n height: 100%;\n }\n .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .kol-nav__toggle-button .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n .kol-nav__toggle-button .kol-button--ghost {\n --text-color: #0e47cb;\n --text-focus-outline-color: #0e47cb;\n }\n .kol-nav__toggle-button .kol-button--ghost:hover {\n --text-color: #0e47cb;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: none;\n }\n .kol-nav__toggle-button .kol-button__text {\n text-decoration: none !important;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n border-radius: 4px;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n background-color: var(--text-background-color);\n color: var(--text-color);\n }\n .kol-nav__toggle-button .kol-button__text:active, .kol-nav__toggle-button .kol-button__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-nav__toggle-button .kol-button:focus-visible .kol-nav__toggle-button .kol-button__text {\n outline-offset: -4px;\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-link {\n text-decoration: none;\n }\n .kol-span {\n border-color: transparent;\n border-style: solid;\n border-width: 2px;\n color: var(--color-white);\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n justify-items: start;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 100%;\n }\n :is(.kol-button, .kol-link):focus-within .kol-span {\n border-color: var(--color-white);\n }\n :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n text-decoration: underline;\n }\n}";
1224
1224
 
1225
- var css_248z$e = "@layer kol-theme-component {\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: 4px;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 4px;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n background-color: #fc0;\n color: #171a22;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .kol-button:not(:disabled):active .kol-button__text, .kol-button:not(:disabled):hover .kol-button__text {\n background-color: #fc0;\n border-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n font-weight: bold;\n text-decoration: underline;\n opacity: 1;\n }\n .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}";
1225
+ var css_248z$e = "@layer kol-theme-component {\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: 4px;\n }\n .kol-pagination .kol-button:focus {\n outline: none;\n }\n .kol-pagination .kol-button:focus-visible .kol-button__text {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n background-color: #fc0;\n border-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-pagination .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-pagination .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 4px;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n background-color: #fc0;\n color: #171a22;\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n font-weight: bold;\n text-decoration: underline;\n opacity: 1;\n }\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: 4px;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 4px;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n background-color: #fc0;\n color: #171a22;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .kol-button:not(:disabled):active .kol-button__text, .kol-button:not(:disabled):hover .kol-button__text {\n background-color: #fc0;\n border-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n font-weight: bold;\n text-decoration: underline;\n opacity: 1;\n }\n .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}";
1226
1226
 
1227
1227
  var css_248z$d = "@layer kol-theme-component {\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n .kol-button--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-button--primary:not(:disabled):hover {\n --text-background-color: #3e6cd5;\n }\n .kol-button--secondary {\n --text-background-color: #fff;\n --text-color: #0e47cb;\n --text-border-color: #0e47cb;\n --text-focus-outline-color: #fff;\n }\n .kol-button--secondary:not(:disabled):hover {\n --text-color: #0e47cb;\n }\n .kol-button--normal {\n --text-background-color: #fc0;\n --text-color: #171a22;\n --text-focus-outline-color: #000;\n --text-border-color: #fc0;\n }\n .kol-button--normal:not(:disabled):hover {\n --text-background-color: #fc0;\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-color: #0e47cb;\n --text-focus-outline-color: #0e47cb;\n }\n .kol-button--ghost:not(:disabled):hover {\n --text-color: #0e47cb;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 4px;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-button--secondary .kol-button__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n .kol-button--secondary.button:focus-visible .kol-button__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: -4px;\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n}";
1228
1228
 
@@ -1236,9 +1236,9 @@ var css_248z$9 = "@layer kol-theme-component {\n .cycle {\n padding: calc(2r
1236
1236
 
1237
1237
  var css_248z$8 = "@layer kol-theme-component {\n .kol-split-button {\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-blue);\n border-radius: 4px;\n }\n .kol-split-button__horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .kol-split-button .kol-popover__content {\n background-color: #fff;\n }\n .kol-split-button .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n .kol-split-button .kol-button--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-split-button .kol-button--primary:not(:disabled):hover {\n --text-background-color: #3e6cd5;\n }\n .kol-split-button .kol-button--secondary {\n --text-background-color: #fff;\n --text-color: #0e47cb;\n --text-border-color: #0e47cb;\n --text-focus-outline-color: #fff;\n }\n .kol-split-button .kol-button--secondary:not(:disabled):hover {\n --text-color: #0e47cb;\n }\n .kol-split-button .kol-button--normal {\n --text-background-color: #fc0;\n --text-color: #171a22;\n --text-focus-outline-color: #000;\n --text-border-color: #fc0;\n }\n .kol-split-button .kol-button--normal:not(:disabled):hover {\n --text-background-color: #fc0;\n }\n .kol-split-button .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-split-button .kol-button--danger:not(:disabled):hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-split-button .kol-button--ghost {\n --text-color: #0e47cb;\n --text-focus-outline-color: #0e47cb;\n }\n .kol-split-button .kol-button--ghost:not(:disabled):hover {\n --text-color: #0e47cb;\n }\n .kol-split-button .kol-button:focus {\n outline: none;\n }\n .kol-split-button .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 4px;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-split-button .kol-button__text:active, .kol-split-button .kol-button__text:not(:disabled):hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-split-button .kol-button--secondary .kol-split-button .kol-button__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n .kol-split-button .kol-button--secondary.button:focus-visible .kol-split-button .kol-button__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-split-button .kol-button:focus-visible .kol-split-button .kol-button__text {\n outline-offset: -4px;\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n display: none;\n }\n}";
1238
1238
 
1239
- var css_248z$7 = "@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: 2px;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table {\n display: block;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n font-weight: normal;\n color: var(--color-midnight);\n background-color: var(--color-white);\n }\n .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n font-weight: 700;\n }\n .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n outline-offset: 2px;\n }\n .kol-table__selection-input--radio:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n outline: 2px solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-white);\n }\n .kol-table__selection-icon {\n color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-blue);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-table-stateful__pagination {\n overflow-x: auto;\n overflow-y: hidden;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n grid-auto-flow: column;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}";
1239
+ var css_248z$7 = "@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: 2px;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: 4px;\n }\n .kol-pagination .kol-button:focus {\n outline: none;\n }\n .kol-pagination .kol-button:focus-visible .kol-button__text {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n background-color: #fc0;\n border-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-pagination .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-pagination .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 4px;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n background-color: #fc0;\n color: #171a22;\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n font-weight: bold;\n text-decoration: underline;\n opacity: 1;\n }\n .kol-table {\n display: block;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n font-weight: normal;\n color: var(--color-midnight);\n background-color: var(--color-white);\n }\n .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n font-weight: 700;\n }\n .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n outline-offset: 2px;\n }\n .kol-table__selection-input--radio:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n outline: 2px solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-white);\n }\n .kol-table__selection-icon {\n color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-blue);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-table-stateful__pagination {\n overflow-x: auto;\n overflow-y: hidden;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n grid-auto-flow: column;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}";
1240
1240
 
1241
- var css_248z$6 = "@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: 2px;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table {\n display: block;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n font-weight: normal;\n color: var(--color-midnight);\n background-color: var(--color-white);\n }\n .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n font-weight: 700;\n }\n .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n outline-offset: 2px;\n }\n .kol-table__selection-input--radio:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n outline: 2px solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-white);\n }\n .kol-table__selection-icon {\n color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-blue);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n}";
1241
+ var css_248z$6 = "@layer kol-theme-component {\n .kol-alert--variant-msg {\n border: none;\n }\n .kol-alert--variant-card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: 2px;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--variant-card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--variant-card .kol-alert__icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: 4px;\n }\n .kol-pagination .kol-button:focus {\n outline: none;\n }\n .kol-pagination .kol-button:focus-visible .kol-button__text {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .kol-pagination .kol-button:not(:disabled):active .kol-button__text, .kol-pagination .kol-button:not(:disabled):hover .kol-button__text {\n background-color: #fc0;\n border-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-pagination .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-pagination .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: 4px;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n background-color: #fc0;\n color: #171a22;\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n font-weight: bold;\n text-decoration: underline;\n opacity: 1;\n }\n .kol-table {\n display: block;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0.5em;\n }\n .kol-table__caption {\n padding: 0.5em;\n }\n .kol-table__focus-element:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell {\n padding: 0.5em;\n }\n .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .kol-table__cell--header {\n font-weight: normal;\n color: var(--color-midnight);\n background-color: var(--color-white);\n }\n .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n font-weight: 700;\n }\n .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__row--body:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n .kol-table__selection-input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--color-grey-75);\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio {\n display: block;\n border-color: var(--color-grey-75);\n outline-offset: 2px;\n }\n .kol-table__selection-input--radio:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-table__selection-input--radio:checked {\n outline: 2px solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-input {\n background-color: var(--color-white);\n }\n .kol-table__selection-icon {\n color: var(--color-white);\n }\n .kol-table__selection--indeterminate .kol-table__selection-icon {\n color: var(--color-blue);\n }\n .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n}";
1242
1242
 
1243
1243
  var css_248z$5 = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs__button-group {\n border-bottom: 1px solid var(--color-grey-25);\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n color: var(--color-blue-130);\n }\n .kol-tabs .kol-button:focus .kol-span {\n outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs .kol-button.selected .kol-span {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 -3px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .kol-tabs .kol-button .kol-span {\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n}";
1244
1244