@janga/norna 0.7.24 → 0.7.26

package/src/styles/foundations.css

@@ -23,6 +23,9 @@
 	--color-warning-accent: var(--palette-light-warning-accent, #7a5600);
 	--color-warning-surface: var(--palette-light-warning-surface, #fff4c2);
 	--color-warning-text: var(--palette-light-warning-text, #3b2b00);
+	--color-caution-accent: var(--palette-light-caution-accent, #a34b00);
+	--color-caution-surface: var(--palette-light-caution-surface, #ffead6);
+	--color-caution-text: var(--palette-light-caution-text, #542300);
 	--color-error-accent: var(--palette-light-error-accent, #a12d2d);
 	--color-error-surface: var(--palette-light-error-surface, #fce8e8);
 	--color-error-text: var(--palette-light-error-text, #5f1616);
@@ -113,6 +116,9 @@
 	--color-warning-accent: var(--palette-dark-warning-accent);
 	--color-warning-surface: var(--palette-dark-warning-surface);
 	--color-warning-text: var(--palette-dark-warning-text);
+	--color-caution-accent: var(--palette-dark-caution-accent);
+	--color-caution-surface: var(--palette-dark-caution-surface);
+	--color-caution-text: var(--palette-dark-caution-text);
 	--color-error-accent: var(--palette-dark-error-accent);
 	--color-error-surface: var(--palette-dark-error-surface);
 	--color-error-text: var(--palette-dark-error-text);
@@ -158,6 +164,9 @@
 		--color-warning-accent: var(--palette-dark-warning-accent);
 		--color-warning-surface: var(--palette-dark-warning-surface);
 		--color-warning-text: var(--palette-dark-warning-text);
+		--color-caution-accent: var(--palette-dark-caution-accent);
+		--color-caution-surface: var(--palette-dark-caution-surface);
+		--color-caution-text: var(--palette-dark-caution-text);
 		--color-error-accent: var(--palette-dark-error-accent);
 		--color-error-surface: var(--palette-dark-error-surface);
 		--color-error-text: var(--palette-dark-error-text);

package/src/styles/media.css

@@ -25,7 +25,7 @@
 	margin-bottom: var(--space-content-block-gap);
 }
 
-.section-body > :is(.image-stack, .managed-images, .card-list) {
+.content-block-note-lane-boundary {
 	clear: both;
 }
 
@@ -191,6 +191,7 @@
 
 .card-list-content p:not(.card-list-badge) {
 	margin: 0;
+	white-space: pre-line;
 	font-size: calc(var(--section-body-font-size-desktop, 1rem) * var(--card-list-text-scale));
 	line-height: var(--section-body-line-height, 1.5);
 }
@@ -215,7 +216,7 @@
 	min-width: 0;
 }
 
-@media (min-width: 701px) {
+@media (min-width: 961px) {
 	:root[data-image-presentation='prose-aligned'] .site-page-layout-tree .section-body {
 		grid-template-columns: minmax(0, var(--layout-reading-width)) minmax(0, 1fr);
 	}
@@ -227,16 +228,44 @@
 
 .managed-image-item {
 	display: grid;
-	gap: 0.55rem;
+	gap: 0;
 	align-content: start;
 	margin: 0;
 }
 
+.image-stack {
+	--image-caption-inline-gap: 0.75rem;
+}
+
 .image-stack .managed-image-item {
 	width: var(--layout-stack-item-width);
 	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
 }
 
+@media (min-width: 1101px) {
+	.image-stack .managed-image-item[data-image-caption-placement='persistent'] {
+		position: relative;
+		padding-block-end: var(--image-persistent-caption-reserve, 0);
+	}
+
+	.image-stack .managed-image-item[data-image-caption-placement='persistent'] > .image-meta {
+		position: absolute;
+		inset-block-start: var(--image-persistent-caption-block-start, 0);
+		inset-block-end: var(--image-persistent-caption-block-end, 0);
+		inset-inline-start: var(--image-persistent-caption-inline-start);
+		width: var(--image-persistent-caption-width, var(--section-note-width, 12rem));
+		margin: 0;
+		text-align: start;
+	}
+
+	.image-stack .managed-image-item[data-image-caption-placement='persistent'] > .image-meta .image-details {
+		position: sticky;
+		top: calc(var(--site-top-anchor-offset) + 1rem);
+		display: block;
+		padding: 0;
+	}
+}
+
 .managed-image-frame {
 	display: grid;
 	width: var(--layout-media-width);
@@ -246,6 +275,57 @@
 	place-items: center;
 }
 
+.managed-image-inspection-link {
+	position: relative;
+	display: grid;
+	width: min(100%, var(--managed-image-intrinsic-width, 100%));
+	max-width: 100%;
+	place-items: center;
+	color: inherit;
+}
+
+:root[data-image-presentation='centered-fit'] .managed-image-inspection-link {
+	width: min(
+		100%,
+		var(--managed-image-intrinsic-width, 100%),
+		calc(var(--image-max-height) * var(--managed-image-aspect-ratio, 100))
+	);
+}
+
+.managed-image-inspection-link:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 0.35rem;
+	box-shadow: 0 0 0 calc(var(--focus-indicator-width) * 2) var(--color-focus-ring-contrast);
+}
+
+.managed-image-inspection-link[data-image-inspection-available='true'] {
+	cursor: zoom-in;
+}
+
+.managed-image-inspection-affordance {
+	position: absolute;
+	top: 0.65rem;
+	right: 0.65rem;
+	display: none;
+	width: 2.25rem;
+	height: 2.25rem;
+	place-items: center;
+	border-radius: 999px;
+	background: var(--color-control-background);
+	box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 18%);
+	color: var(--color-control-text);
+	pointer-events: none;
+}
+
+.managed-image-inspection-link[data-image-inspection-available='true'] .managed-image-inspection-affordance {
+	display: grid;
+}
+
+.managed-image-inspection-affordance svg {
+	width: 1.125rem;
+	height: 1.125rem;
+}
+
 .managed-image {
 	display: block;
 	width: auto;
@@ -257,6 +337,111 @@
 	object-fit: contain;
 }
 
+:root[data-image-inspector-open='true'] {
+	overflow: hidden;
+}
+
+.image-inspector {
+	width: min(calc(100% - 2rem), 96rem);
+	height: calc(100svh - 2rem);
+	max-width: none;
+	max-height: none;
+	margin: auto;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-large, 8px);
+	padding: 0;
+	background: var(--color-page);
+	color: var(--color-primary-text);
+	box-shadow: 0 1rem 3rem rgb(0 0 0 / 28%);
+	overflow: hidden;
+}
+
+.image-inspector::backdrop {
+	background: rgb(0 0 0 / 62%);
+}
+
+.image-inspector-layout {
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	gap: 0.75rem;
+	height: 100%;
+	padding: 0.75rem;
+}
+
+.image-inspector-controls {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.5rem;
+}
+
+.image-inspector-controls button {
+	display: grid;
+	width: 2.75rem;
+	height: 2.75rem;
+	place-items: center;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0;
+	background: var(--color-surface-soft-background);
+	color: var(--color-surface-soft-text);
+	cursor: pointer;
+}
+
+.image-inspector-controls button:hover,
+.image-inspector-controls button:active {
+	background: var(--color-surface-emphasis-background);
+	color: var(--color-surface-emphasis-text);
+}
+
+.image-inspector-controls button:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 2px;
+	box-shadow: 0 0 0 calc(var(--focus-indicator-width) * 2) var(--color-focus-ring-contrast);
+}
+
+.image-inspector-controls [hidden] {
+	display: none;
+}
+
+.image-inspector-media {
+	display: grid;
+	min-width: 0;
+	min-height: 0;
+	place-items: center;
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+.image-inspector-media img {
+	display: block;
+	width: auto;
+	height: auto;
+	margin: auto;
+}
+
+.image-inspector-media[data-image-inspector-mode='fit'] img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.image-inspector-media[data-image-inspector-mode='actual'] {
+	display: block;
+}
+
+.image-inspector-media[data-image-inspector-mode='actual'] img {
+	max-width: none;
+	max-height: none;
+}
+
+.image-inspector-caption {
+	max-width: 72ch;
+	margin: 0 auto;
+	color: var(--color-secondary-text);
+	font-size: 0.95rem;
+	line-height: 1.5;
+	text-align: center;
+}
+
 .managed-image.managed-image-landscape {
 	width: 100%;
 	max-height: none;
@@ -490,6 +675,10 @@
 	text-align: var(--section-caption-align-desktop, center);
 }
 
+.image-meta .image-details > span {
+	white-space: pre-line;
+}
+
 :root[data-image-presentation='prose-aligned'] .image-stack .image-meta {
 	margin-inline: 0 auto;
 }

package/src/styles/navigation.css

@@ -99,7 +99,7 @@
 	transition: border-color 0.18s ease, background-color 0.18s ease;
 }
 
-:root[data-focus-reading='on'] .display-settings summary {
+:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .display-settings summary {
 	grid-template-columns: auto auto;
 	gap: 0.4rem;
 	width: auto;
@@ -142,7 +142,7 @@
 	white-space: nowrap;
 }
 
-:root[data-focus-reading='on'] .display-settings-focus-status {
+:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .display-settings-focus-status {
 	display: block;
 }
 
@@ -277,8 +277,7 @@
 .site-brand,
 .site-nav a,
 .mobile-nav-menu summary,
-.mobile-nav-panel a,
-.site-nav-submenu a {
+.mobile-nav-panel a {
 	color: currentColor;
 	text-decoration: none;
 }
@@ -321,8 +320,66 @@
 
 .site-nav-item {
 	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.top-page-menu > summary {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--target-size-minimum);
+	min-height: var(--target-size-minimum);
+	list-style: none;
+	cursor: pointer;
+}
+
+.top-page-menu > summary::-webkit-details-marker { display: none; }
+.top-page-menu > summary svg { width: 1rem; height: 1rem; }
+.top-page-menu[open] > summary svg { transform: rotate(180deg); }
+.top-page-menu > summary:hover { color: var(--color-accent); }
+.top-page-menu > summary:focus-visible { outline: 2px solid var(--color-focus-ring); }
+
+.top-page-panel {
+	position: absolute;
+	inset-block-start: 100%;
+	inset-inline-end: 0;
+	z-index: 10;
+	width: max-content;
+	min-width: 12rem;
+	max-width: min(24rem, calc(100vw - (var(--content-gutter) * 2)));
+	max-height: calc(100svh - var(--site-top-anchor-offset, 8rem) - 1rem);
+	overflow: auto;
+	border: 1px solid var(--color-border);
+	padding: 0.75rem;
+	background: var(--site-top-background-color, var(--color-page));
+	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.16);
+	transform: translateX(var(--top-page-panel-shift, 0px));
+}
+
+.site-nav-item:first-child .top-page-panel {
+	inset-inline-start: 0;
+	inset-inline-end: auto;
+}
+
+.site-nav .top-page-panel a {
+	padding: 0.4rem;
+	font-size: 0.875rem;
+	letter-spacing: 0;
+	line-height: 1.4;
+	text-transform: none;
+	overflow-wrap: break-word;
 }
 
+.top-page-panel a:is(:hover, :focus-visible, [aria-current='location']) {
+	text-decoration: underline;
+	text-underline-offset: 0.2em;
+}
+
+.top-page-children:not(:first-child) { border-top: 1px solid var(--color-border); margin-top: 0.5rem; }
+.top-page-children > p { margin: 0.5rem 0; font-size: 0.75rem; }
+.top-page-children .navigation-page-tree .navigation-page-tree { padding-inline-start: 1rem; }
+
 .site-nav a,
 .mobile-nav-panel a {
 	display: block;
@@ -353,81 +410,178 @@
 	text-underline-offset: 0.35em;
 }
 
-.site-nav-submenu {
-	position: absolute;
-	top: 100%;
-	left: 50%;
-	z-index: 10;
-	width: max-content;
-	max-width: min(24rem, calc(100vw - (var(--content-gutter) * 2)));
-	min-width: 12rem;
-	padding-top: 0.7rem;
-	opacity: 0;
-	visibility: hidden;
-	pointer-events: none;
-	transform: translate(-50%, -0.35rem);
-	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
+
+.mobile-nav-menu {
+	display: none;
 }
 
-.site-nav-submenu > nav {
-	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
-	padding: 0.8rem 1rem;
-	background: var(--site-top-background-color, var(--color-page));
-	box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.22);
+.mobile-nav-trigger-icon {
+	display: block;
+	width: 1rem;
+	height: 1rem;
+	stroke-width: 2;
 }
 
-.site-nav-submenu ul {
-	display: grid;
-	gap: 0.65rem;
+.mobile-nav-trigger-close,
+.mobile-nav-menu[open] .mobile-nav-trigger-open {
+	display: none;
 }
 
-.site-nav-submenu .navigation-page-tree-submenu {
-	gap: 0.75rem;
+.mobile-nav-menu[open] .mobile-nav-trigger-close {
+	display: block;
 }
 
-.site-nav-submenu .navigation-page-tree-submenu .navigation-page-tree-submenu {
-	margin: 0.15rem 0 0 0.35rem;
-	border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent);
-	padding-left: 0.75rem;
+.mobile-nav-panel-actions {
+	position: sticky;
+	top: 0;
+	z-index: 5;
+	display: flex;
+	justify-content: flex-end;
+	width: min(100%, 32rem);
+	margin: 0 auto 0.5rem;
+	background: var(--site-top-background-color, var(--color-page));
 }
 
-.site-nav-submenu .navigation-page-link {
-	font-weight: 650;
+.mobile-nav-close {
+	display: grid;
+	width: 2.75rem;
+	height: 2.75rem;
+	place-items: center;
+	border: 1px solid currentColor;
+	border-radius: 50%;
+	padding: 0;
+	background: transparent;
+	color: currentColor;
+	cursor: pointer;
 }
 
-.site-nav-submenu a {
-	font-size: 0.76rem;
-	letter-spacing: 0.03em;
-	line-height: 1.3;
-	text-transform: none;
-	white-space: normal;
+.mobile-nav-close:hover,
+.mobile-nav-close:focus-visible {
+	background: color-mix(in srgb, currentColor 9%, transparent);
 }
 
-.site-nav-submenu a:hover,
-.site-nav-submenu a:focus-visible,
-.site-nav-submenu a[aria-current='location'] {
-	color: var(--site-top-text-color, var(--color-primary-text));
-	text-decoration: underline;
-	text-underline-offset: 0.25em;
+.mobile-nav-close:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 2px;
 }
 
-.site-nav-item:hover .site-nav-submenu,
-.site-nav-item:focus-within .site-nav-submenu {
-	opacity: 1;
-	visibility: visible;
-	pointer-events: auto;
-	transform: translate(-50%, 0);
+.mobile-nav-close svg {
+	width: 1.1rem;
+	height: 1.1rem;
+	stroke-width: 2;
 }
 
-.site-nav-item[data-submenu-dismissed='true'] .site-nav-submenu {
-	opacity: 0;
-	visibility: hidden;
-	pointer-events: none;
-	transform: translate(-50%, -0.35rem);
+.mobile-navigation-open {
+	overflow: hidden;
 }
 
-.mobile-nav-menu {
-	display: none;
+@media (min-width: 701px) {
+	.mobile-nav-menu {
+		position: relative;
+		flex: 0 0 auto;
+		margin-left: auto;
+	}
+
+	:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .mobile-nav-menu {
+		display: block;
+	}
+
+	.mobile-nav-menu > summary {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-height: 2.75rem;
+		border: 1px solid currentColor;
+		padding: 0.55rem 0.75rem;
+		color: var(--site-top-text-color, var(--color-primary-text));
+		font-size: 0.72rem;
+		font-weight: 700;
+		letter-spacing: 0.1em;
+		line-height: 1;
+		list-style: none;
+		text-transform: uppercase;
+	}
+
+	.mobile-nav-menu > summary::-webkit-details-marker {
+		display: none;
+	}
+
+	.mobile-nav-panel {
+		position: fixed;
+		top: var(--site-top-anchor-offset);
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 20;
+		width: 100%;
+		max-height: none;
+		border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
+		padding: clamp(1.25rem, 5vw, 2rem) var(--content-gutter) max(1.5rem, env(safe-area-inset-bottom));
+		background: var(--site-top-background-color, var(--color-page));
+		box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 0.32);
+		color: var(--site-top-text-color, var(--color-text));
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+
+	.mobile-site-nav {
+		width: min(100%, 32rem);
+		margin: 0 auto;
+	}
+
+	.mobile-nav-panel h2 {
+		margin: 0 0 1.25rem;
+		font-size: 1.4rem;
+		font-weight: 650;
+		letter-spacing: 0;
+		line-height: 1.2;
+		text-transform: none;
+	}
+
+	.mobile-nav-panel .navigation-tree-controls {
+		position: static;
+		margin-bottom: 1rem;
+		padding-bottom: 1rem;
+		background: var(--site-top-background-color, var(--color-page));
+	}
+
+	.mobile-nav-panel a {
+		font-family: inherit;
+		font-size: 0.9rem;
+		letter-spacing: 0;
+		line-height: 1.4;
+		text-transform: none;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-link {
+		display: block;
+		border-radius: var(--corner-radius-small, 2px);
+		padding: 0.45rem 0.3rem 0.45rem var(--tree-disclosure-offset);
+		color: var(--color-secondary-text);
+		text-decoration: none;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-branch-content {
+		margin: 0.1rem 0 0.2rem 0.25rem;
+		border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+		padding-left: 0.75rem;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-tree-mobile {
+		margin: 0.15rem 0;
+		border-left: 0;
+		padding-left: 0;
+	}
+}
+
+@media (min-width: 701px) and (max-width: 960px) {
+	.site-top[data-navigation-mode='tree'] .site-nav {
+		display: none;
+	}
+
+	.site-top[data-navigation-mode='tree'] .mobile-nav-menu {
+		display: block;
+	}
 }
 
 .page-nav {
@@ -440,7 +594,7 @@
 
 .page-nav-inner {
 	display: flex;
-	align-items: center;
+	align-items: baseline;
 	justify-content: center;
 	gap: clamp(1.1rem, 2.5vw, 2rem);
 	width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));