@public-ui/theme-default 2.0.0-rc.8 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -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 n=getCssStyle(s,"PROPERTIES"),a=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,a);const i=[n,a,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 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);}}
305
305
 
306
306
  var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
307
307
  KeyEnum2[KeyEnum2["error"] = 0] = "error";
@@ -366,20 +366,19 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
366
366
  TagEnum2[TagEnum2["modal"] = 30] = "modal";
367
367
  TagEnum2[TagEnum2["nav"] = 31] = "nav";
368
368
  TagEnum2[TagEnum2["pagination"] = 32] = "pagination";
369
- TagEnum2[TagEnum2["popover"] = 33] = "popover";
370
- TagEnum2[TagEnum2["progress"] = 34] = "progress";
371
- TagEnum2[TagEnum2["select"] = 35] = "select";
372
- TagEnum2[TagEnum2["separator"] = 36] = "separator";
373
- TagEnum2[TagEnum2["skip-nav"] = 37] = "skip-nav";
374
- TagEnum2[TagEnum2["spin"] = 38] = "spin";
375
- TagEnum2[TagEnum2["split-button"] = 39] = "split-button";
376
- TagEnum2[TagEnum2["symbol"] = 40] = "symbol";
377
- TagEnum2[TagEnum2["table"] = 41] = "table";
378
- TagEnum2[TagEnum2["tabs"] = 42] = "tabs";
379
- TagEnum2[TagEnum2["textarea"] = 43] = "textarea";
380
- TagEnum2[TagEnum2["toast-container"] = 44] = "toast-container";
381
- TagEnum2[TagEnum2["toolbar"] = 45] = "toolbar";
382
- TagEnum2[TagEnum2["tooltip"] = 46] = "tooltip";
369
+ TagEnum2[TagEnum2["progress"] = 33] = "progress";
370
+ TagEnum2[TagEnum2["select"] = 34] = "select";
371
+ TagEnum2[TagEnum2["separator"] = 35] = "separator";
372
+ TagEnum2[TagEnum2["skip-nav"] = 36] = "skip-nav";
373
+ TagEnum2[TagEnum2["spin"] = 37] = "spin";
374
+ TagEnum2[TagEnum2["split-button"] = 38] = "split-button";
375
+ TagEnum2[TagEnum2["symbol"] = 39] = "symbol";
376
+ TagEnum2[TagEnum2["table"] = 40] = "table";
377
+ TagEnum2[TagEnum2["tabs"] = 41] = "tabs";
378
+ TagEnum2[TagEnum2["textarea"] = 42] = "textarea";
379
+ TagEnum2[TagEnum2["toast-container"] = 43] = "toast-container";
380
+ TagEnum2[TagEnum2["toolbar"] = 44] = "toolbar";
381
+ TagEnum2[TagEnum2["tooltip"] = 45] = "tooltip";
383
382
  return TagEnum2;
384
383
  })(TagEnum || {});
385
384
 
@@ -1368,29 +1367,29 @@ const DEFAULT = KoliBri.createTheme("default", {
1368
1367
  }
1369
1368
  `,
1370
1369
  "KOL-HEADING": css`
1371
- h1,
1372
- h2,
1373
- h3,
1374
- h4,
1375
- h5,
1376
- h6 {
1370
+ .headline-h1,
1371
+ .headline-h2,
1372
+ .headline-h3,
1373
+ .headline-h4,
1374
+ .headline-h5,
1375
+ .headline-h6 {
1377
1376
  color: inherit;
1378
1377
  font-style: normal;
1379
1378
  }
1380
- h1,
1381
- h2,
1382
- h3 {
1379
+ .headline-h1,
1380
+ .headline-h2,
1381
+ .headline-h3 {
1383
1382
  font-weight: 700;
1384
1383
  }
1385
- h1 {
1384
+ .headline-h1 {
1386
1385
  font-size: 1.5rem;
1387
1386
  line-height: 1.75rem;
1388
1387
  }
1389
- h2 {
1388
+ .headline-h2 {
1390
1389
  font-size: 1.25rem;
1391
1390
  line-height: 1.75rem;
1392
1391
  }
1393
- h3 {
1392
+ .headline-h3 {
1394
1393
  font-size: 1.125rem;
1395
1394
  line-height: 1.5rem;
1396
1395
  }
@@ -1973,6 +1972,9 @@ const DEFAULT = KoliBri.createTheme("default", {
1973
1972
  :host kol-input.button {
1974
1973
  gap: 0.4rem 0;
1975
1974
  }
1975
+ .checkbox-container {
1976
+ justify-content: flex-start;
1977
+ }
1976
1978
  :host kol-input > div.input {
1977
1979
  display: inherit;
1978
1980
  min-height: var(--a11y-min-size);
@@ -2041,13 +2043,6 @@ const DEFAULT = KoliBri.createTheme("default", {
2041
2043
  cursor: pointer;
2042
2044
  transition: 0.5s;
2043
2045
  }
2044
- :host kol-input input[type='checkbox'].kol-disabled:before {
2045
- cursor: not-allowed;
2046
- }
2047
- :host kol-input input[type='checkbox']:before {
2048
- content: '';
2049
- cursor: pointer;
2050
- }
2051
2046
  :host kol-input input[type='checkbox']:checked {
2052
2047
  background-color: var(--color-primary);
2053
2048
  border-color: var(--color-primary);
@@ -2058,51 +2053,23 @@ const DEFAULT = KoliBri.createTheme("default", {
2058
2053
  min-width: calc(6 * 0.25rem);
2059
2054
  width: calc(6 * 0.25rem);
2060
2055
  }
2061
- :host kol-input.default input[type='checkbox']:before {
2062
- border-radius: 1.5em;
2063
- background-color: transparent;
2064
- display: block;
2065
- height: calc(6 * 0.25rem);
2066
- position: relative;
2067
- width: calc(6 * 0.25rem);
2068
- }
2069
- :host kol-input.default input[type='checkbox']:checked:before {
2070
- border-right-width: 3px;
2071
- border-bottom-width: 3px;
2072
- left: calc(1.5 * 0.25rem - 2px);
2073
- top: calc(2.85 * 0.25rem - 2px);
2074
- transform: rotate(40deg) translate(-50%, -50%);
2075
- background-color: transparent;
2076
- border-width: 0px 3px 3px 0px;
2077
- border-color: white;
2078
- border-radius: 1px;
2079
- border-style: solid;
2080
- height: calc(3 * 0.25rem);
2081
- width: calc(1.5 * 0.25rem);
2082
- }
2083
2056
  :host kol-input.default input[type='checkbox']:indeterminate {
2084
2057
  background-color: var(--color-primary);
2085
2058
  }
2086
- :host kol-input.default input[type='checkbox']:indeterminate:before {
2087
- background-color: var(--color-light);
2088
- height: 0.125rem;
2089
- top: 0.6rem;
2090
- left: 0.25rem;
2091
- width: calc(3 * 0.25rem);
2092
- transform: inherit;
2093
- }
2094
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
2095
- border-width: 0px 1px 1px 0px;
2059
+ :host kol-input.default .icon {
2060
+ color: var(--color-light);
2061
+ margin-left: 0.25rem;
2096
2062
  }
2063
+
2097
2064
  :host kol-input.switch input[type='checkbox'] {
2098
- min-width: 3.5em;
2099
- width: 3.5em;
2100
2065
  background-color: var(--color-subtle);
2066
+ border-radius: 1.25em;
2101
2067
  border-width: 0;
2068
+ display: block;
2102
2069
  height: 1.5em;
2103
- border-radius: 1.25em;
2104
- display: inline-block;
2070
+ min-width: 3.5em;
2105
2071
  position: relative;
2072
+ width: 3.5em;
2106
2073
  }
2107
2074
  :host kol-input.switch input[type='checkbox']:before {
2108
2075
  width: 1.25em;
@@ -2129,17 +2096,24 @@ const DEFAULT = KoliBri.createTheme("default", {
2129
2096
  left: 2px;
2130
2097
  }
2131
2098
 
2132
- &:has(input:checked) .icon {
2099
+ &.checked .icon {
2133
2100
  transform: translate(2em, -50%);
2134
2101
  }
2135
2102
 
2136
- &:has(input:indeterminate) .icon {
2103
+ &.indeterminate .icon {
2137
2104
  transform: translate(1em, -50%);
2138
2105
  }
2139
2106
  }
2140
2107
  :host .disabled {
2141
2108
  opacity: 0.33;
2142
2109
  }
2110
+ .button:focus-within {
2111
+ border-radius: var(--border-radius);
2112
+ outline-color: var(--color-primary-variant);
2113
+ outline-offset: 2px;
2114
+ outline-style: solid;
2115
+ outline-width: calc(var(--border-width) * 2);
2116
+ }
2143
2117
  `,
2144
2118
  "KOL-INPUT-RADIO": css`
2145
2119
  label {
package/dist/index.d.ts CHANGED
@@ -35,7 +35,6 @@ declare const DEFAULT: (patch: (name: string, map: {
35
35
  "KOL-MODAL"?: string | undefined;
36
36
  "KOL-NAV"?: string | undefined;
37
37
  "KOL-PAGINATION"?: string | undefined;
38
- "KOL-POPOVER"?: string | undefined;
39
38
  "KOL-PROGRESS"?: string | undefined;
40
39
  "KOL-SELECT"?: string | undefined;
41
40
  "KOL-SEPARATOR"?: 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 n=getCssStyle(s,"PROPERTIES"),a=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,a);const i=[n,a,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 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);}}
303
303
 
304
304
  var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
305
305
  KeyEnum2[KeyEnum2["error"] = 0] = "error";
@@ -364,20 +364,19 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
364
364
  TagEnum2[TagEnum2["modal"] = 30] = "modal";
365
365
  TagEnum2[TagEnum2["nav"] = 31] = "nav";
366
366
  TagEnum2[TagEnum2["pagination"] = 32] = "pagination";
367
- TagEnum2[TagEnum2["popover"] = 33] = "popover";
368
- TagEnum2[TagEnum2["progress"] = 34] = "progress";
369
- TagEnum2[TagEnum2["select"] = 35] = "select";
370
- TagEnum2[TagEnum2["separator"] = 36] = "separator";
371
- TagEnum2[TagEnum2["skip-nav"] = 37] = "skip-nav";
372
- TagEnum2[TagEnum2["spin"] = 38] = "spin";
373
- TagEnum2[TagEnum2["split-button"] = 39] = "split-button";
374
- TagEnum2[TagEnum2["symbol"] = 40] = "symbol";
375
- TagEnum2[TagEnum2["table"] = 41] = "table";
376
- TagEnum2[TagEnum2["tabs"] = 42] = "tabs";
377
- TagEnum2[TagEnum2["textarea"] = 43] = "textarea";
378
- TagEnum2[TagEnum2["toast-container"] = 44] = "toast-container";
379
- TagEnum2[TagEnum2["toolbar"] = 45] = "toolbar";
380
- TagEnum2[TagEnum2["tooltip"] = 46] = "tooltip";
367
+ TagEnum2[TagEnum2["progress"] = 33] = "progress";
368
+ TagEnum2[TagEnum2["select"] = 34] = "select";
369
+ TagEnum2[TagEnum2["separator"] = 35] = "separator";
370
+ TagEnum2[TagEnum2["skip-nav"] = 36] = "skip-nav";
371
+ TagEnum2[TagEnum2["spin"] = 37] = "spin";
372
+ TagEnum2[TagEnum2["split-button"] = 38] = "split-button";
373
+ TagEnum2[TagEnum2["symbol"] = 39] = "symbol";
374
+ TagEnum2[TagEnum2["table"] = 40] = "table";
375
+ TagEnum2[TagEnum2["tabs"] = 41] = "tabs";
376
+ TagEnum2[TagEnum2["textarea"] = 42] = "textarea";
377
+ TagEnum2[TagEnum2["toast-container"] = 43] = "toast-container";
378
+ TagEnum2[TagEnum2["toolbar"] = 44] = "toolbar";
379
+ TagEnum2[TagEnum2["tooltip"] = 45] = "tooltip";
381
380
  return TagEnum2;
382
381
  })(TagEnum || {});
383
382
 
@@ -1366,29 +1365,29 @@ const DEFAULT = KoliBri.createTheme("default", {
1366
1365
  }
1367
1366
  `,
1368
1367
  "KOL-HEADING": css`
1369
- h1,
1370
- h2,
1371
- h3,
1372
- h4,
1373
- h5,
1374
- h6 {
1368
+ .headline-h1,
1369
+ .headline-h2,
1370
+ .headline-h3,
1371
+ .headline-h4,
1372
+ .headline-h5,
1373
+ .headline-h6 {
1375
1374
  color: inherit;
1376
1375
  font-style: normal;
1377
1376
  }
1378
- h1,
1379
- h2,
1380
- h3 {
1377
+ .headline-h1,
1378
+ .headline-h2,
1379
+ .headline-h3 {
1381
1380
  font-weight: 700;
1382
1381
  }
1383
- h1 {
1382
+ .headline-h1 {
1384
1383
  font-size: 1.5rem;
1385
1384
  line-height: 1.75rem;
1386
1385
  }
1387
- h2 {
1386
+ .headline-h2 {
1388
1387
  font-size: 1.25rem;
1389
1388
  line-height: 1.75rem;
1390
1389
  }
1391
- h3 {
1390
+ .headline-h3 {
1392
1391
  font-size: 1.125rem;
1393
1392
  line-height: 1.5rem;
1394
1393
  }
@@ -1971,6 +1970,9 @@ const DEFAULT = KoliBri.createTheme("default", {
1971
1970
  :host kol-input.button {
1972
1971
  gap: 0.4rem 0;
1973
1972
  }
1973
+ .checkbox-container {
1974
+ justify-content: flex-start;
1975
+ }
1974
1976
  :host kol-input > div.input {
1975
1977
  display: inherit;
1976
1978
  min-height: var(--a11y-min-size);
@@ -2039,13 +2041,6 @@ const DEFAULT = KoliBri.createTheme("default", {
2039
2041
  cursor: pointer;
2040
2042
  transition: 0.5s;
2041
2043
  }
2042
- :host kol-input input[type='checkbox'].kol-disabled:before {
2043
- cursor: not-allowed;
2044
- }
2045
- :host kol-input input[type='checkbox']:before {
2046
- content: '';
2047
- cursor: pointer;
2048
- }
2049
2044
  :host kol-input input[type='checkbox']:checked {
2050
2045
  background-color: var(--color-primary);
2051
2046
  border-color: var(--color-primary);
@@ -2056,51 +2051,23 @@ const DEFAULT = KoliBri.createTheme("default", {
2056
2051
  min-width: calc(6 * 0.25rem);
2057
2052
  width: calc(6 * 0.25rem);
2058
2053
  }
2059
- :host kol-input.default input[type='checkbox']:before {
2060
- border-radius: 1.5em;
2061
- background-color: transparent;
2062
- display: block;
2063
- height: calc(6 * 0.25rem);
2064
- position: relative;
2065
- width: calc(6 * 0.25rem);
2066
- }
2067
- :host kol-input.default input[type='checkbox']:checked:before {
2068
- border-right-width: 3px;
2069
- border-bottom-width: 3px;
2070
- left: calc(1.5 * 0.25rem - 2px);
2071
- top: calc(2.85 * 0.25rem - 2px);
2072
- transform: rotate(40deg) translate(-50%, -50%);
2073
- background-color: transparent;
2074
- border-width: 0px 3px 3px 0px;
2075
- border-color: white;
2076
- border-radius: 1px;
2077
- border-style: solid;
2078
- height: calc(3 * 0.25rem);
2079
- width: calc(1.5 * 0.25rem);
2080
- }
2081
2054
  :host kol-input.default input[type='checkbox']:indeterminate {
2082
2055
  background-color: var(--color-primary);
2083
2056
  }
2084
- :host kol-input.default input[type='checkbox']:indeterminate:before {
2085
- background-color: var(--color-light);
2086
- height: 0.125rem;
2087
- top: 0.6rem;
2088
- left: 0.25rem;
2089
- width: calc(3 * 0.25rem);
2090
- transform: inherit;
2091
- }
2092
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
2093
- border-width: 0px 1px 1px 0px;
2057
+ :host kol-input.default .icon {
2058
+ color: var(--color-light);
2059
+ margin-left: 0.25rem;
2094
2060
  }
2061
+
2095
2062
  :host kol-input.switch input[type='checkbox'] {
2096
- min-width: 3.5em;
2097
- width: 3.5em;
2098
2063
  background-color: var(--color-subtle);
2064
+ border-radius: 1.25em;
2099
2065
  border-width: 0;
2066
+ display: block;
2100
2067
  height: 1.5em;
2101
- border-radius: 1.25em;
2102
- display: inline-block;
2068
+ min-width: 3.5em;
2103
2069
  position: relative;
2070
+ width: 3.5em;
2104
2071
  }
2105
2072
  :host kol-input.switch input[type='checkbox']:before {
2106
2073
  width: 1.25em;
@@ -2127,17 +2094,24 @@ const DEFAULT = KoliBri.createTheme("default", {
2127
2094
  left: 2px;
2128
2095
  }
2129
2096
 
2130
- &:has(input:checked) .icon {
2097
+ &.checked .icon {
2131
2098
  transform: translate(2em, -50%);
2132
2099
  }
2133
2100
 
2134
- &:has(input:indeterminate) .icon {
2101
+ &.indeterminate .icon {
2135
2102
  transform: translate(1em, -50%);
2136
2103
  }
2137
2104
  }
2138
2105
  :host .disabled {
2139
2106
  opacity: 0.33;
2140
2107
  }
2108
+ .button:focus-within {
2109
+ border-radius: var(--border-radius);
2110
+ outline-color: var(--color-primary-variant);
2111
+ outline-offset: 2px;
2112
+ outline-style: solid;
2113
+ outline-width: calc(var(--border-width) * 2);
2114
+ }
2141
2115
  `,
2142
2116
  "KOL-INPUT-RADIO": css`
2143
2117
  label {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "2.0.0-rc.8",
3
+ "version": "2.0.0",
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": "2.0.0-rc.8",
42
- "@public-ui/visual-tests": "2.0.0-rc.8",
43
- "@types/node": "ts5.2",
44
- "@typescript-eslint/eslint-plugin": "6.9.0",
45
- "@typescript-eslint/parser": "6.9.0",
46
- "eslint": "8.52.0",
41
+ "@public-ui/schema": "2.0.0",
42
+ "@public-ui/visual-tests": "2.0.0",
43
+ "@types/node": "ts5.3",
44
+ "@typescript-eslint/eslint-plugin": "6.13.1",
45
+ "@typescript-eslint/parser": "6.13.1",
46
+ "eslint": "8.55.0",
47
47
  "eslint-plugin-no-loops": "0.3.0",
48
- "typescript": "5.2.2",
48
+ "typescript": "5.3.2",
49
49
  "unbuild": "1.2.1"
50
50
  },
51
51
  "peerDependencies": {
52
- "@public-ui/components": "2.0.0-rc.8"
52
+ "@public-ui/components": "2.0.0"
53
53
  },
54
54
  "sideEffects": false,
55
55
  "type": "module",
@@ -72,7 +72,7 @@
72
72
  "depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*",
73
73
  "format": "prettier --check src",
74
74
  "lint": "eslint src && tsc --noemit",
75
- "-test": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test",
75
+ "test": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test",
76
76
  "test-update": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
77
77
  }
78
78
  }