@public-ui/themes 1.7.9 → 1.7.10-rc.0

package/dist/index.cjs

@@ -1947,7 +1947,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	}`,
   "KOL-TABLE": `:host * {
 		hyphens: var(--kolibri-hyphens);
-		font-family: var(--kolibri-font-family);
+		font-family: var(font-family);
 		line-height: var(--kolibri-line-height);
 		word-break: break-word;
 	}
@@ -1955,8 +1955,13 @@ const BMF = KoliBri.createTheme("bmf", {
 		overflow-x: auto;
 		overflow-y: hidden;
 	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-ocean);
+		outline-style: solid;
+		outline-width: 3px;
+		transition: outline-offset 0.2s linear;
+	}
 	caption {
-		position: absolute;
 		width: 1px;
 		height: 1px;
 		padding: 0;
@@ -1986,15 +1991,8 @@ const BMF = KoliBri.createTheme("bmf", {
 		grid-template-columns: 1fr auto;
 		align-items: center;
 	}
-	th div.center {
-		justify-content: center;
-	}
-	th div.right {
-		justify-content: end;
-	}
 	th,
 	td {
-		vertical-align: top;
 		border-bottom: 1px solid var(--color-granite);
 		height: 1.25rem;
 	}
@@ -2010,16 +2008,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		margin-top: -0.75rem;
 		margin-bottom: -0.75rem;
 	}
-	td.center > div {
-		display: flex;
-		justify-content: center;
-	}
-	td.right > div {
-		display: flex;
-		justify-content: end;
-	}
-	th[aria-sort="ascending"],
-	th[aria-sort="descending"] {
+	.table-sort-button .button {
 		font-weight: 700;
 	}
 	:host > div:last-child,
@@ -11590,6 +11579,16 @@ const DEFAULT = KoliBri.createTheme("default", {
 			border-style: solid;
 			border-color: var(--color-primary-variant);
 		}
+		.table {
+			padding: 0.5rem;
+		}
+		.table:has(caption:focus) {
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+			transition: outline-offset 0.2s linear;
+		}
 		table {
 			width: 100%;
 			border-spacing: 0;
@@ -11612,12 +11611,6 @@ const DEFAULT = KoliBri.createTheme("default", {
 			grid-template-columns: 1fr auto;
 			align-items: center;
 		}
-		th div.center {
-			justify-content: center;
-		}
-		th div.right {
-			justify-content: end;
-		}
 		tr:nth-child(even) {
 			background-color: var(--color-mute);
 		}
@@ -11625,29 +11618,10 @@ const DEFAULT = KoliBri.createTheme("default", {
 		td {
 			padding: 0.5rem;
 		}
-		td.center > div {
-			display: flex;
-			justify-content: center;
-		}
-		td.right > div {
-			display: flex;
-			justify-content: end;
-		}
 		th[aria-sort='ascending'],
 		th[aria-sort='descending'] {
 			font-weight: 700;
 		}
-		:host > div:last-child {
-			padding: 0.5rem;
-		}
-		:host > div:last-child,
-		:host > div:last-child > div:last-child {
-			display: grid;
-			align-items: center;
-			justify-items: center;
-			gap: 1rem;
-		}
-
 		@media (min-width: 1024px) {
 			div.pagination kol-pagination {
 				display: flex;
@@ -13854,6 +13828,15 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		border-style: solid;
 		border-color: var(--color-ice);
 	}
+	.table {
+		padding: 0.5em;
+	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-blue);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 2px;
+	}
 	table {
 		width: 100%;
 		border-spacing: 0;
@@ -13876,12 +13859,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		grid-template-columns: 1fr auto;
 		align-items: center;
 	}
-	th div.center {
-		justify-content: center;
-	}
-	th div.right {
-		justify-content: end;
-	}
 	tbody tr:nth-child(odd) {
 		background-color: var(--color-grey-10);
 	}
@@ -13889,28 +13866,10 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	td {
 		padding: 0.5em;
 	}
-	td.center > div {
-		display: flex;
-		justify-content: center;
-	}
-	td.right > div {
-		display: flex;
-		justify-content: end;
-	}
 	th[aria-sort="ascending"],
 	th[aria-sort="descending"] {
 		font-weight: 700;
 	}
-	:host > div:last-child {
-		padding: 0.5em;
-	}
-	:host > div:last-child,
-	:host > div:last-child > div:last-child {
-		display: grid;
-		align-items: center;
-		justify-items: center;
-		gap: 1em;
-	}
 	@media (min-width: 1024px) {
 		:host > div:last-child,
 		:host > div:last-child > div:last-child {
@@ -15301,6 +15260,15 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		border-style: solid;
 		border-color: var(--color-ice);
 	}
+	.table {
+		padding: 0.5em;
+	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-blue);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 2px;
+	}
 	table {
 		width: 100%;
 		border-spacing: 0;
@@ -15323,12 +15291,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		grid-template-columns: 1fr auto;
 		align-items: center;
 	}
-	th div.center {
-		justify-content: center;
-	}
-	th div.right {
-		justify-content: end;
-	}
 	tbody tr:nth-child(odd) {
 		background-color: var(--color-grey-10);
 	}
@@ -15336,28 +15298,10 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	td {
 		padding: 0.5em;
 	}
-	td.center > div {
-		display: flex;
-		justify-content: center;
-	}
-	td.right > div {
-		display: flex;
-		justify-content: end;
-	}
 	th[aria-sort="ascending"],
 	th[aria-sort="descending"] {
 		font-weight: 700;
 	}
-	:host > div:last-child {
-		padding: 0.5em;
-	}
-	:host > div:last-child,
-	:host > div:last-child > div:last-child {
-		display: grid;
-		align-items: center;
-		justify-items: center;
-		gap: 1em;
-	}
 	@media (min-width: 1024px) {
 		:host > div:last-child,
 		:host > div:last-child > div:last-child {
@@ -16677,6 +16621,16 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		border-width: 1px;
 		border-color: var(--border-color);
 	}
+	.table {
+		padding: 0.5em;
+	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-petrol);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 3px;
+		transition: outline-offset 0.2s linear;
+	}
 	table {
 		width: 100%;
 		border-collapse: collapse;
@@ -16702,21 +16656,8 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 	th {
 		background-color: #eee;
 	}
-	th > div {
-		display: grid;
-		grid-template-columns: 1fr auto;
-		align-items: center;
-		gap: 0.25em;
-	}
-	:host > div.pagination {
-		padding: 0.5em;
-	}
-	:host > div.pagination,
-	:host > div.pagination > div:last-child {
-		display: grid;
-		align-items: center;
-		justify-items: center;
-		gap: 0.5em;
+	.table-sort-button .button {
+		font-weight: bold;
 	}
 	@media (min-width: 1024px) {
 		:host > div.pagination,

package/dist/index.mjs

@@ -1945,7 +1945,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	}`,
   "KOL-TABLE": `:host * {
 		hyphens: var(--kolibri-hyphens);
-		font-family: var(--kolibri-font-family);
+		font-family: var(font-family);
 		line-height: var(--kolibri-line-height);
 		word-break: break-word;
 	}
@@ -1953,8 +1953,13 @@ const BMF = KoliBri.createTheme("bmf", {
 		overflow-x: auto;
 		overflow-y: hidden;
 	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-ocean);
+		outline-style: solid;
+		outline-width: 3px;
+		transition: outline-offset 0.2s linear;
+	}
 	caption {
-		position: absolute;
 		width: 1px;
 		height: 1px;
 		padding: 0;
@@ -1984,15 +1989,8 @@ const BMF = KoliBri.createTheme("bmf", {
 		grid-template-columns: 1fr auto;
 		align-items: center;
 	}
-	th div.center {
-		justify-content: center;
-	}
-	th div.right {
-		justify-content: end;
-	}
 	th,
 	td {
-		vertical-align: top;
 		border-bottom: 1px solid var(--color-granite);
 		height: 1.25rem;
 	}
@@ -2008,16 +2006,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		margin-top: -0.75rem;
 		margin-bottom: -0.75rem;
 	}
-	td.center > div {
-		display: flex;
-		justify-content: center;
-	}
-	td.right > div {
-		display: flex;
-		justify-content: end;
-	}
-	th[aria-sort="ascending"],
-	th[aria-sort="descending"] {
+	.table-sort-button .button {
 		font-weight: 700;
 	}
 	:host > div:last-child,
@@ -11588,6 +11577,16 @@ const DEFAULT = KoliBri.createTheme("default", {
 			border-style: solid;
 			border-color: var(--color-primary-variant);
 		}
+		.table {
+			padding: 0.5rem;
+		}
+		.table:has(caption:focus) {
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+			transition: outline-offset 0.2s linear;
+		}
 		table {
 			width: 100%;
 			border-spacing: 0;
@@ -11610,12 +11609,6 @@ const DEFAULT = KoliBri.createTheme("default", {
 			grid-template-columns: 1fr auto;
 			align-items: center;
 		}
-		th div.center {
-			justify-content: center;
-		}
-		th div.right {
-			justify-content: end;
-		}
 		tr:nth-child(even) {
 			background-color: var(--color-mute);
 		}
@@ -11623,29 +11616,10 @@ const DEFAULT = KoliBri.createTheme("default", {
 		td {
 			padding: 0.5rem;
 		}
-		td.center > div {
-			display: flex;
-			justify-content: center;
-		}
-		td.right > div {
-			display: flex;
-			justify-content: end;
-		}
 		th[aria-sort='ascending'],
 		th[aria-sort='descending'] {
 			font-weight: 700;
 		}
-		:host > div:last-child {
-			padding: 0.5rem;
-		}
-		:host > div:last-child,
-		:host > div:last-child > div:last-child {
-			display: grid;
-			align-items: center;
-			justify-items: center;
-			gap: 1rem;
-		}
-
 		@media (min-width: 1024px) {
 			div.pagination kol-pagination {
 				display: flex;
@@ -13852,6 +13826,15 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		border-style: solid;
 		border-color: var(--color-ice);
 	}
+	.table {
+		padding: 0.5em;
+	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-blue);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 2px;
+	}
 	table {
 		width: 100%;
 		border-spacing: 0;
@@ -13874,12 +13857,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		grid-template-columns: 1fr auto;
 		align-items: center;
 	}
-	th div.center {
-		justify-content: center;
-	}
-	th div.right {
-		justify-content: end;
-	}
 	tbody tr:nth-child(odd) {
 		background-color: var(--color-grey-10);
 	}
@@ -13887,28 +13864,10 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	td {
 		padding: 0.5em;
 	}
-	td.center > div {
-		display: flex;
-		justify-content: center;
-	}
-	td.right > div {
-		display: flex;
-		justify-content: end;
-	}
 	th[aria-sort="ascending"],
 	th[aria-sort="descending"] {
 		font-weight: 700;
 	}
-	:host > div:last-child {
-		padding: 0.5em;
-	}
-	:host > div:last-child,
-	:host > div:last-child > div:last-child {
-		display: grid;
-		align-items: center;
-		justify-items: center;
-		gap: 1em;
-	}
 	@media (min-width: 1024px) {
 		:host > div:last-child,
 		:host > div:last-child > div:last-child {
@@ -15299,6 +15258,15 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		border-style: solid;
 		border-color: var(--color-ice);
 	}
+	.table {
+		padding: 0.5em;
+	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-blue);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 2px;
+	}
 	table {
 		width: 100%;
 		border-spacing: 0;
@@ -15321,12 +15289,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		grid-template-columns: 1fr auto;
 		align-items: center;
 	}
-	th div.center {
-		justify-content: center;
-	}
-	th div.right {
-		justify-content: end;
-	}
 	tbody tr:nth-child(odd) {
 		background-color: var(--color-grey-10);
 	}
@@ -15334,28 +15296,10 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	td {
 		padding: 0.5em;
 	}
-	td.center > div {
-		display: flex;
-		justify-content: center;
-	}
-	td.right > div {
-		display: flex;
-		justify-content: end;
-	}
 	th[aria-sort="ascending"],
 	th[aria-sort="descending"] {
 		font-weight: 700;
 	}
-	:host > div:last-child {
-		padding: 0.5em;
-	}
-	:host > div:last-child,
-	:host > div:last-child > div:last-child {
-		display: grid;
-		align-items: center;
-		justify-items: center;
-		gap: 1em;
-	}
 	@media (min-width: 1024px) {
 		:host > div:last-child,
 		:host > div:last-child > div:last-child {
@@ -16675,6 +16619,16 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		border-width: 1px;
 		border-color: var(--border-color);
 	}
+	.table {
+		padding: 0.5em;
+	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-petrol);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 3px;
+		transition: outline-offset 0.2s linear;
+	}
 	table {
 		width: 100%;
 		border-collapse: collapse;
@@ -16700,21 +16654,8 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 	th {
 		background-color: #eee;
 	}
-	th > div {
-		display: grid;
-		grid-template-columns: 1fr auto;
-		align-items: center;
-		gap: 0.25em;
-	}
-	:host > div.pagination {
-		padding: 0.5em;
-	}
-	:host > div.pagination,
-	:host > div.pagination > div:last-child {
-		display: grid;
-		align-items: center;
-		justify-items: center;
-		gap: 0.5em;
+	.table-sort-button .button {
+		font-weight: bold;
 	}
 	@media (min-width: 1024px) {
 		:host > div.pagination,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/themes",
-  "version": "1.7.9",
+  "version": "1.7.10-rc.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -41,18 +41,18 @@
     "wcag"
   ],
   "devDependencies": {
-    "@public-ui/schema": "1.7.9",
+    "@public-ui/schema": "1.7.10-rc.0",
     "@types/node": "ts5.3",
-    "@typescript-eslint/eslint-plugin": "6.17.0",
-    "@typescript-eslint/parser": "6.17.0",
+    "@typescript-eslint/eslint-plugin": "6.19.1",
+    "@typescript-eslint/parser": "6.19.1",
     "eslint": "8.56.0",
     "eslint-plugin-no-loops": "0.3.0",
-    "nodemon": "3.0.2",
+    "nodemon": "3.0.3",
     "typescript": "5.3.3",
     "unbuild": "1.2.1"
   },
   "peerDependencies": {
-    "@public-ui/components": "1.7.9"
+    "@public-ui/components": "1.7.10-rc.0"
   },
   "sideEffects": false,
   "type": "module",