From bd52f2f387708584dfabeaa8225ec8275d10d35d Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Wed, 28 May 2025 18:52:25 +0200
Subject: [PATCH 01/12] Add dark mode, revise theme

- Harmonize borders
- Simplify button styles, add gaps
- Remove obsolete container position
---
 src/App.vue                          |  4 +-
 src/components/ViewScan.vue          |  4 +-
 src/config.js                        | 11 ++++
 src/main.js                          |  5 --
 src/styles/extends/button.scss       | 32 ++++++++---
 src/styles/extends/panel.scss        |  3 +-
 src/styles/mixins/dropdown.scss      |  8 +--
 src/styles/mixins/range.scss         |  5 +-
 src/styles/sections/collection.scss  |  3 +-
 src/styles/sections/error.scss       |  8 +--
 src/styles/sections/fulltext.scss    |  6 +-
 src/styles/sections/header.scss      |  9 +--
 src/styles/sections/info.scss        | 17 ++++--
 src/styles/sections/loading.scss     |  2 +-
 src/styles/sections/page-select.scss | 22 ++-----
 src/styles/sections/scan.scss        | 85 ++++++++++++----------------
 src/styles/sections/thumbnails.scss  | 23 +++-----
 src/styles/sections/toc.scss         | 24 ++++----
 src/styles/util/base.scss            | 21 ++++---
 src/styles/util/settings.scss        | 74 ++++++++++++++++--------
 tests/e2e/fulltext.spec.js           | 12 ++--
 21 files changed, 206 insertions(+), 172 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b4a36de2..8f814a66 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -111,12 +111,14 @@ export default {
 };
 </script>
 
+<!-- NOTE: tabindex makes root element focusable, which is required for global keyboard events to work -->
+<!-- The first child of <template> must not be a comment, or rootElement breaks -->
 <template>
 	<article
 		class="tify"
+		:class="$store.options.colorMode === 'auto' ? '' : `-${$store.options.colorMode}`"
 		tabindex="-1"
 	>
-		<!-- NOTE: Root element must be focusable for global keyboard events to work -->
 		<AppHeader
 			v-if="readyToRender && ($store.collection || $store.manifest)"
 			:fulltextEnabled="hasAnnotations"
diff --git a/src/components/ViewScan.vue b/src/components/ViewScan.vue
index b9035530..d3bbed4e 100644
--- a/src/components/ViewScan.vue
+++ b/src/components/ViewScan.vue
@@ -609,7 +609,7 @@ export default {
 		<button
 			v-if="!$store.isCustomPageView && !$store.isFirstPage"
 			type="button"
-			class="tify-scan-page-button -previous"
+			class="tify-scan-page-button -left"
 			:title="$translate('Previous page')"
 			:aria-label="$translate('Previous page')"
 			@click="$store.goToPreviousPage()"
@@ -619,7 +619,7 @@ export default {
 		<button
 			v-if="!$store.isCustomPageView && !$store.isLastPage"
 			type="button"
-			class="tify-scan-page-button -next"
+			class="tify-scan-page-button -right"
 			:title="$translate('Next page')"
 			:aria-label="$translate('Next page')"
 			@click="$store.goToNextPage()"
diff --git a/src/config.js b/src/config.js
index 865fe9a8..e4f96a53 100644
--- a/src/config.js
+++ b/src/config.js
@@ -40,6 +40,17 @@ export default {
 	 */
 	childManifestUrl: null,
 
+	/**
+	 * Determines if TIFY is displayed in light or dark mode.
+	 *
+	 * `auto`: Determine color mode automatically based on browser preferences.
+	 * `light`: Use light mode, regardless of browser preferences.
+	 * `dark`: Use dark mode, regardless of browser preferences.
+	 *
+	 * @type {string}
+	 */
+	colorMode: 'auto',
+
 	/**
 	 * The HTML element into which TIFY is mounted. If set to `null`, TIFY is not
 	 * mounted at all until `mount` is called (see docs/api.md).
diff --git a/src/main.js b/src/main.js
index 9f233055..e733a424 100644
--- a/src/main.js
+++ b/src/main.js
@@ -52,11 +52,6 @@ window.Tify = function Tify(userOptions = {}) {
 			throw new Error('Container element not found');
 		}
 
-		const style = window.getComputedStyle(containerEl);
-		if (style.position === 'static') {
-			containerEl.style.position = 'relative';
-		}
-
 		this.app.mount(containerEl);
 
 		mounted = true;
diff --git a/src/styles/extends/button.scss b/src/styles/extends/button.scss
index a9b2c70b..dd4d3dbd 100644
--- a/src/styles/extends/button.scss
+++ b/src/styles/extends/button.scss
@@ -1,6 +1,6 @@
 %button {
 	align-items: center;
-	background: $grey-light linear-gradient(to bottom, #fff7, #fff0);
+	background: $button-bg;
 	border-radius: $br;
 	border: 0;
 	box-shadow: 0 0 0 1px $border-color inset;
@@ -17,7 +17,7 @@
 		cursor: pointer;
 
 		@include hover {
-			background: $grey-light linear-gradient(to bottom, #fff, #fff7);
+			background: $button-hover-bg;
 		}
 
 		&:active {
@@ -25,7 +25,6 @@
 		}
 
 		&:focus-visible {
-			outline: 2px solid $base-color-light;
 			z-index: 1;
 		}
 	}
@@ -35,15 +34,34 @@
 	}
 }
 
+%button-translucent {
+	backdrop-filter: $blur;
+	background: oklch(from $panel-bg l c h / 40%);
+	border: 0;
+	box-shadow: none;
+
+	&[disabled] {
+		opacity: 1;
+
+		> * {
+			opacity: .2;
+		}
+	}
+
+	> * {
+		filter: drop-shadow(0 0 .5px $panel-bg);
+	}
+}
+
 %button-active {
-	background: $link-color linear-gradient(to bottom, #fff3, #fff0);
-	color: $white;
+	background: $link-color;
+	color: $text-color-inverted;
 	z-index: 1;
 
 	&:not(:disabled) {
 		@include hover {
-			background: $link-color linear-gradient(to bottom, #fff1, #0002);
-			color: $white;
+			background: $link-color;
+			color: $text-color-inverted;
 		}
 	}
 }
diff --git a/src/styles/extends/panel.scss b/src/styles/extends/panel.scss
index 5ed1b8d3..ae0bd000 100644
--- a/src/styles/extends/panel.scss
+++ b/src/styles/extends/panel.scss
@@ -1,6 +1,5 @@
 %panel {
-	background: $white;
-	box-shadow: -1px 0 $border-color;
+	background: $panel-bg;
 	flex: 1;
 	inset: 0;
 	overflow-y: auto;
diff --git a/src/styles/mixins/dropdown.scss b/src/styles/mixins/dropdown.scss
index 342f3b27..aac9b466 100644
--- a/src/styles/mixins/dropdown.scss
+++ b/src/styles/mixins/dropdown.scss
@@ -1,8 +1,6 @@
-@use 'sass:math';
-
 @mixin dropdown($position: left, $alignment: bottom) {
-	background: $white;
-	border: $br solid $white;
+	background: $dropdown-bg;
+	border: $br solid $dropdown-bg;
 	border-radius: $br;
 	filter: drop-shadow($drop-shadow);
 	min-width: 6em;
@@ -34,7 +32,7 @@
 	&::before {
 		position: absolute;
 		content: '';
-		background: $white;
+		background: $dropdown-bg;
 		width: g(.5);
 		height: g(.5);
 		transform: rotate(45deg);
diff --git a/src/styles/mixins/range.scss b/src/styles/mixins/range.scss
index 8a3c2ce1..ff935bde 100644
--- a/src/styles/mixins/range.scss
+++ b/src/styles/mixins/range.scss
@@ -8,8 +8,8 @@
 $track-color: $border-color;
 $track-focus-color: null;
 
-$thumb-bg: $link-color linear-gradient(to bottom, #fff3, #fff0);
-$thumb-focus-bg: $link-color linear-gradient(to bottom, #fff1, #0002);
+$thumb-bg: $link-color;
+$thumb-focus-bg: $link-hover-color;
 
 $thumb-radius: $br;
 $thumb-height: g();
@@ -36,6 +36,7 @@ $track-radius: $br;
 
 @mixin range {
 	-webkit-appearance: none;
+	background: none;
 	margin: g(.25) 0 g(-.25);
 	width: 100%;
 
diff --git a/src/styles/sections/collection.scss b/src/styles/sections/collection.scss
index 305d45cc..4c7ecafa 100644
--- a/src/styles/sections/collection.scss
+++ b/src/styles/sections/collection.scss
@@ -44,7 +44,6 @@
 	@extend %button;
 	color: inherit !important;
 	display: block;
-	padding: g(.25) g(.5);
 	text-align: left;
 	text-decoration: none;
 	width: 100%;
@@ -55,7 +54,7 @@
 
 	.tify-collection-item.-current & {
 		@extend %button-active;
-		color: $white !important;
+		color: $text-color-inverted !important;
 	}
 
 	.tify-icon {
diff --git a/src/styles/sections/error.scss b/src/styles/sections/error.scss
index 49fa5cb8..00fb7326 100644
--- a/src/styles/sections/error.scss
+++ b/src/styles/sections/error.scss
@@ -1,8 +1,8 @@
 .tify-error {
-	background: rgba(#d22, .8);
+	background: #d22c;
 	border-radius: 0 $br 0 0;
 	bottom: 0;
-	color: $white;
+	color: #fff;
 	display: flex;
 	font-weight: bold;
 	max-height: 50%;
@@ -18,13 +18,13 @@
 	align-self: flex-start;
 	background: 0;
 	border: 0;
-	color: $white;
+	color: #fff;
 	cursor: pointer;
 	display: flex;
 	padding: g(.25);
 
 	@include hover {
-		background: $shade-light;
+		background: #0002;
 	}
 }
 
diff --git a/src/styles/sections/fulltext.scss b/src/styles/sections/fulltext.scss
index a0233a4f..e9c88ca3 100644
--- a/src/styles/sections/fulltext.scss
+++ b/src/styles/sections/fulltext.scss
@@ -8,7 +8,7 @@
 	padding: 0 g(.5);
 
 	&.-current {
-		box-shadow: g(-.25) 0 $base-color-light;
+		box-shadow: g(-.25) 0 $base-color-pale;
 		color: $link-color;
 	}
 
@@ -27,12 +27,12 @@
 	word-break: break-word;
 
 	@include hover {
-		background: $base-color-lighter;
+		background: $base-color-paler;
 		color: $link-color;
 
 		// Element label and page number
 		> span {
-			background: $base-color-lighter;
+			background: $base-color-paler;
 		}
 	}
 
diff --git a/src/styles/sections/header.scss b/src/styles/sections/header.scss
index c9973580..15a79ec3 100644
--- a/src/styles/sections/header.scss
+++ b/src/styles/sections/header.scss
@@ -1,6 +1,6 @@
 .tify-header {
 	background: $header-bg;
-	box-shadow: 0 1px $border-color;
+	border-bottom: 1px solid $border-color;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
@@ -10,6 +10,7 @@
 .tify-header-button-group {
 	align-items: center;
 	display: flex;
+	gap: 1px;
 	margin: g(.25) 0;
 	padding: 0 g(.25);
 	position: relative;
@@ -96,11 +97,11 @@
 
 	&:not(:disabled) {
 		@include hover {
-			box-shadow: 0 0 0 1px $shade-light inset;
+			box-shadow: 0 0 0 1px $border-color inset;
 		}
 
 		&:active {
-			box-shadow: $inset-shadow, 0 0 0 1px $shade-light inset;
+			box-shadow: $inset-shadow, 0 0 0 1px $border-color inset;
 		}
 	}
 
@@ -160,7 +161,7 @@
 
 	.tify-page-select + & {
 		border-radius: 0 $br $br 0;
-		margin-left: -1px;
+		margin-left: -2px;
 
 		&:not(:disabled) {
 			@include hover {
diff --git a/src/styles/sections/info.scss b/src/styles/sections/info.scss
index 34714057..ff12132d 100644
--- a/src/styles/sections/info.scss
+++ b/src/styles/sections/info.scss
@@ -3,6 +3,7 @@ $info-content-max-height: g(6.5);
 .tify-info {
 	@extend %panel;
 	overflow-y: auto;
+	padding-bottom: g();
 }
 
 .tify-info-button {
@@ -66,10 +67,13 @@ $info-content-max-height: g(6.5);
 	}
 
 	&.-logo {
-		> a {
-			border: 0;
-			box-shadow: none;
-			display: inline-block;
+		// Ensure visibility in dark mode since most logos require a white background
+		background: #fff;
+		margin: g(-.5);
+		padding: g(.5);
+
+		> :last-child {
+			margin: 0;
 		}
 	}
 
@@ -97,10 +101,11 @@ $info-content-max-height: g(6.5);
 		overflow: hidden;
 
 		&::after {
-			background: linear-gradient(rgba($white, 0), rgba($white, 1));
-			bottom: g(2); // 2 = button height
+			background: $panel-bg;
+			bottom: g(1.5 + .5); // = button height + margin
 			content: '';
 			height: g(2);
+			mask-image: linear-gradient(transparent, #000);
 			position: absolute;
 			width: 100%;
 		}
diff --git a/src/styles/sections/loading.scss b/src/styles/sections/loading.scss
index 3b7c9bf9..704ad902 100644
--- a/src/styles/sections/loading.scss
+++ b/src/styles/sections/loading.scss
@@ -1,6 +1,6 @@
 .tify-loading {
 	animation: fadeIn .5s forwards .5s, spin 1.2s infinite ease-in-out;
-	background: $base-color-light;
+	background: $base-color-pale;
 	border-radius: $br;
 	bottom: g(.5);
 	height: g(1.5);
diff --git a/src/styles/sections/page-select.scss b/src/styles/sections/page-select.scss
index 364757f6..b277c0a6 100644
--- a/src/styles/sections/page-select.scss
+++ b/src/styles/sections/page-select.scss
@@ -45,18 +45,6 @@
 			box-shadow: $inset-shadow, 0 0 0 1px $border-color inset;
 		}
 	}
-
-	.tify.-medium & {
-		max-width: g(8);
-	}
-
-	.tify.-small & {
-		max-width: g(6);
-	}
-
-	.tify.-tiny & {
-		max-width: g(4);
-	}
 }
 
 .tify-page-select-dropdown {
@@ -86,29 +74,29 @@
 		user-select: none;
 
 		+ li {
-			box-shadow: 0 1px $border-color inset;
+			border-top: 1px solid $border-color;
 		}
 
 		> a {
 			@include hover {
-				background: $shade-light;
+				background: $base-color-paler;
 			}
 		}
 
 		&.-current > a {
-			background: $shade-light;
+			background: $base-color-paler;
 		}
 
 		&.-highlighted > a {
 			background: $link-color;
-			color: $white;
+			color: $text-color-inverted;
 		}
 	}
 
 	a {
 		color: inherit;
 		display: block;
-		padding: g(.125) .5em;
+		padding: g(.125);
 		text-decoration: none;
 
 		@include hover {
diff --git a/src/styles/sections/scan.scss b/src/styles/sections/scan.scss
index 736df96c..7431fd0a 100644
--- a/src/styles/sections/scan.scss
+++ b/src/styles/sections/scan.scss
@@ -9,9 +9,13 @@
 }
 
 .tify-scan-buttons {
+	backdrop-filter: $blur;
+	background: linear-gradient($border-color 1px, transparent 1px) -1px -1px / auto calc(#{g(1.5)} + 1px); // separators
 	border-radius: $br;
+	box-shadow: 0 0 0 1px $border-color;
 	display: flex;
 	flex-direction: column;
+	gap: 1px;
 	left: g(.25);
 	position: absolute;
 	top: g(.25);
@@ -20,27 +24,30 @@
 
 .tify-scan-button {
 	@extend %button;
-	background: none;
-	box-shadow: none;
-	color: $white;
-	height: g(1.5);
-	padding: 0;
+	@extend %button-translucent;
+	border-radius: 0;
+	padding: g(.25);
 	position: relative;
-	width: g(1.5);
 
-	&:not(:disabled) {
-		@include hover {
-			backdrop-filter: $blur;
-			background: $shade;
-		}
+	&:not(:disabled):active {
+		box-shadow: $inset-shadow;
+	}
+
+	&:first-child {
+		border-radius: $br $br 0 0;
+	}
+
+	.tify-scan-filters & {
+		border: 0;
+		border-radius: 0 0 $br $br;
 	}
 
 	&.-active {
-		// dot marker
+		// Dot marker
 		&::after {
 			background: $base-color;
-			box-shadow: 0 0 g(.25) $base-color-lighter;
 			border-radius: 50%;
+			box-shadow: 0 0 g(.25) $base-color-paler;
 			content: '';
 			display: block;
 			height: .5em;
@@ -50,10 +57,6 @@
 			width: .5em;
 		}
 	}
-
-	.tify-icon {
-		filter: drop-shadow(0 0 2px $shade) drop-shadow(0 0 1px $shade-dark);
-	}
 }
 
 .tify-scan-filters {
@@ -87,6 +90,7 @@
 // NOTE: OpenSeadragon adds `position: relative`
 .tify-scan-image {
 	height: 100%;
+	overflow: hidden; // For OpenSeadragon plugins that add own elements
 	white-space: nowrap;
 	width: 100%;
 
@@ -100,18 +104,18 @@
 // TODO: Revisit after next OpenSeadragon release
 [id^=overlay-wrapper-tify] {
 	border-radius: $br;
-	box-shadow: 0 0 0 1px $link-color, 0 0 0 1.5px $shine;
+	box-shadow: 0 0 0 1px $link-color, 0 0 0 1.5px #0009;
 	cursor: pointer;
 
 	@include hover {
-		box-shadow: 0 0 0 2px $link-color, 0 0 0 2.5px $shine;
+		box-shadow: 0 0 0 2px $link-color, 0 0 0 2.5px #0009;
 	}
 }
 
 .tify-scan-overlay {
 	&.-current {
 		border-radius: $br;
-		outline: calc(g(.25) - 2px) solid $white;
+		outline: calc(g(.25) - 2px) solid #fff;
 		outline-offset: 2px;
 		mix-blend-mode: difference;
 	}
@@ -119,45 +123,28 @@
 
 .tify-scan-page-button {
 	@extend %button;
-	backdrop-filter: $blur;
-	background: $shine;
-	border: 0;
-	box-shadow: 0 0 1px $border-color;
-	height: g(2.5);
-	margin-top: g(-1.25);
+	@extend %button-translucent;
+	bottom: g();
+	box-shadow: 0 0 0 1px $border-color;
+	height: g(2.25);
 	padding: 0;
 	position: absolute;
-	top: 50%;
-	width: g(1.25);
+	width: g(1);
 	z-index: 1;
 
-	.tify.-short & {
-		bottom: 0;
-		height: g(1.75);
-		width: g(1.75);
-		top: auto;
+	// Prevent scan buttons from overlapping
+	@container (height > 639px) {
+		bottom: 50%;
 	}
 
-	&.-previous {
-		border-radius: 0 g(1.25) g(1.25) 0;
+	&.-left {
+		border-radius: 0 $br $br 0;
 		left: 0;
-		justify-content: flex-start;
-
-		.tify.-short & {
-			border-radius: 0 g(1.75) 0 0;
-			padding: g(.375) 0 0 g(.25);
-		}
 	}
 
-	&.-next {
-		border-radius: g(1.25) 0 0 g(1.25);
+	&.-right {
+		border-radius: $br 0 0 $br;
 		right: 0;
-		justify-content: flex-end;
-
-		.tify.-short & {
-			border-radius: g(1.75) 0 0;
-			padding: g(.375) g(.25) 0 0;
-		}
 	}
 }
 
diff --git a/src/styles/sections/thumbnails.scss b/src/styles/sections/thumbnails.scss
index d751c186..b2a8381f 100644
--- a/src/styles/sections/thumbnails.scss
+++ b/src/styles/sections/thumbnails.scss
@@ -1,5 +1,3 @@
-@use 'sass:math';
-
 .tify-thumbnails {
 	@extend %panel;
 	min-height: 100%;
@@ -10,7 +8,8 @@
 	a {
 		color: inherit;
 		border: 0;
-		box-shadow: none;
+		box-shadow: 0 0 0 1px $border-color;
+		text-decoration: none;
 	}
 }
 
@@ -19,18 +18,16 @@
 }
 
 .tify-thumbnails-item {
-	background: currentColor;
+	background: $panel-bg-muted;
 	border-radius: $br;
 	cursor: pointer;
 	float: left;
 	margin: g(.25);
-	overflow: hidden;
-	padding-bottom: g();
 	position: relative;
+	width: $thumbnail-width;
 
 	@include hover {
-		background: currentColor;
-		filter: brightness(1.2);
+		background: $panel-bg;
 	}
 
 	img {
@@ -40,25 +37,22 @@
 		object-fit: contain;
 		pointer-events: none;
 		max-width: 100%;
-		width: $thumbnail-width;
 	}
 
 	&.-current {
-		outline: g(math.div(.5, 3)) solid $base-color-light;
+		outline: g(.5 * .33333) solid $base-color-pale;
+		outline-offset: 0;
 	}
 }
 
 .tify-thumbnails-page {
+	border-top: 1px solid $border-color;
 	bottom: 0;
-	box-shadow: 0 -1px $shine;
-	color: $white;
 	display: block;
 	font-size: $font-size-small;
-	font-weight: bold;
 	height: g();
 	overflow: hidden;
 	padding: 0 g(.25);
-	position: absolute;
 	text-align: center;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -70,6 +64,7 @@
 			&.-current {
 				.tify-thumbnails-page {
 					background: $link-color;
+					color: $text-color-inverted;
 				}
 			}
 		}
diff --git a/src/styles/sections/toc.scss b/src/styles/sections/toc.scss
index 9321a4bf..f2965aa0 100644
--- a/src/styles/sections/toc.scss
+++ b/src/styles/sections/toc.scss
@@ -1,5 +1,5 @@
 %toc-row-item {
-	background: $white;
+	background: $panel-bg;
 	position: relative;
 	z-index: 1;
 }
@@ -32,11 +32,11 @@
 	text-decoration: none;
 
 	@include hover {
-		background: $base-color-lighter;
+		background: $base-color-paler;
 
 		// Element label and page number
 		> span {
-			background: $base-color-lighter;
+			background: $base-color-paler;
 		}
 	}
 
@@ -86,13 +86,13 @@
 
 	&.-current {
 		// Bold vertical marker
-		box-shadow: calc(#{g(-.5)} + 1px) 0 $white, g(-.75) 0 $base-color-light;
+		box-shadow: calc(#{g(-.5)} + 1px) 0 $panel-bg, g(-.75) 0 $base-color-pale;
 	}
 
 	&.-expanded {
 		// Vertical connector to the left
 		&::after {
-			border-left: 1px solid $base-color-light;
+			border-left: 1px solid $base-color-pale;
 			content: '';
 			left: g(.75);
 			height: 100%;
@@ -100,12 +100,16 @@
 			top: g(.25);
 			z-index: -2;
 		}
+
+		&:last-child::after {
+			height: calc(100% - #{g()});
+		}
 	}
 
 	& & {
 		// Horizontal connector
 		&::before {
-			border-top: 1px solid $base-color-light;
+			border-top: 1px solid $base-color-pale;
 			content: '';
 			display: block;
 			height: 100%;
@@ -116,8 +120,8 @@
 		}
 
 		// Prevent vertical line from protruding at the bottom
-		&:not(.-current):last-child::before {
-			background: $white;
+		&:last-child::before {
+			background: $panel-bg;
 		}
 	}
 }
@@ -134,10 +138,10 @@
 	padding: 0;
 	position: relative;
 
-	// White overlay so vertical line does not touch button
+	// Gap between vertical line and button
 	&::after {
 		content: '';
-		border-bottom: g(.25) solid $white;
+		border-bottom: g(.25) solid $panel-bg;
 		bottom: g(-.25);
 		left: g(.5);
 		pointer-events: none;
diff --git a/src/styles/util/base.scss b/src/styles/util/base.scss
index a7810d5e..3dff9e58 100644
--- a/src/styles/util/base.scss
+++ b/src/styles/util/base.scss
@@ -2,6 +2,7 @@
 	background: $main-bg;
 	box-sizing: border-box;
 	color: $text-color;
+	color-scheme: light dark;
 	container-type: size;
 	display: flex;
 	flex-direction: column;
@@ -14,6 +15,14 @@
 	position: relative;
 	-webkit-tap-highlight-color: transparent;
 
+	&.-light {
+		color-scheme: light;
+	}
+
+	&.-dark {
+		color-scheme: dark;
+	}
+
 	*,
 	*::before,
 	*::after {
@@ -36,15 +45,11 @@
 		@include hover {
 			color: $link-hover-color;
 		}
-
-		&:focus-visible {
-			outline: 2px solid $base-color-light;
-		}
 	}
 
 	h3 {
 		box-shadow: 0 1px $border-color;
-		font-size: .75em;
+		font-size: $font-size-small;
 		font-weight: bold;
 		letter-spacing: .1em;
 		margin: 0 0 g(.5);
@@ -77,8 +82,8 @@
 	}
 
 	[type=text] {
-		background: $white;
-		border: 1px solid $shade;
+		background: none;
+		border: 1px solid $border-color;
 		border-radius: $br;
 		color: inherit;
 		font: inherit;
@@ -86,7 +91,7 @@
 
 		&:focus {
 			border-color: $base-color;
-			outline: 2px solid $base-color-lighter;
+			outline: 0;
 		}
 	}
 }
diff --git a/src/styles/util/settings.scss b/src/styles/util/settings.scss
index 9b1cf453..b2f4e097 100644
--- a/src/styles/util/settings.scss
+++ b/src/styles/util/settings.scss
@@ -1,31 +1,44 @@
-// Opaque shades
-$grey: #666 !default;
-$grey-dark: #333 !default;
+// Shades of grey
+$grey: #262626 !default;
+$grey-dark: #171717 !default;
 $grey-light: #f5f5f5 !default;
-$white: #fff !default;
-
-// Semitransparent shades
-$shade: rgba(black, .2) !default;
-$shade-dark: rgba(black, .5) !default;
-$shade-light: rgba(black, .1) !default;
-$shine: rgba($white, .4) !default;
 
 // Semantic colors
-// NOTE: These colors must be solid
-$base-color: var(--tify-base-color, #06b) !default;
-
-$base-color-light: var(--tify-base-color-light, mix(white, #06b, 45%)) !default;
-$base-color-lighter: var(--tify-base-color-lighter, mix(white, #06b, 90%)) !default;
-$border-color: var(--tify-border-color, $shade) !default;
+$base-color: var(--tify-base-color, light-dark(#06b, #0cf)) !default;
+$base-color-pale:
+	var(
+		--tify-base-color-pale,
+		light-dark(
+			color-mix(in oklch, #06b, #fff 55%),
+			color-mix(in oklch, #0cf, $grey-dark 55%)
+		)
+	) !default;
+$base-color-paler:
+	var(
+		--tify-base-color-paler,
+		light-dark(
+			color-mix(in oklch, #06b, #fff 95%),
+			color-mix(in oklch, #0cf, $grey-dark 95%)
+		)
+	) !default;
+$border-color: var(--tify-border-color, light-dark(#0002, #ffffff19)) !default;
 $link-color: var(--tify-link-color, $base-color) !default;
 $link-hover-color: var(--tify-link-hover-color, $link-color) !default;
-$text-color: var(--tify-text-color, $grey-dark) !default;
-$text-color-muted: var(--tify-text-muted-color, $grey) !default;
+$text-color: var(--tify-text-color, light-dark($grey-dark, $grey-light)) !default;
+$text-color-inverted: var(--tify-text-color-inverted, light-dark(#fff, $grey-dark)) !default;
+$text-color-muted:
+	var(
+		--tify-text-muted-color,
+		light-dark(
+			color-mix(in oklch, $grey-dark, #fff 20%),
+			color-mix(in oklch, $grey-light, #000 20%),
+		)
+	) !default;
 
 // Dimensions
 $br: var(--tify-border-radius, 2px) !default;
 $font-size: var(--tify-font-size, 16px) !default;
-$font-size-small: var(--tify-font-size-small, calc(#{$font-size} * .8125)) !default;
+$font-size-small: var(--tify-font-size-small, max(.75em, 10px)) !default;
 $grid-base: var(--tify-grid-base, 24px) !default;
 $line-height: var(--tify-line-height, #{g()}) !default;
 $thumbnail-height: var(--tify-thumbnail-height, g(4.5)) !default;
@@ -40,8 +53,21 @@ $medium: 'width > 959px';
 $large: 'width > 1199px';
 
 // Combined values
-$blur: blur(2px);
-$drop-shadow: 0 0 g(.25) rgba(black, .5) !default;
-$header-bg: var(--tify-header-bg, $white) !default;
-$inset-shadow: 0 .5px 3px $shade inset !default;
-$main-bg: var(--tify-body-bg, $grey url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEElEQVQImWNgwAGkcElgAgAEogAbFZcwKQAAAABJRU5ErkJggg==)) !default; // dots pattern
+$blur: blur(5px);
+$button-bg: var(--tify-button-bg, light-dark($grey-light, $grey)) !default;
+$button-hover-bg:	var(--tify-button-hover-bg, oklch(from $button-bg calc(l + .03) c h)) !default;
+$drop-shadow: 0 0 g(.25) #0004 !default;
+$dropdown-bg: var(--tify-dropdown-bg, light-dark(#fff, $grey)) !default;
+$header-bg:	var(--tify-header-bg, light-dark(#fff, $grey-dark)) !default;
+$inset-shadow: 0 0 3px #0002 inset !default;
+$main-bg:
+	var(
+		--tify-body-bg,
+		// dots pattern
+		radial-gradient(
+			light-dark(#aaa, #333) 1px,
+			light-dark(#bbb, #444) 0
+		) 2px 1px / 3px 3px,
+	) !default;
+$panel-bg: var(--tify-bg-color, light-dark(#fff, $grey-dark)) !default;
+$panel-bg-muted: var(--tify-bg-color, light-dark($grey-light, $grey)) !default;
diff --git a/tests/e2e/fulltext.spec.js b/tests/e2e/fulltext.spec.js
index e6b6eab8..eb25f669 100644
--- a/tests/e2e/fulltext.spec.js
+++ b/tests/e2e/fulltext.spec.js
@@ -8,12 +8,12 @@ describe('Fulltext', () => {
 		cy.get('.tify-scan-overlay').should('have.length', 102);
 
 		// Check the first annotation overlay of each page
-		cy.get('[style*="left: 18.8309px; top: 282.988px"]')
-			.children('.tify-scan-overlay[style*="width: 113.797px; height: 5.0324px"]');
-		cy.get('[style*="left: 414.136px; top: 282.988px"]')
-			.children('.tify-scan-overlay[style*="width: 113.797px; height: 5.0324px"]');
-		cy.get('[style*="left: 809.44px; top: 282.988px"]')
-			.children('.tify-scan-overlay[style*="width: 113.797px; height: 5.0324px"]');
+		cy.get('[style*="left: 18.8775px; top: 282.193px"]')
+			.children('.tify-scan-overlay[style*="width: 114.079px; height: 5.04485px"]');
+		cy.get('[style*="left: 413.198px; top: 282.193px"]')
+			.children('.tify-scan-overlay[style*="width: 114.079px; height: 5.04485px"]');
+		cy.get('[style*="left: 807.519px; top: 282.193px"]')
+			.children('.tify-scan-overlay[style*="width: 114.079px; height: 5.04485px"]');
 	});
 
 	it('loads and displays an annotation list', () => {

From 2319f1e3061ba13f3177b94178294783633ab466 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Mon, 2 Jun 2025 19:00:55 +0200
Subject: [PATCH 02/12] Fix demo height when using iiif-content

---
 index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.html b/index.html
index 9c6f2240..5a7875f6 100644
--- a/index.html
+++ b/index.html
@@ -86,6 +86,10 @@
 		}
 
 		.container {
+			height: 100vh;
+		}
+
+		.header + .container {
 			height: calc(100vh - 1.75rem);
 		}
 

From 90c845ba230b048cf06738fc45666ff33170f551 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Wed, 25 Jun 2025 02:12:30 +0200
Subject: [PATCH 03/12] Fix unknown SCSS variable

---
 src/styles/sections/export.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/sections/export.scss b/src/styles/sections/export.scss
index 94d23928..ecd1f1a9 100644
--- a/src/styles/sections/export.scss
+++ b/src/styles/sections/export.scss
@@ -19,7 +19,7 @@
 	width: 100%;
 
 	@include hover {
-		background: $base-color-lighter;
+		background: $base-color-paler;
 	}
 
 	img {

From 83eb78e07158e9d80466171ffd8f268e5db18bc4 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Thu, 3 Jul 2025 02:35:57 +0200
Subject: [PATCH 04/12] Add Stylelint, fix SCSS linting issues

---
 package-lock.json                    | 1078 +++++++++++++++++++++++++-
 package.json                         |   12 +-
 src/styles/extends/button.scss       |    2 +-
 src/styles/functions/g.scss          |    2 +-
 src/styles/main.scss                 |    5 -
 src/styles/mixins/dropdown.scss      |   34 +-
 src/styles/mixins/range.scss         |    8 +-
 src/styles/sections/error.scss       |    2 +-
 src/styles/sections/header.scss      |   13 +-
 src/styles/sections/icon.scss        |    2 +-
 src/styles/sections/info.scss        |    2 +-
 src/styles/sections/loading.scss     |    4 +-
 src/styles/sections/page-select.scss |   22 +-
 src/styles/sections/scan.scss        |   14 +-
 src/styles/sections/thumbnails.scss  |    7 +-
 src/styles/sections/toc.scss         |    6 +-
 src/styles/util/base.scss            |    6 +-
 src/styles/util/settings.scss        |    4 +-
 stylelint.config.js                  |   33 +
 19 files changed, 1159 insertions(+), 97 deletions(-)
 create mode 100644 stylelint.config.js

diff --git a/package-lock.json b/package-lock.json
index 9f45c74f..ad39ba20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@iiif/parser": "^2.1.7",
         "@mdi/js": "^7.4.47",
         "@rushstack/eslint-patch": "^1.10.5",
+        "@stylistic/stylelint-config": "^2.0.0",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitest/eslint-plugin": "^1.1.28",
         "@vue/eslint-config-airbnb": "^8.0.0",
@@ -36,6 +37,9 @@
         "petite-vue": "^0.4.1",
         "start-server-and-test": "^2.0.10",
         "striptags": "^3.2.0",
+        "stylelint": "^16.21.0",
+        "stylelint-config-standard-scss": "^15.0.1",
+        "stylelint-order": "^7.0.0",
         "unplugin-vue-components": "^28.0.0",
         "vite": "^6.1.0",
         "vite-plugin-banner": "^0.8.0",
@@ -700,9 +704,9 @@
       }
     },
     "node_modules/@csstools/css-parser-algorithms": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz",
-      "integrity": "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
       "dev": true,
       "funding": [
         {
@@ -719,13 +723,33 @@
         "node": ">=18"
       },
       "peerDependencies": {
-        "@csstools/css-tokenizer": "^3.0.3"
+        "@csstools/css-tokenizer": "^3.0.4"
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.3.tgz",
-      "integrity": "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz",
+      "integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==",
       "dev": true,
       "funding": [
         {
@@ -740,6 +764,10 @@
       "license": "MIT",
       "engines": {
         "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.1",
+        "@csstools/css-tokenizer": "^3.0.1"
       }
     },
     "node_modules/@cypress/request": {
@@ -791,6 +819,17 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@dual-bundle/import-meta-resolve": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
+      "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
@@ -1589,6 +1628,41 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@keyv/serialize": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-qnEovoOp5Np2JDGonIDL6Ayihw0RhnRh6vxPuHo4RDn1UOzwEo4AeIfpL6UGIrsceWrCMiVPgwRjbHu4vYFc3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^6.0.3"
+      }
+    },
+    "node_modules/@keyv/serialize/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/@mdi/js": {
       "version": "7.4.47",
       "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
@@ -2040,6 +2114,59 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@stylistic/stylelint-config": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-config/-/stylelint-config-2.0.0.tgz",
+      "integrity": "sha512-8J4YAxggy2Nzkb8KJIOLbtMXTPZ5gpKVmyhiiuKEUgCl9XFND5lM0e/ZZBMGEYZ68h5qcsS/jgg1wh235erRAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@stylistic/stylelint-plugin": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.12 || >=20.9"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.8.0"
+      }
+    },
+    "node_modules/@stylistic/stylelint-plugin": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-3.1.3.tgz",
+      "integrity": "sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.1",
+        "@csstools/css-tokenizer": "^3.0.1",
+        "@csstools/media-query-list-parser": "^3.0.1",
+        "is-plain-object": "^5.0.0",
+        "postcss": "^8.4.41",
+        "postcss-selector-parser": "^6.1.2",
+        "postcss-value-parser": "^4.2.0",
+        "style-search": "^0.1.0"
+      },
+      "engines": {
+        "node": "^18.12 || >=20.9"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.8.0"
+      }
+    },
+    "node_modules/@stylistic/stylelint-plugin/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.10",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.10.tgz",
@@ -2917,6 +3044,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/array.prototype.findlast": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
@@ -3362,6 +3499,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/cacheable": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-1.10.1.tgz",
+      "integrity": "sha512-Fa2BZY0CS9F0PFc/6aVA6tgpOdw+hmv9dkZOlHXII5v5Hw+meJBIWDcPrG9q/dXxGcNbym5t77fzmawrBQfTmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.10.0",
+        "keyv": "^5.3.4"
+      }
+    },
+    "node_modules/cacheable/node_modules/keyv": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.3.4.tgz",
+      "integrity": "sha512-ypEvQvInNpUe+u+w8BIcPkQvEqXquyyibWE/1NB5T2BTzIpS5cGEV1LZskDzPSTvNAaT4+5FutvzlvnkxOSKlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.0.3"
+      }
+    },
     "node_modules/cachedir": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.3.0.tgz",
@@ -3639,6 +3797,13 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/colorette": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
@@ -3741,6 +3906,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3756,6 +3948,30 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-functions-list": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
+      "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12 || >=16"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4128,6 +4344,19 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -4361,6 +4590,26 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/error-stack-parser-es": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-0.1.5.tgz",
@@ -5304,6 +5553,16 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -5404,9 +5663,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
-      "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
       "dev": true,
       "license": "ISC"
     },
@@ -5736,6 +5995,54 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/globals": {
       "version": "13.24.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
@@ -5768,6 +6075,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -5890,6 +6225,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/hookified": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.10.0.tgz",
+      "integrity": "sha512-dJw0492Iddsj56U1JsSTm9E/0B/29a1AuoSLRAte8vQg/kaTGF3IgjEWT8c8yG4cC10+HisE1x5QAwR0Xwc+DA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -6280,6 +6622,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.0.tgz",
@@ -6595,6 +6944,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -7079,6 +7438,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -7172,6 +7538,16 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -7182,6 +7558,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/known-css-properties": {
+      "version": "0.37.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.37.0.tgz",
+      "integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/kolorist": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
@@ -7231,6 +7614,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/listr2": {
       "version": "3.14.0",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
@@ -7308,6 +7698,13 @@
       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
       "dev": true
     },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -7456,13 +7853,44 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
-    },
-    "node_modules/merge2": {
+    "node_modules/mathml-tag-names": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
+      "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/meow": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+      "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
@@ -7593,9 +8021,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "dev": true,
       "funding": [
         {
@@ -7943,6 +8371,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-ms": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
@@ -8029,6 +8476,16 @@
         "node": "20 || >=22"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.2.tgz",
@@ -8133,9 +8590,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
-      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
       "funding": [
         {
@@ -8153,7 +8610,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.8",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -8161,6 +8618,74 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-resolve-nested-selector": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+      "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/postcss-scss": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.29"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.15",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
@@ -8174,6 +8699,23 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-sorting": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-9.1.0.tgz",
+      "integrity": "sha512-Mn8KJ45HNNG6JBpBizXcyf6LqY/qyqetGcou/nprDnFwBFBLGj0j/sNKV2lj2KMOVOwdXu14aEzqJv8CIV6e8g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.4.20"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -8899,6 +9441,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/slice-ansi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
@@ -9277,6 +9829,368 @@
       "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==",
       "dev": true
     },
+    "node_modules/style-search": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
+      "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/stylelint": {
+      "version": "16.21.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.21.0.tgz",
+      "integrity": "sha512-ki3PpJGG7xhm3WtINoWGnlvqAmbqSexoRMbEMJzlwewSIOqPRKPlq452c22xAdEJISVi80r+I7KL9GPUiwFgbg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4",
+        "@csstools/media-query-list-parser": "^4.0.3",
+        "@csstools/selector-specificity": "^5.0.0",
+        "@dual-bundle/import-meta-resolve": "^4.1.0",
+        "balanced-match": "^2.0.0",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^9.0.0",
+        "css-functions-list": "^3.2.3",
+        "css-tree": "^3.1.0",
+        "debug": "^4.4.1",
+        "fast-glob": "^3.3.3",
+        "fastest-levenshtein": "^1.0.16",
+        "file-entry-cache": "^10.1.1",
+        "global-modules": "^2.0.0",
+        "globby": "^11.1.0",
+        "globjoin": "^0.1.4",
+        "html-tags": "^3.3.1",
+        "ignore": "^7.0.5",
+        "imurmurhash": "^0.1.4",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.37.0",
+        "mathml-tag-names": "^2.1.3",
+        "meow": "^13.2.0",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.5.5",
+        "postcss-resolve-nested-selector": "^0.1.6",
+        "postcss-safe-parser": "^7.0.1",
+        "postcss-selector-parser": "^7.1.0",
+        "postcss-value-parser": "^4.2.0",
+        "resolve-from": "^5.0.0",
+        "string-width": "^4.2.3",
+        "supports-hyperlinks": "^3.2.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.9.0",
+        "write-file-atomic": "^5.0.1"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.mjs"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/stylelint-config-recommended": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-16.0.0.tgz",
+      "integrity": "sha512-4RSmPjQegF34wNcK1e1O3Uz91HN8P1aFdFzio90wNK9mjgAI19u5vsU868cVZboKzCaa5XbpvtTzAAGQAxpcXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.16.0"
+      }
+    },
+    "node_modules/stylelint-config-recommended-scss": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-15.0.1.tgz",
+      "integrity": "sha512-V24bxkNkFGggqPVJlP9iXaBabwSGEG7QTz+PyxrRtjPkcF+/NsWtB3tKYvFYEmczRkWiIEfuFMhGpJFj9Fxe6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-scss": "^4.0.9",
+        "stylelint-config-recommended": "^16.0.0",
+        "stylelint-scss": "^6.12.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3",
+        "stylelint": "^16.16.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint-config-standard": {
+      "version": "38.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-38.0.0.tgz",
+      "integrity": "sha512-uj3JIX+dpFseqd/DJx8Gy3PcRAJhlEZ2IrlFOc4LUxBX/PNMEQ198x7LCOE2Q5oT9Vw8nyc4CIL78xSqPr6iag==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "stylelint-config-recommended": "^16.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.18.0"
+      }
+    },
+    "node_modules/stylelint-config-standard-scss": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-15.0.1.tgz",
+      "integrity": "sha512-8pmmfutrMlPHukLp+Th9asmk21tBXMVGxskZCzkRVWt1d8Z0SrXjUUQ3vn9KcBj1bJRd5msk6yfEFM0UYHBRdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "stylelint-config-recommended-scss": "^15.0.1",
+        "stylelint-config-standard": "^38.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3",
+        "stylelint": "^16.18.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint-order": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-7.0.0.tgz",
+      "integrity": "sha512-rSWxx0KscYfxU02wEskKXES9lkRzuuONMMNkZ7SUc6uiF3tDKm7e+sE0Ax/SBlG4TUf1sp1R6f3/SlsPGmzthg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss": "^8.5.3",
+        "postcss-sorting": "^9.1.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.18.0"
+      }
+    },
+    "node_modules/stylelint-scss": {
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.12.1.tgz",
+      "integrity": "sha512-UJUfBFIvXfly8WKIgmqfmkGKPilKB4L5j38JfsDd+OCg2GBdU0vGUV08Uw82tsRZzd4TbsUURVVNGeOhJVF7pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.1",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.36.0",
+        "mdn-data": "^2.21.0",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.6",
+        "postcss-selector-parser": "^7.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.0.2"
+      }
+    },
+    "node_modules/stylelint-scss/node_modules/known-css-properties": {
+      "version": "0.36.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.36.0.tgz",
+      "integrity": "sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylelint-scss/node_modules/mdn-data": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.22.1.tgz",
+      "integrity": "sha512-u9Xnc9zLuF/CL2IHPow7HcXPpb8okQyzYpwL5wFsY//JRedSWYglYRg3PYWoQCu1zO+tBTmWOJN/iM0mPC5CRQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/stylelint-scss/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/media-query-list-parser": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.3.tgz",
+      "integrity": "sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/selector-specificity": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz",
+      "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/balanced-match": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
+      "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylelint/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint/node_modules/file-entry-cache": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.1.1.tgz",
+      "integrity": "sha512-zcmsHjg2B2zjuBgjdnB+9q0+cWcgWfykIcsDkWDB4GTPtl1eXUA+gTI6sO0u01AqK3cliHryTU55/b2Ow1hfZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^6.1.10"
+      }
+    },
+    "node_modules/stylelint/node_modules/flat-cache": {
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.11.tgz",
+      "integrity": "sha512-zfOAns94mp7bHG/vCn9Ru2eDCmIxVQ5dELUHKjHfDEOJmHNzE+uGa6208kfkgmtym4a0FFjEuFksCXFacbVhSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cacheable": "^1.10.1",
+        "flatted": "^3.3.3",
+        "hookified": "^1.10.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/stylelint/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/stylelint/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/superjson": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
@@ -9305,6 +10219,36 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/supports-hyperlinks": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.2.0.tgz",
+      "integrity": "sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+      }
+    },
+    "node_modules/supports-hyperlinks/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -9329,6 +10273,65 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/table": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",
+      "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/table/node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/table/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/table/node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -10728,6 +11731,33 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/write-file-atomic": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
+      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/write-file-atomic/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/ws": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
diff --git a/package.json b/package.json
index b3f6a5d8..c338eda6 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,12 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite",
-    "lint": "eslint . --ext .cjs,.html,.js,.jsx,.mjs,.vue --ignore-path .gitignore",
-    "lint:fix": "eslint . --ext .cjs,.html,.js,.jsx,.mjs,.vue --fix --ignore-path .gitignore",
+    "lint": "npm run lint:vue; npm run lint:style",
+    "lint:fix": "npm run lint:vue:fix; npm run lint:style:fix",
+    "lint:style": "stylelint '**/*.scss' --ignore-path .gitignore",
+    "lint:style:fix": "npm run lint:style -- --fix",
+    "lint:vue": "eslint . --ext .cjs,.html,.js,.jsx,.mjs,.vue --ignore-path .gitignore",
+    "lint:vue:fix": "npm run lint:vue -- --fix",
     "mock-api": "node -e 'import(`./tests/iiif-api/server.js`).then(server => server.default.start())'",
     "postinstall": "node build/create-icons.js",
     "preversion": "npm install-clean && npm run test:unit && npm run build && npm run test:e2e",
@@ -40,6 +44,7 @@
     "@iiif/parser": "^2.1.7",
     "@mdi/js": "^7.4.47",
     "@rushstack/eslint-patch": "^1.10.5",
+    "@stylistic/stylelint-config": "^2.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/eslint-plugin": "^1.1.28",
     "@vue/eslint-config-airbnb": "^8.0.0",
@@ -61,6 +66,9 @@
     "petite-vue": "^0.4.1",
     "start-server-and-test": "^2.0.10",
     "striptags": "^3.2.0",
+    "stylelint": "^16.21.0",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-order": "^7.0.0",
     "unplugin-vue-components": "^28.0.0",
     "vite": "^6.1.0",
     "vite-plugin-banner": "^0.8.0",
diff --git a/src/styles/extends/button.scss b/src/styles/extends/button.scss
index dd4d3dbd..2e21106a 100644
--- a/src/styles/extends/button.scss
+++ b/src/styles/extends/button.scss
@@ -1,8 +1,8 @@
 %button {
 	align-items: center;
 	background: $button-bg;
-	border-radius: $br;
 	border: 0;
+	border-radius: $br;
 	box-shadow: 0 0 0 1px $border-color inset;
 	color: inherit;
 	display: inline-flex;
diff --git a/src/styles/functions/g.scss b/src/styles/functions/g.scss
index d3777282..8ad59a2b 100644
--- a/src/styles/functions/g.scss
+++ b/src/styles/functions/g.scss
@@ -1,5 +1,5 @@
 @function g($factor: 1) {
-	@if ($factor == 1) {
+	@if $factor == 1 {
 		@return $grid-base;
 	}
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 7a52c25f..80ae3d94 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,11 +1,6 @@
 @import 'functions/*';
-
 @import 'util/settings';
-
 @import 'mixins/*';
-
 @import 'extends/*';
-
 @import 'util/base';
-
 @import 'sections/*';
diff --git a/src/styles/mixins/dropdown.scss b/src/styles/mixins/dropdown.scss
index aac9b466..d26ce905 100644
--- a/src/styles/mixins/dropdown.scss
+++ b/src/styles/mixins/dropdown.scss
@@ -9,58 +9,58 @@
 	text-shadow: none;
 	z-index: 9;
 
-	@if ($alignment == bottom) {
-		margin: g(.25) 0;
-	} @else if ($alignment == top) {
+	@if $alignment == bottom {
 		margin: g(.25) 0;
+	} @else if $alignment == top {
 		bottom: 100%;
+		margin: g(.25) 0;
 		top: auto;
 		transform: none;
-	} @else if ($alignment == right) {
+	} @else if $alignment == right {
 		transform: translateY(-50%);
 	}
 
-	@if ($position == left) {
+	@if $position == left {
 		left: 0;
 		right: auto;
-	} @else if ($position == right) {
+	} @else if $position == right {
 		left: auto;
 		right: g(.25);
 	}
 
 	// Wedge
 	&::before {
-		position: absolute;
-		content: '';
 		background: $dropdown-bg;
-		width: g(.5);
+		content: '';
 		height: g(.5);
+		position: absolute;
 		transform: rotate(45deg);
+		width: g(.5);
 		z-index: -1;
 
-		@if ($alignment == bottom) {
+		@if $alignment == bottom {
 			bottom: auto;
 			top: calc(#{g(-.25)} - #{$br});
 
-			@if ($position == left) {
+			@if $position == left {
 				left: g(.5);
 				right: auto;
-			} @else if ($position == right) {
+			} @else if $position == right {
 				left: auto;
 				right: g(.5);
 			}
-		} @else if ($alignment == top) {
-			top: auto;
+		} @else if $alignment == top {
 			bottom: calc(#{g(-.25)} - #{$br});
+			top: auto;
 
-			@if ($position == left) {
+			@if $position == left {
 				left: g(.5);
 				right: auto;
-			} @else if ($position == right) {
+			} @else if $position == right {
 				left: auto;
 				right: g(.5);
 			}
-		} @else if ($alignment == right) {
+		} @else if $alignment == right {
 			left: calc(#{g(-.25)} - #{$br});
 			top: calc(50% - #{g(.25)});
 		}
diff --git a/src/styles/mixins/range.scss b/src/styles/mixins/range.scss
index ff935bde..54805ea0 100644
--- a/src/styles/mixins/range.scss
+++ b/src/styles/mixins/range.scss
@@ -7,16 +7,12 @@
 
 $track-color: $border-color;
 $track-focus-color: null;
-
 $thumb-bg: $link-color;
 $thumb-focus-bg: $link-hover-color;
-
 $thumb-radius: $br;
 $thumb-height: g();
 $thumb-width: g(.5);
-
 $track-height: g(.25);
-
 $track-radius: $br;
 
 @mixin range-track {
@@ -35,7 +31,7 @@ $track-radius: $br;
 }
 
 @mixin range {
-	-webkit-appearance: none;
+	appearance: none;
 	background: none;
 	margin: g(.25) 0 g(-.25);
 	width: 100%;
@@ -49,7 +45,7 @@ $track-radius: $br;
 
 	&::-webkit-slider-thumb {
 		@include range-thumb;
-		-webkit-appearance: none;
+		appearance: none;
 		margin-top: calc((#{$track-height} * .5) - (#{$thumb-height} * .5));
 	}
 
diff --git a/src/styles/sections/error.scss b/src/styles/sections/error.scss
index 00fb7326..f7cf4376 100644
--- a/src/styles/sections/error.scss
+++ b/src/styles/sections/error.scss
@@ -15,7 +15,7 @@
 }
 
 .tify-error-close {
-	align-self: flex-start;
+	align-self: start;
 	background: 0;
 	border: 0;
 	color: #fff;
diff --git a/src/styles/sections/header.scss b/src/styles/sections/header.scss
index 15a79ec3..68ad8941 100644
--- a/src/styles/sections/header.scss
+++ b/src/styles/sections/header.scss
@@ -17,8 +17,8 @@
 
 	&.-page-select {
 		align-self: center;
-		box-shadow: 0 0 0 1px $border-color inset;
 		border-radius: $br;
+		box-shadow: 0 0 0 1px $border-color inset;
 		margin: 0;
 		padding: 0;
 
@@ -87,8 +87,8 @@
 	@extend %button;
 	align-self: center;
 	background: none;
-	border-radius: $br;
 	border: 0;
+	border-radius: $br;
 	box-shadow: none;
 	margin: 0; // Safari fix
 	min-height: g(1.5);
@@ -139,7 +139,7 @@
 	.tify-header-button-group.-view & {
 		display: flex;
 		gap: .3em;
-		justify-content: flex-start;
+		justify-content: start;
 		padding: g(.25);
 		width: 100%;
 
@@ -211,16 +211,15 @@
 }
 
 .tify-header-title {
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 2;
 	align-self: center;
+	-webkit-box-orient: vertical;
 	display: -webkit-box;
 	font-size: 1em;
 	font-weight: normal;
+	-webkit-line-clamp: 2;
 	line-height: g();
-	margin: 0;
-	overflow: hidden;
 	margin: g(.125) g(.5);
+	overflow: hidden;
 	text-align: left;
 	text-overflow: ellipsis;
 }
diff --git a/src/styles/sections/icon.scss b/src/styles/sections/icon.scss
index f29aa84b..9dfea255 100644
--- a/src/styles/sections/icon.scss
+++ b/src/styles/sections/icon.scss
@@ -1,5 +1,5 @@
 .tify-icon {
-	fill: currentColor;
+	fill: currentcolor;
 	height: 24px;
 	vertical-align: middle;
 	width: 24px;
diff --git a/src/styles/sections/info.scss b/src/styles/sections/info.scss
index ff12132d..1d5c7de1 100644
--- a/src/styles/sections/info.scss
+++ b/src/styles/sections/info.scss
@@ -43,9 +43,9 @@ $info-content-max-height: g(6.5);
 
 .tify-info-logo {
 	display: block;
+	height: auto;
 	max-height: g(6);
 	max-width: g(12);
-	height: auto;
 	width: auto;
 }
 
diff --git a/src/styles/sections/loading.scss b/src/styles/sections/loading.scss
index 704ad902..6fec02fc 100644
--- a/src/styles/sections/loading.scss
+++ b/src/styles/sections/loading.scss
@@ -1,5 +1,5 @@
 .tify-loading {
-	animation: fadeIn .5s forwards .5s, spin 1.2s infinite ease-in-out;
+	animation: fadein .5s forwards .5s, spin 1.2s infinite ease-in-out;
 	background: $base-color-pale;
 	border-radius: $br;
 	bottom: g(.5);
@@ -10,7 +10,7 @@
 	position: absolute;
 	width: g(1.5);
 
-	@keyframes fadeIn {
+	@keyframes fadein {
 		0% {
 			opacity: 0;
 		}
diff --git a/src/styles/sections/page-select.scss b/src/styles/sections/page-select.scss
index b277c0a6..a258d93f 100644
--- a/src/styles/sections/page-select.scss
+++ b/src/styles/sections/page-select.scss
@@ -69,6 +69,17 @@
 	padding: 0;
 	position: relative;
 
+	a {
+		color: inherit;
+		display: block;
+		padding: g(.125);
+		text-decoration: none;
+
+		@include hover {
+			color: inherit;
+		}
+	}
+
 	> li {
 		margin: 0;
 		user-select: none;
@@ -92,15 +103,4 @@
 			color: $text-color-inverted;
 		}
 	}
-
-	a {
-		color: inherit;
-		display: block;
-		padding: g(.125);
-		text-decoration: none;
-
-		@include hover {
-			color: inherit;
-		}
-	}
 }
diff --git a/src/styles/sections/scan.scss b/src/styles/sections/scan.scss
index 7431fd0a..2afd778d 100644
--- a/src/styles/sections/scan.scss
+++ b/src/styles/sections/scan.scss
@@ -10,7 +10,9 @@
 
 .tify-scan-buttons {
 	backdrop-filter: $blur;
-	background: linear-gradient($border-color 1px, transparent 1px) -1px -1px / auto calc(#{g(1.5)} + 1px); // separators
+	background:
+		linear-gradient($border-color 1px, transparent 1px) -1px -1px /
+		auto calc(#{g(1.5)} + 1px); // separators
 	border-radius: $br;
 	box-shadow: 0 0 0 1px $border-color;
 	display: flex;
@@ -29,14 +31,14 @@
 	padding: g(.25);
 	position: relative;
 
-	&:not(:disabled):active {
-		box-shadow: $inset-shadow;
-	}
-
 	&:first-child {
 		border-radius: $br $br 0 0;
 	}
 
+	&:not(:disabled):active {
+		box-shadow: $inset-shadow;
+	}
+
 	.tify-scan-filters & {
 		border: 0;
 		border-radius: 0 0 $br $br;
@@ -115,9 +117,9 @@
 .tify-scan-overlay {
 	&.-current {
 		border-radius: $br;
+		mix-blend-mode: difference;
 		outline: calc(g(.25) - 2px) solid #fff;
 		outline-offset: 2px;
-		mix-blend-mode: difference;
 	}
 }
 
diff --git a/src/styles/sections/thumbnails.scss b/src/styles/sections/thumbnails.scss
index b2a8381f..838b8269 100644
--- a/src/styles/sections/thumbnails.scss
+++ b/src/styles/sections/thumbnails.scss
@@ -6,9 +6,9 @@
 	user-select: none;
 
 	a {
-		color: inherit;
 		border: 0;
 		box-shadow: 0 0 0 1px $border-color;
+		color: inherit;
 		text-decoration: none;
 	}
 }
@@ -34,13 +34,13 @@
 		display: block;
 		height: $thumbnail-height;
 		margin: auto;
+		max-width: 100%;
 		object-fit: contain;
 		pointer-events: none;
-		max-width: 100%;
 	}
 
 	&.-current {
-		outline: g(.5 * .33333) solid $base-color-pale;
+		outline: g(.5 * .3333) solid $base-color-pale;
 		outline-offset: 0;
 	}
 }
@@ -60,7 +60,6 @@
 
 	@at-root {
 		.tify-thumbnails-item {
-
 			&.-current {
 				.tify-thumbnails-page {
 					background: $link-color;
diff --git a/src/styles/sections/toc.scss b/src/styles/sections/toc.scss
index f2965aa0..dbbbd6ff 100644
--- a/src/styles/sections/toc.scss
+++ b/src/styles/sections/toc.scss
@@ -43,11 +43,11 @@
 	&.-dots {
 		// Dotted line below
 		&::after {
+			border-bottom: 1px dotted;
 			bottom: calc(#{g(.5)} - 1px);
 			content: '';
 			left: g(.25);
 			min-width: 4em;
-			border-bottom: 1px dotted;
 			position: absolute;
 			right: g(.25);
 		}
@@ -94,8 +94,8 @@
 		&::after {
 			border-left: 1px solid $base-color-pale;
 			content: '';
-			left: g(.75);
 			height: 100%;
+			left: g(.75);
 			position: absolute;
 			top: g(.25);
 			z-index: -2;
@@ -140,9 +140,9 @@
 
 	// Gap between vertical line and button
 	&::after {
-		content: '';
 		border-bottom: g(.25) solid $panel-bg;
 		bottom: g(-.25);
+		content: '';
 		left: g(.5);
 		pointer-events: none;
 		position: absolute;
diff --git a/src/styles/util/base.scss b/src/styles/util/base.scss
index 3dff9e58..fa61e9f4 100644
--- a/src/styles/util/base.scss
+++ b/src/styles/util/base.scss
@@ -49,23 +49,23 @@
 
 	h3 {
 		box-shadow: 0 1px $border-color;
+		color: $text-color-muted;
 		font-size: $font-size-small;
 		font-weight: bold;
 		letter-spacing: .1em;
 		margin: 0 0 g(.5);
-		color: $text-color-muted;
 		padding: 0;
 		text-transform: uppercase;
 	}
 
 	h4 {
+		color: $text-color-muted;
 		font-size: 1em;
 		font-weight: normal;
 		margin: 0;
-		color: $text-color-muted;
 		padding: 0;
 
-		&:nth-of-type(n+2) {
+		&:nth-of-type(n + 2) {
 			margin-top: g(.5);
 		}
 	}
diff --git a/src/styles/util/settings.scss b/src/styles/util/settings.scss
index b2f4e097..848e87f6 100644
--- a/src/styles/util/settings.scss
+++ b/src/styles/util/settings.scss
@@ -55,10 +55,10 @@ $large: 'width > 1199px';
 // Combined values
 $blur: blur(5px);
 $button-bg: var(--tify-button-bg, light-dark($grey-light, $grey)) !default;
-$button-hover-bg:	var(--tify-button-hover-bg, oklch(from $button-bg calc(l + .03) c h)) !default;
+$button-hover-bg: var(--tify-button-hover-bg, oklch(from $button-bg calc(l + .03) c h)) !default;
 $drop-shadow: 0 0 g(.25) #0004 !default;
 $dropdown-bg: var(--tify-dropdown-bg, light-dark(#fff, $grey)) !default;
-$header-bg:	var(--tify-header-bg, light-dark(#fff, $grey-dark)) !default;
+$header-bg: var(--tify-header-bg, light-dark(#fff, $grey-dark)) !default;
 $inset-shadow: 0 0 3px #0002 inset !default;
 $main-bg:
 	var(
diff --git a/stylelint.config.js b/stylelint.config.js
new file mode 100644
index 00000000..2d97d18f
--- /dev/null
+++ b/stylelint.config.js
@@ -0,0 +1,33 @@
+/** @type {import('stylelint').Config} */
+export default {
+	extends: [
+		// NOTE: Order of extends matters
+		'@stylistic/stylelint-config',
+		'stylelint-config-standard-scss',
+	],
+	plugins: [
+		'stylelint-order',
+	],
+	rules: {
+		'declaration-empty-line-before': [
+			'never',
+			{ ignore: ['after-declaration'] },
+		],
+		'order/order': [
+			'custom-properties',
+			'declarations',
+		],
+		'order/properties-alphabetical-order': true,
+		'selector-attribute-quotes': 'never',
+		'selector-class-pattern': [
+			'^(-?[a-z][a-z0-9-]*[a-z0-9])$',
+		],
+		'@stylistic/block-closing-brace-newline-after': [
+			'always',
+			{ ignoreAtRules: ['if', 'else'] },
+		],
+		'@stylistic/indentation': 'tab',
+		'@stylistic/number-leading-zero': 'never',
+		'@stylistic/string-quotes': 'single',
+	},
+};

From 6190d17919d457cb118beee9433d0cc4429af7ff Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Tue, 8 Jul 2025 22:06:14 +0200
Subject: [PATCH 05/12] Update readme: Add link to demo

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index faea77e5..faf07887 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,9 @@
 
 TIFY is a slim and mobile-friendly [IIIF](https://iiif.io/) document viewer built with [Vue.js](https://vuejs.org/). It supports [IIIF Presentation API and Image API](https://iiif.io/api/) version 2 and 3.
 
-Continue reading to learn how to integrate TIFY into your website or application and about its options and API, [check out the website for usage examples](https://tify.rocks/), or [have a look at the documentation](doc).
+**[Check out the demo.](https://tify-iiif-viewer.github.io/tify/)**
+
+Continue reading to learn how to integrate TIFY into your website or application and about its options and API, [visit the website for usage examples](https://tify.rocks/), or [have a look at the documentation](doc).
 
 ## Embedding TIFY
 

From c64d274381a551b61841bbaebe31f17399ef8787 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Fri, 4 Jul 2025 21:51:37 +0200
Subject: [PATCH 06/12] Stop cleaning metadata labels

Labels should be fixed in the manifest, not in TIFY. Replacing characters could impede testing manifests.
---
 src/components/MetadataList.vue            |  7 +------
 tests/unit/components/MetadataList.spec.js | 14 --------------
 2 files changed, 1 insertion(+), 20 deletions(-)
 delete mode 100644 tests/unit/components/MetadataList.spec.js

diff --git a/src/components/MetadataList.vue b/src/components/MetadataList.vue
index 1ade6b4a..1aa318b6 100644
--- a/src/components/MetadataList.vue
+++ b/src/components/MetadataList.vue
@@ -23,11 +23,6 @@ export default {
 		this.updateInfoItems();
 	},
 	methods: {
-		// TODO: Review this - maybe just display ugly strings instead
-		cleanLabel(label) {
-			const cleanedLabel = label.replace('_', ' ');
-			return cleanedLabel.charAt(0).toUpperCase() + cleanedLabel.substr(1);
-		},
 		updateInfoItems() {
 			this.$nextTick(() => {
 				if (!this.$refs.contents) {
@@ -67,7 +62,7 @@ export default {
 			:key="index"
 		>
 			<h4 v-if="item.label">
-				{{ cleanLabel($store.localize(item.label)) }}
+				{{ $store.localize(item.label) }}
 			</h4>
 			<div
 				ref="contents"
diff --git a/tests/unit/components/MetadataList.spec.js b/tests/unit/components/MetadataList.spec.js
deleted file mode 100644
index c061feca..00000000
--- a/tests/unit/components/MetadataList.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-
-import MetadataList from '../../../src/components/MetadataList.vue';
-
-describe('MetadataList', () => {
-	const { vm } = mount(MetadataList);
-
-	it('formats a label', () => {
-		const label = 'example_label';
-		const cleanedLabel = vm.cleanLabel(label);
-		expect(cleanedLabel).toEqual('Example label');
-	});
-});

From 7dc83fbc706085feb2d1277dcb88843819227769 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Fri, 4 Jul 2025 21:54:37 +0200
Subject: [PATCH 07/12] Improve visibility of images in dark mode

Images with transparency may require a light background, so this is how they are displayed, even in dark mode.
---
 src/styles/sections/fulltext.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/sections/fulltext.scss b/src/styles/sections/fulltext.scss
index e9c88ca3..f66e33b5 100644
--- a/src/styles/sections/fulltext.scss
+++ b/src/styles/sections/fulltext.scss
@@ -13,6 +13,8 @@
 	}
 
 	img {
+		// Ensure visibility in dark mode since images with transparency may require a white background
+		background: #fff;
 		height: auto;
 		max-width: 100%;
 	}

From d103690a9cdc604382f00c2430d62679b53a50b6 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Fri, 4 Jul 2025 22:02:45 +0200
Subject: [PATCH 08/12] Slightly dull muted text color

---
 src/styles/util/settings.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/util/settings.scss b/src/styles/util/settings.scss
index 848e87f6..447d9fde 100644
--- a/src/styles/util/settings.scss
+++ b/src/styles/util/settings.scss
@@ -30,8 +30,8 @@ $text-color-muted:
 	var(
 		--tify-text-muted-color,
 		light-dark(
-			color-mix(in oklch, $grey-dark, #fff 20%),
-			color-mix(in oklch, $grey-light, #000 20%),
+			color-mix(in oklch, $grey-dark, #fff 35%),
+			color-mix(in oklch, $grey-light, #000 35%),
 		)
 	) !default;
 

From 056d5667183713df40acd2acee2db4e666aa73e0 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Fri, 4 Jul 2025 22:14:44 +0200
Subject: [PATCH 09/12] Update ESLint config to limit attributes per line

---
 .eslintrc.cjs                 |  8 ++++++++
 src/App.vue                   |  5 ++++-
 src/components/AppHeader.vue  |  5 ++++-
 src/components/ViewExport.vue | 10 ++++++++--
 src/components/ViewInfo.vue   | 20 ++++++++++++++++----
 5 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 4f6077d1..068cd9ec 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -46,6 +46,14 @@ module.exports = {
 			registeredComponentsOnly: false,
 		}],
 		'vue/html-indent': ['error', 'tab'],
+		'vue/max-attributes-per-line': ['error', {
+			singleline: {
+				max: 1,
+			},
+			multiline: {
+				max: 1,
+			},
+		}],
 		'vue/max-len': ['error', 120],
 		'vue/no-v-html': 'off',
 	},
diff --git a/src/App.vue b/src/App.vue
index 8f814a66..86592a55 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -192,7 +192,10 @@ export default {
 			</button>
 			<div class="tify-error-messages">
 				<!-- NOTE: Error messages can contain user-controlled content -->
-				<p v-for="error in $store.errors" :key="error">
+				<p
+					v-for="error in $store.errors"
+					:key="error"
+				>
 					{{ error }}
 				</p>
 			</div>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 6f6bbecd..fe3e5d2f 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -392,7 +392,10 @@ export default {
 					</button>
 				</div>
 
-				<div v-if="fullscreenSupported" class="tify-header-button-group -view">
+				<div
+					v-if="fullscreenSupported"
+					class="tify-header-button-group -view"
+				>
 					<button
 						type="button"
 						class="tify-header-button -icon-only"
diff --git a/src/components/ViewExport.vue b/src/components/ViewExport.vue
index e74f83a8..3c74dd82 100644
--- a/src/components/ViewExport.vue
+++ b/src/components/ViewExport.vue
@@ -73,14 +73,20 @@ export default {
 			<h3>{{ $translate('Download Individual Images') }}</h3>
 			<ul class="tify-export-image-list">
 				<template v-for="page in pages">
-					<li v-if="imageUrls[page]" :key="page">
+					<li
+						v-if="imageUrls[page]"
+						:key="page"
+					>
 						<!-- NOTE: The download attribute is only honored for same-origin URLs -->
 						<a
 							class="tify-export-image-link"
 							:href="imageUrls[page]"
 							:download="`${page}.jpg`"
 						>
-							<img :src="$store.getThumbnailUrl(page, 96)" alt="">
+							<img
+								:src="$store.getThumbnailUrl(page, 96)"
+								alt=""
+							>
 							{{ $translate('Page') }}
 							{{ $store.getPageLabel(page, $store.manifest.items[page - 1].label) }}
 						</a>
diff --git a/src/components/ViewInfo.vue b/src/components/ViewInfo.vue
index cb4ee126..5c78496b 100644
--- a/src/components/ViewInfo.vue
+++ b/src/components/ViewInfo.vue
@@ -181,21 +181,30 @@ export default {
 			class="tify-info-section -provider"
 		>
 			<h3>{{ $translate('Provided by') }}</h3>
-			<div v-for="provider in manifestOrCollection.provider" :key="provider.id">
+			<div
+				v-for="provider in manifestOrCollection.provider"
+				:key="provider.id"
+			>
 				<p v-if="provider.label">
 					<template
 						v-for="label, labelIndex in $store.localize(provider.label, '', 'array')"
 						:key="`${provider.id}-${labelIndex}`"
 					>
 						<br v-if="labelIndex">
-						<a v-if="isValidUrl(label)" :href="label">{{ label }}</a>
+						<a
+							v-if="isValidUrl(label)"
+							:href="label"
+						>{{ label }}</a>
 						<template v-else>
 							{{ label }}
 						</template>
 					</template>
 				</p>
 				<p>
-					<template v-for="homepage, homepageIndex in provider.homepage" :key="homepage.id">
+					<template
+						v-for="homepage, homepageIndex in provider.homepage"
+						:key="homepage.id"
+					>
 						<br v-if="homepageIndex">
 						<a :href="homepage.id">
 							{{ homepage.label ? $store.localize(homepage.label) : homepage.id }}
@@ -209,7 +218,10 @@ export default {
 			v-if="logos.length"
 			class="tify-info-section -logo"
 		>
-			<p v-for="logo, index in logos" :key="index">
+			<p
+				v-for="logo, index in logos"
+				:key="index"
+			>
 				<a
 					v-if="logo.link"
 					:href="logo.link"

From de88adf9c5ce663cd86de094c42beec0a8c6d8bb Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Fri, 4 Jul 2025 23:09:04 +0200
Subject: [PATCH 10/12] Change ID generation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move ID generator to a plugin. Use Vue’s useId() and Crypto interface when available.
---
 src/App.vue                              | 16 ++++++++--------
 src/components/AppHeader.vue             | 20 ++++++++++----------
 src/components/CollectionNode.vue        |  8 +++++++-
 src/components/PageSelect.vue            |  4 ++--
 src/components/TocList.vue               |  8 +++++++-
 src/components/ViewExport.vue            |  4 ++--
 src/components/ViewScan.vue              |  6 +++---
 src/main.js                              |  2 ++
 src/plugins/id.js                        | 11 +++++++++++
 src/plugins/store.js                     |  7 +------
 tests/e2e/support/e2e.js                 |  6 ++++++
 tests/unit/components/PageSelect.spec.js |  2 ++
 tests/unit/plugins/id.spec.js            | 12 ++++++++++++
 13 files changed, 73 insertions(+), 33 deletions(-)
 create mode 100644 src/plugins/id.js
 create mode 100644 tests/unit/plugins/id.spec.js

diff --git a/src/App.vue b/src/App.vue
index 86592a55..b32a4527 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -131,42 +131,42 @@ export default {
 		>
 			<template v-if="$store.manifest">
 				<!-- Scan must come first, other views in arbitrary order -->
-				<ViewScan :id="$store.getId('scan')" />
+				<ViewScan :id="$getId('scan')" />
 
 				<ViewFulltext
 					v-if="hasAnnotations"
 					v-show="$store.options.view === 'fulltext'"
-					:id="$store.getId('fulltext')"
+					:id="$getId('fulltext')"
 				/>
 				<ViewThumbnails
 					v-show="$store.options.view === 'thumbnails'"
-					:id="$store.getId('thumbnails')"
+					:id="$getId('thumbnails')"
 				/>
 				<ViewToc
 					v-if="hasToc"
 					v-show="$store.options.view === 'toc'"
-					:id="$store.getId('toc')"
+					:id="$getId('toc')"
 				/>
 			</template>
 
 			<ViewExport
 				v-if="$store.collection || $store.manifest"
 				v-show="$store.options.view === 'export'"
-				:id="$store.getId('export')"
+				:id="$getId('export')"
 			/>
 			<ViewInfo
 				v-if="$store.collection || $store.manifest"
 				v-show="$store.options.view === 'info'"
-				:id="$store.getId('info')"
+				:id="$getId('info')"
 			/>
 			<ViewCollection
 				v-if="$store.collection"
 				v-show="$store.options.view === 'collection'"
-				:id="$store.getId('collection')"
+				:id="$getId('collection')"
 			/>
 			<ViewHelp
 				v-show="$store.options.view === 'help'"
-				:id="$store.getId('help')"
+				:id="$getId('help')"
 			/>
 		</div>
 
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index fe3e5d2f..3e3b43e3 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -283,7 +283,7 @@ export default {
 			>
 				<button
 					type="button"
-					:aria-controls="$store.getId('controls')"
+					:aria-controls="$getId('controls')"
 					:aria-expanded="controlsVisible"
 					class="tify-header-button"
 					:title="$translate('View')"
@@ -295,7 +295,7 @@ export default {
 			</div>
 
 			<div
-				:id="$store.getId('controls')"
+				:id="$getId('controls')"
 				class="tify-header-popup"
 				:class="{ '-visible': controlsVisible }"
 			>
@@ -306,7 +306,7 @@ export default {
 						type="button"
 						class="tify-header-button -scan"
 						:class="{ '-active': !$store.options.view }"
-						:aria-controls="$store.getId('scan')"
+						:aria-controls="$getId('scan')"
 						:aria-expanded="!$store.options.view"
 						@click="toggleView(null)"
 					>
@@ -319,7 +319,7 @@ export default {
 						type="button"
 						class="tify-header-button"
 						:class="{ '-active': $store.options.view === 'fulltext' }"
-						:aria-controls="$store.getId('fulltext')"
+						:aria-controls="$getId('fulltext')"
 						:aria-expanded="$store.options.view === 'fulltext'"
 						@click="toggleView('fulltext')"
 					>
@@ -332,7 +332,7 @@ export default {
 						type="button"
 						class="tify-header-button"
 						:class="{ '-active': $store.options.view === 'thumbnails' }"
-						:aria-controls="$store.getId('thumbnails')"
+						:aria-controls="$getId('thumbnails')"
 						:aria-expanded="$store.options.view === 'thumbnails'"
 						@click="toggleView('thumbnails')"
 					>
@@ -345,7 +345,7 @@ export default {
 						type="button"
 						class="tify-header-button"
 						:class="{ '-active': $store.options.view === 'toc' }"
-						:aria-controls="$store.getId('toc')"
+						:aria-controls="$getId('toc')"
 						:aria-expanded="$store.options.view === 'toc'"
 						@click="toggleView('toc')"
 					>
@@ -357,7 +357,7 @@ export default {
 						type="button"
 						class="tify-header-button"
 						:class="{ '-active': $store.options.view === 'info' }"
-						:aria-controls="$store.getId('info')"
+						:aria-controls="$getId('info')"
 						:aria-expanded="$store.options.view === 'info'"
 						@click="toggleView('info')"
 					>
@@ -370,7 +370,7 @@ export default {
 						type="button"
 						class="tify-header-button"
 						:class="{ '-active': $store.options.view === 'export' }"
-						:aria-controls="$store.getId('export')"
+						:aria-controls="$getId('export')"
 						:aria-expanded="$store.options.view === 'export'"
 						@click="toggleView('export')"
 					>
@@ -383,7 +383,7 @@ export default {
 						type="button"
 						class="tify-header-button"
 						:class="{ '-active': $store.options.view === 'collection' }"
-						:aria-controls="$store.getId('collection')"
+						:aria-controls="$getId('collection')"
 						:aria-expanded="$store.options === 'collection'"
 						@click="toggleView('collection')"
 					>
@@ -400,7 +400,7 @@ export default {
 						type="button"
 						class="tify-header-button -icon-only"
 						:class="{ '-active': $store.options.view === 'help' }"
-						:aria-controls="$store.getId('help')"
+						:aria-controls="$getId('help')"
 						:aria-expanded="$store.options.view === 'help'"
 						:title="$translate('Help')"
 						:aria-label="$translate('Help')"
diff --git a/src/components/CollectionNode.vue b/src/components/CollectionNode.vue
index b3ffacda..ea8337a9 100644
--- a/src/components/CollectionNode.vue
+++ b/src/components/CollectionNode.vue
@@ -1,4 +1,6 @@
 <script>
+import { useId } from 'vue';
+
 export default {
 	name: 'CollectionNode',
 	props: {
@@ -11,9 +13,13 @@ export default {
 		return {
 			children: null,
 			expanded: false,
-			id: this.$store.getId(`collection-node-${Math.floor(Math.random() * 1e12)}`),
 		};
 	},
+	computed: {
+		id() {
+			return this.$getId(useId());
+		},
+	},
 	methods: {
 		toggleChildren() {
 			if (this.expanded) {
diff --git a/src/components/PageSelect.vue b/src/components/PageSelect.vue
index 5cb4dcd3..bfa549d6 100644
--- a/src/components/PageSelect.vue
+++ b/src/components/PageSelect.vue
@@ -138,7 +138,7 @@ export default {
 		<button
 			type="button"
 			class="tify-page-select-button"
-			:aria-controls="$store.getId('dropdown')"
+			:aria-controls="$getId('page-select-dropdown')"
 			:aria-expanded="isOpen"
 			@click="toggleDropdown()"
 		>
@@ -149,7 +149,7 @@ export default {
 
 		<div
 			v-show="isOpen"
-			:id="$store.getId('dropdown')"
+			:id="$getId('page-select-dropdown')"
 			key="dropdown"
 			class="tify-page-select-dropdown"
 			@click.stop
diff --git a/src/components/TocList.vue b/src/components/TocList.vue
index 9f949f9d..5418055a 100644
--- a/src/components/TocList.vue
+++ b/src/components/TocList.vue
@@ -1,4 +1,6 @@
 <script>
+import { useId } from 'vue';
+
 export default {
 	name: 'TocList',
 	props: {
@@ -23,9 +25,13 @@ export default {
 				&& this.structures[0].items?.some((item) => item.items)
 				? [true]
 				: [],
-			id: this.$store.getId(`toc-list-${Math.floor(Math.random() * 1e12)}`),
 		};
 	},
+	computed: {
+		id() {
+			return this.$getId(useId());
+		},
+	},
 	methods: {
 		// TODO: Add unit test
 		getFirstPage(structure) {
diff --git a/src/components/ViewExport.vue b/src/components/ViewExport.vue
index 3c74dd82..9726ce14 100644
--- a/src/components/ViewExport.vue
+++ b/src/components/ViewExport.vue
@@ -117,7 +117,7 @@ export default {
 					type="button"
 					class="tify-export-toggle"
 					:class="{ '-close': perElementPdfLinksVisible }"
-					:aria-controls="$store.getId('export-pdf-list')"
+					:aria-controls="$getId('export-pdf-list')"
 					:aria-expanded="perElementPdfLinksVisible"
 					@click="perElementPdfLinksVisible = !perElementPdfLinksVisible"
 				>
@@ -131,7 +131,7 @@ export default {
 				</button>
 				<div
 					v-show="perElementPdfLinksVisible"
-					:id="$store.getId('export-pdf-list')"
+					:id="$getId('export-pdf-list')"
 					class="tify-export-toc"
 				>
 					<h4>{{ $translate('PDFs for each element') }}</h4>
diff --git a/src/components/ViewScan.vue b/src/components/ViewScan.vue
index d3bbed4e..ce440187 100644
--- a/src/components/ViewScan.vue
+++ b/src/components/ViewScan.vue
@@ -545,7 +545,7 @@ export default {
 					// same ID "overlay-wrapper" too all wrapper elements. The ID can
 					// be removed once this issue is resolved:
 					// https://github.com/openseadragon/openseadragon/issues/2682
-					element.id = this.$store.getId(`overlay-${page}-${annotationIndex}`);
+					element.id = this.$getId(`overlay-${page}-${annotationIndex}`);
 
 					this.viewer.addOverlay({
 						element,
@@ -684,7 +684,7 @@ export default {
 					:class="{ '-active': filtersActive }"
 					:title="$translate('Toggle image filters')"
 					:aria-label="$translate('Toggle image filters')"
-					:aria-controls="$store.getId('filters')"
+					:aria-controls="$getId('filters')"
 					:aria-expanded="filtersVisible"
 					@click="filtersVisible = !filtersVisible"
 				>
@@ -692,7 +692,7 @@ export default {
 				</button>
 				<div
 					v-show="filtersVisible"
-					:id="$store.getId('filters')"
+					:id="$getId('filters')"
 					class="tify-scan-filters-popup"
 				>
 					<h3 class="tify-sr-only">
diff --git a/src/main.js b/src/main.js
index e733a424..aa7a9e57 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import defaultOptions from './config';
 
 import api from './plugins/api';
 import i18n from './plugins/i18n';
+import id from './plugins/id';
 import store from './plugins/store';
 
 window.Tify = function Tify(userOptions = {}) {
@@ -35,6 +36,7 @@ window.Tify = function Tify(userOptions = {}) {
 	})
 		.use(api, { instance })
 		.use(i18n)
+		.use(id)
 		.use(store, { options: this.options });
 
 	// TODO: Add test
diff --git a/src/plugins/id.js b/src/plugins/id.js
new file mode 100644
index 00000000..1fca3878
--- /dev/null
+++ b/src/plugins/id.js
@@ -0,0 +1,11 @@
+export default {
+	install: (app) => {
+		// Crypto is only available in newer browsers and with HTTPS
+		const appId = crypto?.randomUUID
+			? crypto.randomUUID()
+			: Math.random().toString().slice(2);
+
+		// eslint-disable-next-line no-param-reassign
+		app.config.globalProperties.$getId = (label) => `${appId}-${label}`;
+	},
+};
diff --git a/src/plugins/store.js b/src/plugins/store.js
index 7e038f57..50bd0361 100644
--- a/src/plugins/store.js
+++ b/src/plugins/store.js
@@ -47,9 +47,7 @@ function convertManifest(originalManifest) {
 	return manifest;
 }
 
-function Store(args) {
-	const instanceId = `tify-${Math.floor(Math.random() * Date.now())}`;
-
+function Store(args = {}) {
 	const store = reactive({
 		annotations: [],
 		annotationsAvailable: null,
@@ -288,9 +286,6 @@ function Store(args) {
 
 			return result;
 		},
-		getId(postfix) {
-			return instanceId + (postfix ? `-${postfix}` : '');
-		},
 		getPageLabel(number, labelObject) {
 			const label = store.localize(labelObject, '');
 
diff --git a/tests/e2e/support/e2e.js b/tests/e2e/support/e2e.js
index ddef647d..5a9b5e41 100644
--- a/tests/e2e/support/e2e.js
+++ b/tests/e2e/support/e2e.js
@@ -17,6 +17,12 @@ afterEach(() => {
 				],
 				'prefer-native-element': 'off',
 				'require-sri': 'off',
+				'valid-id': [
+					'error',
+					{
+						relaxed: true,
+					},
+				],
 			},
 		},
 		{
diff --git a/tests/unit/components/PageSelect.spec.js b/tests/unit/components/PageSelect.spec.js
index a9af59e5..e9b543da 100644
--- a/tests/unit/components/PageSelect.spec.js
+++ b/tests/unit/components/PageSelect.spec.js
@@ -4,6 +4,7 @@ import { mount } from '@vue/test-utils';
 import PageSelect from '../../../src/components/PageSelect.vue';
 
 import i18n from '../../../src/plugins/i18n';
+import id from '../../../src/plugins/id';
 import store from '../../../src/plugins/store';
 
 import manifest from '../../iiif-api/data/manifests/utrecht-1874-325480.json';
@@ -13,6 +14,7 @@ describe('PageSelect', () => {
 		global: {
 			plugins: [
 				i18n,
+				id,
 				[store, {
 					manifest,
 					options: {
diff --git a/tests/unit/plugins/id.spec.js b/tests/unit/plugins/id.spec.js
new file mode 100644
index 00000000..3394604a
--- /dev/null
+++ b/tests/unit/plugins/id.spec.js
@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+
+import id from '../../../src/plugins/id';
+
+const app = { config: { globalProperties: {} } };
+id.install(app);
+
+describe('getId', () => {
+	it('generates unique IDs', () => {
+		expect(app.config.globalProperties.$getId('label')).toMatch(/[a-z0-9-]{36}-label/);
+	});
+});

From 995587b65d1acac8f13283582740bd4e0b725890 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Sat, 5 Jul 2025 00:05:58 +0200
Subject: [PATCH 11/12] Introduce @vueuse/core for fullscreen handling

---
 package-lock.json            | 49 +++++++++++++++++++++++
 package.json                 |  1 +
 src/components/AppHeader.vue | 76 +++++-------------------------------
 3 files changed, 59 insertions(+), 67 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ad39ba20..a40ab4b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@vitest/eslint-plugin": "^1.1.28",
         "@vue/eslint-config-airbnb": "^8.0.0",
         "@vue/test-utils": "^2.4.6",
+        "@vueuse/core": "^13.5.0",
         "chalk": "^5.4.1",
         "click-outside-vue3": "^4.0.1",
         "cypress": "^14.0.3",
@@ -2226,6 +2227,13 @@
       "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
@@ -2832,6 +2840,47 @@
         "vue-component-type-helpers": "^2.0.0"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.5.0.tgz",
+      "integrity": "sha512-wV7z0eUpifKmvmN78UBZX8T7lMW53Nrk6JP5+6hbzrB9+cJ3jr//hUlhl9TZO/03bUkMK6gGkQpqOPWoabr72g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.5.0",
+        "@vueuse/shared": "13.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.5.0.tgz",
+      "integrity": "sha512-euhItU3b0SqXxSy8u1XHxUCdQ8M++bsRs+TYhOLDU/OykS7KvJnyIFfep0XM5WjIFry9uAPlVSjmVHiqeshmkw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.5.0.tgz",
+      "integrity": "sha512-K7GrQIxJ/ANtucxIXbQlUHdB0TPA8c+q5i+zbrjxuhJCnJ9GtBg75sBSnvmLSxHKPg2Yo8w62PWksl9kwH0Q8g==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
diff --git a/package.json b/package.json
index c338eda6..53d2f923 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@vitest/eslint-plugin": "^1.1.28",
     "@vue/eslint-config-airbnb": "^8.0.0",
     "@vue/test-utils": "^2.4.6",
+    "@vueuse/core": "^13.5.0",
     "chalk": "^5.4.1",
     "click-outside-vue3": "^4.0.1",
     "cypress": "^14.0.3",
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 3e3b43e3..9f677db6 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,4 +1,5 @@
 <script>
+import { useFullscreen } from '@vueuse/core';
 import vClickOutside from 'click-outside-vue3';
 
 import { preventEvent } from '../modules/keyboard';
@@ -14,14 +15,10 @@ export default {
 	data() {
 		return {
 			controlsVisible: false,
-			fullscreenActive: false,
-			screen: this.$store.rootElement.parentNode,
+			fullscreen: useFullscreen(this.$store.rootElement.parentNode),
 		};
 	},
 	computed: {
-		fullscreenSupported() {
-			return document.fullscreenElement === null || document.webkitFullscreenElement === null;
-		},
 		title() {
 			const nbsp = String.fromCharCode(160);
 			return (
@@ -35,16 +32,10 @@ export default {
 	created() {
 		this.$api.expose(this.setView);
 		this.$api.expose(this.toggleDoublePage);
-		this.$api.expose(this.toggleFullscreen);
+		this.$api.expose(this.fullscreen.toggle);
 	},
 	mounted() {
 		this.$store.rootElement.addEventListener('keydown', this.onKeyDown);
-
-		// NOTE: Fullscreen state cannot be computed
-		const vendorPrefixes = ['', 'moz', 'webkit'];
-		vendorPrefixes.forEach((prefix) => {
-			document.addEventListener(`${prefix}fullscreenchange`, this.toggleFullscreenActive);
-		});
 	},
 	beforeUnmount() {
 		this.$store.rootElement.removeEventListener('keydown', this.onKeyDown);
@@ -53,24 +44,6 @@ export default {
 		closeControlsPopup() {
 			this.controlsVisible = false;
 		},
-		detectFullscreen() {
-			let fullscreenAPI;
-
-			// fullscreenAPI is set to the browser's implementation of the fullscreen API
-			// (if supported). If the fullscreen API isn't supported, fullscreenAPI is set to false.
-			switch (null) {
-				case document.fullscreenElement:
-					fullscreenAPI = document.fullscreenElement;
-					break;
-				case document.webkitFullscreenElement:
-					fullscreenAPI = document.webkitFullscreenElement;
-					break;
-				default:
-					fullscreenAPI = false;
-			}
-
-			return fullscreenAPI;
-		},
 		onKeyDown(event) {
 			if (preventEvent(event)) {
 				return;
@@ -125,7 +98,7 @@ export default {
 					}
 					break;
 				case 'f':
-					this.toggleFullscreen();
+					this.fullscreen.toggle();
 					break;
 				default:
 			}
@@ -189,35 +162,6 @@ export default {
 			this.$store.updateOptions({ pages: newPages });
 			return newPages;
 		},
-		toggleFullscreen(forced) {
-			if ((this.fullscreenActive && forced !== true) || forced === false) {
-				if (document.exitFullscreen) {
-					document.exitFullscreen();
-				} else if (document.mozCancelFullScreen) {
-					// Firefox
-					document.mozCancelFullScreen();
-				} else if (document.webkitExitFullscreen) {
-					// Chrome, Safari and Opera
-					document.webkitExitFullscreen();
-				}
-				return false;
-			}
-
-			if (this.screen.requestFullscreen) {
-				this.screen.requestFullscreen();
-			} else if (this.screen.mozRequestFullScreen) {
-				// Firefox
-				this.screen.mozRequestFullScreen();
-			} else if (this.screen.webkitRequestFullscreen) {
-				// Chrome, Safari and Opera
-				this.screen.webkitRequestFullscreen();
-			}
-
-			return true;
-		},
-		toggleFullscreenActive() {
-			this.fullscreenActive = !this.fullscreenActive;
-		},
 		toggleView(name) {
 			this.closeControlsPopup();
 
@@ -392,10 +336,7 @@ export default {
 					</button>
 				</div>
 
-				<div
-					v-if="fullscreenSupported"
-					class="tify-header-button-group -view"
-				>
+				<div class="tify-header-button-group -view">
 					<button
 						type="button"
 						class="tify-header-button -icon-only"
@@ -409,13 +350,14 @@ export default {
 						<IconHelpCircleOutline />
 						{{ $translate('Help') }}
 					</button>
+
 					<button
-						v-if="!fullscreenActive"
+						v-if="!fullscreen.isFullscreen"
 						type="button"
 						class="tify-header-button -icon-only"
 						:title="$translate('Fullscreen')"
 						:aria-label="$translate('Fullscreen')"
-						@click="toggleFullscreen"
+						@click="fullscreen.toggle()"
 					>
 						<IconFullscreen />
 						{{ $translate('Fullscreen') }}
@@ -426,7 +368,7 @@ export default {
 						class="tify-header-button -icon-only"
 						:title="$translate('Exit fullscreen')"
 						:aria-label="$translate('Exit fullscreen')"
-						@click="toggleFullscreen"
+						@click="fullscreen.toggle()"
 					>
 						<IconFullscreenExit />
 						{{ $translate('Exit fullscreen') }}

From 853d4989753fbfd5d8b5706bf827415210aa2f65 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 6 Aug 2025 17:11:34 +0000
Subject: [PATCH 12/12] Bump tmp from 0.2.3 to 0.2.4

Bumps [tmp](https://github.com/raszi/node-tmp) from 0.2.3 to 0.2.4.
- [Changelog](https://github.com/raszi/node-tmp/blob/master/CHANGELOG.md)
- [Commits](https://github.com/raszi/node-tmp/compare/v0.2.3...v0.2.4)

---
updated-dependencies:
- dependency-name: tmp
  dependency-version: 0.2.4
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a40ab4b4..2e54fd45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10474,9 +10474,9 @@
       "license": "MIT"
     },
     "node_modules/tmp": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
-      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.4.tgz",
+      "integrity": "sha512-UdiSoX6ypifLmrfQ/XfiawN6hkjSBpCjhKxxZcWlUUmoXLaCKQU0bx4HF/tdDK2uzRuchf1txGvrWBzYREssoQ==",
       "dev": true,
       "license": "MIT",
       "engines": {