@public-ui/theme-default 2.0.0-rc.0 → 2.0.0-rc.10

package/dist/index.cjs

@@ -301,7 +301,7 @@ var loglevel = {exports: {}};
 	})); 
 } (loglevel));
 
-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);}}
+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);}}
 
 var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
   KeyEnum2[KeyEnum2["error"] = 0] = "error";
@@ -366,29 +366,28 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
   TagEnum2[TagEnum2["modal"] = 30] = "modal";
   TagEnum2[TagEnum2["nav"] = 31] = "nav";
   TagEnum2[TagEnum2["pagination"] = 32] = "pagination";
-  TagEnum2[TagEnum2["popover"] = 33] = "popover";
-  TagEnum2[TagEnum2["progress"] = 34] = "progress";
-  TagEnum2[TagEnum2["select"] = 35] = "select";
-  TagEnum2[TagEnum2["separator"] = 36] = "separator";
-  TagEnum2[TagEnum2["skip-nav"] = 37] = "skip-nav";
-  TagEnum2[TagEnum2["spin"] = 38] = "spin";
-  TagEnum2[TagEnum2["split-button"] = 39] = "split-button";
-  TagEnum2[TagEnum2["symbol"] = 40] = "symbol";
-  TagEnum2[TagEnum2["table"] = 41] = "table";
-  TagEnum2[TagEnum2["tabs"] = 42] = "tabs";
-  TagEnum2[TagEnum2["textarea"] = 43] = "textarea";
-  TagEnum2[TagEnum2["toast"] = 44] = "toast";
-  TagEnum2[TagEnum2["toast-container"] = 45] = "toast-container";
-  TagEnum2[TagEnum2["toolbar"] = 46] = "toolbar";
-  TagEnum2[TagEnum2["tooltip"] = 47] = "tooltip";
+  TagEnum2[TagEnum2["progress"] = 33] = "progress";
+  TagEnum2[TagEnum2["select"] = 34] = "select";
+  TagEnum2[TagEnum2["separator"] = 35] = "separator";
+  TagEnum2[TagEnum2["skip-nav"] = 36] = "skip-nav";
+  TagEnum2[TagEnum2["spin"] = 37] = "spin";
+  TagEnum2[TagEnum2["split-button"] = 38] = "split-button";
+  TagEnum2[TagEnum2["symbol"] = 39] = "symbol";
+  TagEnum2[TagEnum2["table"] = 40] = "table";
+  TagEnum2[TagEnum2["tabs"] = 41] = "tabs";
+  TagEnum2[TagEnum2["textarea"] = 42] = "textarea";
+  TagEnum2[TagEnum2["toast-container"] = 43] = "toast-container";
+  TagEnum2[TagEnum2["toolbar"] = 44] = "toolbar";
+  TagEnum2[TagEnum2["tooltip"] = 45] = "tooltip";
   return TagEnum2;
 })(TagEnum || {});
 
 const KoliBri = new Theme("kol", KeyEnum, TagEnum);
 
-const css = (input) => input.join(``);
+const cssWithCustomLayerName = (layerName) => (input) => `@layer ${layerName} { ${input.join(``)} }`;
+const css = (input) => cssWithCustomLayerName("kol-theme-component")(input);
 const DEFAULT = KoliBri.createTheme("default", {
-  GLOBAL: css`
+  GLOBAL: cssWithCustomLayerName("kol-theme-global")`
 		:host {
 			--border-radius: var(--kolibri-border-radius, 5px);
 			--font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);
@@ -593,6 +592,12 @@ const DEFAULT = KoliBri.createTheme("default", {
 			background-color: transparent;
 			border-color: transparent;
 		}
+		.access-key-hint {
+			background: var(--color-mute-variant);
+			border-radius: 3px;
+			color: var(--color-text);
+			padding: 0 0.3em;
+		}
 	`,
   "KOL-INPUT-TEXT": css`
 		kol-input {
@@ -1489,71 +1494,6 @@ const DEFAULT = KoliBri.createTheme("default", {
 			font-size: 1.2rem;
 		}
 	`,
-  "KOL-SPIN": css`
-		.spin {
-			display: inline-block;
-			height: 1rem;
-			position: relative;
-			width: 3rem;
-		}
-		.spin span {
-			animation-timing-function: cubic-bezier(0, 1, 1, 0);
-			border: 0.1rem solid rgb(255, 255, 255);
-			border-radius: 50%;
-			height: 0.8rem;
-			width: 0.8rem;
-			top: 0.1rem;
-			position: absolute;
-		}
-		.spin span:nth-child(1) {
-			background-color: #fc0;
-			z-index: 0;
-			animation: 2s ease 0s infinite normal none running spin1;
-			left: 0.1rem;
-		}
-		.spin span:nth-child(2) {
-			background-color: #f00;
-			z-index: 1;
-			animation: 2s ease 0s infinite normal none running spin2;
-			left: 0.1rem;
-		}
-		.spin span:nth-child(3) {
-			background-color: #000;
-			z-index: 1;
-			animation: 2s ease 0s infinite normal none running spin2;
-			left: 1.1rem;
-		}
-		.spin span:nth-child(4) {
-			background-color: #666;
-			z-index: 0;
-			animation: 2s ease 0s infinite normal none running spin3;
-			left: 2.1rem;
-		}
-		@keyframes spin1 {
-			0% {
-				transform: scale(0);
-			}
-			100% {
-				transform: scale(1);
-			}
-		}
-		@keyframes spin2 {
-			0% {
-				transform: translate(0px, 0px);
-			}
-			100% {
-				transform: translate(1rem, 0px);
-			}
-		}
-		@keyframes spin3 {
-			0% {
-				transform: scale(1);
-			}
-			100% {
-				transform: scale(0);
-			}
-		}
-	`,
   "KOL-PROGRESS": css`
 		:host progress,
 		:host span {
@@ -1659,13 +1599,15 @@ const DEFAULT = KoliBri.createTheme("default", {
 		}
 		select option {
 			margin: 1px 0;
-			padding: 0.5em;
 			border-radius: var(--border-radius);
 			cursor: pointer;
 		}
 		select option:disabled {
 			cursor: not-allowed;
 		}
+		select:not([multiple]) option {
+			padding: 0.5em;
+		}
 		option:active:not(:disabled),
 		option:checked:not(:disabled),
 		option:focus:not(:disabled),
@@ -2240,7 +2182,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 			display: grid;
 			gap: 0.25em;
 		}
-		fieldset div {
+		.radio-input-wrapper {
 			align-items: center;
 			cursor: pointer;
 			display: flex;
@@ -2250,16 +2192,16 @@ const DEFAULT = KoliBri.createTheme("default", {
 			min-height: var(--a11y-min-size);
 			position: relative;
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			cursor: pointer;
 			display: flex;
 			padding-left: calc(var(--spacing) / 2);
 			width: 100%;
 		}
-		fieldset div label span {
+		.radio-input-wrapper label span {
 			margin-top: 0.125em;
 		}
-		fieldset div input[type='radio'] {
+		.radio-input-wrapper input[type='radio'] {
 			appearance: none;
 			transition: 0.5s;
 			border-radius: 100%;
@@ -2267,16 +2209,16 @@ const DEFAULT = KoliBri.createTheme("default", {
 			min-width: calc(6 * 0.25rem);
 			width: calc(6 * 0.25rem);
 		}
-		fieldset div input[type='radio']:before {
+		.radio-input-wrapper input[type='radio']:before {
 			content: '';
 			cursor: pointer;
 			border-radius: 100%;
 			display: block;
 		}
-		fieldset div input[type='radio']:checked:before {
+		.radio-input-wrapper input[type='radio']:checked:before {
 			background-color: var(--color-primary);
 		}
-		fieldset div input[type='radio']:disabled {
+		.radio-input-wrapper input[type='radio']:disabled {
 			cursor: not-allowed;
 			background-color: var(--color-mute-variant);
 		}
@@ -2323,7 +2265,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 		fieldset .input-slot {
 			gap: var(--spacing);
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			padding-left: 0;
 		}
 	`,
@@ -2333,8 +2275,6 @@ const DEFAULT = KoliBri.createTheme("default", {
 			right: 1rem;
 			width: 440px;
 		}
-	`,
-  "KOL-TOAST": css`
 		.toast {
 			margin-top: 1rem;
 		}
@@ -2474,38 +2414,46 @@ const DEFAULT = KoliBri.createTheme("default", {
 		}
 	`,
   "KOL-PAGINATION": css`
-		:host {
-			display: grid;
-			gap: 1rem;
-		}
-		:host .navigation-list {
-			display: inline-flex;
-			flex-wrap: wrap;
-			align-items: center;
-			gap: 0.5rem;
+		.button:focus {
+			outline: none;
 		}
-		:host .selected button {
-			min-width: var(--a11y-min-size);
-			min-height: var(--a11y-min-size);
-			display: grid;
-			place-items: center;
-			font-family: var(--font-family);
-			cursor: not-allowed;
+		.button-inner {
+			background-color: var(--color-light);
+			border-radius: var(--border-radius);
+			border: 1px solid var(--color-primary);
+			color: var(--color-primary);
 			font-weight: 700;
-			border-radius: 50%;
-			border: none;
-			font-style: normal;
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			padding: 8px;
 			text-align: center;
-			width: inherit;
 			transition-duration: 0.5s;
 			transition-property: background-color, color, border-color;
-			color: var(--color-primary);
-			background-color: var(--color-mute-variant);
 		}
-		:host > div > span {
-			align-self: flex-end;
-			padding-bottom: 0.5rem;
-			color: var(--color-primary);
+		.button:focus .button-inner {
+			outline-offset: 2px;
+			outline: 2px solid var(--color-primary-variant);
+			transition: outline-offset 0.2s linear;
+		}
+		.button:is(:active, :hover):not(:disabled) .button-inner {
+			background-color: var(--color-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		}
+		.button:active .button-inner {
+			color: var(--color-light);
+			outline: none;
+		}
+		.button:disabled .button-inner {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
+		.selected .button-inner {
+			background-color: var(--color-mute-variant);
+			border-radius: var(--a11y-min-size);
+			border: 0;
+			opacity: 1 !important;
 		}
 	`,
   "KOL-INPUT-RANGE": css`
@@ -2746,6 +2694,12 @@ const DEFAULT = KoliBri.createTheme("default", {
 			left: unset;
 			position: unset;
 		}
+		.access-key-hint {
+			background: var(--color-mute-variant);
+			border-radius: 3px;
+			color: var(--color-text);
+			padding: 0 0.3em;
+		}
 	`,
   "KOL-ABBR": css`
 		abbr {
@@ -2798,9 +2752,11 @@ const DEFAULT = KoliBri.createTheme("default", {
 			cursor: pointer;
 		}
 	`,
-  "KOL-SPLIT-BUTTON": `.popover {
-		background: #fff;
-	}`
+  "KOL-SPLIT-BUTTON": css`
+		.popover {
+			background: #fff;
+		}
+	`
 });
 
 exports.DEFAULT = DEFAULT;

package/dist/index.d.ts

@@ -35,7 +35,6 @@ declare const DEFAULT: (patch: (name: string, map: {
     "KOL-MODAL"?: string | undefined;
     "KOL-NAV"?: string | undefined;
     "KOL-PAGINATION"?: string | undefined;
-    "KOL-POPOVER"?: string | undefined;
     "KOL-PROGRESS"?: string | undefined;
     "KOL-SELECT"?: string | undefined;
     "KOL-SEPARATOR"?: string | undefined;
@@ -45,7 +44,6 @@ declare const DEFAULT: (patch: (name: string, map: {
     "KOL-TABLE"?: string | undefined;
     "KOL-TABS"?: string | undefined;
     "KOL-TEXTAREA"?: string | undefined;
-    "KOL-TOAST"?: string | undefined;
     "KOL-TOAST-CONTAINER"?: string | undefined;
     "KOL-TOOLBAR"?: string | undefined;
     "KOL-TOOLTIP"?: string | undefined;

package/dist/index.mjs

@@ -299,7 +299,7 @@ var loglevel = {exports: {}};
 	})); 
 } (loglevel));
 
-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);}}
+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);}}
 
 var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
   KeyEnum2[KeyEnum2["error"] = 0] = "error";
@@ -364,29 +364,28 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
   TagEnum2[TagEnum2["modal"] = 30] = "modal";
   TagEnum2[TagEnum2["nav"] = 31] = "nav";
   TagEnum2[TagEnum2["pagination"] = 32] = "pagination";
-  TagEnum2[TagEnum2["popover"] = 33] = "popover";
-  TagEnum2[TagEnum2["progress"] = 34] = "progress";
-  TagEnum2[TagEnum2["select"] = 35] = "select";
-  TagEnum2[TagEnum2["separator"] = 36] = "separator";
-  TagEnum2[TagEnum2["skip-nav"] = 37] = "skip-nav";
-  TagEnum2[TagEnum2["spin"] = 38] = "spin";
-  TagEnum2[TagEnum2["split-button"] = 39] = "split-button";
-  TagEnum2[TagEnum2["symbol"] = 40] = "symbol";
-  TagEnum2[TagEnum2["table"] = 41] = "table";
-  TagEnum2[TagEnum2["tabs"] = 42] = "tabs";
-  TagEnum2[TagEnum2["textarea"] = 43] = "textarea";
-  TagEnum2[TagEnum2["toast"] = 44] = "toast";
-  TagEnum2[TagEnum2["toast-container"] = 45] = "toast-container";
-  TagEnum2[TagEnum2["toolbar"] = 46] = "toolbar";
-  TagEnum2[TagEnum2["tooltip"] = 47] = "tooltip";
+  TagEnum2[TagEnum2["progress"] = 33] = "progress";
+  TagEnum2[TagEnum2["select"] = 34] = "select";
+  TagEnum2[TagEnum2["separator"] = 35] = "separator";
+  TagEnum2[TagEnum2["skip-nav"] = 36] = "skip-nav";
+  TagEnum2[TagEnum2["spin"] = 37] = "spin";
+  TagEnum2[TagEnum2["split-button"] = 38] = "split-button";
+  TagEnum2[TagEnum2["symbol"] = 39] = "symbol";
+  TagEnum2[TagEnum2["table"] = 40] = "table";
+  TagEnum2[TagEnum2["tabs"] = 41] = "tabs";
+  TagEnum2[TagEnum2["textarea"] = 42] = "textarea";
+  TagEnum2[TagEnum2["toast-container"] = 43] = "toast-container";
+  TagEnum2[TagEnum2["toolbar"] = 44] = "toolbar";
+  TagEnum2[TagEnum2["tooltip"] = 45] = "tooltip";
   return TagEnum2;
 })(TagEnum || {});
 
 const KoliBri = new Theme("kol", KeyEnum, TagEnum);
 
-const css = (input) => input.join(``);
+const cssWithCustomLayerName = (layerName) => (input) => `@layer ${layerName} { ${input.join(``)} }`;
+const css = (input) => cssWithCustomLayerName("kol-theme-component")(input);
 const DEFAULT = KoliBri.createTheme("default", {
-  GLOBAL: css`
+  GLOBAL: cssWithCustomLayerName("kol-theme-global")`
 		:host {
 			--border-radius: var(--kolibri-border-radius, 5px);
 			--font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);
@@ -591,6 +590,12 @@ const DEFAULT = KoliBri.createTheme("default", {
 			background-color: transparent;
 			border-color: transparent;
 		}
+		.access-key-hint {
+			background: var(--color-mute-variant);
+			border-radius: 3px;
+			color: var(--color-text);
+			padding: 0 0.3em;
+		}
 	`,
   "KOL-INPUT-TEXT": css`
 		kol-input {
@@ -1487,71 +1492,6 @@ const DEFAULT = KoliBri.createTheme("default", {
 			font-size: 1.2rem;
 		}
 	`,
-  "KOL-SPIN": css`
-		.spin {
-			display: inline-block;
-			height: 1rem;
-			position: relative;
-			width: 3rem;
-		}
-		.spin span {
-			animation-timing-function: cubic-bezier(0, 1, 1, 0);
-			border: 0.1rem solid rgb(255, 255, 255);
-			border-radius: 50%;
-			height: 0.8rem;
-			width: 0.8rem;
-			top: 0.1rem;
-			position: absolute;
-		}
-		.spin span:nth-child(1) {
-			background-color: #fc0;
-			z-index: 0;
-			animation: 2s ease 0s infinite normal none running spin1;
-			left: 0.1rem;
-		}
-		.spin span:nth-child(2) {
-			background-color: #f00;
-			z-index: 1;
-			animation: 2s ease 0s infinite normal none running spin2;
-			left: 0.1rem;
-		}
-		.spin span:nth-child(3) {
-			background-color: #000;
-			z-index: 1;
-			animation: 2s ease 0s infinite normal none running spin2;
-			left: 1.1rem;
-		}
-		.spin span:nth-child(4) {
-			background-color: #666;
-			z-index: 0;
-			animation: 2s ease 0s infinite normal none running spin3;
-			left: 2.1rem;
-		}
-		@keyframes spin1 {
-			0% {
-				transform: scale(0);
-			}
-			100% {
-				transform: scale(1);
-			}
-		}
-		@keyframes spin2 {
-			0% {
-				transform: translate(0px, 0px);
-			}
-			100% {
-				transform: translate(1rem, 0px);
-			}
-		}
-		@keyframes spin3 {
-			0% {
-				transform: scale(1);
-			}
-			100% {
-				transform: scale(0);
-			}
-		}
-	`,
   "KOL-PROGRESS": css`
 		:host progress,
 		:host span {
@@ -1657,13 +1597,15 @@ const DEFAULT = KoliBri.createTheme("default", {
 		}
 		select option {
 			margin: 1px 0;
-			padding: 0.5em;
 			border-radius: var(--border-radius);
 			cursor: pointer;
 		}
 		select option:disabled {
 			cursor: not-allowed;
 		}
+		select:not([multiple]) option {
+			padding: 0.5em;
+		}
 		option:active:not(:disabled),
 		option:checked:not(:disabled),
 		option:focus:not(:disabled),
@@ -2238,7 +2180,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 			display: grid;
 			gap: 0.25em;
 		}
-		fieldset div {
+		.radio-input-wrapper {
 			align-items: center;
 			cursor: pointer;
 			display: flex;
@@ -2248,16 +2190,16 @@ const DEFAULT = KoliBri.createTheme("default", {
 			min-height: var(--a11y-min-size);
 			position: relative;
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			cursor: pointer;
 			display: flex;
 			padding-left: calc(var(--spacing) / 2);
 			width: 100%;
 		}
-		fieldset div label span {
+		.radio-input-wrapper label span {
 			margin-top: 0.125em;
 		}
-		fieldset div input[type='radio'] {
+		.radio-input-wrapper input[type='radio'] {
 			appearance: none;
 			transition: 0.5s;
 			border-radius: 100%;
@@ -2265,16 +2207,16 @@ const DEFAULT = KoliBri.createTheme("default", {
 			min-width: calc(6 * 0.25rem);
 			width: calc(6 * 0.25rem);
 		}
-		fieldset div input[type='radio']:before {
+		.radio-input-wrapper input[type='radio']:before {
 			content: '';
 			cursor: pointer;
 			border-radius: 100%;
 			display: block;
 		}
-		fieldset div input[type='radio']:checked:before {
+		.radio-input-wrapper input[type='radio']:checked:before {
 			background-color: var(--color-primary);
 		}
-		fieldset div input[type='radio']:disabled {
+		.radio-input-wrapper input[type='radio']:disabled {
 			cursor: not-allowed;
 			background-color: var(--color-mute-variant);
 		}
@@ -2321,7 +2263,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 		fieldset .input-slot {
 			gap: var(--spacing);
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			padding-left: 0;
 		}
 	`,
@@ -2331,8 +2273,6 @@ const DEFAULT = KoliBri.createTheme("default", {
 			right: 1rem;
 			width: 440px;
 		}
-	`,
-  "KOL-TOAST": css`
 		.toast {
 			margin-top: 1rem;
 		}
@@ -2472,38 +2412,46 @@ const DEFAULT = KoliBri.createTheme("default", {
 		}
 	`,
   "KOL-PAGINATION": css`
-		:host {
-			display: grid;
-			gap: 1rem;
-		}
-		:host .navigation-list {
-			display: inline-flex;
-			flex-wrap: wrap;
-			align-items: center;
-			gap: 0.5rem;
+		.button:focus {
+			outline: none;
 		}
-		:host .selected button {
-			min-width: var(--a11y-min-size);
-			min-height: var(--a11y-min-size);
-			display: grid;
-			place-items: center;
-			font-family: var(--font-family);
-			cursor: not-allowed;
+		.button-inner {
+			background-color: var(--color-light);
+			border-radius: var(--border-radius);
+			border: 1px solid var(--color-primary);
+			color: var(--color-primary);
 			font-weight: 700;
-			border-radius: 50%;
-			border: none;
-			font-style: normal;
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			padding: 8px;
 			text-align: center;
-			width: inherit;
 			transition-duration: 0.5s;
 			transition-property: background-color, color, border-color;
-			color: var(--color-primary);
-			background-color: var(--color-mute-variant);
 		}
-		:host > div > span {
-			align-self: flex-end;
-			padding-bottom: 0.5rem;
-			color: var(--color-primary);
+		.button:focus .button-inner {
+			outline-offset: 2px;
+			outline: 2px solid var(--color-primary-variant);
+			transition: outline-offset 0.2s linear;
+		}
+		.button:is(:active, :hover):not(:disabled) .button-inner {
+			background-color: var(--color-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		}
+		.button:active .button-inner {
+			color: var(--color-light);
+			outline: none;
+		}
+		.button:disabled .button-inner {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
+		.selected .button-inner {
+			background-color: var(--color-mute-variant);
+			border-radius: var(--a11y-min-size);
+			border: 0;
+			opacity: 1 !important;
 		}
 	`,
   "KOL-INPUT-RANGE": css`
@@ -2744,6 +2692,12 @@ const DEFAULT = KoliBri.createTheme("default", {
 			left: unset;
 			position: unset;
 		}
+		.access-key-hint {
+			background: var(--color-mute-variant);
+			border-radius: 3px;
+			color: var(--color-text);
+			padding: 0 0.3em;
+		}
 	`,
   "KOL-ABBR": css`
 		abbr {
@@ -2796,9 +2750,11 @@ const DEFAULT = KoliBri.createTheme("default", {
 			cursor: pointer;
 		}
 	`,
-  "KOL-SPLIT-BUTTON": `.popover {
-		background: #fff;
-	}`
+  "KOL-SPLIT-BUTTON": css`
+		.popover {
+			background: #fff;
+		}
+	`
 });
 
 export { DEFAULT };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/theme-default",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.10",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -38,18 +38,18 @@
     "wcag"
   ],
   "devDependencies": {
-    "@public-ui/schema": "2.0.0-rc.0",
-    "@public-ui/visual-tests": "2.0.0-rc.0",
+    "@public-ui/schema": "2.0.0-rc.10",
+    "@public-ui/visual-tests": "2.0.0-rc.10",
     "@types/node": "ts5.2",
-    "@typescript-eslint/eslint-plugin": "6.7.3",
-    "@typescript-eslint/parser": "6.7.3",
-    "eslint": "8.50.0",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0",
+    "eslint": "8.53.0",
     "eslint-plugin-no-loops": "0.3.0",
     "typescript": "5.2.2",
     "unbuild": "1.2.1"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.0-rc.0"
+    "@public-ui/components": "2.0.0-rc.10"
   },
   "sideEffects": false,
   "type": "module",
@@ -72,7 +72,7 @@
     "depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*",
     "format": "prettier --check src",
     "lint": "eslint src && tsc --noemit",
-    "-test": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test",
-    "test-update": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots"
+    "test": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test theme-snapshots.spec.js",
+    "test-update": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
   }
 }