Merge pull request #6844 from getkirby/v5/refactor/css-has

Make use of CSS `:has()`
getkirby · Jan 20, 2025 · 688a4c6 · 688a4c6
2 parents 8113d83 + d1d68ee
commit 688a4c6
Show file tree

Hide file tree

Showing 26 changed files with 28 additions and 85 deletions.
diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
@@ -39,7 +39,6 @@
 		<div
 			v-if="buttons?.length || options || $slots.options"
 			class="k-item-options"
-			:data-only-option="!buttons?.length || (!options && !$slots.options)"
 		>
 			<!-- Buttons -->
 			<k-button
@@ -156,12 +155,6 @@ export default {
 .k-item:has(a:focus) {
 	outline: 2px solid var(--color-focus);
 }
-/** TODO: remove when firefox supports :has() */
-@supports not selector(:has(*)) {
-	.k-item:focus-within {
-		outline: 2px solid var(--color-focus);
-	}
-}
 
 .k-item .k-icon-frame {
 	--back: var(--color-gray-300);
@@ -190,8 +183,7 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 }
-/** TODO: .k-item-options:has(> :first-child:last-child) */
-.k-item-options[data-only-option="true"] {
+.k-item-options:has(> :first-child:last-child) {
 	justify-content: flex-end;
 }
 .k-item-options .k-button {
@@ -219,7 +211,6 @@ export default {
 	align-items: center;
 	grid-template-columns: 1fr auto;
 }
-/** TODO: .k-item[data-layout="list"]:has(.k-item-image) */
 .k-item[data-layout="list"][data-has-image="true"] {
 	grid-template-columns: var(--item-height) 1fr auto;
 }
@@ -279,7 +270,6 @@ export default {
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr var(--height-md);
 }
-/** TODO: .k-item[data-layout="cardlets"]:has(.k-item-image) */
 .k-item[data-layout="cardlets"][data-has-image="true"] {
 	grid-template-areas:
 		"image content"

diff --git a/panel/src/components/Dialogs/Dialog.vue b/panel/src/components/Dialogs/Dialog.vue
@@ -7,7 +7,6 @@
 				$vnode.data.staticClass,
 				$attrs.class
 			]"
-			:data-has-footer="Boolean(cancelButton || submitButton)"
 			:data-size="size"
 			method="dialog"
 			@click.stop

diff --git a/panel/src/components/Dialogs/Elements/Body.vue b/panel/src/components/Dialogs/Elements/Body.vue
@@ -16,8 +16,7 @@ export default {};
 .k-dialog-body {
 	padding: var(--dialog-padding);
 }
-/** TODO: .k-dialog:has(.k-dialog-footer) .k-dialog-body */
-.k-dialog[data-has-footer="true"] .k-dialog-body {
+.k-dialog:has(.k-dialog-footer) .k-dialog-body {
 	padding-bottom: 0;
 }
 </style>
diff --git a/panel/src/components/Drawers/Elements/Body.vue b/panel/src/components/Drawers/Elements/Body.vue
@@ -19,7 +19,6 @@ export default {};
 	background: var(--drawer-color-back);
 }
 /* Sticky elements inside drawer */
-/** TODO: .k-drawer-body .k-toolbar:not([data-inline="true"]):has(~ :focus-within) */
 .k-drawer-body
 	.k-writer-input:focus-within
 	.k-toolbar:not([data-inline="true"]),

diff --git a/panel/src/components/Forms/Blocks/Types/Fields.vue b/panel/src/components/Forms/Blocks/Types/Fields.vue
@@ -78,13 +78,10 @@ export default {
 </script>
 
 <style>
-/** TODO: .k-block-container:has(.k-block-type-fields) */
 .k-block-container.k-block-container-type-fields {
 	padding-block: 0;
 }
 
-/** TODO: .k-block-container:not([data-hidden="true"])
-	.k-block-type-fields:has(.k-block-type-fields-form) */
 .k-block-container:not([data-hidden="true"])
 	.k-block-type-fields
 	> :not([data-collapsed="true"]) {
@@ -107,8 +104,6 @@ export default {
 	border-radius: var(--rounded-sm);
 	container: column / inline-size;
 }
-/** TODO: .k-block-container[data-hidden="true"]:has(.k-block-type-fields)
-	:where(.k-drawer-tabs, .k-block-type-fields-form) */
 .k-block-container-type-fields[data-hidden="true"]
 	:where(.k-drawer-tabs, .k-block-type-fields-form) {
 	display: none;

diff --git a/panel/src/components/Forms/Field/BlocksField.vue b/panel/src/components/Forms/Field/BlocksField.vue
@@ -111,7 +111,6 @@ export default {
 	position: relative;
 }
 
-/** TODO: .k-blocks-field > :has(+ footer) { margin-bottom: var(--spacing-3);} */
 .k-blocks-field > footer {
 	display: flex;
 	justify-content: center;

diff --git a/panel/src/components/Forms/Field/DateField.vue b/panel/src/components/Forms/Field/DateField.vue
@@ -242,7 +242,6 @@ export default {
 }
 
 @container (min-width: 20rem) {
-	/** TODO: .k-date-field-body:has(.k-time-input) */
 	.k-date-field-body[data-has-time="true"] {
 		grid-template-columns: 1fr minmax(6rem, 9rem);
 	}

diff --git a/panel/src/components/Forms/Field/LayoutField.vue b/panel/src/components/Forms/Field/LayoutField.vue
@@ -90,7 +90,6 @@ export default {
 </script>
 
 <style>
-/** TODO: .k-layout-field > :has(+ footer) { margin-bottom: var(--spacing-3);} */
 .k-layout-field > footer {
 	display: flex;
 	justify-content: center;

diff --git a/panel/src/components/Forms/Field/StructureField.vue b/panel/src/components/Forms/Field/StructureField.vue
@@ -559,7 +559,6 @@ export default {
 .k-structure-field:not([data-disabled="true"]) td.k-table-column {
 	cursor: pointer;
 }
-/** .k-structure-field .k-table:has(+ footer) */
 .k-structure-field .k-table + footer {
 	display: flex;
 	justify-content: center;

diff --git a/panel/src/components/Forms/Input/TogglesInput.vue b/panel/src/components/Forms/Input/TogglesInput.vue
@@ -11,11 +11,7 @@
 				:data-labels="labels"
 				:style="{ '--options': columns ?? options.length }"
 			>
-				<li
-					v-for="(option, index) in options"
-					:key="index"
-					:data-disabled="disabled"
-				>
+				<li v-for="(option, index) in options" :key="index">
 					<input
 						:id="id + '-' + index"
 						:aria-label="option.text"
@@ -124,8 +120,7 @@ export default {
 	padding: 0 var(--spacing-3);
 	height: 100%;
 }
-/** TODO: .k-toggles-input li:has(input[disabled]) label */
-.k-toggles-input li[data-disabled="true"] label {
+.k-toggles-input li:has(input[disabled]) label {
 	color: var(--color-text-dimmed);
 	background: var(--panel-color-back);
 }

diff --git a/panel/src/components/Forms/Input/WriterInput.vue b/panel/src/components/Forms/Input/WriterInput.vue
@@ -6,7 +6,6 @@
 		:data-disabled="disabled"
 		:data-empty="isEmpty"
 		:data-placeholder="placeholder"
-		:data-toolbar-inline="Boolean(toolbar.inline ?? true)"
 		:spellcheck="spellcheck"
 		:style="$attrs.style"
 	>

diff --git a/panel/src/components/Forms/Toolbar/Toolbar.vue b/panel/src/components/Forms/Toolbar/Toolbar.vue
@@ -130,9 +130,11 @@ export default {
 	border-end-end-radius: var(--rounded);
 }
 
-/** TODO: .k-toolbar:not([data-inline="true"]):has(~ :focus-within) */
-:where(.k-textarea-input, .k-writer-input):focus-within
-	.k-toolbar:not([data-inline="true"]) {
+:where(.k-textarea-input, .k-writer-input):not(:focus-within) {
+	--toolbar-text: var(--color-gray-400);
+	--toolbar-border: var(--panel-color-back);
+}
+.k-toolbar:not([data-inline="true"]):has(~ :focus-within) {
 	position: sticky;
 	top: var(--header-sticky-offset);
 	inset-inline: 0;

diff --git a/panel/src/components/Forms/Writer/Toolbar.vue b/panel/src/components/Forms/Writer/Toolbar.vue
@@ -420,14 +420,15 @@ export default {
 </script>
 
 <style>
-.k-writer:has(.k-toolbar:not([data-inline="true"], [data-disabled="true"])) {
+.k-writer-input:has(
+		.k-toolbar:not([data-inline="true"], [data-disabled="true"])
+	) {
 	grid-template-areas: "topbar" "content";
 	grid-template-rows: var(--toolbar-size) 1fr;
 	gap: 0;
 }
 
-/** TODO: .k-writer-toolbar:not(:has(~ :focus-within)) */
-.k-writer-input:not(:focus-within) {
+.k-writer-toolbar:not(:has(~ :focus-within)) {
 	--toolbar-current: currentColor;
 }
 

diff --git a/panel/src/components/Lab/PlaygroundView.vue b/panel/src/components/Lab/PlaygroundView.vue
@@ -1,8 +1,5 @@
 <template>
-	<k-panel-inside
-		:data-has-tabs="tabs.length > 1"
-		class="k-lab-playground-view"
-	>
+	<k-panel-inside class="k-lab-playground-view">
 		<k-header class="k-lab-playground-header">
 			{{ title }}
 
@@ -106,7 +103,7 @@ export default {
 </script>
 
 <style>
-.k-lab-playground-view[data-has-tabs="true"] .k-lab-playground-header {
+.k-lab-playground-view:has(> .k-tabs) .k-lab-playground-header {
 	margin-bottom: 0;
 }
 

diff --git a/panel/src/components/Layout/Bubble.vue b/panel/src/components/Layout/Bubble.vue
@@ -2,7 +2,6 @@
 	<component
 		:is="link ? 'k-link' : 'p'"
 		:class="['k-bubble', $attrs.class]"
-		:data-has-text="Boolean(text)"
 		:to="link"
 		:style="{
 			color: $helper.color(color),
@@ -106,8 +105,7 @@ export default {
 	width: var(--bubble-size);
 	height: var(--bubble-size);
 }
-/** TODO: .k-bubble:has(.k-bubble-text) */
-.k-bubble[data-has-text="true"] {
+.k-bubble:has(.k-bubble-text) {
 	display: flex;
 	gap: var(--spacing-2);
 	align-items: center;

diff --git a/panel/src/components/Layout/Header.vue b/panel/src/components/Layout/Header.vue
@@ -1,8 +1,5 @@
 <template>
-	<header
-		class="k-header"
-		:data-has-buttons="Boolean($slots.buttons || $slots.left || $slots.right)"
-	>
+	<header class="k-header">
 		<h1 class="k-header-title">
 			<!--
 				Edit button has been clicked
@@ -128,13 +125,12 @@ export default {
 	margin-bottom: var(--header-padding-block);
 }
 
-/** TODO: .k-header:has(.k-header-buttons) */
-.k-header[data-has-buttons="true"] {
+.k-header:has(.k-header-buttons) {
 	position: sticky;
 	top: var(--scroll-top);
 	z-index: var(--z-toolbar);
 }
-:root:has(.k-header[data-has-buttons="true"]) {
+:root:has(.k-header:has(.k-header-buttons)) {
 	--header-sticky-offset: calc(var(--scroll-top) + 4rem);
 }
 </style>
diff --git a/panel/src/components/Navigation/Browser.vue b/panel/src/components/Navigation/Browser.vue
@@ -109,7 +109,6 @@ export default {
 	box-shadow: var(--shadow);
 	flex-shrink: 0;
 }
-/** TODO: .k-browser-item-image:has(svg) */
 .k-browser-item-image.k-icon-frame {
 	box-shadow: none;
 	background: light-dark(var(--color-white), var(--color-black));

diff --git a/panel/src/components/Navigation/Button.vue b/panel/src/components/Navigation/Button.vue
@@ -327,15 +327,13 @@ export default {
 }
 
 /** Icon Buttons **/
-/** TODO: .k-button:not(:has(.k-button-text)) */
 .k-button:not([data-has-text="true"]) {
 	--button-padding: 0;
 	aspect-ratio: 1/1;
 }
 
 /** Responsive buttons **/
 @container (max-width: 30rem) {
-	/** TODO: .k-button:is([data-responsive]:has(.k-button-icon)) */
 	.k-button[data-responsive="true"][data-has-icon="true"] {
 		--button-padding: 0;
 		aspect-ratio: 1/1;
@@ -344,7 +342,6 @@ export default {
 	.k-button[data-responsive="text"][data-has-text="true"] {
 		--button-icon-display: none;
 	}
-	/** TODO: .k-button:is([data-responsive]:has(.k-button-icon)) .k-button-arrow */
 	.k-button[data-responsive="true"][data-has-icon="true"] .k-button-arrow {
 		display: none;
 	}

diff --git a/panel/src/components/Navigation/Tag.vue b/panel/src/components/Navigation/Tag.vue
@@ -2,8 +2,6 @@
 	<component
 		:is="element"
 		:aria-disabled="disabled"
-		:data-has-image="Boolean(image)"
-		:data-has-toggle="isRemovable"
 		:data-theme="theme"
 		class="k-tag"
 		type="button"
@@ -169,8 +167,7 @@ button.k-tag:not([aria-disabled="true"]) {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
-/** TODO: .k-tag:has(.k-tag-toggle) .k-tag-text  */
-.k-tag[data-has-toggle="true"] .k-tag-text {
+.k-tag:has(.k-tag-toggle) .k-tag-text {
 	padding-inline-end: 0;
 }
 .k-tag-toggle {

diff --git a/panel/src/components/Navigation/Tree.vue b/panel/src/components/Navigation/Tree.vue
@@ -9,10 +9,7 @@
 			:aria-expanded="item.open"
 			:aria-current="isItem(item, current)"
 		>
-			<p
-				class="k-tree-branch"
-				:data-has-subtree="item.hasChildren && item.open"
-			>
+			<p class="k-tree-branch">
 				<button
 					:disabled="!item.hasChildren"
 					class="k-tree-toggle"
@@ -135,8 +132,7 @@ export default {
 	margin-bottom: 1px;
 	background: var(--tree-branch-color-back);
 }
-/** TODO: .k-tree-branch:has(+ .k-tree)  */
-.k-tree-branch[data-has-subtree="true"] {
+.k-tree-branch:has(+ .k-tree) {
 	inset-block-start: calc(var(--tree-level) * 1.5rem);
 	z-index: calc(100 - var(--tree-level));
 }

diff --git a/panel/src/components/Views/Files/FileView.vue b/panel/src/components/Views/Files/FileView.vue
@@ -90,7 +90,6 @@ export default {
 	border-bottom: 0;
 }
 
-/** TODO: .k-file-view:has(.k-tabs) .k-file-preview  */
 .k-file-view[data-has-tabs="true"] .k-file-preview {
 	margin-bottom: 0;
 }

diff --git a/panel/src/components/Views/ModelView.vue b/panel/src/components/Views/ModelView.vue
@@ -55,9 +55,6 @@ export default {
 		hasChanges() {
 			return length(this.changes) > 0;
 		},
-		hasTabs() {
-			return this.tabs.length > 1;
-		},
 		isLocked() {
 			return this.lock.isLocked;
 		},

diff --git a/panel/src/components/Views/Pages/PageView.vue b/panel/src/components/Views/Pages/PageView.vue
@@ -58,7 +58,6 @@ export default {
 </script>
 
 <style>
-/** TODO: .k-page-view:has(.k-tabs) .k-page-view-header */
 .k-page-view[data-has-tabs="true"] .k-page-view-header {
 	margin-bottom: 0;
 }

diff --git a/panel/src/components/Views/Pages/SiteView.vue b/panel/src/components/Views/Pages/SiteView.vue
@@ -54,7 +54,6 @@ export default {
 </script>
 
 <style>
-/** TODO: .k-site-view:has(.k-tabs) .k-site-view-header */
 .k-site-view[data-has-tabs="true"] .k-site-view-header {
 	margin-bottom: 0;
 }

diff --git a/panel/src/components/Views/Users/UserView.vue b/panel/src/components/Views/Users/UserView.vue
@@ -98,7 +98,6 @@ export default {
 .k-user-view .k-user-profile {
 	margin-bottom: var(--spacing-12);
 }
-/** .k-user-view:has(.k-tabs) .k-user-profile */
 .k-user-view[data-has-tabs="true"] .k-user-profile {
 	margin-bottom: 0;
 }