@public-ui/theme-default 1.7.14 → 1.7.16
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 +127 -67
- package/dist/index.mjs +127 -67
- package/package.json +9 -10
package/dist/index.mjs
CHANGED
|
@@ -33,6 +33,9 @@ var loglevel = {exports: {}};
|
|
|
33
33
|
"error"
|
|
34
34
|
];
|
|
35
35
|
|
|
36
|
+
var _loggersByName = {};
|
|
37
|
+
var defaultLogger = null;
|
|
38
|
+
|
|
36
39
|
// Cross-browser bind equivalent that works at least back to IE6
|
|
37
40
|
function bindMethod(obj, methodName) {
|
|
38
41
|
var method = obj[methodName];
|
|
@@ -85,25 +88,33 @@ var loglevel = {exports: {}};
|
|
|
85
88
|
|
|
86
89
|
// These private functions always need `this` to be set properly
|
|
87
90
|
|
|
88
|
-
function replaceLoggingMethods(
|
|
91
|
+
function replaceLoggingMethods() {
|
|
89
92
|
/*jshint validthis:true */
|
|
93
|
+
var level = this.getLevel();
|
|
94
|
+
|
|
95
|
+
// Replace the actual methods.
|
|
90
96
|
for (var i = 0; i < logMethods.length; i++) {
|
|
91
97
|
var methodName = logMethods[i];
|
|
92
98
|
this[methodName] = (i < level) ?
|
|
93
99
|
noop :
|
|
94
|
-
this.methodFactory(methodName, level,
|
|
100
|
+
this.methodFactory(methodName, level, this.name);
|
|
95
101
|
}
|
|
96
102
|
|
|
97
103
|
// Define log.log as an alias for log.debug
|
|
98
104
|
this.log = this.debug;
|
|
105
|
+
|
|
106
|
+
// Return any important warnings.
|
|
107
|
+
if (typeof console === undefinedType && level < this.levels.SILENT) {
|
|
108
|
+
return "No console available for logging";
|
|
109
|
+
}
|
|
99
110
|
}
|
|
100
111
|
|
|
101
112
|
// In old IE versions, the console isn't present until you first open it.
|
|
102
113
|
// We build realMethod() replacements here that regenerate logging methods
|
|
103
|
-
function enableLoggingWhenConsoleArrives(methodName
|
|
114
|
+
function enableLoggingWhenConsoleArrives(methodName) {
|
|
104
115
|
return function () {
|
|
105
116
|
if (typeof console !== undefinedType) {
|
|
106
|
-
replaceLoggingMethods.call(this
|
|
117
|
+
replaceLoggingMethods.call(this);
|
|
107
118
|
this[methodName].apply(this, arguments);
|
|
108
119
|
}
|
|
109
120
|
};
|
|
@@ -111,16 +122,36 @@ var loglevel = {exports: {}};
|
|
|
111
122
|
|
|
112
123
|
// By default, we use closely bound real methods wherever possible, and
|
|
113
124
|
// otherwise we wait for a console to appear, and then try again.
|
|
114
|
-
function defaultMethodFactory(methodName,
|
|
125
|
+
function defaultMethodFactory(methodName, _level, _loggerName) {
|
|
115
126
|
/*jshint validthis:true */
|
|
116
127
|
return realMethod(methodName) ||
|
|
117
128
|
enableLoggingWhenConsoleArrives.apply(this, arguments);
|
|
118
129
|
}
|
|
119
130
|
|
|
120
|
-
function Logger(name,
|
|
131
|
+
function Logger(name, factory) {
|
|
132
|
+
// Private instance variables.
|
|
121
133
|
var self = this;
|
|
122
|
-
|
|
123
|
-
|
|
134
|
+
/**
|
|
135
|
+
* The level inherited from a parent logger (or a global default). We
|
|
136
|
+
* cache this here rather than delegating to the parent so that it stays
|
|
137
|
+
* in sync with the actual logging methods that we have installed (the
|
|
138
|
+
* parent could change levels but we might not have rebuilt the loggers
|
|
139
|
+
* in this child yet).
|
|
140
|
+
* @type {number}
|
|
141
|
+
*/
|
|
142
|
+
var inheritedLevel;
|
|
143
|
+
/**
|
|
144
|
+
* The default level for this logger, if any. If set, this overrides
|
|
145
|
+
* `inheritedLevel`.
|
|
146
|
+
* @type {number|null}
|
|
147
|
+
*/
|
|
148
|
+
var defaultLevel;
|
|
149
|
+
/**
|
|
150
|
+
* A user-specific level for this logger. If set, this overrides
|
|
151
|
+
* `defaultLevel`.
|
|
152
|
+
* @type {number|null}
|
|
153
|
+
*/
|
|
154
|
+
var userLevel;
|
|
124
155
|
|
|
125
156
|
var storageKey = "loglevel";
|
|
126
157
|
if (typeof name === "string") {
|
|
@@ -160,10 +191,12 @@ var loglevel = {exports: {}};
|
|
|
160
191
|
if (typeof storedLevel === undefinedType) {
|
|
161
192
|
try {
|
|
162
193
|
var cookie = window.document.cookie;
|
|
163
|
-
var
|
|
164
|
-
|
|
194
|
+
var cookieName = encodeURIComponent(storageKey);
|
|
195
|
+
var location = cookie.indexOf(cookieName + "=");
|
|
165
196
|
if (location !== -1) {
|
|
166
|
-
storedLevel = /^([^;]+)/.exec(
|
|
197
|
+
storedLevel = /^([^;]+)/.exec(
|
|
198
|
+
cookie.slice(location + cookieName.length + 1)
|
|
199
|
+
)[1];
|
|
167
200
|
}
|
|
168
201
|
} catch (ignore) {}
|
|
169
202
|
}
|
|
@@ -182,7 +215,6 @@ var loglevel = {exports: {}};
|
|
|
182
215
|
// Use localStorage if available
|
|
183
216
|
try {
|
|
184
217
|
window.localStorage.removeItem(storageKey);
|
|
185
|
-
return;
|
|
186
218
|
} catch (ignore) {}
|
|
187
219
|
|
|
188
220
|
// Use session cookie as fallback
|
|
@@ -192,6 +224,18 @@ var loglevel = {exports: {}};
|
|
|
192
224
|
} catch (ignore) {}
|
|
193
225
|
}
|
|
194
226
|
|
|
227
|
+
function normalizeLevel(input) {
|
|
228
|
+
var level = input;
|
|
229
|
+
if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
|
|
230
|
+
level = self.levels[level.toUpperCase()];
|
|
231
|
+
}
|
|
232
|
+
if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
|
|
233
|
+
return level;
|
|
234
|
+
} else {
|
|
235
|
+
throw new TypeError("log.setLevel() called with invalid level: " + input);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
195
239
|
/*
|
|
196
240
|
*
|
|
197
241
|
* Public logger API - see https://github.com/pimterry/loglevel for details
|
|
@@ -206,37 +250,36 @@ var loglevel = {exports: {}};
|
|
|
206
250
|
self.methodFactory = factory || defaultMethodFactory;
|
|
207
251
|
|
|
208
252
|
self.getLevel = function () {
|
|
209
|
-
|
|
253
|
+
if (userLevel != null) {
|
|
254
|
+
return userLevel;
|
|
255
|
+
} else if (defaultLevel != null) {
|
|
256
|
+
return defaultLevel;
|
|
257
|
+
} else {
|
|
258
|
+
return inheritedLevel;
|
|
259
|
+
}
|
|
210
260
|
};
|
|
211
261
|
|
|
212
262
|
self.setLevel = function (level, persist) {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
|
|
217
|
-
currentLevel = level;
|
|
218
|
-
if (persist !== false) { // defaults to true
|
|
219
|
-
persistLevelIfPossible(level);
|
|
220
|
-
}
|
|
221
|
-
replaceLoggingMethods.call(self, level, name);
|
|
222
|
-
if (typeof console === undefinedType && level < self.levels.SILENT) {
|
|
223
|
-
return "No console available for logging";
|
|
224
|
-
}
|
|
225
|
-
} else {
|
|
226
|
-
throw "log.setLevel() called with invalid level: " + level;
|
|
263
|
+
userLevel = normalizeLevel(level);
|
|
264
|
+
if (persist !== false) { // defaults to true
|
|
265
|
+
persistLevelIfPossible(userLevel);
|
|
227
266
|
}
|
|
267
|
+
|
|
268
|
+
// NOTE: in v2, this should call rebuild(), which updates children.
|
|
269
|
+
return replaceLoggingMethods.call(self);
|
|
228
270
|
};
|
|
229
271
|
|
|
230
272
|
self.setDefaultLevel = function (level) {
|
|
231
|
-
defaultLevel = level;
|
|
273
|
+
defaultLevel = normalizeLevel(level);
|
|
232
274
|
if (!getPersistedLevel()) {
|
|
233
275
|
self.setLevel(level, false);
|
|
234
276
|
}
|
|
235
277
|
};
|
|
236
278
|
|
|
237
279
|
self.resetLevel = function () {
|
|
238
|
-
|
|
280
|
+
userLevel = null;
|
|
239
281
|
clearPersistedLevel();
|
|
282
|
+
replaceLoggingMethods.call(self);
|
|
240
283
|
};
|
|
241
284
|
|
|
242
285
|
self.enableAll = function(persist) {
|
|
@@ -247,12 +290,28 @@ var loglevel = {exports: {}};
|
|
|
247
290
|
self.setLevel(self.levels.SILENT, persist);
|
|
248
291
|
};
|
|
249
292
|
|
|
250
|
-
|
|
293
|
+
self.rebuild = function () {
|
|
294
|
+
if (defaultLogger !== self) {
|
|
295
|
+
inheritedLevel = normalizeLevel(defaultLogger.getLevel());
|
|
296
|
+
}
|
|
297
|
+
replaceLoggingMethods.call(self);
|
|
298
|
+
|
|
299
|
+
if (defaultLogger === self) {
|
|
300
|
+
for (var childName in _loggersByName) {
|
|
301
|
+
_loggersByName[childName].rebuild();
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
};
|
|
305
|
+
|
|
306
|
+
// Initialize all the internal levels.
|
|
307
|
+
inheritedLevel = normalizeLevel(
|
|
308
|
+
defaultLogger ? defaultLogger.getLevel() : "WARN"
|
|
309
|
+
);
|
|
251
310
|
var initialLevel = getPersistedLevel();
|
|
252
|
-
if (initialLevel
|
|
253
|
-
|
|
311
|
+
if (initialLevel != null) {
|
|
312
|
+
userLevel = normalizeLevel(initialLevel);
|
|
254
313
|
}
|
|
255
|
-
|
|
314
|
+
replaceLoggingMethods.call(self);
|
|
256
315
|
}
|
|
257
316
|
|
|
258
317
|
/*
|
|
@@ -261,18 +320,19 @@ var loglevel = {exports: {}};
|
|
|
261
320
|
*
|
|
262
321
|
*/
|
|
263
322
|
|
|
264
|
-
|
|
323
|
+
defaultLogger = new Logger();
|
|
265
324
|
|
|
266
|
-
var _loggersByName = {};
|
|
267
325
|
defaultLogger.getLogger = function getLogger(name) {
|
|
268
326
|
if ((typeof name !== "symbol" && typeof name !== "string") || name === "") {
|
|
269
|
-
|
|
327
|
+
throw new TypeError("You must supply a name when creating a logger.");
|
|
270
328
|
}
|
|
271
329
|
|
|
272
330
|
var logger = _loggersByName[name];
|
|
273
331
|
if (!logger) {
|
|
274
|
-
|
|
275
|
-
|
|
332
|
+
logger = _loggersByName[name] = new Logger(
|
|
333
|
+
name,
|
|
334
|
+
defaultLogger.methodFactory
|
|
335
|
+
);
|
|
276
336
|
}
|
|
277
337
|
return logger;
|
|
278
338
|
};
|
|
@@ -299,7 +359,7 @@ var loglevel = {exports: {}};
|
|
|
299
359
|
}));
|
|
300
360
|
} (loglevel));
|
|
301
361
|
|
|
302
|
-
const
|
|
362
|
+
const H=(e,t)=>s=>s(e,t),P=(e,t)=>s=>s(e,t,{append:!1}),o={};const c=new Map,v=[],L=new Set,h=new Map,B=/--[^;]+/g,G=/:/;(typeof o.A11yUi!="object"||o.A11yUi===null)&&(o.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:v,STYLING_TASK_QUEUE:c});const K=(e,t)=>{let s=t.match(B);if(Array.isArray(s)){s=s.filter(r=>G.test(r));const a=document.createElement("style");a.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}L.add(e);},T=(e,t)=>typeof o.A11yUi=="object"&&o.A11yUi!==null&&typeof o.A11yUi.Themes=="object"&&o.A11yUi.Themes!==null&&typeof o.A11yUi.Themes[e]=="object"&&o.A11yUi.Themes[e]!==null&&typeof o.A11yUi.Themes[e][t]=="string"?o.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",q=e=>{for(const t of Array.from(e.childNodes))if(t instanceof HTMLStyleElement&&t.tagName==="STYLE")e.removeChild(t);else break},F=(e,t)=>{try{const s=[];t.forEach(a=>{const r=new CSSStyleSheet;r.replaceSync(a),s.push(r);}),e.adoptedStyleSheets=s;}catch{t.reverse().forEach(s=>{const a=document.createElement("style");a.innerHTML=s,e.insertBefore(a,e.firstChild);});}},Q=(e,t,s)=>{if(s!==!1){const a=[...Array.from(e.childNodes).filter(n=>n instanceof HTMLStyleElement&&n.tagName==="STYLE")];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch{r=[];}s?.mode==="before"?(a.reverse().forEach(n=>t.unshift(n.innerHTML)),r.reverse().forEach(n=>t.unshift(Array.from(n.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(n=>t.push(n.innerHTML)),r.forEach(n=>t.push(Array.from(n.cssRules).map(i=>i.cssText).join(""))));}},M=(e,t,s)=>{const a=t.name||"default";let r;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch{r=e;}if(h.get(a)?.has(e.tagName))$(e,r,h.get(a)?.get(e.tagName),s);else {const n=T(a,"PROPERTIES"),i=T(a,"GLOBAL"),m=T(a,e.tagName);L.has(a)===!1&&K(a,i);const y=[n,i,m];Q(r,y,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,y),t.cache===!0&&(h.has(a)===!1&&h.set(a,new Map),h.get(a)?.set(e.tagName,y)),$(e,r,y,s);}},$=(e,t,s,a)=>{q(t),F(t,s),e.style.display=a;},O=e=>{e.loglevel==="debug"&&v.push({timestamp:Date.now(),numberOfTasks:c.size});},W=e=>{c.delete(e);},R=(e,t)=>{W(e),O(t);},X=e=>{for(const t of e)if(c.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:a}=c.get(t.target);M(t.target,a,s),R(t.target,a);}};let p;try{p=new MutationObserver(X);}catch{p=null;}class te{constructor(t,s,a){this.createTheme=(r,n)=>P(r,n),this.createTranslation=(r,n)=>H(r,n),this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
|
|
303
363
|
|
|
304
364
|
var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
|
|
305
365
|
KeyEnum2[KeyEnum2["error"] = 0] = "error";
|
|
@@ -385,37 +445,37 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
|
|
|
385
445
|
|
|
386
446
|
const KoliBri = new te("kol", KeyEnum, TagEnum);
|
|
387
447
|
|
|
388
|
-
var css_248z$B = ":host {\n --border-radius: var(--kolibri-border-radius, 5px);\n --font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, 16px);\n --spacing: var(--kolibri-spacing, 0.25rem);\n --border-width: var(--kolibri-border-width, 1px);\n --color-primary: var(--kolibri-color-primary, #004b76);\n --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n --color-danger: var(--kolibri-color-danger, #c0003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n}\n\n:host {\n background-color: transparent;\n /* Reset global background-color defined by components */\n font-family: var(--font-family);\n font-size: var(--font-size);\n}\n\n* {\n box-sizing: border-box;\n}\n\n*:not(i) {\n font-family: var(--font-family);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 0;\n padding: 0;\n}\n\n*[tabindex]:focus,\
|
|
448
|
+
var css_248z$B = ":host {\n --border-radius: var(--kolibri-border-radius, 5px);\n --font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, 16px);\n --spacing: var(--kolibri-spacing, 0.25rem);\n --border-width: var(--kolibri-border-width, 1px);\n --color-primary: var(--kolibri-color-primary, #004b76);\n --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n --color-danger: var(--kolibri-color-danger, #c0003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n}\n\n:host {\n background-color: transparent;\n /* Reset global background-color defined by components */\n font-family: var(--font-family);\n font-size: var(--font-size);\n}\n\n* {\n box-sizing: border-box;\n}\n\n*:not(i) {\n font-family: var(--font-family);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 0;\n padding: 0;\n}\n\n*[tabindex]:focus,\n.kol-input:not(.checkbox, .radio) .input:focus-within,\n.kol-input:is(.checkbox, .radio) input:focus,\nsummary:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\n.kol-heading-wc {\n font-weight: 700;\n}\n\n.kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n}\n\n.kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n}\n\n.kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n}\n\n.kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: 0.5rem 0.75rem;\n}\n\n.kol-span-wc,\n.kol-span-wc > span {\n gap: 0.5rem;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}";
|
|
389
449
|
const globalCss = css_248z$B;
|
|
390
450
|
|
|
391
451
|
var css_248z$A = "abbr {\n border-bottom: dashed var(--color-text) 1px;\n text-decoration: none !important;\n}";
|
|
392
452
|
const abbrCss = css_248z$A;
|
|
393
453
|
|
|
394
|
-
var css_248z$z = "kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n text-align: left;\n}\n\n:host > div > kol-heading-wc button {\n border-radius: var(--border-radius);\n min-height: 2.2rem;\n padding: 12px 8px;\n}\n\n:host > div > kol-heading-wc button kol-span-wc {\n font-weight: 700;\n font-size: 1.125rem;\n line-height: 20px;\n gap: 0.5rem;\n}\n\n:host > div > kol-heading-wc button kol-span-wc > span {\n gap: 0.5em;\n}\n\n:host > div > kol-heading-wc button kol-icon {\n color: var(--color-primary);\n}\n\n:host > div {\n width: 100%;\n height: 100%;\n display: grid;\n}\n\n:host > div div[class=header],\n:host > div[class*=open] div[class=content] {\n margin: 0;\n}\n\n:host > div div[class=content] {\n padding-left: 2.25em;\n padding-bottom: 12px;\n padding-right: 8px;\n}\n\nbutton:focus {\n outline: none;\n}\n\n:host > .accordion:focus-within {\n border-radius: var(--border-radius);\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}";
|
|
454
|
+
var css_248z$z = ".kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n text-align: left;\n}\n\n:host > div > .kol-heading-wc button {\n border-radius: var(--border-radius);\n min-height: 2.2rem;\n padding: 12px 8px;\n}\n\n:host > div > .kol-heading-wc button .kol-span-wc {\n font-weight: 700;\n font-size: 1.125rem;\n line-height: 20px;\n gap: 0.5rem;\n}\n\n:host > div > .kol-heading-wc button .kol-span-wc > span {\n gap: 0.5em;\n}\n\n:host > div > .kol-heading-wc button .kol-icon {\n color: var(--color-primary);\n}\n\n:host > div {\n width: 100%;\n height: 100%;\n display: grid;\n}\n\n:host > div div[class=header],\n:host > div[class*=open] div[class=content] {\n margin: 0;\n}\n\n:host > div div[class=content] {\n padding-left: 2.25em;\n padding-bottom: 12px;\n padding-right: 8px;\n}\n\nbutton:focus {\n outline: none;\n}\n\n:host > .accordion:focus-within {\n border-radius: var(--border-radius);\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}";
|
|
395
455
|
const accordionCss = css_248z$z;
|
|
396
456
|
|
|
397
|
-
var css_248z$y = ".
|
|
457
|
+
var css_248z$y = ".kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n}\n\n.msg {\n border-width: 0;\n}\n\n.kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n}\n\n.kol-alert-wc > .heading > div {\n display: grid;\n gap: 0.25rem;\n}\n\n.msg > .heading > .kol-icon {\n place-self: baseline;\n}\n\n.kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n}\n\n.msg {\n align-items: start;\n}\n\n.default {\n border-color: var(--color-subtle);\n}\n\n.default.msg .heading-icon {\n color: var(--color-subtle);\n}\n\n.error {\n border-color: var(--color-danger);\n}\n\n.error.msg .heading-icon {\n color: var(--color-danger);\n}\n\n.info {\n border-color: var(--color-primary);\n}\n\n.info.msg .heading-icon {\n color: var(--color-primary);\n}\n\n.success {\n border-color: var(--color-success);\n}\n\n.success.msg .heading-icon {\n color: var(--color-success);\n}\n\n.warning {\n border-color: var(--color-warning);\n}\n\n.warning.msg .heading-icon {\n color: var(--color-warning);\n}\n\n.heading-icon {\n color: var(--color-light);\n}\n\n.kol-alert-wc .heading .heading-icon {\n padding: 0;\n}\n\n.msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n}\n\n.msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n}\n\n.msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n}\n\n.msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n}\n\n.msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n}\n\n.msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n}\n\n.msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n}\n\n.msg.default .close .icon {\n color: var(--color-subtle);\n}\n\n.msg.error .close .icon {\n color: var(--color-danger);\n}\n\n.msg.info .close .icon {\n color: var(--color-primary);\n}\n\n.msg.success .close .icon {\n color: var(--color-success);\n}\n\n.msg.warning .close .icon {\n color: var(--color-warning);\n}\n\n.card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n flex-direction: column;\n}\n\n.card > .heading {\n padding: 0.5rem 1rem;\n}\n\n.card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n}\n\n.card > .heading > div {\n width: 100%;\n min-height: 1.25rem;\n}\n\n.card > .heading .heading-icon {\n justify-self: right;\n margin-top: -4px;\n}\n\n.card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: 1.25rem;\n line-height: 1.25rem;\n}\n\n.card > .heading .kol-heading-wc > * {\n margin: auto 0;\n}\n\n.card > .content {\n padding: 1rem;\n}\n\n.card.default > .heading {\n background-color: var(--color-subtle);\n}\n\n.card.error > .heading {\n background-color: var(--color-danger);\n}\n\n.card.info > .heading {\n background-color: var(--color-primary);\n}\n\n.card.success > .heading {\n background-color: var(--color-success);\n}\n\n.card.warning > .heading {\n background-color: var(--color-warning);\n}\n\n:is(.error, .info, .success, .warning) .heading-icon {\n font-size: 1.25rem;\n}\n\n.card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n}\n\n.card.default .close {\n background-color: var(--color-subtle);\n}\n\n.card.error .close {\n background-color: var(--color-danger);\n}\n\n.card.info .close {\n background-color: var(--color-primary);\n}\n\n.card.success .close {\n background-color: var(--color-success);\n}\n\n.card.warning .close {\n background-color: var(--color-warning);\n}\n\n.close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n}\n\n.close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: 1.2rem;\n}\n\n.close > button:active {\n box-shadow: none;\n outline: none;\n}";
|
|
398
458
|
const alertCss = css_248z$y;
|
|
399
459
|
|
|
400
|
-
var css_248z$x = ":host {\n display: inline-block;\n font-size: inherit;\n}\n\n:host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n}\n\n:host > span.smart-button {\n align-items: center;\n}\n\n:host > span kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n}\n\n:host > span kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: 0.2rem;\n}\n\n:host > span kol-span-wc {\n padding: 0.25rem 0.75rem;\n}\n\n:host > span > kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: 0.5rem;\n}\n\n:host > span > kol-span-wc > span {\n display: flex;\n gap: 0.25rem;\n}";
|
|
460
|
+
var css_248z$x = ":host {\n display: inline-block;\n font-size: inherit;\n}\n\n:host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n}\n\n:host > span.smart-button {\n align-items: center;\n}\n\n:host > span .kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n}\n\n:host > span .kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: 0.2rem;\n}\n\n:host > span .kol-span-wc {\n padding: 0.25rem 0.75rem;\n}\n\n:host > span > .kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: 0.5rem;\n}\n\n:host > span > .kol-span-wc > span {\n display: flex;\n gap: 0.25rem;\n}";
|
|
401
461
|
const badgeCss = css_248z$x;
|
|
402
462
|
|
|
403
|
-
var css_248z$w = "li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {\n font-size: 0.75rem;\n color: var(--color-subtle);\n}\n\
|
|
463
|
+
var css_248z$w = "li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n font-size: 0.75rem;\n color: var(--color-subtle);\n}\n\n.kol-link::part(icon) {\n font-size: 1.25rem;\n}\n\nul li > :is(span, .kol-link) {\n line-height: 1.25rem;\n height: 20px;\n}\n\nul li:last-child > span {\n color: var(--color-subtle);\n}";
|
|
404
464
|
const breadcrumbCss = css_248z$w;
|
|
405
465
|
|
|
406
|
-
var css_248z$v = ":is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n}\n\n:is(a, button) > kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n}\n\n:is(a, button):disabled > kol-span-wc {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.primary :is(a, button) > kol-span-wc,\n.primary :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n}\n\n.secondary :is(a, button) > kol-span-wc,\n.secondary :is(a, button):disabled:hover > kol-span-wc,\n.normal :is(a, button) > kol-span-wc,\n.normal :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.danger :is(a, button) > kol-span-wc,\n.danger :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n}\n\n.ghost :is(a, button) > kol-span-wc,\n.ghost :is(a, button):disabled:hover > kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n}\n\n/*-----------*/\n.primary :is(a, button):active > kol-span-wc,\n.primary :is(a, button):hover > kol-span-wc,\n.secondary :is(a, button):active > kol-span-wc,\n.secondary :is(a, button):hover > kol-span-wc,\n.normal :is(a, button):active > kol-span-wc,\n.normal :is(a, button):hover > kol-span-wc,\n.danger :is(a, button):active > kol-span-wc,\n.danger :is(a, button):hover > kol-span-wc,\n.ghost :is(a, button):active > kol-span-wc,\n.ghost :is(a, button):hover > kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n.danger :is(a, button):active > kol-span-wc,\n.danger :is(a, button):hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n}\n\n:is(a, button):disabled:hover > kol-span-wc,\n:is(a, button):focus:hover > kol-span-wc {\n box-shadow: none;\n}\n\n.primary :is(a, button):active > kol-span-wc,\n.secondary :is(a, button):active > kol-span-wc,\n.normal :is(a, button):active > kol-span-wc,\n.danger :is(a, button):active > kol-span-wc,\n.ghost :is(a, button):active > kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n}\n\n:is(a, button).hide-label > kol-span-wc {\n padding: 0.8rem;\n width: unset;\n}\n\n:is(a, button).hide-label > kol-span-wc > span > span {\n display: none;\n}\n\n:is(a, button).loading > kol-span-wc kol-icon {\n animation: spin 5s infinite linear;\n}\n\n/** small ghost button */\n.ghost :is(a, button).small > kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n}\n\n.ghost :is(a, button).small > kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n}\n\n.ghost :is(a, button).small:active > kol-span-wc > span,\n.ghost :is(a, button).small:hover > kol-span-wc > span,\n.ghost :is(a, button).small.transparent:active > kol-span-wc > span,\n.ghost :is(a, button).small.transparent:hover > kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n/** :is(a,button) with transparent background */\n:is(a, button).transparent > kol-span-wc > span,\n.ghost :is(a, button).small.transparent > kol-span-wc > span,\n:is(a, button).transparent > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n}";
|
|
466
|
+
var css_248z$v = ":is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus .kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n}\n\n:is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n}\n\n:is(a, button):disabled > .kol-span-wc {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.primary :is(a, button) > .kol-span-wc,\n.primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n}\n\n.secondary :is(a, button) > .kol-span-wc,\n.secondary :is(a, button):disabled:hover > .kol-span-wc,\n.normal :is(a, button) > .kol-span-wc,\n.normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.danger :is(a, button) > .kol-span-wc,\n.danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n}\n\n.ghost :is(a, button) > .kol-span-wc,\n.ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n}\n\n/*-----------*/\n.primary :is(a, button):active > .kol-span-wc,\n.primary :is(a, button):hover > .kol-span-wc,\n.secondary :is(a, button):active > .kol-span-wc,\n.secondary :is(a, button):hover > .kol-span-wc,\n.normal :is(a, button):active > .kol-span-wc,\n.normal :is(a, button):hover > .kol-span-wc,\n.danger :is(a, button):active > .kol-span-wc,\n.danger :is(a, button):hover > .kol-span-wc,\n.ghost :is(a, button):active > .kol-span-wc,\n.ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n.danger :is(a, button):active > .kol-span-wc,\n.danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n}\n\n:is(a, button):disabled:hover > .kol-span-wc,\n:is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n}\n\n.primary :is(a, button):active > .kol-span-wc,\n.secondary :is(a, button):active > .kol-span-wc,\n.normal :is(a, button):active > .kol-span-wc,\n.danger :is(a, button):active > .kol-span-wc,\n.ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n}\n\n:is(a, button).hide-label > .kol-span-wc {\n padding: 0.8rem;\n width: unset;\n}\n\n:is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n}\n\n:is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n}\n\n/** small ghost button */\n.ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n}\n\n.ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n}\n\n.ghost :is(a, button).small:active > .kol-span-wc > span,\n.ghost :is(a, button).small:hover > .kol-span-wc > span,\n.ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n.ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n/** :is(a,button) with transparent background */\n:is(a, button).transparent > .kol-span-wc > span,\n.ghost :is(a, button).small.transparent > .kol-span-wc > span,\n:is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n}";
|
|
407
467
|
const buttonCss = css_248z$v;
|
|
408
468
|
|
|
409
|
-
var css_248z$u = ":host > kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n}";
|
|
469
|
+
var css_248z$u = ":host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n}";
|
|
410
470
|
const buttonGroupCss = css_248z$u;
|
|
411
471
|
|
|
412
|
-
var css_248z$t = ":is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n font-size: inherit;\n}\n\n:is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n}\n\n:is(a, button):hover {\n text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n color: var(--visited);\n}\n\n.hidden {\n display: none;\n visibility: hidden;\n}\n\n.skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n}\n\n.skip:focus {\n background: white;\n left: unset;\n position: unset;\n}";
|
|
472
|
+
var css_248z$t = ":is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n font-size: inherit;\n}\n\n:is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n}\n\n:is(a, button):hover {\n text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n color: var(--visited);\n}\n\n.hidden {\n display: none;\n visibility: hidden;\n}\n\n.skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n}\n\n.skip:focus {\n background: white;\n left: unset;\n position: unset;\n}";
|
|
413
473
|
const buttonLinkCss = css_248z$t;
|
|
414
474
|
|
|
415
|
-
var css_248z$s = "/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n:host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 0.25rem var(--color-subtle);\n border-radius: var(--border-radius);\n}\n\n:host kol-heading-wc {\n line-height: 1.75rem;\n}\n\n:host div.header {\n padding: 1rem 1rem 0.5rem 1rem;\n}\n\n:host div.content {\n padding: 0.5rem 1rem 1rem;\n overflow: hidden;\n}\n\n:host div.footer {\n padding: 0.5rem 1rem;\n}";
|
|
475
|
+
var css_248z$s = "/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n:host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 0.25rem var(--color-subtle);\n border-radius: var(--border-radius);\n}\n\n:host .kol-heading-wc {\n line-height: 1.75rem;\n}\n\n:host div.header {\n padding: 1rem 1rem 0.5rem 1rem;\n}\n\n:host div.content {\n padding: 0.5rem 1rem 1rem;\n overflow: hidden;\n}\n\n:host div.footer {\n padding: 0.5rem 1rem;\n}";
|
|
416
476
|
const cardCss = css_248z$s;
|
|
417
477
|
|
|
418
|
-
var css_248z$r = "details > summary {\n border-radius: var(--border-radius);\n}\n\ndetails kol-indented-text {\n margin: 0.25rem 0 0 0.65rem;\n}\n\
|
|
478
|
+
var css_248z$r = "details > summary {\n border-radius: var(--border-radius);\n}\n\ndetails .kol-indented-text-wc {\n margin: 0.25rem 0 0 0.65rem;\n}\n\n.kol-icon {\n font-size: 1.2rem;\n}";
|
|
419
479
|
const detailsCss = css_248z$r;
|
|
420
480
|
|
|
421
481
|
var css_248z$q = "h1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n color: inherit;\n font-style: normal;\n}\n\nh1,\nh2,\nh3 {\n font-weight: 700;\n}\n\nh1 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n}\n\nh2 {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\nh3 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n}";
|
|
@@ -427,46 +487,46 @@ const iconCss = css_248z$p;
|
|
|
427
487
|
var css_248z$o = ":host > div {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0px 0px var(--color-primary-variant);\n padding: 0 0.5rem;\n width: 100%;\n}";
|
|
428
488
|
const indentedTextCss = css_248z$o;
|
|
429
489
|
|
|
430
|
-
var css_248z$n = ":host kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: 0.4rem;\n}\n\n:host kol-input.default {\n grid-template-columns: 1.5rem auto;\n}\n\n:host kol-input.switch {\n grid-template-columns: 3.5rem auto;\n}\n\n:host kol-input.button {\n gap: 0.4rem 0;\n}\n\n.checkbox-container {\n justify-content: flex-start;\n}\n\n:host kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n}\n\n:host kol-input > div.input input {\n margin: 0px;\n}\n\n:host kol-input > label {\n cursor: pointer;\n order: 3;\n}\n\n:host kol-input > kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n}\n\n:host kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n:host kol-input.error input:focus,\
|
|
490
|
+
var css_248z$n = ":host .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: 0.4rem;\n}\n\n:host .kol-input.default {\n grid-template-columns: 1.5rem auto;\n}\n\n:host .kol-input.switch {\n grid-template-columns: 3.5rem auto;\n}\n\n:host .kol-input.button {\n gap: 0.4rem 0;\n}\n\n.checkbox-container {\n justify-content: flex-start;\n}\n\n:host .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n}\n\n:host .kol-input > div.input input {\n margin: 0px;\n}\n\n:host .kol-input > label {\n cursor: pointer;\n order: 3;\n}\n\n:host .kol-input > .kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n}\n\n:host .kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n:host .kol-input.error input:focus,\n.kol-input.error select:focus,\n.kol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n}\n\n:host .kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n:host input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: 24px;\n font-size: 1rem;\n}\n\n:host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\n:host input:focus:hover {\n box-shadow: none;\n}\n\n:host input:active {\n box-shadow: none;\n}\n\n:host .kol-alert {\n display: block;\n width: 100%;\n}\n\n/* CHECKBOX */\n:host .kol-input label span {\n margin-top: 0.125rem;\n}\n\n:host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n:host .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n}\n\n:host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n}\n\n:host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n}\n\n:host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n}\n\n:host .kol-input.default .icon {\n color: var(--color-light);\n margin-left: 0.25rem;\n}\n\n:host .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n outline: transparent solid 1px;\n}\n\n:host .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n}\n\n:host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n}\n\n:host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n}\n\n:host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n}\n\n.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n}\n.switch.checked .icon {\n transform: translate(2em, -50%);\n}\n.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n}\n\n:host .disabled {\n opacity: 0.33;\n}\n\n.button:focus-within {\n border-radius: var(--border-radius);\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n}";
|
|
431
491
|
const inputCheckboxCss = css_248z$n;
|
|
432
492
|
|
|
433
|
-
var css_248z$m = "kol-input {\n gap: 0.25rem;\n}\n\
|
|
493
|
+
var css_248z$m = ".kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput[type=color] {\n border: none;\n min-height: 40px !important;\n}\n\ninput[type=color] {\n background-color: transparent;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
|
|
434
494
|
const inputColorCss = css_248z$m;
|
|
435
495
|
|
|
436
|
-
var css_248z$l = "kol-input {\n gap: 0.25rem;\n}\n\
|
|
496
|
+
var css_248z$l = ".kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
|
|
437
497
|
const inputDateCss = css_248z$l;
|
|
438
498
|
|
|
439
|
-
var css_248z$k = "kol-input {\n gap: 0.25rem;\n}\n\
|
|
499
|
+
var css_248z$k = ".kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
|
|
440
500
|
const inputEmailCss = css_248z$k;
|
|
441
501
|
|
|
442
|
-
var css_248z$j = "kol-input {\n gap: 0.25rem;\n}\n\
|
|
502
|
+
var css_248z$j = ".kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\n.kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2px);\n}\n\ninput {\n border: none;\n}\n\ninput[type=file] {\n background-color: transparent;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.kol-input.disabled :is(button, input, label, option, select, textarea) {\n opacity: 1;\n}\n\n.kol-input.disabled :is(input, select, textarea, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
|
|
443
503
|
const inputFileCss = css_248z$j;
|
|
444
504
|
|
|
445
|
-
var css_248z$i = "kol-input {\n gap: 0.25rem;\n}\n\
|
|
505
|
+
var css_248z$i = ".kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
|
|
446
506
|
const inputNumberCss = css_248z$i;
|
|
447
507
|
|
|
448
|
-
var css_248z$h = "kol-input {\n gap: 0.25rem;\n}\n\
|
|
508
|
+
var css_248z$h = ".kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.kol-input.disabled :is(button, input, label, option, select, textarea) {\n opacity: 1;\n}\n\n.kol-input.disabled :is(input, select, textarea, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
|
|
449
509
|
const inputPasswordCss = css_248z$h;
|
|
450
510
|
|
|
451
|
-
var css_248z$g = "label {\n cursor: pointer;\n display: grid;\n line-height: 20px;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n}\n\ninput {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: 24px;\n}\n\ninput:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\ninput:focus:hover {\n box-shadow: none;\n}\n\ninput:hover {\n border-color: var(--color-primary);\n}\n\
|
|
511
|
+
var css_248z$g = "label {\n cursor: pointer;\n display: grid;\n line-height: 20px;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n}\n\ninput {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: 24px;\n}\n\ninput:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\ninput:focus:hover {\n box-shadow: none;\n}\n\ninput:hover {\n border-color: var(--color-primary);\n}\n\n.kol-alert {\n display: block;\n width: 100%;\n}\n\n.required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n/* RADIO */\nfieldset {\n border: 0px;\n margin: 0px;\n padding: 0px;\n display: grid;\n gap: 0.25em;\n}\n\nfieldset div {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n}\n\nfieldset div label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n}\n\nfieldset div label span {\n margin-top: 0.125em;\n}\n\nfieldset div input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n}\n\nfieldset div input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n}\n\nfieldset div input[type=radio]:checked:before {\n background-color: var(--color-primary);\n}\n\nfieldset div input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n}\n\n.kol-alert.error {\n order: 1;\n}\n\nfieldset legend {\n order: 2;\n display: contents;\n}\n\nfieldset .kol-input {\n order: 3;\n}\n\nfieldset.error {\n padding-left: 1rem;\n border-left: 3px solid var(--color-danger);\n}\n\n.kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nfieldset.error input:focus,\nfieldset.error select:focus,\nfieldset.error textarea:focus {\n outline-color: var(--color-danger) !important;\n}\n\nfieldset.error .kol-alert.error {\n margin-left: -0.25em;\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.disabled {\n opacity: 0.33;\n}\n\nfieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n}\n\nfieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n}\n\nfieldset .input-slot {\n gap: var(--spacing);\n}\n\nfieldset div label {\n padding-left: 0;\n}";
|
|
452
512
|
const inputRadioCss = css_248z$g;
|
|
453
513
|
|
|
454
|
-
var css_248z$f = ".inputs-wrapper {\n gap: 1rem;\n}\n\
|
|
514
|
+
var css_248z$f = ".inputs-wrapper {\n gap: 1rem;\n}\n\n.kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 1rem;\n}\n\n.input.icon-left > .kol-icon:first-child {\n margin-right: 0.5rem;\n}\n\n.input.icon-right > .kol-icon:last-child {\n margin-left: 0.5rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\n.kol-input.disabled :is(.input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
|
|
455
515
|
const inputRangeCss = css_248z$f;
|
|
456
516
|
|
|
457
|
-
var css_248z$e = "kol-input {\n gap: 0.25rem;\n}\n\
|
|
517
|
+
var css_248z$e = ".kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n}";
|
|
458
518
|
const inputTextCss = css_248z$e;
|
|
459
519
|
|
|
460
|
-
var css_248z$d = ":is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n}\n\n:is(a, button) > kol-span-wc {\n font-weight: 700;\n border-radius: var(--a11y-min-size);\n border-style: solid;\n outline-width: calc(var(--border-width) * 2);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n}\n\n:is(a, button):disabled > kol-span-wc {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.primary :is(a, button) > kol-span-wc,\n.primary :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n}\n\n.secondary :is(a, button) > kol-span-wc,\n.secondary :is(a, button):disabled:hover > kol-span-wc,\n.normal :is(a, button) > kol-span-wc,\n.normal :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.danger :is(a, button) > kol-span-wc,\n.danger :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n}\n\n.ghost :is(a, button) > kol-span-wc,\n.ghost :is(a, button):disabled:hover > kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n}\n\n/*-----------*/\n.primary :is(a, button):active > kol-span-wc,\n.primary :is(a, button):hover > kol-span-wc,\n.secondary :is(a, button):active > kol-span-wc,\n.secondary :is(a, button):hover > kol-span-wc,\n.normal :is(a, button):active > kol-span-wc,\n.normal :is(a, button):hover > kol-span-wc,\n.danger :is(a, button):active > kol-span-wc,\n.danger :is(a, button):hover > kol-span-wc,\n.ghost :is(a, button):active > kol-span-wc,\n.ghost :is(a, button):hover > kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n.danger :is(a, button):active > kol-span-wc,\n.danger :is(a, button):hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n}\n\n:is(a, button):disabled:hover > kol-span-wc,\n:is(a, button):focus:hover > kol-span-wc {\n box-shadow: none;\n}\n\n.primary :is(a, button):active > kol-span-wc,\n.secondary :is(a, button):active > kol-span-wc,\n.normal :is(a, button):active > kol-span-wc,\n.danger :is(a, button):active > kol-span-wc,\n.ghost :is(a, button):active > kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n}\n\n:is(a, button).hide-label > kol-span-wc {\n padding: 0.8rem;\n width: unset;\n}\n\n:is(a, button).hide-label > kol-span-wc > span > span {\n display: none;\n}\n\n:is(a, button).loading > kol-span-wc kol-icon {\n animation: spin 5s infinite linear;\n}\n\n/** small ghost button */\n.ghost :is(a, button).small > kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n}\n\n.ghost :is(a, button).small > kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n}\n\n.ghost :is(a, button).small:active > kol-span-wc > span,\n.ghost :is(a, button).small:hover > kol-span-wc > span,\n.ghost :is(a, button).small.transparent:active > kol-span-wc > span,\n.ghost :is(a, button).small.transparent:hover > kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n/** :is(a,button) with transparent background */\n:is(a, button).transparent > kol-span-wc > span,\n.ghost :is(a, button).small.transparent > kol-span-wc > span,\n:is(a, button).transparent > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n}";
|
|
520
|
+
var css_248z$d = ":is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus .kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n}\n\n:is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--a11y-min-size);\n border-style: solid;\n outline-width: calc(var(--border-width) * 2);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n}\n\n:is(a, button):disabled > .kol-span-wc {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.primary :is(a, button) > .kol-span-wc,\n.primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n}\n\n.secondary :is(a, button) > .kol-span-wc,\n.secondary :is(a, button):disabled:hover > .kol-span-wc,\n.normal :is(a, button) > .kol-span-wc,\n.normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.danger :is(a, button) > .kol-span-wc,\n.danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n}\n\n.ghost :is(a, button) > .kol-span-wc,\n.ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n}\n\n/*-----------*/\n.primary :is(a, button):active > .kol-span-wc,\n.primary :is(a, button):hover > .kol-span-wc,\n.secondary :is(a, button):active > .kol-span-wc,\n.secondary :is(a, button):hover > .kol-span-wc,\n.normal :is(a, button):active > .kol-span-wc,\n.normal :is(a, button):hover > .kol-span-wc,\n.danger :is(a, button):active > .kol-span-wc,\n.danger :is(a, button):hover > .kol-span-wc,\n.ghost :is(a, button):active > .kol-span-wc,\n.ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n.danger :is(a, button):active > .kol-span-wc,\n.danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n}\n\n:is(a, button):disabled:hover > .kol-span-wc,\n:is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n}\n\n.primary :is(a, button):active > .kol-span-wc,\n.secondary :is(a, button):active > .kol-span-wc,\n.normal :is(a, button):active > .kol-span-wc,\n.danger :is(a, button):active > .kol-span-wc,\n.ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n}\n\n:is(a, button).hide-label > .kol-span-wc {\n padding: 0.8rem;\n width: unset;\n}\n\n:is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n}\n\n:is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n}\n\n/** small ghost button */\n.ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n}\n\n.ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n}\n\n.ghost :is(a, button).small:active > .kol-span-wc > span,\n.ghost :is(a, button).small:hover > .kol-span-wc > span,\n.ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n.ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n}\n\n/** :is(a,button) with transparent background */\n:is(a, button).transparent > .kol-span-wc > span,\n.ghost :is(a, button).small.transparent > .kol-span-wc > span,\n:is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n}";
|
|
461
521
|
const linkButtonCss = css_248z$d;
|
|
462
522
|
|
|
463
|
-
var css_248z$c = ":is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n}\n\n:is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n}\n\n:is(a, button):hover {\n text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n color: var(--visited);\n}\n\n.hidden {\n display: none;\n visibility: hidden;\n}\n\n.skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n}\n\n.skip:focus {\n background: white;\n left: unset;\n position: unset;\n}";
|
|
523
|
+
var css_248z$c = ":is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n}\n\n:is(a, button):focus {\n outline: none;\n}\n\n:is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n}\n\n:is(a, button):hover {\n text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n color: var(--visited);\n}\n\n.hidden {\n display: none;\n visibility: hidden;\n}\n\n.skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n}\n\n.skip:focus {\n background: white;\n left: unset;\n position: unset;\n}";
|
|
464
524
|
const linkCss = css_248z$c;
|
|
465
525
|
|
|
466
526
|
var css_248z$b = ":host .overlay .modal {\n max-height: calc(100% - 32px);\n}";
|
|
467
527
|
const modalCss = css_248z$b;
|
|
468
528
|
|
|
469
|
-
var css_248z$a = "* {\n margin: 0;\n padding: 0;\n}\n\nnav {\n font-family: var(--font-family);\n font-size: var(--font-size);\n background-color: var(--color-mute);\n width: 100%;\n}\n\nul {\n list-style: none;\n}\n\
|
|
529
|
+
var css_248z$a = "* {\n margin: 0;\n padding: 0;\n}\n\nnav {\n font-family: var(--font-family);\n font-size: var(--font-size);\n background-color: var(--color-mute);\n width: 100%;\n}\n\nul {\n list-style: none;\n}\n\n.kol-link-wc,\na {\n height: 100%;\n min-height: var(--a11y-min-size);\n display: flex;\n place-items: center;\n}\n\n.entry > .kol-span-wc > span {\n width: 100%;\n}\n\n.entry > :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {\n background-color: var(--color-light);\n text-decoration: none;\n color: var(--color-primary);\n width: 100%;\n display: flex;\n align-items: center;\n font-style: normal;\n line-height: 1.5rem;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n letter-spacing: 0.175px;\n}\n\n.entry > :is(.kol-link-wc, .kol-button-wc):first-child :is(a, button) {\n color: var(--color-primary);\n text-decoration: none;\n}\n\n.entry > :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child:hover {\n border-left-color: var(--color-primary-variant);\n background-color: var(--color-primary-variant);\n}\n\n.entry > :is(.kol-link-wc, .kol-button-wc, .kol-span-wc):first-child:hover > :is(a, button, span) {\n color: var(--color-primary-variant);\n font-weight: 700;\n letter-spacing: unset;\n}\n\n.selected > :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {\n background-color: var(--color-primary-variant);\n color: var(--color-primary);\n font-weight: 700;\n}\n\n.selected > :is(.kol-link-wc, .kol-button-wc, .kol-span-wc):first-child > :is(a, button, span) {\n font-weight: 700;\n}\n\n.selected :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child:hover {\n color: var(--color-primary-variant);\n letter-spacing: unset;\n}\n\n.entry > .kol-span-wc > span,\n.entry :is(a, button) {\n border-left-color: transparent;\n border-left-style: solid;\n border-left-width: 0.5rem;\n padding: 0.75rem 0.5rem 0.75rem 0.25rem;\n}\n\n.selected :is(a, button),\n[exportparts*=selected] a {\n border-left-color: var(--color-primary);\n}\n\n/** Compact mode */\n.entry.compact :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {\n place-items: center;\n}\n\n.entry.compact > .kol-span-wc > span {\n flex-direction: column;\n}\n\n.entry.compact > .kol-span-wc > span,\n.entry.compact :is(a, button) {\n padding-left: 0;\n}";
|
|
470
530
|
const navCss = css_248z$a;
|
|
471
531
|
|
|
472
532
|
var css_248z$9 = ":host {\n display: grid;\n gap: 1rem;\n}\n\n:host .navigation-list {\n display: inline-flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n}\n\n:host .selected button {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n display: grid;\n place-items: center;\n font-family: var(--font-family);\n cursor: not-allowed;\n font-weight: 700;\n border-radius: 50%;\n border: none;\n font-style: normal;\n text-align: center;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n color: var(--color-primary);\n background-color: var(--color-mute-variant);\n}\n\n:host > div > span {\n align-self: flex-end;\n padding-bottom: 0.5rem;\n color: var(--color-primary);\n}";
|
|
@@ -475,10 +535,10 @@ const paginationCss = css_248z$9;
|
|
|
475
535
|
var css_248z$8 = ":host progress,\n:host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n}\n\n:host svg line:first-child,\n:host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n}\n\n:host svg line:last-child,\n:host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n}\n\n.cycle .progress {\n stroke: var(--color-primary-variant);\n}";
|
|
476
536
|
const progressCss = css_248z$8;
|
|
477
537
|
|
|
478
|
-
var css_248z$7 = "kol-input {\n gap: 0.25rem;\n}\n\
|
|
538
|
+
var css_248z$7 = ".kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\nselect {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 2rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\nselect:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.kol-input.disabled :is(select, label, option) {\n opacity: 1;\n}\n\n.kol-input.disabled :is(select, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n}\n\nselect[multiple] {\n overflow: auto;\n}\n\nselect option {\n margin: 1px 0;\n padding: 0.5em;\n border-radius: var(--border-radius);\n cursor: pointer;\n}\n\nselect option:disabled {\n cursor: not-allowed;\n}\n\noption:active:not(:disabled),\noption:checked:not(:disabled),\noption:focus:not(:disabled),\noption:hover:not(:disabled) {\n background: var(--color-primary-variant);\n color: var(--color-light);\n}";
|
|
479
539
|
const selectCss = css_248z$7;
|
|
480
540
|
|
|
481
|
-
var css_248z$6 = "kol-link-wc > a > kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1rem;\n padding: 8px 14px;\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n}";
|
|
541
|
+
var css_248z$6 = ".kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1rem;\n padding: 8px 14px;\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n}";
|
|
482
542
|
const skipNavCss = css_248z$6;
|
|
483
543
|
|
|
484
544
|
var css_248z$5 = ".spin {\n display: inline-block;\n height: 1rem;\n position: relative;\n width: 3rem;\n}\n\n.spin span {\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n border: 0.1rem solid rgb(255, 255, 255);\n border-radius: 50%;\n height: 0.8rem;\n width: 0.8rem;\n top: 0.1rem;\n position: absolute;\n}\n\n.spin span:nth-child(1) {\n background-color: #fc0;\n z-index: 0;\n animation: 2s ease 0s infinite normal none running spin1;\n left: 0.1rem;\n}\n\n.spin span:nth-child(2) {\n background-color: #f00;\n z-index: 1;\n animation: 2s ease 0s infinite normal none running spin2;\n left: 0.1rem;\n}\n\n.spin span:nth-child(3) {\n background-color: #000;\n z-index: 1;\n animation: 2s ease 0s infinite normal none running spin2;\n left: 1.1rem;\n}\n\n.spin span:nth-child(4) {\n background-color: #666;\n z-index: 0;\n animation: 2s ease 0s infinite normal none running spin3;\n left: 2.1rem;\n}\n\n@keyframes spin1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes spin2 {\n 0% {\n transform: translate(0px, 0px);\n }\n 100% {\n transform: translate(1rem, 0px);\n }\n}\n@keyframes spin3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n}";
|
|
@@ -487,13 +547,13 @@ const spinCss = css_248z$5;
|
|
|
487
547
|
var css_248z$4 = ".popover {\n background: #fff;\n}";
|
|
488
548
|
const splitButtonCss = css_248z$4;
|
|
489
549
|
|
|
490
|
-
var css_248z$3 = ":host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n}\n\n:host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5rem;\n}\n\nth {\n font-weight: normal;\n color: var(--color-primary);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\n.table {\n padding: 0.5rem;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\nth {\n background-color: var(--color-light);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntr:nth-child(even) {\n background-color: var(--color-mute);\n}\n\nth,\ntd {\n padding: 0.5rem;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n div.pagination kol-pagination {\n display: flex;\n align-items: center;\n }\n}";
|
|
550
|
+
var css_248z$3 = ":host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n}\n\n:host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5rem;\n}\n\nth {\n font-weight: normal;\n color: var(--color-primary);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\n.table {\n padding: 0.5rem;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\nth {\n background-color: var(--color-light);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntr:nth-child(even) {\n background-color: var(--color-mute);\n}\n\nth,\ntd {\n padding: 0.5rem;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n}";
|
|
491
551
|
const tableCss = css_248z$3;
|
|
492
552
|
|
|
493
|
-
var css_248z$2 = "button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n:host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n}\n\nbutton {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: 18px;\n line-height: 22px;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n}\n\nbutton:hover {\n color: var(--color-primary);\n}\n\nbutton.primary,\nbutton.selected {\n color: var(--color-primary);\n}\n\nbutton:not(.selected) kol-span-wc > span {\n padding-bottom: 0.25em;\n}\n\nbutton.selected kol-span-wc > span {\n border-bottom: 0.25em solid;\n}\n\nbutton kol-span-wc > span {\n gap: 0.5rem;\n}\n\n:host > div > div {\n padding: 0.25em 0;\n}\n\ndiv[role=tabpanel] {\n height: 100%;\n}\n\ndiv.grid {\n height: 100%;\n}\n\n:host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n}\n\n:host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n}\n\n:host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > div {\n display: grid;\n}\n\n:host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n order: 1;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n display: grid;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n width: 100%;\n}\n\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n}\n\n:host kol-button-group-wc button {\n border: none;\n}";
|
|
553
|
+
var css_248z$2 = "button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n:host .kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n}\n\nbutton {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: 18px;\n line-height: 22px;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n}\n\nbutton:hover {\n color: var(--color-primary);\n}\n\nbutton.primary,\nbutton.selected {\n color: var(--color-primary);\n}\n\nbutton:not(.selected) .kol-span-wc > span {\n padding-bottom: 0.25em;\n}\n\nbutton.selected .kol-span-wc > span {\n border-bottom: 0.25em solid;\n}\n\nbutton .kol-span-wc > span {\n gap: 0.5rem;\n}\n\n:host > div > div {\n padding: 0.25em 0;\n}\n\ndiv[role=tabpanel] {\n height: 100%;\n}\n\ndiv.grid {\n height: 100%;\n}\n\n:host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right .kol-button-group-wc {\n display: grid;\n order: 2;\n}\n\n:host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left .kol-button-group-wc {\n display: grid;\n order: 0;\n}\n\n:host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc {\n order: 2;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-top .kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-top > .kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > div {\n display: grid;\n}\n\n:host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left .kol-button-group-wc,\n:host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc,\n:host > .tabs-align-right .kol-button-group-wc {\n order: 1;\n}\n\n:host > .tabs-align-left .kol-button-group-wc,\n:host > .tabs-align-right .kol-button-group-wc {\n gap: inherit;\n}\n\n:host > div.tabs-align-left .kol-button-group-wc > div,\n:host > div.tabs-align-left .kol-button-group-wc > div > div,\n:host > div.tabs-align-right .kol-button-group-wc > div,\n:host > div.tabs-align-right .kol-button-group-wc > div > div {\n display: grid;\n}\n\n:host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n:host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n width: 100%;\n}\n\n:host > div.tabs-align-bottom .kol-button-group-wc div,\n:host > div.tabs-align-top .kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n}\n\n:host .kol-button-group-wc button {\n border: none;\n}";
|
|
494
554
|
const tabsCss = css_248z$2;
|
|
495
555
|
|
|
496
|
-
var css_248z$1 = "kol-input {\n gap: 0.25rem;\n}\n\
|
|
556
|
+
var css_248z$1 = ".kol-input {\n gap: 0.25rem;\n}\n\n.kol-input .error {\n order: 1;\n}\n\n.kol-input label {\n order: 2;\n}\n\n.kol-input .input {\n order: 3;\n}\n\n.kol-input .counter {\n order: 4;\n}\n\n.kol-input .hint {\n order: 5;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ntextarea {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > .kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ntextarea:read-only,\ntextarea:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n.kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.disabled {\n opacity: 0.33;\n}\n\nselect[multiple],\ntextarea {\n overflow: auto;\n}\n\ntextarea {\n display: block;\n}\n\n.input {\n position: relative;\n}";
|
|
497
557
|
const textareaCss = css_248z$1;
|
|
498
558
|
|
|
499
559
|
var css_248z = ":host {\n top: 1rem;\n right: 1rem;\n width: 440px;\n}\n\n.toast {\n margin-top: 1rem;\n}";
|