@public-ui/theme-default 1.7.6-rc.2 → 1.7.7

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 (4) hide show
  1. package/dist/index.cjs +24 -49
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.mjs +24 -49
  4. package/package.json +8 -8
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";
@@ -385,7 +385,7 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
385
385
  return TagEnum2;
386
386
  })(TagEnum || {});
387
387
 
388
- const KoliBri = new Theme("kol", KeyEnum, TagEnum);
388
+ const KoliBri = new te("kol", KeyEnum, TagEnum);
389
389
 
390
390
  const css = (input) => input.join(``);
391
391
  const DEFAULT = KoliBri.createTheme("default", {
@@ -408,6 +408,7 @@ const DEFAULT = KoliBri.createTheme("default", {
408
408
  --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);
409
409
  }
410
410
  :host {
411
+ background-color: transparent; /* Reset global background-color defined by components */
411
412
  font-family: var(--font-family);
412
413
  font-size: var(--font-size);
413
414
  }
@@ -2031,6 +2032,9 @@ const DEFAULT = KoliBri.createTheme("default", {
2031
2032
  :host kol-input.button {
2032
2033
  gap: 0.4rem 0;
2033
2034
  }
2035
+ .checkbox-container {
2036
+ justify-content: flex-start;
2037
+ }
2034
2038
  :host kol-input > div.input {
2035
2039
  display: inherit;
2036
2040
  min-height: var(--a11y-min-size);
@@ -2099,13 +2103,6 @@ const DEFAULT = KoliBri.createTheme("default", {
2099
2103
  cursor: pointer;
2100
2104
  transition: 0.5s;
2101
2105
  }
2102
- :host kol-input input[type='checkbox'].kol-disabled:before {
2103
- cursor: not-allowed;
2104
- }
2105
- :host kol-input input[type='checkbox']:before {
2106
- content: '';
2107
- cursor: pointer;
2108
- }
2109
2106
  :host kol-input input[type='checkbox']:checked {
2110
2107
  background-color: var(--color-primary);
2111
2108
  border-color: var(--color-primary);
@@ -2116,51 +2113,22 @@ const DEFAULT = KoliBri.createTheme("default", {
2116
2113
  min-width: calc(6 * 0.25rem);
2117
2114
  width: calc(6 * 0.25rem);
2118
2115
  }
2119
- :host kol-input.default input[type='checkbox']:before {
2120
- border-radius: 1.5em;
2121
- background-color: transparent;
2122
- display: block;
2123
- height: calc(6 * 0.25rem);
2124
- position: relative;
2125
- width: calc(6 * 0.25rem);
2126
- }
2127
- :host kol-input.default input[type='checkbox']:checked:before {
2128
- border-right-width: 3px;
2129
- border-bottom-width: 3px;
2130
- left: calc(1.5 * 0.25rem - 2px);
2131
- top: calc(2.85 * 0.25rem - 2px);
2132
- transform: rotate(40deg) translate(-50%, -50%);
2133
- background-color: transparent;
2134
- border-width: 0px 3px 3px 0px;
2135
- border-color: white;
2136
- border-radius: 1px;
2137
- border-style: solid;
2138
- height: calc(3 * 0.25rem);
2139
- width: calc(1.5 * 0.25rem);
2140
- }
2141
2116
  :host kol-input.default input[type='checkbox']:indeterminate {
2142
2117
  background-color: var(--color-primary);
2143
2118
  }
2144
- :host kol-input.default input[type='checkbox']:indeterminate:before {
2145
- background-color: var(--color-light);
2146
- height: 0.125rem;
2147
- top: 0.6rem;
2148
- left: 0.25rem;
2149
- width: calc(3 * 0.25rem);
2150
- transform: inherit;
2151
- }
2152
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
2153
- border-width: 0px 1px 1px 0px;
2119
+ :host kol-input.default .icon {
2120
+ color: var(--color-light);
2121
+ margin-left: 0.25rem;
2154
2122
  }
2155
2123
  :host kol-input.switch input[type='checkbox'] {
2156
- min-width: 3.5em;
2157
- width: 3.5em;
2158
2124
  background-color: var(--color-subtle);
2125
+ border-radius: 1.25em;
2159
2126
  border-width: 0;
2127
+ display: block;
2160
2128
  height: 1.5em;
2161
- border-radius: 1.25em;
2162
- display: inline-block;
2129
+ min-width: 3.5em;
2163
2130
  position: relative;
2131
+ width: 3.5em;
2164
2132
  }
2165
2133
  :host kol-input.switch input[type='checkbox']:before {
2166
2134
  width: 1.25em;
@@ -2187,17 +2155,24 @@ const DEFAULT = KoliBri.createTheme("default", {
2187
2155
  left: 2px;
2188
2156
  }
2189
2157
 
2190
- &:has(input:checked) .icon {
2158
+ &.checked .icon {
2191
2159
  transform: translate(2em, -50%);
2192
2160
  }
2193
2161
 
2194
- &:has(input:indeterminate) .icon {
2162
+ &.indeterminate .icon {
2195
2163
  transform: translate(1em, -50%);
2196
2164
  }
2197
2165
  }
2198
2166
  :host .disabled {
2199
2167
  opacity: 0.33;
2200
2168
  }
2169
+ .button:focus-within {
2170
+ border-radius: var(--border-radius);
2171
+ outline-color: var(--color-primary-variant);
2172
+ outline-offset: 2px;
2173
+ outline-style: solid;
2174
+ outline-width: calc(var(--border-width) * 2);
2175
+ }
2201
2176
  `,
2202
2177
  "KOL-INPUT-RADIO": css`
2203
2178
  label {
@@ -2281,7 +2256,7 @@ const DEFAULT = KoliBri.createTheme("default", {
2281
2256
  cursor: not-allowed;
2282
2257
  background-color: var(--color-mute-variant);
2283
2258
  }
2284
- fieldset #error {
2259
+ kol-alert.error {
2285
2260
  order: 1;
2286
2261
  }
2287
2262
  fieldset legend {
@@ -2295,7 +2270,7 @@ const DEFAULT = KoliBri.createTheme("default", {
2295
2270
  padding-left: 1rem;
2296
2271
  border-left: 3px solid var(--color-danger);
2297
2272
  }
2298
- fieldset kol-alert#error {
2273
+ kol-alert.error {
2299
2274
  color: var(--color-danger);
2300
2275
  font-weight: 700;
2301
2276
  }
package/dist/index.d.ts CHANGED
@@ -48,6 +48,8 @@ declare const DEFAULT: (patch: (name: string, map: {
48
48
  "KOL-TOAST-CONTAINER"?: string | undefined;
49
49
  "KOL-TOOLBAR"?: string | undefined;
50
50
  "KOL-TOOLTIP"?: string | undefined;
51
- }) => string) => string;
51
+ }, options?: {
52
+ append?: boolean | undefined;
53
+ } | undefined) => string) => string;
52
54
 
53
55
  export { DEFAULT };
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";
@@ -383,7 +383,7 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
383
383
  return TagEnum2;
384
384
  })(TagEnum || {});
385
385
 
386
- const KoliBri = new Theme("kol", KeyEnum, TagEnum);
386
+ const KoliBri = new te("kol", KeyEnum, TagEnum);
387
387
 
388
388
  const css = (input) => input.join(``);
389
389
  const DEFAULT = KoliBri.createTheme("default", {
@@ -406,6 +406,7 @@ const DEFAULT = KoliBri.createTheme("default", {
406
406
  --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);
407
407
  }
408
408
  :host {
409
+ background-color: transparent; /* Reset global background-color defined by components */
409
410
  font-family: var(--font-family);
410
411
  font-size: var(--font-size);
411
412
  }
@@ -2029,6 +2030,9 @@ const DEFAULT = KoliBri.createTheme("default", {
2029
2030
  :host kol-input.button {
2030
2031
  gap: 0.4rem 0;
2031
2032
  }
2033
+ .checkbox-container {
2034
+ justify-content: flex-start;
2035
+ }
2032
2036
  :host kol-input > div.input {
2033
2037
  display: inherit;
2034
2038
  min-height: var(--a11y-min-size);
@@ -2097,13 +2101,6 @@ const DEFAULT = KoliBri.createTheme("default", {
2097
2101
  cursor: pointer;
2098
2102
  transition: 0.5s;
2099
2103
  }
2100
- :host kol-input input[type='checkbox'].kol-disabled:before {
2101
- cursor: not-allowed;
2102
- }
2103
- :host kol-input input[type='checkbox']:before {
2104
- content: '';
2105
- cursor: pointer;
2106
- }
2107
2104
  :host kol-input input[type='checkbox']:checked {
2108
2105
  background-color: var(--color-primary);
2109
2106
  border-color: var(--color-primary);
@@ -2114,51 +2111,22 @@ const DEFAULT = KoliBri.createTheme("default", {
2114
2111
  min-width: calc(6 * 0.25rem);
2115
2112
  width: calc(6 * 0.25rem);
2116
2113
  }
2117
- :host kol-input.default input[type='checkbox']:before {
2118
- border-radius: 1.5em;
2119
- background-color: transparent;
2120
- display: block;
2121
- height: calc(6 * 0.25rem);
2122
- position: relative;
2123
- width: calc(6 * 0.25rem);
2124
- }
2125
- :host kol-input.default input[type='checkbox']:checked:before {
2126
- border-right-width: 3px;
2127
- border-bottom-width: 3px;
2128
- left: calc(1.5 * 0.25rem - 2px);
2129
- top: calc(2.85 * 0.25rem - 2px);
2130
- transform: rotate(40deg) translate(-50%, -50%);
2131
- background-color: transparent;
2132
- border-width: 0px 3px 3px 0px;
2133
- border-color: white;
2134
- border-radius: 1px;
2135
- border-style: solid;
2136
- height: calc(3 * 0.25rem);
2137
- width: calc(1.5 * 0.25rem);
2138
- }
2139
2114
  :host kol-input.default input[type='checkbox']:indeterminate {
2140
2115
  background-color: var(--color-primary);
2141
2116
  }
2142
- :host kol-input.default input[type='checkbox']:indeterminate:before {
2143
- background-color: var(--color-light);
2144
- height: 0.125rem;
2145
- top: 0.6rem;
2146
- left: 0.25rem;
2147
- width: calc(3 * 0.25rem);
2148
- transform: inherit;
2149
- }
2150
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
2151
- border-width: 0px 1px 1px 0px;
2117
+ :host kol-input.default .icon {
2118
+ color: var(--color-light);
2119
+ margin-left: 0.25rem;
2152
2120
  }
2153
2121
  :host kol-input.switch input[type='checkbox'] {
2154
- min-width: 3.5em;
2155
- width: 3.5em;
2156
2122
  background-color: var(--color-subtle);
2123
+ border-radius: 1.25em;
2157
2124
  border-width: 0;
2125
+ display: block;
2158
2126
  height: 1.5em;
2159
- border-radius: 1.25em;
2160
- display: inline-block;
2127
+ min-width: 3.5em;
2161
2128
  position: relative;
2129
+ width: 3.5em;
2162
2130
  }
2163
2131
  :host kol-input.switch input[type='checkbox']:before {
2164
2132
  width: 1.25em;
@@ -2185,17 +2153,24 @@ const DEFAULT = KoliBri.createTheme("default", {
2185
2153
  left: 2px;
2186
2154
  }
2187
2155
 
2188
- &:has(input:checked) .icon {
2156
+ &.checked .icon {
2189
2157
  transform: translate(2em, -50%);
2190
2158
  }
2191
2159
 
2192
- &:has(input:indeterminate) .icon {
2160
+ &.indeterminate .icon {
2193
2161
  transform: translate(1em, -50%);
2194
2162
  }
2195
2163
  }
2196
2164
  :host .disabled {
2197
2165
  opacity: 0.33;
2198
2166
  }
2167
+ .button:focus-within {
2168
+ border-radius: var(--border-radius);
2169
+ outline-color: var(--color-primary-variant);
2170
+ outline-offset: 2px;
2171
+ outline-style: solid;
2172
+ outline-width: calc(var(--border-width) * 2);
2173
+ }
2199
2174
  `,
2200
2175
  "KOL-INPUT-RADIO": css`
2201
2176
  label {
@@ -2279,7 +2254,7 @@ const DEFAULT = KoliBri.createTheme("default", {
2279
2254
  cursor: not-allowed;
2280
2255
  background-color: var(--color-mute-variant);
2281
2256
  }
2282
- fieldset #error {
2257
+ kol-alert.error {
2283
2258
  order: 1;
2284
2259
  }
2285
2260
  fieldset legend {
@@ -2293,7 +2268,7 @@ const DEFAULT = KoliBri.createTheme("default", {
2293
2268
  padding-left: 1rem;
2294
2269
  border-left: 3px solid var(--color-danger);
2295
2270
  }
2296
- fieldset kol-alert#error {
2271
+ kol-alert.error {
2297
2272
  color: var(--color-danger);
2298
2273
  font-weight: 700;
2299
2274
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "1.7.6-rc.2",
3
+ "version": "1.7.7",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": "https://github.com/public-ui/kolibri",
@@ -38,18 +38,18 @@
38
38
  "wcag"
39
39
  ],
40
40
  "devDependencies": {
41
- "@public-ui/schema": "1.7.6-rc.2",
42
- "@public-ui/visual-tests": "1.7.6-rc.2",
41
+ "@public-ui/schema": "1.7.7",
42
+ "@public-ui/visual-tests": "1.7.7",
43
43
  "@types/node": "ts5.3",
44
- "@typescript-eslint/eslint-plugin": "6.12.0",
45
- "@typescript-eslint/parser": "6.12.0",
46
- "eslint": "8.54.0",
44
+ "@typescript-eslint/eslint-plugin": "6.15.0",
45
+ "@typescript-eslint/parser": "6.15.0",
46
+ "eslint": "8.56.0",
47
47
  "eslint-plugin-no-loops": "0.3.0",
48
- "typescript": "5.3.2",
48
+ "typescript": "5.3.3",
49
49
  "unbuild": "1.2.1"
50
50
  },
51
51
  "peerDependencies": {
52
- "@public-ui/components": "1.7.6-rc.2"
52
+ "@public-ui/components": "1.7.7"
53
53
  },
54
54
  "sideEffects": false,
55
55
  "type": "module",