@public-ui/themes 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +67 -53
  3. package/dist/index.d.ts +39 -13
  4. package/dist/index.mjs +67 -53
  5. package/package.json +7 -7
package/README.md CHANGED
@@ -50,7 +50,7 @@ We use **pnpm** as package manager and there is a tiny typing issue with the def
50
50
  We got a type annotation error in TypeScript.
51
51
 
52
52
  ```bash
53
- The inferred type of 'THEME' cannot be named without a reference to '.pnpm/@a11y-ui+core@***/node_modules/@a11y-ui/core/types/theming'. This is likely not portable. A type annotation is necessary.ts(2742)
53
+ The inferred type of 'THEME' cannot be named without a reference to '.pnpm/@a11y-ui+core@***/node_modules/adopted-style-sheets/types/theming'. This is likely not portable. A type annotation is necessary.ts(2742)
54
54
  ```
55
55
 
56
56
  **What does we know?**
package/dist/index.cjs CHANGED
@@ -301,7 +301,7 @@ var loglevel = {exports: {}};
301
301
  }));
302
302
  } (loglevel));
303
303
 
304
- const createTranslation=(e,t)=>o=>o(e,t),createTheme=(e,t)=>o=>o(e,t),STORE="object"==typeof window?window:"object"==typeof global?global:"object"==typeof self?self:{};const STYLING_TASK_QUEUE=new Map,HYDRATED_HISTORY=[],CSS_PROPERTIES_REGISTERED=new Set,CSS_STYLE_CACHE=new Map,REGEX_CSS_PROPERTIES=/--[^;]+/g,REGEX_SPLIT_CSS_PROPERTY=/:/;"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={CSS_STYLE_CACHE:CSS_STYLE_CACHE,HYDRATED_HISTORY:HYDRATED_HISTORY,STYLING_TASK_QUEUE:STYLING_TASK_QUEUE});const extractProperties=(e,t)=>{let o=t.match(REGEX_CSS_PROPERTIES);if(Array.isArray(o)){o=o.filter((e=>REGEX_SPLIT_CSS_PROPERTY.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}CSS_PROPERTIES_REGISTERED.add(e);},getCssStyle=(e,t)=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",removeStyle=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},patchStyle=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch(o){t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},encroachStyles=(e,t,o)=>{if(!1!==o){const s=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch(e){r=[];}"before"===o?.mode?(s.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(s.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},setThemeStyleAfterHydrated=(e,t,o)=>{const s=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch(t){r=e;}if(CSS_STYLE_CACHE.get(s)?.has(e.tagName))switchStyle(e,r,CSS_STYLE_CACHE.get(s)?.get(e.tagName),o);else {const a=getCssStyle(s,"PROPERTIES"),n=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,n);const i=[a,n,l];encroachStyles(r,i,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,i),!0===t.cache&&(!1===CSS_STYLE_CACHE.has(s)&&CSS_STYLE_CACHE.set(s,new Map),CSS_STYLE_CACHE.get(s)?.set(e.tagName,i)),switchStyle(e,r,i,o);}},switchStyle=(e,t,o,s)=>{removeStyle(t),patchStyle(t,o),e.style.display=s;},logHydratedHistory=e=>{"debug"===e.loglevel&&HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:STYLING_TASK_QUEUE.size});},deleteDoneTask=e=>{STYLING_TASK_QUEUE.delete(e);},loggedDeleteDoneTask=(e,t)=>{deleteDoneTask(e),logHydratedHistory(t);},observerCallback=e=>{for(const t of e)if(STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=STYLING_TASK_QUEUE.get(t.target);setThemeStyleAfterHydrated(t.target,o,e),loggedDeleteDoneTask(t.target,o);}};let observer;try{observer=new MutationObserver(observerCallback);}catch(e){observer=null;}class Theme{constructor(e,t,o){this.createTheme=(e,t)=>createTheme(e,t),this.createTranslation=(e,t)=>createTranslation(e,t),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o);}}
304
+ const N=(e,t)=>s=>s(e,t),P=(e,t)=>s=>s(e,t,{append:!1}),o=typeof window=="object"?window:typeof global=="object"?global:typeof self=="object"?self:{};const c=new Map,C=[],v=new Set,h=new Map,B=/--[^;]+/g,G=/:/;(typeof o.A11yUi!="object"||o.A11yUi===null)&&(o.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:C,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);}v.add(e);},d=(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(""))));}},L=(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))M(e,r,h.get(a)?.get(e.tagName),s);else {const n=d(a,"PROPERTIES"),i=d(a,"GLOBAL"),H=d(a,e.tagName);v.has(a)===!1&&K(a,i);const m=[n,i,H];Q(r,m,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,m),t.cache===!0&&(h.has(a)===!1&&h.set(a,new Map),h.get(a)?.set(e.tagName,m)),M(e,r,m,s);}},M=(e,t,s,a)=>{q(t),F(t,s),e.style.display=a;},$=e=>{e.loglevel==="debug"&&C.push({timestamp:Date.now(),numberOfTasks:c.size});},W=e=>{c.delete(e);},O=(e,t)=>{W(e),$(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);L(t.target,a,s),O(t.target,a);}};let f;try{f=new MutationObserver(X);}catch{f=null;}class te{constructor(t,s,a){this.createTheme=(r,n)=>P(r,n),this.createTranslation=(r,n)=>N(r,n),this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
305
305
 
306
306
  var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
307
307
  KeyEnum2[KeyEnum2["error"] = 0] = "error";
@@ -382,7 +382,7 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
382
382
  return TagEnum2;
383
383
  })(TagEnum || {});
384
384
 
385
- const KoliBri = new Theme("kol", KeyEnum, TagEnum);
385
+ const KoliBri = new te("kol", KeyEnum, TagEnum);
386
386
 
387
387
  const BAMF = KoliBri.createTheme("bamf", {});
388
388
 
@@ -410,7 +410,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
410
410
  --spacing: 0.25em;
411
411
  }
412
412
  :host {
413
- color: var(--color-black);
413
+ background-color: transparent; /* Reset global background-color defined by components */
414
414
  }
415
415
  :host * {
416
416
  box-sizing: border-box;
@@ -1589,7 +1589,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
1589
1589
  border-color: var(--border-default);
1590
1590
  background-color: var(--background-light-grey);
1591
1591
  }
1592
- :host fieldset #error {
1592
+ kol-alert.error {
1593
1593
  order: 3;
1594
1594
  }
1595
1595
  :host fieldset legend {
@@ -1599,7 +1599,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
1599
1599
  :host fieldset kol-input {
1600
1600
  order: 2;
1601
1601
  }
1602
- :host fieldset kol-alert#error {
1602
+ kol-alert.error {
1603
1603
  padding-left: 0.5em;
1604
1604
  color: var(--color-warning);
1605
1605
  }
@@ -3240,6 +3240,7 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
3240
3240
  --spacing: 0.25em;
3241
3241
  }
3242
3242
  :host {
3243
+ background-color: transparent; /* Reset global background-color defined by components */
3243
3244
  color: var(--color-black);
3244
3245
  }
3245
3246
  :host * {
@@ -4432,7 +4433,7 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
4432
4433
  border-color: var(--border-default);
4433
4434
  background-color: var(--background-light-grey);
4434
4435
  }
4435
- :host fieldset #error {
4436
+ kol-alert.error {
4436
4437
  order: 3;
4437
4438
  }
4438
4439
  :host fieldset legend {
@@ -4442,7 +4443,7 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
4442
4443
  :host fieldset kol-input {
4443
4444
  order: 2;
4444
4445
  }
4445
- :host fieldset kol-alert#error {
4446
+ kol-alert.error {
4446
4447
  padding-left: 0.5em;
4447
4448
  color: var(--color-warning);
4448
4449
  }
@@ -6066,7 +6067,7 @@ var css_248z$t = "@layer kol-theme-component {\n .card {\n background-color:
6066
6067
 
6067
6068
  var css_248z$s = "@layer kol-theme-component {\n details {\n display: grid;\n width: 100%;\n }\n summary {\n margin: 0;\n padding: 0;\n }\n summary span {\n margin-left: 0.25rem;\n text-decoration: underline;\n }\n summary span:hover {\n text-decoration-thickness: 0.25em;\n }\n details > kol-indented-text {\n margin: 0.25em 0 0 0.6em;\n }\n}";
6068
6069
 
6069
- var css_248z$r = "/* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */\n@layer kol-theme-global {\n :root,\n :host {\n --color-primary: #005c45;\n --color-primary-60: #00854a;\n --color-primary-40: #99beb5;\n --color-primary-20: #ccdeda;\n --color-secondary: #576164;\n --color-secondary-40: #e5e8e9;\n --color-secondary-20: #f2f3f4;\n --color-secondary-0: #ffffff;\n --color-blue: #0077b6;\n --color-petrol: #007194;\n --color-green: #00854a;\n --color-yellow: #f9e03a;\n --color-red: #c0003c;\n --color-disabled-gray: #595f73;\n --color-black: #000;\n --color-white: #fff;\n }\n :root,\n :host {\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif;\n --font-family-serif: \"BundesSerif Web\", var(--font-family);\n }\n :host {\n color: var(--color-black);\n font-family: var(--font-family);\n }\n :host * {\n box-sizing: border-box;\n }\n a,\n button,\n input,\n option,\n select,\n textarea {\n hyphens: auto;\n letter-spacing: inherit;\n }\n summary {\n hyphens: auto;\n letter-spacing: inherit;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n summary:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n kol-tooltip-wc {\n font-size: 1.125rem;\n }\n kol-tooltip-wc .tooltip-area {\n background-color: var(--color-white);\n }\n kol-tooltip-wc .tooltip-arrow {\n background-color: var(--color-primary);\n }\n kol-tooltip-wc .tooltip-content {\n padding: 0.5rem;\n border: 2px solid var(--color-primary);\n box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.5em;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.3em;\n }\n}";
6070
+ var css_248z$r = "/* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */\n@layer kol-theme-global {\n :root,\n :host {\n --color-primary: #005c45;\n --color-primary-60: #00854a;\n --color-primary-40: #99beb5;\n --color-primary-20: #ccdeda;\n --color-secondary: #576164;\n --color-secondary-40: #e5e8e9;\n --color-secondary-20: #f2f3f4;\n --color-secondary-0: #ffffff;\n --color-blue: #0077b6;\n --color-petrol: #007194;\n --color-green: #00854a;\n --color-yellow: #f9e03a;\n --color-red: #c0003c;\n --color-disabled-gray: #595f73;\n --color-black: #000;\n --color-white: #fff;\n }\n :root,\n :host {\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif;\n --font-family-serif: \"BundesSerif Web\", var(--font-family);\n }\n :host {\n background-color: transparent; /* Reset global background-color defined by components */\n font-family: var(--font-family);\n }\n :host * {\n box-sizing: border-box;\n }\n a,\n button,\n input,\n option,\n select,\n textarea {\n hyphens: auto;\n letter-spacing: inherit;\n }\n summary {\n hyphens: auto;\n letter-spacing: inherit;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n summary:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n kol-tooltip-wc {\n font-size: 1.125rem;\n }\n kol-tooltip-wc .tooltip-area {\n background-color: var(--color-white);\n }\n kol-tooltip-wc .tooltip-arrow {\n background-color: var(--color-primary);\n }\n kol-tooltip-wc .tooltip-content {\n padding: 0.5rem;\n border: 2px solid var(--color-primary);\n box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.5em;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.3em;\n }\n}";
6070
6071
 
6071
6072
  var css_248z$q = "@layer kol-theme-component {\n .headline {\n margin-top: 0;\n letter-spacing: 0.5;\n }\n h1 {\n font-size: 2.5rem;\n line-height: 2.8125rem;\n font-weight: normal;\n }\n h2 {\n font-size: 2rem;\n line-height: 2.3125rem;\n font-weight: normal;\n }\n h3 {\n font-size: 1.3125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h4 {\n font-size: 1.125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h5 {\n color: red;\n }\n h5:after {\n content: \" (H5 is not part of the design system.)\";\n }\n h6 {\n color: red;\n }\n h6:after {\n content: \" (H6 is not part of the design system.)\";\n }\n}";
6072
6073
 
@@ -6208,6 +6209,7 @@ const BMF = KoliBri.createTheme("bmf", {
6208
6209
  }
6209
6210
  :host {
6210
6211
  font-family: var(--font-family); /* font-size: var(--font-size); */
6212
+ background-color: transparent; /* Reset global background-color defined by components */
6211
6213
  }
6212
6214
  * {
6213
6215
  box-sizing: border-box;
@@ -6458,13 +6460,14 @@ const BMF = KoliBri.createTheme("bmf", {
6458
6460
  content: '*';
6459
6461
  padding-left: 0.125em;
6460
6462
  }
6463
+ kol-input.error .input {
6464
+ border-color: var(--color-red);
6465
+ border-width: 3px;
6466
+ }
6461
6467
  kol-input.error:not(.hidden-error) {
6462
6468
  border-left: 3px solid var(--color-red);
6463
6469
  padding-left: 1em;
6464
6470
  }
6465
- kol-input.error .input:focus-within {
6466
- outline-color: var(--color-red) !important;
6467
- }
6468
6471
  kol-input.error kol-alert.error {
6469
6472
  color: var(--color-red);
6470
6473
  font-weight: 700;
@@ -6537,13 +6540,14 @@ const BMF = KoliBri.createTheme("bmf", {
6537
6540
  content: '*';
6538
6541
  padding-left: 0.125em;
6539
6542
  }
6543
+ kol-input.error .input {
6544
+ border-color: var(--color-red);
6545
+ border-width: 3px;
6546
+ }
6540
6547
  kol-input.error:not(.hidden-error) {
6541
6548
  border-left: 3px solid var(--color-red);
6542
6549
  padding-left: 1em;
6543
6550
  }
6544
- kol-input.error .input:focus-within {
6545
- outline-color: var(--color-red) !important;
6546
- }
6547
6551
  kol-input.error kol-alert.error {
6548
6552
  color: var(--color-red);
6549
6553
  font-weight: 700;
@@ -6616,13 +6620,14 @@ const BMF = KoliBri.createTheme("bmf", {
6616
6620
  content: '*';
6617
6621
  padding-left: 0.125em;
6618
6622
  }
6623
+ kol-input.error .input {
6624
+ border-color: var(--color-red);
6625
+ border-width: 3px;
6626
+ }
6619
6627
  kol-input.error:not(.hidden-error) {
6620
6628
  border-left: 3px solid var(--color-red);
6621
6629
  padding-left: 1em;
6622
6630
  }
6623
- kol-input.error .input:focus-within {
6624
- outline-color: var(--color-red) !important;
6625
- }
6626
6631
  kol-input.error kol-alert.error {
6627
6632
  color: var(--color-red);
6628
6633
  font-weight: 700;
@@ -6695,13 +6700,14 @@ const BMF = KoliBri.createTheme("bmf", {
6695
6700
  content: '*';
6696
6701
  padding-left: 0.125em;
6697
6702
  }
6703
+ kol-input.error .input {
6704
+ border-color: var(--color-red);
6705
+ border-width: 3px;
6706
+ }
6698
6707
  kol-input.error:not(.hidden-error) {
6699
6708
  border-left: 3px solid var(--color-red);
6700
6709
  padding-left: 1em;
6701
6710
  }
6702
- kol-input.error .input:focus-within {
6703
- outline-color: var(--color-red) !important;
6704
- }
6705
6711
  kol-input.error kol-alert.error {
6706
6712
  color: var(--color-red);
6707
6713
  font-weight: 700;
@@ -6775,13 +6781,14 @@ const BMF = KoliBri.createTheme("bmf", {
6775
6781
  content: '*';
6776
6782
  padding-left: 0.125em;
6777
6783
  }
6784
+ kol-input.error .input {
6785
+ border-color: var(--color-red);
6786
+ border-width: 3px;
6787
+ }
6778
6788
  kol-input.error:not(.hidden-error) {
6779
6789
  border-left: 3px solid var(--color-red);
6780
6790
  padding-left: 1em;
6781
6791
  }
6782
- kol-input.error .input:focus-within {
6783
- outline-color: var(--color-red) !important;
6784
- }
6785
6792
  kol-input.error kol-alert.error {
6786
6793
  color: var(--color-red);
6787
6794
  font-weight: 700;
@@ -6861,13 +6868,14 @@ const BMF = KoliBri.createTheme("bmf", {
6861
6868
  content: '*';
6862
6869
  padding-left: 0.125em;
6863
6870
  }
6871
+ kol-input.error .input {
6872
+ border-color: var(--color-red);
6873
+ border-width: 3px;
6874
+ }
6864
6875
  kol-input.error:not(.hidden-error) {
6865
6876
  border-left: 3px solid var(--color-red);
6866
6877
  padding-left: 1em;
6867
6878
  }
6868
- kol-input.error .input:focus-within {
6869
- outline-color: var(--color-red) !important;
6870
- }
6871
6879
  kol-input.error kol-alert.error {
6872
6880
  color: var(--color-red);
6873
6881
  font-weight: 700;
@@ -6953,13 +6961,14 @@ const BMF = KoliBri.createTheme("bmf", {
6953
6961
  content: '*';
6954
6962
  padding-left: 0.125em;
6955
6963
  }
6964
+ kol-input.error .input {
6965
+ border-color: var(--color-red);
6966
+ border-width: 3px;
6967
+ }
6956
6968
  kol-input.error:not(.hidden-error) {
6957
6969
  border-left: 3px solid var(--color-red);
6958
6970
  padding-left: 1em;
6959
6971
  }
6960
- kol-input.error .input:focus-within {
6961
- outline-color: var(--color-red) !important;
6962
- }
6963
6972
  kol-input.error kol-alert.error {
6964
6973
  color: var(--color-red);
6965
6974
  font-weight: 700;
@@ -7520,13 +7529,14 @@ const BMF = KoliBri.createTheme("bmf", {
7520
7529
  content: '*';
7521
7530
  padding-left: 0.125em;
7522
7531
  }
7532
+ kol-input.error .input {
7533
+ border-color: var(--color-red);
7534
+ border-width: 3px;
7535
+ }
7523
7536
  kol-input.error:not(.hidden-error) {
7524
7537
  border-left: 3px solid var(--color-red);
7525
7538
  padding-left: 1em;
7526
7539
  }
7527
- kol-input.error .input:focus-within {
7528
- outline-color: var(--color-red) !important;
7529
- }
7530
7540
  kol-input.error kol-alert.error {
7531
7541
  color: var(--color-red);
7532
7542
  font-weight: 700;
@@ -7627,13 +7637,14 @@ const BMF = KoliBri.createTheme("bmf", {
7627
7637
  content: '*';
7628
7638
  padding-left: 0.125em;
7629
7639
  }
7640
+ kol-input.error .input {
7641
+ border-color: var(--color-red);
7642
+ border-width: 3px;
7643
+ }
7630
7644
  kol-input.error:not(.hidden-error) {
7631
7645
  border-left: 3px solid var(--color-red);
7632
7646
  padding-left: 1em;
7633
7647
  }
7634
- kol-input.error .input:focus-within {
7635
- outline-color: var(--color-red) !important;
7636
- }
7637
7648
  kol-input.error kol-alert.error {
7638
7649
  color: var(--color-red);
7639
7650
  font-weight: 700;
@@ -8254,7 +8265,7 @@ const BMF = KoliBri.createTheme("bmf", {
8254
8265
  border-color: var(--border-default);
8255
8266
  background-color: var(--background-light-grey);
8256
8267
  }
8257
- fieldset #error {
8268
+ kol-alert.error {
8258
8269
  order: 1;
8259
8270
  }
8260
8271
  fieldset legend {
@@ -8265,12 +8276,10 @@ const BMF = KoliBri.createTheme("bmf", {
8265
8276
  order: 3;
8266
8277
  }
8267
8278
  fieldset.error {
8268
- padding-left: 1em;
8269
8279
  border-left: 3px solid var(--color-red);
8270
- }
8271
- fieldset kol-alert#error {
8272
8280
  color: var(--color-red);
8273
8281
  font-weight: 700;
8282
+ padding-left: 1em;
8274
8283
  }
8275
8284
  fieldset.error input:focus,
8276
8285
  fieldset.error select:focus,
@@ -8573,13 +8582,14 @@ const BMF = KoliBri.createTheme("bmf", {
8573
8582
  content: '*';
8574
8583
  padding-left: 0.125em;
8575
8584
  }
8585
+ kol-input.error .input {
8586
+ border-color: var(--color-red);
8587
+ border-width: 3px;
8588
+ }
8576
8589
  kol-input.error:not(.hidden-error) {
8577
8590
  border-left: 3px solid var(--color-red);
8578
8591
  padding-left: 1em;
8579
8592
  }
8580
- kol-input.error .input:focus-within {
8581
- outline-color: var(--color-red) !important;
8582
- }
8583
8593
  kol-input.error kol-alert.error {
8584
8594
  color: var(--color-red);
8585
8595
  font-weight: 700;
@@ -15826,6 +15836,7 @@ const DEFAULT = KoliBri.createTheme("default", {
15826
15836
  --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);
15827
15837
  }
15828
15838
  :host {
15839
+ background-color: transparent; /* Reset global background-color defined by components */
15829
15840
  font-family: var(--font-family);
15830
15841
  font-size: var(--font-size);
15831
15842
  }
@@ -17617,7 +17628,7 @@ const DEFAULT = KoliBri.createTheme("default", {
17617
17628
  cursor: not-allowed;
17618
17629
  background-color: var(--color-mute-variant);
17619
17630
  }
17620
- fieldset #error {
17631
+ kol-alert.error {
17621
17632
  order: 1;
17622
17633
  }
17623
17634
  fieldset legend {
@@ -17628,12 +17639,10 @@ const DEFAULT = KoliBri.createTheme("default", {
17628
17639
  order: 3;
17629
17640
  }
17630
17641
  fieldset.error {
17631
- padding-left: 1rem;
17632
17642
  border-left: 3px solid var(--color-danger);
17633
- }
17634
- fieldset kol-alert#error {
17635
17643
  color: var(--color-danger);
17636
17644
  font-weight: 700;
17645
+ padding-left: 1rem;
17637
17646
  }
17638
17647
  fieldset.error input:focus,
17639
17648
  fieldset.error select:focus,
@@ -18222,6 +18231,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
18222
18231
  --spacing-2xs: 4px; /* ?! */
18223
18232
  }
18224
18233
  :host {
18234
+ background-color: transparent; /* Reset global background-color defined by components */
18225
18235
  display: inline-block;
18226
18236
  font-family: var(--font-family);
18227
18237
  }
@@ -19796,6 +19806,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
19796
19806
  --spacing-2xs: 4px; /* ?! */
19797
19807
  }
19798
19808
  :host {
19809
+ background-color: transparent; /* Reset global background-color defined by components */
19799
19810
  display: inline-block;
19800
19811
  font-family: var(--font-family);
19801
19812
  }
@@ -21327,6 +21338,7 @@ const ITZBund = KoliBri.createTheme("itzbund", {
21327
21338
  --kolibri-spacing: calc(2 * var(--spacing));
21328
21339
  }
21329
21340
  :host {
21341
+ background-color: transparent; /* Reset global background-color defined by components */
21330
21342
  font-family: var(--font-family); /* font-size: var(--font-size); */
21331
21343
  }
21332
21344
  * {
@@ -23041,6 +23053,7 @@ const MFM = KoliBri.createTheme("mfm", {
23041
23053
  --spacing: 0.25em;
23042
23054
  }
23043
23055
  :host {
23056
+ background-color: transparent; /* Reset global background-color defined by components */
23044
23057
  font-family: var(--font-family); /* font-size: var(--font-size); */
23045
23058
  }
23046
23059
  * {
@@ -24899,7 +24912,7 @@ const MFM = KoliBri.createTheme("mfm", {
24899
24912
  border-color: var(--border-default);
24900
24913
  background-color: var(--background-light-grey);
24901
24914
  }
24902
- fieldset #error {
24915
+ kol-alert.error {
24903
24916
  order: 1;
24904
24917
  }
24905
24918
  fieldset legend {
@@ -24910,12 +24923,10 @@ const MFM = KoliBri.createTheme("mfm", {
24910
24923
  order: 3;
24911
24924
  }
24912
24925
  fieldset.error {
24913
- padding-left: 1em;
24914
24926
  border-left: 3px solid var(--color-red);
24915
- }
24916
- fieldset kol-alert#error {
24917
24927
  color: var(--color-red);
24918
24928
  font-weight: 700;
24929
+ padding-left: 1em;
24919
24930
  }
24920
24931
  fieldset.error input:focus,
24921
24932
  fieldset.error select:focus,
@@ -32561,6 +32572,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
32561
32572
  --font-size: 16px;
32562
32573
  }
32563
32574
  :host {
32575
+ background-color: transparent; /* Reset global background-color defined by components */
32564
32576
  font-family: var(--font-family); /* font-size: var(--font-size); */
32565
32577
  }
32566
32578
  * {
@@ -33598,7 +33610,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
33598
33610
  box-shadow: 0 0 0.1rem black;
33599
33611
  background-color: var(--kolibri-color-primary);
33600
33612
  }
33601
- fieldset #error {
33613
+ kol-alert.error {
33602
33614
  margin: 0.4em 0;
33603
33615
  order: 3;
33604
33616
  }
@@ -47868,6 +47880,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
47868
47880
  const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
47869
47881
  GLOBAL: css`
47870
47882
  :host {
47883
+ background-color: transparent; /* Reset global background-color defined by components */
47871
47884
  --border-color: var(--color-neutral);
47872
47885
  --border-radius: 0.25rem;
47873
47886
  --box-shadow: rgba(0, 0, 0, 0.12) 0 12px 12px -4px, rgba(0, 0, 0, 0.04) 0 4px 4px -4px;
@@ -48841,7 +48854,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
48841
48854
  box-shadow: 0 0 0.1rem black;
48842
48855
  background-color: var(--color-blau);
48843
48856
  }
48844
- fieldset #error {
48857
+ kol-alert.error {
48845
48858
  margin: 0.4em 0;
48846
48859
  order: 3;
48847
48860
  }
@@ -57005,7 +57018,7 @@ const radioStyles = css`
57005
57018
  order: 1;
57006
57019
  display: contents;
57007
57020
  }
57008
- fieldset #error {
57021
+ kol-alert.error {
57009
57022
  margin: 0.4em 0;
57010
57023
  order: 2;
57011
57024
  }
@@ -57061,6 +57074,7 @@ const tabsStyles = css`
57061
57074
  const ZOLLv3 = KoliBri.createTheme("zoll-v3", {
57062
57075
  GLOBAL: css`
57063
57076
  :host {
57077
+ background-color: transparent; /* Reset global background-color defined by components */
57064
57078
  --border-color: var(--color-neutral);
57065
57079
  --border-radius: 0.25rem;
57066
57080
  --box-shadow: rgba(0, 0, 0, 0.12) 0 12px 12px -4px, rgba(0, 0, 0, 0.04) 0 4px 4px -4px;
package/dist/index.d.ts CHANGED
@@ -47,7 +47,9 @@ declare const BAMF: (patch: (name: string, map: {
47
47
  "KOL-TOAST-CONTAINER"?: string | undefined;
48
48
  "KOL-TOOLBAR"?: string | undefined;
49
49
  "KOL-TOOLTIP"?: string | undefined;
50
- }) => string) => string;
50
+ }, options?: {
51
+ append?: boolean | undefined;
52
+ } | undefined) => string) => string;
51
53
 
52
54
  declare const DESYv1: (patch: (name: string, map: {
53
55
  GLOBAL?: string | undefined;
@@ -98,7 +100,9 @@ declare const DESYv1: (patch: (name: string, map: {
98
100
  "KOL-TOAST-CONTAINER"?: string | undefined;
99
101
  "KOL-TOOLBAR"?: string | undefined;
100
102
  "KOL-TOOLTIP"?: string | undefined;
101
- }) => string) => string;
103
+ }, options?: {
104
+ append?: boolean | undefined;
105
+ } | undefined) => string) => string;
102
106
 
103
107
  declare const DESYv2: (patch: (name: string, map: {
104
108
  GLOBAL?: string | undefined;
@@ -149,7 +153,9 @@ declare const DESYv2: (patch: (name: string, map: {
149
153
  "KOL-TOAST-CONTAINER"?: string | undefined;
150
154
  "KOL-TOOLBAR"?: string | undefined;
151
155
  "KOL-TOOLTIP"?: string | undefined;
152
- }) => string) => string;
156
+ }, options?: {
157
+ append?: boolean | undefined;
158
+ } | undefined) => string) => string;
153
159
 
154
160
  declare const BZStv1: (patch: (name: string, map: {
155
161
  GLOBAL?: string | undefined;
@@ -200,7 +206,9 @@ declare const BZStv1: (patch: (name: string, map: {
200
206
  "KOL-TOAST-CONTAINER"?: string | undefined;
201
207
  "KOL-TOOLBAR"?: string | undefined;
202
208
  "KOL-TOOLTIP"?: string | undefined;
203
- }) => string) => string;
209
+ }, options?: {
210
+ append?: boolean | undefined;
211
+ } | undefined) => string) => string;
204
212
 
205
213
  declare const BMF: (patch: (name: string, map: {
206
214
  GLOBAL?: string | undefined;
@@ -251,7 +259,9 @@ declare const BMF: (patch: (name: string, map: {
251
259
  "KOL-TOAST-CONTAINER"?: string | undefined;
252
260
  "KOL-TOOLBAR"?: string | undefined;
253
261
  "KOL-TOOLTIP"?: string | undefined;
254
- }) => string) => string;
262
+ }, options?: {
263
+ append?: boolean | undefined;
264
+ } | undefined) => string) => string;
255
265
 
256
266
  declare const DEFAULT: (patch: (name: string, map: {
257
267
  GLOBAL?: string | undefined;
@@ -302,7 +312,9 @@ declare const DEFAULT: (patch: (name: string, map: {
302
312
  "KOL-TOAST-CONTAINER"?: string | undefined;
303
313
  "KOL-TOOLBAR"?: string | undefined;
304
314
  "KOL-TOOLTIP"?: string | undefined;
305
- }) => string) => string;
315
+ }, options?: {
316
+ append?: boolean | undefined;
317
+ } | undefined) => string) => string;
306
318
 
307
319
  declare const ECL_EC: (patch: (name: string, map: {
308
320
  GLOBAL?: string | undefined;
@@ -353,7 +365,9 @@ declare const ECL_EC: (patch: (name: string, map: {
353
365
  "KOL-TOAST-CONTAINER"?: string | undefined;
354
366
  "KOL-TOOLBAR"?: string | undefined;
355
367
  "KOL-TOOLTIP"?: string | undefined;
356
- }) => string) => string;
368
+ }, options?: {
369
+ append?: boolean | undefined;
370
+ } | undefined) => string) => string;
357
371
 
358
372
  declare const ECL_EU: (patch: (name: string, map: {
359
373
  GLOBAL?: string | undefined;
@@ -404,7 +418,9 @@ declare const ECL_EU: (patch: (name: string, map: {
404
418
  "KOL-TOAST-CONTAINER"?: string | undefined;
405
419
  "KOL-TOOLBAR"?: string | undefined;
406
420
  "KOL-TOOLTIP"?: string | undefined;
407
- }) => string) => string;
421
+ }, options?: {
422
+ append?: boolean | undefined;
423
+ } | undefined) => string) => string;
408
424
 
409
425
  declare const ITZBund: (patch: (name: string, map: {
410
426
  GLOBAL?: string | undefined;
@@ -455,7 +471,9 @@ declare const ITZBund: (patch: (name: string, map: {
455
471
  "KOL-TOAST-CONTAINER"?: string | undefined;
456
472
  "KOL-TOOLBAR"?: string | undefined;
457
473
  "KOL-TOOLTIP"?: string | undefined;
458
- }) => string) => string;
474
+ }, options?: {
475
+ append?: boolean | undefined;
476
+ } | undefined) => string) => string;
459
477
 
460
478
  declare const MFM: (patch: (name: string, map: {
461
479
  GLOBAL?: string | undefined;
@@ -506,7 +524,9 @@ declare const MFM: (patch: (name: string, map: {
506
524
  "KOL-TOAST-CONTAINER"?: string | undefined;
507
525
  "KOL-TOOLBAR"?: string | undefined;
508
526
  "KOL-TOOLTIP"?: string | undefined;
509
- }) => string) => string;
527
+ }, options?: {
528
+ append?: boolean | undefined;
529
+ } | undefined) => string) => string;
510
530
 
511
531
  declare const MAPZ: (patch: (name: string, map: {
512
532
  GLOBAL?: string | undefined;
@@ -557,7 +577,9 @@ declare const MAPZ: (patch: (name: string, map: {
557
577
  "KOL-TOAST-CONTAINER"?: string | undefined;
558
578
  "KOL-TOOLBAR"?: string | undefined;
559
579
  "KOL-TOOLTIP"?: string | undefined;
560
- }) => string) => string;
580
+ }, options?: {
581
+ append?: boolean | undefined;
582
+ } | undefined) => string) => string;
561
583
 
562
584
  declare const ZOLLv2: (patch: (name: string, map: {
563
585
  GLOBAL?: string | undefined;
@@ -608,7 +630,9 @@ declare const ZOLLv2: (patch: (name: string, map: {
608
630
  "KOL-TOAST-CONTAINER"?: string | undefined;
609
631
  "KOL-TOOLBAR"?: string | undefined;
610
632
  "KOL-TOOLTIP"?: string | undefined;
611
- }) => string) => string;
633
+ }, options?: {
634
+ append?: boolean | undefined;
635
+ } | undefined) => string) => string;
612
636
 
613
637
  declare const ZOLLv3: (patch: (name: string, map: {
614
638
  GLOBAL?: string | undefined;
@@ -659,7 +683,9 @@ declare const ZOLLv3: (patch: (name: string, map: {
659
683
  "KOL-TOAST-CONTAINER"?: string | undefined;
660
684
  "KOL-TOOLBAR"?: string | undefined;
661
685
  "KOL-TOOLTIP"?: string | undefined;
662
- }) => string) => string;
686
+ }, options?: {
687
+ append?: boolean | undefined;
688
+ } | undefined) => string) => string;
663
689
 
664
690
  declare const DE: (patch: (name: "ab" | "aa" | "af" | "ak" | "sq" | "am" | "ar" | "an" | "hy" | "as" | "av" | "ae" | "ay" | "az" | "bm" | "ba" | "eu" | "be" | "bn" | "bh" | "bi" | "nb" | "bs" | "br" | "bg" | "my" | "es" | "ca" | "km" | "ch" | "ce" | "ny" | "zh" | "za" | "cu" | "cv" | "kw" | "co" | "cr" | "hr" | "cs" | "da" | "dv" | "nl" | "dz" | "en" | "eo" | "et" | "ee" | "fo" | "fj" | "fi" | "fr" | "ff" | "gd" | "gl" | "lg" | "ka" | "de" | "ki" | "el" | "kl" | "gn" | "gu" | "ht" | "ha" | "he" | "hz" | "hi" | "ho" | "hu" | "is" | "io" | "ig" | "id" | "ia" | "ie" | "iu" | "ik" | "ga" | "it" | "ja" | "jv" | "kn" | "kr" | "ks" | "kk" | "rw" | "ky" | "kv" | "kg" | "ko" | "kj" | "ku" | "lo" | "la" | "lv" | "lb" | "li" | "ln" | "lt" | "lu" | "mk" | "mg" | "ms" | "ml" | "mt" | "gv" | "mi" | "mr" | "mh" | "ro" | "mn" | "na" | "nv" | "nd" | "nr" | "ng" | "ne" | "se" | "no" | "nn" | "ii" | "oc" | "oj" | "or" | "om" | "os" | "pi" | "pa" | "ps" | "fa" | "pl" | "pt" | "qu" | "rm" | "rn" | "ru" | "sm" | "sg" | "sa" | "sc" | "sr" | "sn" | "sd" | "si" | "sk" | "sl" | "so" | "st" | "su" | "sw" | "ss" | "sv" | "tl" | "ty" | "tg" | "ta" | "tt" | "te" | "th" | "bo" | "ti" | "to" | "ts" | "tn" | "tr" | "tk" | "tw" | "ug" | "uk" | "ur" | "uz" | "ve" | "vi" | "vo" | "wa" | "cy" | "fy" | "wo" | "xh" | "yi" | "yo" | "zu", map: {
665
691
  "kol-error"?: string | undefined;
package/dist/index.mjs CHANGED
@@ -299,7 +299,7 @@ var loglevel = {exports: {}};
299
299
  }));
300
300
  } (loglevel));
301
301
 
302
- const createTranslation=(e,t)=>o=>o(e,t),createTheme=(e,t)=>o=>o(e,t),STORE="object"==typeof window?window:"object"==typeof global?global:"object"==typeof self?self:{};const STYLING_TASK_QUEUE=new Map,HYDRATED_HISTORY=[],CSS_PROPERTIES_REGISTERED=new Set,CSS_STYLE_CACHE=new Map,REGEX_CSS_PROPERTIES=/--[^;]+/g,REGEX_SPLIT_CSS_PROPERTY=/:/;"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={CSS_STYLE_CACHE:CSS_STYLE_CACHE,HYDRATED_HISTORY:HYDRATED_HISTORY,STYLING_TASK_QUEUE:STYLING_TASK_QUEUE});const extractProperties=(e,t)=>{let o=t.match(REGEX_CSS_PROPERTIES);if(Array.isArray(o)){o=o.filter((e=>REGEX_SPLIT_CSS_PROPERTY.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}CSS_PROPERTIES_REGISTERED.add(e);},getCssStyle=(e,t)=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",removeStyle=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},patchStyle=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch(o){t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},encroachStyles=(e,t,o)=>{if(!1!==o){const s=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch(e){r=[];}"before"===o?.mode?(s.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(s.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},setThemeStyleAfterHydrated=(e,t,o)=>{const s=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch(t){r=e;}if(CSS_STYLE_CACHE.get(s)?.has(e.tagName))switchStyle(e,r,CSS_STYLE_CACHE.get(s)?.get(e.tagName),o);else {const a=getCssStyle(s,"PROPERTIES"),n=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,n);const i=[a,n,l];encroachStyles(r,i,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,i),!0===t.cache&&(!1===CSS_STYLE_CACHE.has(s)&&CSS_STYLE_CACHE.set(s,new Map),CSS_STYLE_CACHE.get(s)?.set(e.tagName,i)),switchStyle(e,r,i,o);}},switchStyle=(e,t,o,s)=>{removeStyle(t),patchStyle(t,o),e.style.display=s;},logHydratedHistory=e=>{"debug"===e.loglevel&&HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:STYLING_TASK_QUEUE.size});},deleteDoneTask=e=>{STYLING_TASK_QUEUE.delete(e);},loggedDeleteDoneTask=(e,t)=>{deleteDoneTask(e),logHydratedHistory(t);},observerCallback=e=>{for(const t of e)if(STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=STYLING_TASK_QUEUE.get(t.target);setThemeStyleAfterHydrated(t.target,o,e),loggedDeleteDoneTask(t.target,o);}};let observer;try{observer=new MutationObserver(observerCallback);}catch(e){observer=null;}class Theme{constructor(e,t,o){this.createTheme=(e,t)=>createTheme(e,t),this.createTranslation=(e,t)=>createTranslation(e,t),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o);}}
302
+ const N=(e,t)=>s=>s(e,t),P=(e,t)=>s=>s(e,t,{append:!1}),o=typeof window=="object"?window:typeof global=="object"?global:typeof self=="object"?self:{};const c=new Map,C=[],v=new Set,h=new Map,B=/--[^;]+/g,G=/:/;(typeof o.A11yUi!="object"||o.A11yUi===null)&&(o.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:C,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);}v.add(e);},d=(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(""))));}},L=(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))M(e,r,h.get(a)?.get(e.tagName),s);else {const n=d(a,"PROPERTIES"),i=d(a,"GLOBAL"),H=d(a,e.tagName);v.has(a)===!1&&K(a,i);const m=[n,i,H];Q(r,m,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,m),t.cache===!0&&(h.has(a)===!1&&h.set(a,new Map),h.get(a)?.set(e.tagName,m)),M(e,r,m,s);}},M=(e,t,s,a)=>{q(t),F(t,s),e.style.display=a;},$=e=>{e.loglevel==="debug"&&C.push({timestamp:Date.now(),numberOfTasks:c.size});},W=e=>{c.delete(e);},O=(e,t)=>{W(e),$(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);L(t.target,a,s),O(t.target,a);}};let f;try{f=new MutationObserver(X);}catch{f=null;}class te{constructor(t,s,a){this.createTheme=(r,n)=>P(r,n),this.createTranslation=(r,n)=>N(r,n),this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
303
303
 
304
304
  var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
305
305
  KeyEnum2[KeyEnum2["error"] = 0] = "error";
@@ -380,7 +380,7 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
380
380
  return TagEnum2;
381
381
  })(TagEnum || {});
382
382
 
383
- const KoliBri = new Theme("kol", KeyEnum, TagEnum);
383
+ const KoliBri = new te("kol", KeyEnum, TagEnum);
384
384
 
385
385
  const BAMF = KoliBri.createTheme("bamf", {});
386
386
 
@@ -408,7 +408,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
408
408
  --spacing: 0.25em;
409
409
  }
410
410
  :host {
411
- color: var(--color-black);
411
+ background-color: transparent; /* Reset global background-color defined by components */
412
412
  }
413
413
  :host * {
414
414
  box-sizing: border-box;
@@ -1587,7 +1587,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
1587
1587
  border-color: var(--border-default);
1588
1588
  background-color: var(--background-light-grey);
1589
1589
  }
1590
- :host fieldset #error {
1590
+ kol-alert.error {
1591
1591
  order: 3;
1592
1592
  }
1593
1593
  :host fieldset legend {
@@ -1597,7 +1597,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
1597
1597
  :host fieldset kol-input {
1598
1598
  order: 2;
1599
1599
  }
1600
- :host fieldset kol-alert#error {
1600
+ kol-alert.error {
1601
1601
  padding-left: 0.5em;
1602
1602
  color: var(--color-warning);
1603
1603
  }
@@ -3238,6 +3238,7 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
3238
3238
  --spacing: 0.25em;
3239
3239
  }
3240
3240
  :host {
3241
+ background-color: transparent; /* Reset global background-color defined by components */
3241
3242
  color: var(--color-black);
3242
3243
  }
3243
3244
  :host * {
@@ -4430,7 +4431,7 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
4430
4431
  border-color: var(--border-default);
4431
4432
  background-color: var(--background-light-grey);
4432
4433
  }
4433
- :host fieldset #error {
4434
+ kol-alert.error {
4434
4435
  order: 3;
4435
4436
  }
4436
4437
  :host fieldset legend {
@@ -4440,7 +4441,7 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
4440
4441
  :host fieldset kol-input {
4441
4442
  order: 2;
4442
4443
  }
4443
- :host fieldset kol-alert#error {
4444
+ kol-alert.error {
4444
4445
  padding-left: 0.5em;
4445
4446
  color: var(--color-warning);
4446
4447
  }
@@ -6064,7 +6065,7 @@ var css_248z$t = "@layer kol-theme-component {\n .card {\n background-color:
6064
6065
 
6065
6066
  var css_248z$s = "@layer kol-theme-component {\n details {\n display: grid;\n width: 100%;\n }\n summary {\n margin: 0;\n padding: 0;\n }\n summary span {\n margin-left: 0.25rem;\n text-decoration: underline;\n }\n summary span:hover {\n text-decoration-thickness: 0.25em;\n }\n details > kol-indented-text {\n margin: 0.25em 0 0 0.6em;\n }\n}";
6066
6067
 
6067
- var css_248z$r = "/* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */\n@layer kol-theme-global {\n :root,\n :host {\n --color-primary: #005c45;\n --color-primary-60: #00854a;\n --color-primary-40: #99beb5;\n --color-primary-20: #ccdeda;\n --color-secondary: #576164;\n --color-secondary-40: #e5e8e9;\n --color-secondary-20: #f2f3f4;\n --color-secondary-0: #ffffff;\n --color-blue: #0077b6;\n --color-petrol: #007194;\n --color-green: #00854a;\n --color-yellow: #f9e03a;\n --color-red: #c0003c;\n --color-disabled-gray: #595f73;\n --color-black: #000;\n --color-white: #fff;\n }\n :root,\n :host {\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif;\n --font-family-serif: \"BundesSerif Web\", var(--font-family);\n }\n :host {\n color: var(--color-black);\n font-family: var(--font-family);\n }\n :host * {\n box-sizing: border-box;\n }\n a,\n button,\n input,\n option,\n select,\n textarea {\n hyphens: auto;\n letter-spacing: inherit;\n }\n summary {\n hyphens: auto;\n letter-spacing: inherit;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n summary:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n kol-tooltip-wc {\n font-size: 1.125rem;\n }\n kol-tooltip-wc .tooltip-area {\n background-color: var(--color-white);\n }\n kol-tooltip-wc .tooltip-arrow {\n background-color: var(--color-primary);\n }\n kol-tooltip-wc .tooltip-content {\n padding: 0.5rem;\n border: 2px solid var(--color-primary);\n box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.5em;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.3em;\n }\n}";
6068
+ var css_248z$r = "/* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */\n@layer kol-theme-global {\n :root,\n :host {\n --color-primary: #005c45;\n --color-primary-60: #00854a;\n --color-primary-40: #99beb5;\n --color-primary-20: #ccdeda;\n --color-secondary: #576164;\n --color-secondary-40: #e5e8e9;\n --color-secondary-20: #f2f3f4;\n --color-secondary-0: #ffffff;\n --color-blue: #0077b6;\n --color-petrol: #007194;\n --color-green: #00854a;\n --color-yellow: #f9e03a;\n --color-red: #c0003c;\n --color-disabled-gray: #595f73;\n --color-black: #000;\n --color-white: #fff;\n }\n :root,\n :host {\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif;\n --font-family-serif: \"BundesSerif Web\", var(--font-family);\n }\n :host {\n background-color: transparent; /* Reset global background-color defined by components */\n font-family: var(--font-family);\n }\n :host * {\n box-sizing: border-box;\n }\n a,\n button,\n input,\n option,\n select,\n textarea {\n hyphens: auto;\n letter-spacing: inherit;\n }\n summary {\n hyphens: auto;\n letter-spacing: inherit;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n summary:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n kol-tooltip-wc {\n font-size: 1.125rem;\n }\n kol-tooltip-wc .tooltip-area {\n background-color: var(--color-white);\n }\n kol-tooltip-wc .tooltip-arrow {\n background-color: var(--color-primary);\n }\n kol-tooltip-wc .tooltip-content {\n padding: 0.5rem;\n border: 2px solid var(--color-primary);\n box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.5em;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.3em;\n }\n}";
6068
6069
 
6069
6070
  var css_248z$q = "@layer kol-theme-component {\n .headline {\n margin-top: 0;\n letter-spacing: 0.5;\n }\n h1 {\n font-size: 2.5rem;\n line-height: 2.8125rem;\n font-weight: normal;\n }\n h2 {\n font-size: 2rem;\n line-height: 2.3125rem;\n font-weight: normal;\n }\n h3 {\n font-size: 1.3125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h4 {\n font-size: 1.125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h5 {\n color: red;\n }\n h5:after {\n content: \" (H5 is not part of the design system.)\";\n }\n h6 {\n color: red;\n }\n h6:after {\n content: \" (H6 is not part of the design system.)\";\n }\n}";
6070
6071
 
@@ -6206,6 +6207,7 @@ const BMF = KoliBri.createTheme("bmf", {
6206
6207
  }
6207
6208
  :host {
6208
6209
  font-family: var(--font-family); /* font-size: var(--font-size); */
6210
+ background-color: transparent; /* Reset global background-color defined by components */
6209
6211
  }
6210
6212
  * {
6211
6213
  box-sizing: border-box;
@@ -6456,13 +6458,14 @@ const BMF = KoliBri.createTheme("bmf", {
6456
6458
  content: '*';
6457
6459
  padding-left: 0.125em;
6458
6460
  }
6461
+ kol-input.error .input {
6462
+ border-color: var(--color-red);
6463
+ border-width: 3px;
6464
+ }
6459
6465
  kol-input.error:not(.hidden-error) {
6460
6466
  border-left: 3px solid var(--color-red);
6461
6467
  padding-left: 1em;
6462
6468
  }
6463
- kol-input.error .input:focus-within {
6464
- outline-color: var(--color-red) !important;
6465
- }
6466
6469
  kol-input.error kol-alert.error {
6467
6470
  color: var(--color-red);
6468
6471
  font-weight: 700;
@@ -6535,13 +6538,14 @@ const BMF = KoliBri.createTheme("bmf", {
6535
6538
  content: '*';
6536
6539
  padding-left: 0.125em;
6537
6540
  }
6541
+ kol-input.error .input {
6542
+ border-color: var(--color-red);
6543
+ border-width: 3px;
6544
+ }
6538
6545
  kol-input.error:not(.hidden-error) {
6539
6546
  border-left: 3px solid var(--color-red);
6540
6547
  padding-left: 1em;
6541
6548
  }
6542
- kol-input.error .input:focus-within {
6543
- outline-color: var(--color-red) !important;
6544
- }
6545
6549
  kol-input.error kol-alert.error {
6546
6550
  color: var(--color-red);
6547
6551
  font-weight: 700;
@@ -6614,13 +6618,14 @@ const BMF = KoliBri.createTheme("bmf", {
6614
6618
  content: '*';
6615
6619
  padding-left: 0.125em;
6616
6620
  }
6621
+ kol-input.error .input {
6622
+ border-color: var(--color-red);
6623
+ border-width: 3px;
6624
+ }
6617
6625
  kol-input.error:not(.hidden-error) {
6618
6626
  border-left: 3px solid var(--color-red);
6619
6627
  padding-left: 1em;
6620
6628
  }
6621
- kol-input.error .input:focus-within {
6622
- outline-color: var(--color-red) !important;
6623
- }
6624
6629
  kol-input.error kol-alert.error {
6625
6630
  color: var(--color-red);
6626
6631
  font-weight: 700;
@@ -6693,13 +6698,14 @@ const BMF = KoliBri.createTheme("bmf", {
6693
6698
  content: '*';
6694
6699
  padding-left: 0.125em;
6695
6700
  }
6701
+ kol-input.error .input {
6702
+ border-color: var(--color-red);
6703
+ border-width: 3px;
6704
+ }
6696
6705
  kol-input.error:not(.hidden-error) {
6697
6706
  border-left: 3px solid var(--color-red);
6698
6707
  padding-left: 1em;
6699
6708
  }
6700
- kol-input.error .input:focus-within {
6701
- outline-color: var(--color-red) !important;
6702
- }
6703
6709
  kol-input.error kol-alert.error {
6704
6710
  color: var(--color-red);
6705
6711
  font-weight: 700;
@@ -6773,13 +6779,14 @@ const BMF = KoliBri.createTheme("bmf", {
6773
6779
  content: '*';
6774
6780
  padding-left: 0.125em;
6775
6781
  }
6782
+ kol-input.error .input {
6783
+ border-color: var(--color-red);
6784
+ border-width: 3px;
6785
+ }
6776
6786
  kol-input.error:not(.hidden-error) {
6777
6787
  border-left: 3px solid var(--color-red);
6778
6788
  padding-left: 1em;
6779
6789
  }
6780
- kol-input.error .input:focus-within {
6781
- outline-color: var(--color-red) !important;
6782
- }
6783
6790
  kol-input.error kol-alert.error {
6784
6791
  color: var(--color-red);
6785
6792
  font-weight: 700;
@@ -6859,13 +6866,14 @@ const BMF = KoliBri.createTheme("bmf", {
6859
6866
  content: '*';
6860
6867
  padding-left: 0.125em;
6861
6868
  }
6869
+ kol-input.error .input {
6870
+ border-color: var(--color-red);
6871
+ border-width: 3px;
6872
+ }
6862
6873
  kol-input.error:not(.hidden-error) {
6863
6874
  border-left: 3px solid var(--color-red);
6864
6875
  padding-left: 1em;
6865
6876
  }
6866
- kol-input.error .input:focus-within {
6867
- outline-color: var(--color-red) !important;
6868
- }
6869
6877
  kol-input.error kol-alert.error {
6870
6878
  color: var(--color-red);
6871
6879
  font-weight: 700;
@@ -6951,13 +6959,14 @@ const BMF = KoliBri.createTheme("bmf", {
6951
6959
  content: '*';
6952
6960
  padding-left: 0.125em;
6953
6961
  }
6962
+ kol-input.error .input {
6963
+ border-color: var(--color-red);
6964
+ border-width: 3px;
6965
+ }
6954
6966
  kol-input.error:not(.hidden-error) {
6955
6967
  border-left: 3px solid var(--color-red);
6956
6968
  padding-left: 1em;
6957
6969
  }
6958
- kol-input.error .input:focus-within {
6959
- outline-color: var(--color-red) !important;
6960
- }
6961
6970
  kol-input.error kol-alert.error {
6962
6971
  color: var(--color-red);
6963
6972
  font-weight: 700;
@@ -7518,13 +7527,14 @@ const BMF = KoliBri.createTheme("bmf", {
7518
7527
  content: '*';
7519
7528
  padding-left: 0.125em;
7520
7529
  }
7530
+ kol-input.error .input {
7531
+ border-color: var(--color-red);
7532
+ border-width: 3px;
7533
+ }
7521
7534
  kol-input.error:not(.hidden-error) {
7522
7535
  border-left: 3px solid var(--color-red);
7523
7536
  padding-left: 1em;
7524
7537
  }
7525
- kol-input.error .input:focus-within {
7526
- outline-color: var(--color-red) !important;
7527
- }
7528
7538
  kol-input.error kol-alert.error {
7529
7539
  color: var(--color-red);
7530
7540
  font-weight: 700;
@@ -7625,13 +7635,14 @@ const BMF = KoliBri.createTheme("bmf", {
7625
7635
  content: '*';
7626
7636
  padding-left: 0.125em;
7627
7637
  }
7638
+ kol-input.error .input {
7639
+ border-color: var(--color-red);
7640
+ border-width: 3px;
7641
+ }
7628
7642
  kol-input.error:not(.hidden-error) {
7629
7643
  border-left: 3px solid var(--color-red);
7630
7644
  padding-left: 1em;
7631
7645
  }
7632
- kol-input.error .input:focus-within {
7633
- outline-color: var(--color-red) !important;
7634
- }
7635
7646
  kol-input.error kol-alert.error {
7636
7647
  color: var(--color-red);
7637
7648
  font-weight: 700;
@@ -8252,7 +8263,7 @@ const BMF = KoliBri.createTheme("bmf", {
8252
8263
  border-color: var(--border-default);
8253
8264
  background-color: var(--background-light-grey);
8254
8265
  }
8255
- fieldset #error {
8266
+ kol-alert.error {
8256
8267
  order: 1;
8257
8268
  }
8258
8269
  fieldset legend {
@@ -8263,12 +8274,10 @@ const BMF = KoliBri.createTheme("bmf", {
8263
8274
  order: 3;
8264
8275
  }
8265
8276
  fieldset.error {
8266
- padding-left: 1em;
8267
8277
  border-left: 3px solid var(--color-red);
8268
- }
8269
- fieldset kol-alert#error {
8270
8278
  color: var(--color-red);
8271
8279
  font-weight: 700;
8280
+ padding-left: 1em;
8272
8281
  }
8273
8282
  fieldset.error input:focus,
8274
8283
  fieldset.error select:focus,
@@ -8571,13 +8580,14 @@ const BMF = KoliBri.createTheme("bmf", {
8571
8580
  content: '*';
8572
8581
  padding-left: 0.125em;
8573
8582
  }
8583
+ kol-input.error .input {
8584
+ border-color: var(--color-red);
8585
+ border-width: 3px;
8586
+ }
8574
8587
  kol-input.error:not(.hidden-error) {
8575
8588
  border-left: 3px solid var(--color-red);
8576
8589
  padding-left: 1em;
8577
8590
  }
8578
- kol-input.error .input:focus-within {
8579
- outline-color: var(--color-red) !important;
8580
- }
8581
8591
  kol-input.error kol-alert.error {
8582
8592
  color: var(--color-red);
8583
8593
  font-weight: 700;
@@ -15824,6 +15834,7 @@ const DEFAULT = KoliBri.createTheme("default", {
15824
15834
  --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);
15825
15835
  }
15826
15836
  :host {
15837
+ background-color: transparent; /* Reset global background-color defined by components */
15827
15838
  font-family: var(--font-family);
15828
15839
  font-size: var(--font-size);
15829
15840
  }
@@ -17615,7 +17626,7 @@ const DEFAULT = KoliBri.createTheme("default", {
17615
17626
  cursor: not-allowed;
17616
17627
  background-color: var(--color-mute-variant);
17617
17628
  }
17618
- fieldset #error {
17629
+ kol-alert.error {
17619
17630
  order: 1;
17620
17631
  }
17621
17632
  fieldset legend {
@@ -17626,12 +17637,10 @@ const DEFAULT = KoliBri.createTheme("default", {
17626
17637
  order: 3;
17627
17638
  }
17628
17639
  fieldset.error {
17629
- padding-left: 1rem;
17630
17640
  border-left: 3px solid var(--color-danger);
17631
- }
17632
- fieldset kol-alert#error {
17633
17641
  color: var(--color-danger);
17634
17642
  font-weight: 700;
17643
+ padding-left: 1rem;
17635
17644
  }
17636
17645
  fieldset.error input:focus,
17637
17646
  fieldset.error select:focus,
@@ -18220,6 +18229,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
18220
18229
  --spacing-2xs: 4px; /* ?! */
18221
18230
  }
18222
18231
  :host {
18232
+ background-color: transparent; /* Reset global background-color defined by components */
18223
18233
  display: inline-block;
18224
18234
  font-family: var(--font-family);
18225
18235
  }
@@ -19794,6 +19804,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
19794
19804
  --spacing-2xs: 4px; /* ?! */
19795
19805
  }
19796
19806
  :host {
19807
+ background-color: transparent; /* Reset global background-color defined by components */
19797
19808
  display: inline-block;
19798
19809
  font-family: var(--font-family);
19799
19810
  }
@@ -21325,6 +21336,7 @@ const ITZBund = KoliBri.createTheme("itzbund", {
21325
21336
  --kolibri-spacing: calc(2 * var(--spacing));
21326
21337
  }
21327
21338
  :host {
21339
+ background-color: transparent; /* Reset global background-color defined by components */
21328
21340
  font-family: var(--font-family); /* font-size: var(--font-size); */
21329
21341
  }
21330
21342
  * {
@@ -23039,6 +23051,7 @@ const MFM = KoliBri.createTheme("mfm", {
23039
23051
  --spacing: 0.25em;
23040
23052
  }
23041
23053
  :host {
23054
+ background-color: transparent; /* Reset global background-color defined by components */
23042
23055
  font-family: var(--font-family); /* font-size: var(--font-size); */
23043
23056
  }
23044
23057
  * {
@@ -24897,7 +24910,7 @@ const MFM = KoliBri.createTheme("mfm", {
24897
24910
  border-color: var(--border-default);
24898
24911
  background-color: var(--background-light-grey);
24899
24912
  }
24900
- fieldset #error {
24913
+ kol-alert.error {
24901
24914
  order: 1;
24902
24915
  }
24903
24916
  fieldset legend {
@@ -24908,12 +24921,10 @@ const MFM = KoliBri.createTheme("mfm", {
24908
24921
  order: 3;
24909
24922
  }
24910
24923
  fieldset.error {
24911
- padding-left: 1em;
24912
24924
  border-left: 3px solid var(--color-red);
24913
- }
24914
- fieldset kol-alert#error {
24915
24925
  color: var(--color-red);
24916
24926
  font-weight: 700;
24927
+ padding-left: 1em;
24917
24928
  }
24918
24929
  fieldset.error input:focus,
24919
24930
  fieldset.error select:focus,
@@ -32559,6 +32570,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
32559
32570
  --font-size: 16px;
32560
32571
  }
32561
32572
  :host {
32573
+ background-color: transparent; /* Reset global background-color defined by components */
32562
32574
  font-family: var(--font-family); /* font-size: var(--font-size); */
32563
32575
  }
32564
32576
  * {
@@ -33596,7 +33608,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
33596
33608
  box-shadow: 0 0 0.1rem black;
33597
33609
  background-color: var(--kolibri-color-primary);
33598
33610
  }
33599
- fieldset #error {
33611
+ kol-alert.error {
33600
33612
  margin: 0.4em 0;
33601
33613
  order: 3;
33602
33614
  }
@@ -47866,6 +47878,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
47866
47878
  const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
47867
47879
  GLOBAL: css`
47868
47880
  :host {
47881
+ background-color: transparent; /* Reset global background-color defined by components */
47869
47882
  --border-color: var(--color-neutral);
47870
47883
  --border-radius: 0.25rem;
47871
47884
  --box-shadow: rgba(0, 0, 0, 0.12) 0 12px 12px -4px, rgba(0, 0, 0, 0.04) 0 4px 4px -4px;
@@ -48839,7 +48852,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
48839
48852
  box-shadow: 0 0 0.1rem black;
48840
48853
  background-color: var(--color-blau);
48841
48854
  }
48842
- fieldset #error {
48855
+ kol-alert.error {
48843
48856
  margin: 0.4em 0;
48844
48857
  order: 3;
48845
48858
  }
@@ -57003,7 +57016,7 @@ const radioStyles = css`
57003
57016
  order: 1;
57004
57017
  display: contents;
57005
57018
  }
57006
- fieldset #error {
57019
+ kol-alert.error {
57007
57020
  margin: 0.4em 0;
57008
57021
  order: 2;
57009
57022
  }
@@ -57059,6 +57072,7 @@ const tabsStyles = css`
57059
57072
  const ZOLLv3 = KoliBri.createTheme("zoll-v3", {
57060
57073
  GLOBAL: css`
57061
57074
  :host {
57075
+ background-color: transparent; /* Reset global background-color defined by components */
57062
57076
  --border-color: var(--color-neutral);
57063
57077
  --border-radius: 0.25rem;
57064
57078
  --box-shadow: rgba(0, 0, 0, 0.12) 0 12px 12px -4px, rgba(0, 0, 0, 0.04) 0 4px 4px -4px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/themes",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": "https://github.com/public-ui/kolibri",
@@ -41,21 +41,21 @@
41
41
  "wcag"
42
42
  ],
43
43
  "devDependencies": {
44
- "@public-ui/schema": "2.0.0",
44
+ "@public-ui/schema": "2.0.2",
45
45
  "@types/node": "ts5.3",
46
- "@typescript-eslint/eslint-plugin": "6.13.1",
47
- "@typescript-eslint/parser": "6.13.1",
48
- "eslint": "8.55.0",
46
+ "@typescript-eslint/eslint-plugin": "6.15.0",
47
+ "@typescript-eslint/parser": "6.15.0",
48
+ "eslint": "8.56.0",
49
49
  "eslint-plugin-no-loops": "0.3.0",
50
50
  "nodemon": "3.0.2",
51
51
  "postcss": "8.4.32",
52
52
  "rollup-plugin-postcss": "4.0.2",
53
53
  "sass": "1.69.5",
54
- "typescript": "5.3.2",
54
+ "typescript": "5.3.3",
55
55
  "unbuild": "1.2.1"
56
56
  },
57
57
  "peerDependencies": {
58
- "@public-ui/components": "2.0.0"
58
+ "@public-ui/components": "2.0.2"
59
59
  },
60
60
  "sideEffects": false,
61
61
  "type": "module",