@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 +46 -72
- package/dist/index.d.ts +0 -1
- package/dist/index.mjs +46 -72
- package/package.json +10 -10
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
|
|
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["
|
|
370
|
-
TagEnum2[TagEnum2["
|
|
371
|
-
TagEnum2[TagEnum2["
|
|
372
|
-
TagEnum2[TagEnum2["
|
|
373
|
-
TagEnum2[TagEnum2["
|
|
374
|
-
TagEnum2[TagEnum2["
|
|
375
|
-
TagEnum2[TagEnum2["
|
|
376
|
-
TagEnum2[TagEnum2["
|
|
377
|
-
TagEnum2[TagEnum2["
|
|
378
|
-
TagEnum2[TagEnum2["
|
|
379
|
-
TagEnum2[TagEnum2["
|
|
380
|
-
TagEnum2[TagEnum2["
|
|
381
|
-
TagEnum2[TagEnum2["
|
|
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
|
|
2087
|
-
|
|
2088
|
-
|
|
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
|
-
|
|
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
|
-
|
|
2099
|
+
&.checked .icon {
|
|
2133
2100
|
transform: translate(2em, -50%);
|
|
2134
2101
|
}
|
|
2135
2102
|
|
|
2136
|
-
|
|
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
|
|
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["
|
|
368
|
-
TagEnum2[TagEnum2["
|
|
369
|
-
TagEnum2[TagEnum2["
|
|
370
|
-
TagEnum2[TagEnum2["
|
|
371
|
-
TagEnum2[TagEnum2["
|
|
372
|
-
TagEnum2[TagEnum2["
|
|
373
|
-
TagEnum2[TagEnum2["
|
|
374
|
-
TagEnum2[TagEnum2["
|
|
375
|
-
TagEnum2[TagEnum2["
|
|
376
|
-
TagEnum2[TagEnum2["
|
|
377
|
-
TagEnum2[TagEnum2["
|
|
378
|
-
TagEnum2[TagEnum2["
|
|
379
|
-
TagEnum2[TagEnum2["
|
|
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
|
|
2085
|
-
|
|
2086
|
-
|
|
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
|
-
|
|
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
|
-
|
|
2097
|
+
&.checked .icon {
|
|
2131
2098
|
transform: translate(2em, -50%);
|
|
2132
2099
|
}
|
|
2133
2100
|
|
|
2134
|
-
|
|
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
|
|
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
|
|
42
|
-
"@public-ui/visual-tests": "2.0.0
|
|
43
|
-
"@types/node": "ts5.
|
|
44
|
-
"@typescript-eslint/eslint-plugin": "6.
|
|
45
|
-
"@typescript-eslint/parser": "6.
|
|
46
|
-
"eslint": "8.
|
|
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.
|
|
48
|
+
"typescript": "5.3.2",
|
|
49
49
|
"unbuild": "1.2.1"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@public-ui/components": "2.0.0
|
|
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
|
-
"
|
|
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
|
}
|