@janga/norna 0.7.25 → 0.7.26

package/src/styles/content.css

@@ -197,6 +197,90 @@ ul {
 	font-size: clamp(0.96rem, 0.94rem + 0.08vw, 1rem);
 }
 
+.content-tabs {
+	display: flow-root;
+	clear: both;
+	min-width: 0;
+	margin-block: var(--space-content-block-gap, 1.5rem);
+}
+
+.content-tabs-controls {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem;
+	width: var(--layout-reading-width);
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+	border-bottom: 1px solid var(--color-border);
+	margin-bottom: 1rem;
+}
+
+.content-tabs-controls[hidden],
+.content-tab-panel[hidden] { display: none; }
+
+.content-tabs-controls button {
+	font: inherit;
+	color: inherit;
+	background: transparent;
+	border: 0;
+	border-bottom: 2px solid transparent;
+	padding: 0.65rem 0.9rem;
+	min-height: 44px;
+	max-width: 100%;
+	overflow-wrap: anywhere;
+	cursor: pointer;
+}
+
+.content-tabs-controls button[aria-selected='true'] {
+	border-bottom-color: currentColor;
+	font-weight: 700;
+	background: color-mix(in srgb, currentColor 7%, transparent);
+}
+
+.content-tabs-controls button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
+.content-tabs-controls button:focus-visible,
+.content-tab-panel:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
+.content-tab-panel { display: flow-root; min-width: 0; }
+.content-tab-label {
+	width: var(--layout-reading-width);
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+	font-weight: 700;
+	margin-block: 1.5rem 0.75rem;
+}
+[data-tabs-ready='true'] .content-tab-label { display: none; }
+.content-tab-panel > :first-child + .section-markdown > :first-child { margin-top: 0; }
+
+@media print {
+	.content-tabs-controls { display: none; }
+	.content-tabs .content-tab-panel[hidden] { display: flow-root; }
+	[data-tabs-ready='true'] .content-tab-label { display: block; }
+}
+
+.section-note-paragraph {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	align-items: start;
+	gap: var(--section-body-paragraph-spacing, 0.85em) var(--layout-note-gap);
+	margin-block: 0 var(--section-body-paragraph-spacing, 1em);
+}
+
+.section-markdown .section-note-paragraph > p {
+	margin: 0;
+	min-width: 0;
+}
+
+.section-note-stack {
+	display: grid;
+	gap: 0.75rem;
+	min-width: 0;
+}
+
+.section-note-stack > .section-note {
+	float: none;
+	clear: none;
+	width: 100%;
+	margin: 0;
+}
+
 .section-note {
 	display: grid;
 	grid-template-columns: auto minmax(0, 1fr);
@@ -221,6 +305,11 @@ ul {
 	text-decoration: none;
 }
 
+.section-note-number a {
+	color: inherit;
+	text-decoration: none;
+}
+
 .section-note-ref {
 	display: inline-block;
 	margin-left: 0.03em;
@@ -237,12 +326,12 @@ ul {
 	text-underline-offset: 0.15em;
 }
 
-.section-note:target {
+.section-note:target,
+.section-note.is-reference-highlighted {
 	border-inline-start-color: currentColor;
 	background: color-mix(in srgb, currentColor 6%, transparent);
 }
 
-.section-note-ref:has(+ .section-note:hover) a,
 .section-note-ref a:hover,
 .section-note-ref a:focus-visible {
 	text-decoration-thickness: 0.16em;
@@ -250,6 +339,14 @@ ul {
 
 .section-note-content {
 	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+@media print {
+	.section-note-paragraph {
+		grid-template-columns: minmax(0, 1fr) !important;
+		width: 100% !important;
+	}
 }
 
 .section-markdown {
@@ -359,25 +456,30 @@ ul {
 	color: inherit;
 }
 
+.section-markdown > :is(.norna-table-frame, .code-block) {
+	/* Width probes need final geometry, including with reduced-motion overrides. */
+	transition-property: none;
+	--wide-block-prose-width: 100%;
+	--wide-block-end-width: calc((100cqi + var(--layout-reading-width)) / 2);
+	--wide-block-canvas-width: 100cqi;
+	--wide-block-canvas-inline-offset: calc((var(--layout-reading-width) - 100cqi) / 2);
+}
+
 .section-markdown > .norna-table-frame {
-	--table-prose-width: 100%;
-	--table-end-width: calc((100cqi + var(--layout-reading-width)) / 2);
-	--table-canvas-width: 100cqi;
-	--table-canvas-inline-offset: calc((var(--layout-reading-width) - 100cqi) / 2);
-	width: var(--table-end-width);
+	width: var(--wide-block-end-width);
 }
 
-.section-markdown > .norna-table-frame[data-table-layout='prose'] {
-	width: var(--table-prose-width);
+.section-markdown > :is([data-table-layout='prose'], [data-code-layout='prose']) {
+	width: var(--wide-block-prose-width);
 }
 
-.section-markdown > .norna-table-frame[data-table-layout='end'] {
-	width: var(--table-end-width);
+.section-markdown > :is([data-table-layout='end'], [data-code-layout='end']) {
+	width: var(--wide-block-end-width);
 }
 
-.section-markdown > .norna-table-frame[data-table-layout='canvas'] {
-	width: var(--table-canvas-width);
-	margin-inline-start: var(--table-canvas-inline-offset);
+.section-markdown > :is(.norna-table-frame[data-table-layout='canvas'], .code-block[data-code-layout='canvas']) {
+	width: var(--wide-block-canvas-width);
+	margin-inline-start: var(--wide-block-canvas-inline-offset);
 }
 
 .norna-table-scroll {
@@ -395,14 +497,45 @@ ul {
 	outline-offset: 2px;
 }
 
-.norna-table-navigation {
+.norna-table-frame[data-table-custom-scrollbars='true'] > .norna-table-scroll {
+	scrollbar-width: none;
+	scrollbar-gutter: auto;
+}
+
+.norna-table-frame[data-table-custom-scrollbars='true'] > .norna-table-scroll::-webkit-scrollbar {
+	display: none;
+}
+
+.norna-table-sort-tooltip {
+	position: fixed;
+	z-index: 100;
+	width: max-content;
+	max-width: calc(100vw - 1rem);
+	padding: 0.375rem 0.625rem;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-small, 2px);
+	background: var(--color-surface-emphasis-background);
+	color: var(--color-surface-emphasis-text);
+	font-size: 0.8125rem;
+	line-height: 1.4;
+	overflow-wrap: anywhere;
+}
+
+.norna-table-sort-tooltip[hidden] {
+	display: none;
+}
+
+.norna-table-sticky-context {
 	position: sticky;
 	top: var(--site-top-anchor-offset);
 	z-index: 5;
+	background: var(--section-background-color, var(--color-page));
+}
+
+.norna-table-navigation {
+	position: relative;
 	display: flex;
-	min-height: 2.75rem;
 	align-items: center;
-	justify-content: flex-end;
 	padding: 0;
 	background: var(--section-background-color, var(--color-page));
 	color: inherit;
@@ -413,76 +546,74 @@ ul {
 	display: none;
 }
 
-.norna-table-navigation-buttons {
-	display: flex;
-	gap: 0.125rem;
-	background: transparent;
-	pointer-events: auto;
-}
-
-.norna-table-navigation button {
+.norna-table-scrollbar {
 	position: relative;
-	display: grid;
-	width: 2.75rem;
-	height: 2.75rem;
-	place-items: center;
-	border: 0;
-	border-radius: var(--corner-radius-small, 2px);
-	padding: 0;
-	background: transparent;
-	color: var(--section-secondary-text-color, var(--color-secondary-text));
+	flex: 1;
+	min-width: 2.75rem;
+	height: 1.5rem;
+	pointer-events: auto;
+	touch-action: none;
+	user-select: none;
 	cursor: pointer;
+	border-radius: var(--corner-radius-small, 2px);
 }
 
-.norna-table-navigation button::before {
+.norna-table-scrollbar::before,
+.norna-table-scrollbar-thumb::before {
 	position: absolute;
-	inset: 0.3rem;
-	border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
-	border-radius: var(--corner-radius-small, 2px);
-	background: color-mix(
-		in srgb,
-		var(--color-surface-soft-background) 52%,
-		var(--section-background-color, var(--color-page))
-	);
+	left: 0;
+	right: 0;
+	top: calc(50% - 2px);
+	height: 4px;
+	border-radius: 2px;
 	content: '';
 }
 
-.norna-table-navigation button svg {
-	position: relative;
-	z-index: 1;
+.norna-table-scrollbar::before {
+	background: var(--color-surface-emphasis-background);
 }
 
-.norna-table-navigation button:hover:not(:disabled),
-.norna-table-navigation button:active:not(:disabled) {
-	color: var(--color-surface-emphasis-text);
+.norna-table-scrollbar-thumb {
+	position: absolute;
+	top: 0;
+	height: 100%;
+	cursor: grab;
 }
 
-.norna-table-navigation button:hover:not(:disabled)::before,
-.norna-table-navigation button:active:not(:disabled)::before {
-	border-color: var(--color-border);
-	background: var(--color-surface-emphasis-background);
+.norna-table-scrollbar-thumb::before {
+	background: var(--section-secondary-text-color, var(--color-secondary-text));
 }
 
-.norna-table-navigation 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);
+.norna-table-scrollbar:hover .norna-table-scrollbar-thumb::before,
+.norna-table-scrollbar:focus-visible .norna-table-scrollbar-thumb::before {
+	background: var(--section-text-color, var(--color-text));
+}
+
+.norna-table-scrollbar[data-dragging='true'],
+.norna-table-scrollbar[data-dragging='true'] .norna-table-scrollbar-thumb {
+	cursor: grabbing;
 }
 
-.norna-table-navigation button:disabled {
-	cursor: not-allowed;
-	opacity: 0.42;
+.norna-table-scrollbar:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 2px;
 }
 
-.norna-table-frame:dir(rtl) .norna-table-navigation button svg {
-	transform: scaleX(-1);
+@media (forced-colors: active) {
+	.norna-table-scrollbar::before {
+		background: Canvas;
+		border: 1px solid CanvasText;
+	}
+	.norna-table-scrollbar .norna-table-scrollbar-thumb::before {
+		background: ButtonText !important;
+		forced-color-adjust: none;
+	}
 }
 
 .norna-table-sticky-heading {
 	display: none;
-	position: sticky;
+	position: relative;
 	z-index: 4;
-	top: calc(var(--site-top-anchor-offset) + var(--table-navigation-height, 0px));
 	width: 100%;
 	height: var(--table-sticky-heading-height, 0px);
 	overflow: hidden;
@@ -491,7 +622,7 @@ ul {
 }
 
 .norna-table-frame[data-table-overflow='true'][data-table-sticky-heading='true']
-	> .norna-table-sticky-heading {
+	> .norna-table-sticky-context > .norna-table-sticky-heading {
 	display: block;
 }
 
@@ -517,64 +648,36 @@ ul {
 	color: inherit;
 }
 
-.norna-table-frame::before,
-.norna-table-frame::after {
-	position: absolute;
-	z-index: 3;
-	top: var(--table-navigation-height, 0px);
-	bottom: 0.75rem;
-	width: 2rem;
-	content: "";
-	opacity: 0;
-	pointer-events: none;
-	transition: opacity 120ms ease;
-}
-
-.norna-table-frame::before {
-	inset-inline-start: 0;
-	background: linear-gradient(
-		to right,
-		color-mix(in srgb, var(--section-background-color, var(--color-page)) 98%, transparent),
-		transparent
-	);
-	box-shadow: inset 0.5rem 0 0.7rem -0.65rem color-mix(in srgb, currentColor 62%, transparent);
-}
-
-.norna-table-frame::after {
-	inset-inline-end: 0;
-	background: linear-gradient(
-		to left,
-		color-mix(in srgb, var(--section-background-color, var(--color-page)) 98%, transparent),
-		transparent
-	);
-	box-shadow: inset -0.5rem 0 0.7rem -0.65rem color-mix(in srgb, currentColor 62%, transparent);
+.norna-table-frame[data-table-row-headers='true'] table {
+	--table-row-header-min-width: min(12ch, 40vw);
+	--table-row-header-max-width: min(18rem, 55vw);
 }
 
-.norna-table-frame:dir(rtl)::before {
-	background: linear-gradient(
-		to left,
-		color-mix(in srgb, var(--section-background-color, var(--color-page)) 98%, transparent),
-		transparent
-	);
-	box-shadow: inset -0.5rem 0 0.7rem -0.65rem color-mix(in srgb, currentColor 62%, transparent);
-}
-
-.norna-table-frame:dir(rtl)::after {
-	background: linear-gradient(
-		to right,
-		color-mix(in srgb, var(--section-background-color, var(--color-page)) 98%, transparent),
-		transparent
-	);
-	box-shadow: inset 0.5rem 0 0.7rem -0.65rem color-mix(in srgb, currentColor 62%, transparent);
+.norna-table-frame[data-table-row-headers='true'] :is(
+	thead th:first-child,
+	tbody th[scope='row'],
+	.norna-table-sticky-heading-cell-row-header
+) {
+	min-width: var(--table-row-header-min-width);
+	max-width: var(--table-row-header-max-width);
+	border-inline-end: 1px solid color-mix(in srgb, currentColor 38%, transparent);
+	background: var(--section-background-color, var(--color-page));
+	overflow-wrap: break-word;
+	text-align: start;
 }
 
-.norna-table-frame[data-table-at-end='true']::after {
-	opacity: 0;
+.section-markdown > .norna-table-frame[data-table-row-headers='true'] :is(
+	thead th:first-child,
+	tbody th[scope='row']
+) {
+	position: sticky;
+	inset-inline-start: 0;
+	z-index: 2;
 }
 
-.norna-table-frame[data-table-overflow='true'][data-table-at-end='false']::after,
-.norna-table-frame[data-table-overflow='true'][data-table-at-start='false']::before {
-	opacity: 1;
+.section-markdown > .norna-table-frame[data-table-row-headers='true'] thead th:first-child,
+.norna-table-sticky-heading-cell-row-header {
+	z-index: 3;
 }
 
 .norna-table-frame table {
@@ -604,6 +707,59 @@ ul {
 	background: var(--section-background-color, var(--color-page));
 }
 
+.norna-table-sort-button {
+	display: flex;
+	width: 100%;
+	min-height: 1.5rem;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 0.6rem;
+	margin: -0.55rem -0.65rem;
+	border: 0;
+	padding: 0.55rem 0.65rem;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	font-weight: inherit;
+	text-align: inherit;
+	cursor: pointer;
+}
+
+.norna-table-sort-button:hover {
+	background: color-mix(in srgb, var(--color-surface-soft-background) 64%, transparent);
+}
+
+.norna-table-sort-button:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: -2px;
+}
+
+.norna-table-sticky-heading:not([inert]) .norna-table-sort-button {
+	pointer-events: auto;
+}
+
+.norna-table-sort-indicator {
+	display: inline-grid;
+	flex: 0 0 auto;
+	width: 0.95rem;
+	height: 0.95rem;
+	/* Center on the first text line, not the full wrapped heading. */
+	margin-block-start: calc((1lh - 0.95rem) / 2);
+	place-items: center;
+	color: var(--section-secondary-text-color, var(--color-secondary-text));
+}
+
+.norna-table-sort-indicator > span {
+	display: none;
+	grid-area: 1 / 1;
+}
+
+.norna-table-sort-button[data-table-sort-state='unsorted'] .norna-table-sort-indicator > [data-table-sort-icon='unsorted'],
+.norna-table-sort-button[data-table-sort-state='ascending'] .norna-table-sort-indicator > [data-table-sort-icon='ascending'],
+.norna-table-sort-button[data-table-sort-state='descending'] .norna-table-sort-indicator > [data-table-sort-icon='descending'] {
+	display: inline-flex;
+}
+
 .section-markdown > .norna-table-frame[data-table-overflow='false'] .norna-table-scroll {
 	overflow: visible;
 }
@@ -615,37 +771,37 @@ ul {
 }
 
 @media (min-width: 961px) {
-	.site-page-layout-tree .section-markdown > .norna-table-frame {
-		--table-end-width: 100cqi;
-		--table-canvas-width: var(--table-end-width);
-		--table-canvas-inline-offset: 0px;
+	.site-page-layout-tree .section-markdown > :is(.norna-table-frame, .code-block) {
+		--wide-block-end-width: 100cqi;
+		--wide-block-canvas-width: var(--wide-block-end-width);
+		--wide-block-canvas-inline-offset: 0px;
 	}
 
 	:root[data-reader-preferences-ready='true'][data-focus-reading='on']
-		.site-page-layout-tree .section-markdown > .norna-table-frame {
-		--table-canvas-width: calc(100cqi + var(--tree-navigation-width) + var(--tree-layout-gap));
-		--table-canvas-inline-offset: calc(0px - var(--tree-navigation-width) - var(--tree-layout-gap));
+		.site-page-layout-tree .section-markdown > :is(.norna-table-frame, .code-block) {
+		--wide-block-canvas-width: calc(100cqi + var(--tree-navigation-width) + var(--tree-layout-gap));
+		--wide-block-canvas-inline-offset: calc(0px - var(--tree-navigation-width) - var(--tree-layout-gap));
 	}
 }
 
 @media (min-width: 1101px) {
 	:root[data-reader-preferences-ready='true'][data-focus-reading='on']
-		.site-page-layout-tree .section-markdown > .norna-table-frame {
-		--table-end-width: calc(100cqi + var(--contents-navigation-width) + var(--tree-layout-gap));
-		--table-canvas-width: calc(
+		.site-page-layout-tree .section-markdown > :is(.norna-table-frame, .code-block) {
+		--wide-block-end-width: calc(100cqi + var(--contents-navigation-width) + var(--tree-layout-gap));
+		--wide-block-canvas-width: calc(
 			100cqi
 			+ var(--tree-navigation-width)
 			+ var(--contents-navigation-width)
 			+ (var(--tree-layout-gap) * 2)
 		);
-		--table-canvas-inline-offset: calc(0px - var(--tree-navigation-width) - var(--tree-layout-gap));
+		--wide-block-canvas-inline-offset: calc(0px - var(--tree-navigation-width) - var(--tree-layout-gap));
 	}
 }
 
 @media (min-width: 1281px) {
-	.site-page-layout-tree:not(.site-page-layout-contents) .section-markdown > .norna-table-frame {
-		--table-end-width: calc(100cqi + var(--contents-navigation-width) + var(--tree-layout-gap));
-		--table-canvas-width: var(--table-end-width);
+	.site-page-layout-tree:not(.site-page-layout-contents) .section-markdown > :is(.norna-table-frame, .code-block) {
+		--wide-block-end-width: calc(100cqi + var(--contents-navigation-width) + var(--tree-layout-gap));
+		--wide-block-canvas-width: var(--wide-block-end-width);
 	}
 }
 
@@ -704,6 +860,61 @@ ul {
 	margin-bottom: 0;
 }
 
+.section-markdown details {
+	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
+	border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
+	border-inline-start: 0.3rem solid var(--color-accent);
+	border-radius: var(--corner-radius-medium, 6px);
+	background: var(--color-surface-soft-background);
+	color: var(--color-surface-soft-text);
+	contain: paint;
+}
+
+.section-markdown details > summary {
+	position: relative;
+	padding: 0.7rem 1rem 0.65rem 1.45rem;
+	color: inherit;
+	font-family: var(--font-sans);
+	font-size: 0.82rem;
+	font-weight: 700;
+	line-height: 1.35;
+	cursor: pointer;
+	list-style: none;
+}
+
+.section-markdown details > summary::-webkit-details-marker {
+	display: none;
+}
+
+.section-markdown details > summary::before {
+	position: absolute;
+	left: 0.4rem;
+	top: 0.9rem;
+	width: 0;
+	height: 0;
+	border-top: 0.3rem solid transparent;
+	border-bottom: 0.3rem solid transparent;
+	border-left: 0.4rem solid var(--color-accent);
+	content: '';
+	transition: transform 0.15s ease;
+}
+
+.section-markdown details[open] > summary::before {
+	transform: rotate(90deg);
+}
+
+.section-markdown details > summary::marker {
+	color: var(--color-accent);
+}
+
+.section-markdown details > :not(summary) {
+	margin-inline: 1rem;
+}
+
+.section-markdown details > :last-child {
+	margin-bottom: 1rem;
+}
+
 .section-markdown .norna-callout {
 	--callout-accent: var(--color-accent);
 	--callout-background: var(--color-surface-soft-background);
@@ -729,12 +940,18 @@ ul {
 	--callout-text: var(--color-success-text);
 }
 
-.section-markdown :is(.norna-callout-warning, .norna-callout-caution) {
+.section-markdown .norna-callout-warning {
 	--callout-accent: var(--color-warning-accent);
 	--callout-background: var(--color-warning-surface);
 	--callout-text: var(--color-warning-text);
 }
 
+.section-markdown .norna-callout-caution {
+	--callout-accent: var(--color-caution-accent);
+	--callout-background: var(--color-caution-surface);
+	--callout-text: var(--color-caution-text);
+}
+
 .section-markdown .norna-callout-danger {
 	--callout-accent: var(--color-error-accent);
 	--callout-background: var(--color-error-surface);
@@ -773,9 +990,19 @@ ul {
 
 .section-markdown .code-block {
 	position: relative;
+	clear: both;
 	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
 }
 
+.code-block[data-code-overflow='true'] > pre {
+	border-inline-end: 3px solid var(--color-code-text);
+}
+
+.code-block > pre:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 2px;
+}
+
 .section-markdown .norna-code-example {
 	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
 	border: 1px solid color-mix(in srgb, var(--color-code-text) 18%, transparent);
@@ -866,6 +1093,41 @@ ul {
 	display: none;
 }
 
+.code-block-copy-status {
+	position: absolute;
+	top: 50%;
+	inset-inline-end: calc(100% + 0.45rem);
+	inline-size: max-content;
+	max-inline-size: min(16rem, calc(100vw - 5.5rem));
+	padding: 0.25rem 0.45rem;
+	border: 1px solid currentColor;
+	border-radius: var(--corner-radius-small, 2px);
+	font-family: var(--font-sans);
+	font-size: 0.75rem;
+	font-weight: 650;
+	line-height: 1.25;
+	text-align: start;
+	transform: translateY(-50%);
+	white-space: normal;
+	pointer-events: none;
+}
+
+.code-block-copy:not([data-copy-state='failed']) .code-block-copy-status {
+	inline-size: 1px;
+	block-size: 1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+.code-block-copy[data-copy-state='failed'] .code-block-copy-status {
+	border-color: var(--color-error-accent);
+	background: var(--color-error-surface);
+	color: var(--color-error-text);
+}
+
 .section-markdown pre.astro-code code {
 	font: inherit;
 }