@public-ui/theme-default 2.0.0-rc.2 → 2.0.0-rc.3

package/dist/index.cjs

@@ -386,9 +386,10 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
 
 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);
@@ -1489,71 +1490,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 +1595,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 +2178,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 +2188,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 +2205,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 +2261,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 		fieldset .input-slot {
 			gap: var(--spacing);
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			padding-left: 0;
 		}
 	`,
@@ -2798,9 +2736,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.mjs

@@ -384,9 +384,10 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
 
 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);
@@ -1487,71 +1488,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 +1593,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 +2176,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 +2186,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 +2203,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 +2259,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 		fieldset .input-slot {
 			gap: var(--spacing);
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			padding-left: 0;
 		}
 	`,
@@ -2796,9 +2734,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.2",
+  "version": "2.0.0-rc.3",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -38,8 +38,8 @@
     "wcag"
   ],
   "devDependencies": {
-    "@public-ui/schema": "2.0.0-rc.2",
-    "@public-ui/visual-tests": "2.0.0-rc.2",
+    "@public-ui/schema": "2.0.0-rc.3",
+    "@public-ui/visual-tests": "2.0.0-rc.3",
     "@types/node": "ts5.2",
     "@typescript-eslint/eslint-plugin": "6.8.0",
     "@typescript-eslint/parser": "6.8.0",
@@ -49,7 +49,7 @@
     "unbuild": "1.2.1"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.0-rc.2"
+    "@public-ui/components": "2.0.0-rc.3"
   },
   "sideEffects": false,
   "type": "module",