@publier/shell 0.5.0 → 0.5.2

package/dist/index.mjs

@@ -1 +1 @@
-export{i as HASHED_ASSET_RE,t as docsShell,a as publierCacheControl}from"./integration-B8fpR1il.mjs";
+export{i as HASHED_ASSET_RE,t as docsShell,a as publierCacheControl}from"./integration-ta_sKGK0.mjs";

package/dist/{integration-B8fpR1il.mjs → integration-ta_sKGK0.mjs}

@@ -50,6 +50,42 @@ if (import.meta.hot) {
 	}
 	customElements.define('publier-table-scroll', PublierTableScroll);
 })();
+`,`
+(() => {
+	if (window.__publierCodeScrollWired) return;
+	window.__publierCodeScrollWired = true;
+	const SELECTOR = 'pre[data-language]';
+	const watched = new WeakSet();
+	const label = (pre) => {
+		const title = pre.closest('figure')?.querySelector('figcaption .title')?.textContent.trim();
+		return title || (pre.getAttribute('data-language') + ' code');
+	};
+	const update = (pre) => {
+		if (pre.clientWidth > 0 && pre.scrollWidth > pre.clientWidth) {
+			pre.setAttribute('tabindex', '0');
+			pre.setAttribute('role', 'region');
+			pre.setAttribute('aria-label', label(pre));
+		} else {
+			pre.removeAttribute('tabindex');
+			pre.removeAttribute('role');
+			pre.removeAttribute('aria-label');
+		}
+	};
+	const observer = new ResizeObserver((entries) => {
+		for (const entry of entries) update(entry.target);
+	});
+	const scan = () => {
+		for (const pre of document.querySelectorAll(SELECTOR)) {
+			if (watched.has(pre)) continue;
+			watched.add(pre);
+			observer.observe(pre);
+			update(pre);
+		}
+	};
+	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', scan);
+	else scan();
+	document.addEventListener('astro:page-load', scan);
+})();
 `,_(),x(),w()];return e.searchEnabled&&t.push(C(e.searchHotkey),pe()),t.join(`
 `)}function ut(e,t){let n=[],r=[],i=[];for(let a of[`heading`,`body`,`mono`]){let o=e[a];if(!o?.family)continue;let s=`--publier-font-${a}`,c=a===`mono`?[`monospace`]:[`system-ui`,`sans-serif`],l=[o.weight??`400`],u=[o.style??`normal`];if(o.googleFontsUrl)n.push({name:o.family,cssVariable:s,provider:M.google(),fallbacks:c,weights:l,styles:u,subsets:[`latin`]}),r.push(a);else if(o.src){let e=j.isAbsolute(o.src)&&T(o.src)?o.src:j.join(t,`public`,o.src.replace(/^\/+/,``));n.push({name:o.family,cssVariable:s,provider:M.local(),fallbacks:c,weights:l,styles:u,subsets:[`latin`],options:{variants:[{weight:l[0],style:u[0],src:[e]}]}}),r.push(a)}else i.push(`${s}:"${o.family}",${c.join(`,`)};`)}return{entries:n,familyOnlyCss:i.length?`:root{${i.join(``)}}`:``,slots:r}}const dt=[{pkg:`astro-expressive-code`,aliases:[`astro-expressive-code`]},{pkg:`@astrojs/mdx`,aliases:[`@astrojs/mdx`]},{pkg:`@astrojs/sitemap`,aliases:[`@astrojs/sitemap`]},{pkg:`astro-pagefind`,aliases:[`astro-pagefind`,`pagefind`]},{pkg:`@qwik.dev/astro`,aliases:[`@qwik.dev/astro`]}];function $(e,t){let n=j.join(e,`src`,`content`,t);if(!T(n))return!1;try{return he(n,{recursive:!0}).some(e=>typeof e==`string`&&/\.mdx?$/.test(e))}catch{return!1}}function ft(e){return JSON.stringify(e).replace(/</g,`\\u003c`)}function pt(e={}){let t=null,n=``,r=``,i={name:`@publier/shell`,hooks:{"astro:config:setup":async({command:a,config:c,updateConfig:l,injectScript:u,injectRoute:d,logger:f})=>{let m=c.root?ge(c.root):process.cwd();try{me()}catch(e){let t=e instanceof Error?e.message:String(e),n=ne(t);throw n?Error(n):e}let h=p(j.join(m,`package.json`)),g=JSON.stringify(e),_=Be(m),v=Re(_??``);if(_)for(let e of ze(_))f.warn(e);let y=v.site;t={llms:v.llms,siteName:y.name,siteUrl:y.url??void 0,siteDescription:y.description??void 0};let b=v.vars,re=v.fonts,ie=v.nav,ae=v.announcement,oe=v.docs,x=typeof y.url==`string`&&y.url.length>0;x&&!c.site&&l({site:y.url});let fe=new Set(c.integrations.map(e=>e.name)),S=dt.filter(({aliases:e})=>!e.some(e=>fe.has(e)));S.length>0&&f.warn(`[@publier/shell] Required framework integrations are not registered in
 astro.config.ts. As of @publier/shell@2.0.0, docsShell() no longer

package/dist/integration.mjs

@@ -1 +1 @@
-export{t as docsShell,n as hoistMediaOutOfUtilitiesLayer,r as publierCascadeHoistPlugin}from"./integration-B8fpR1il.mjs";
+export{t as docsShell,n as hoistMediaOutOfUtilitiesLayer,r as publierCascadeHoistPlugin}from"./integration-ta_sKGK0.mjs";

package/dist/themes/almond.css

@@ -98,7 +98,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 181.6);
 	--color-pl-muted-bg: oklch(22.5% 0.02 181.6);
-	--color-pl-subtle: oklch(55% 0.04 181.6);
+	--color-pl-subtle: oklch(58% 0.04 181.6);
 	--color-pl-card: oklch(20.5% 0.018 181.6);
 	--color-pl-card-hover: oklch(26% 0.03 181.6);
 	--color-pl-popover: oklch(20.5% 0.018 181.6);

package/dist/themes/aspen.css

@@ -78,7 +78,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 84.43);
 	--color-pl-muted-bg: oklch(22.5% 0.02 84.43);
-	--color-pl-subtle: oklch(55% 0.04 84.43);
+	--color-pl-subtle: oklch(58.5% 0.04 84.43);
 	--color-pl-card: oklch(20.5% 0.018 84.43);
 	--color-pl-card-hover: oklch(26% 0.03 84.43);
 	--color-pl-popover: oklch(20.5% 0.018 84.43);

package/dist/themes/catppuccin.css

@@ -81,7 +81,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 304.77);
 	--color-pl-muted-bg: oklch(22.5% 0.02 304.77);
-	--color-pl-subtle: oklch(55% 0.04 304.77);
+	--color-pl-subtle: oklch(63% 0.04 304.77);
 	--color-pl-card: oklch(20.5% 0.018 304.77);
 	--color-pl-card-hover: oklch(26% 0.03 304.77);
 	--color-pl-popover: oklch(20.5% 0.018 304.77);

package/dist/themes/dark.css

@@ -81,7 +81,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 276.93);
 	--color-pl-muted-bg: oklch(22.5% 0.02 276.93);
-	--color-pl-subtle: oklch(55% 0.04 276.93);
+	--color-pl-subtle: oklch(58% 0.04 276.93);
 	--color-pl-card: oklch(20.5% 0.018 276.93);
 	--color-pl-card-hover: oklch(26% 0.03 276.93);
 	--color-pl-popover: oklch(20.5% 0.018 276.93);

package/dist/themes/dusk.css

@@ -81,7 +81,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 16.93);
 	--color-pl-muted-bg: oklch(22.5% 0.02 16.93);
-	--color-pl-subtle: oklch(55% 0.04 16.93);
+	--color-pl-subtle: oklch(62% 0.04 16.93);
 	--color-pl-card: oklch(20.5% 0.018 16.93);
 	--color-pl-card-hover: oklch(26% 0.03 16.93);
 	--color-pl-popover: oklch(20.5% 0.018 16.93);

package/dist/themes/emerald.css

@@ -78,7 +78,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 163.22);
 	--color-pl-muted-bg: oklch(22.5% 0.02 163.22);
-	--color-pl-subtle: oklch(55% 0.04 163.22);
+	--color-pl-subtle: oklch(58.5% 0.04 163.22);
 	--color-pl-card: oklch(20.5% 0.018 163.22);
 	--color-pl-card-hover: oklch(26% 0.03 163.22);
 	--color-pl-popover: oklch(20.5% 0.018 163.22);

package/dist/themes/light.css

@@ -78,7 +78,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 276.93);
 	--color-pl-muted-bg: oklch(22.5% 0.02 276.93);
-	--color-pl-subtle: oklch(55% 0.04 276.93);
+	--color-pl-subtle: oklch(58% 0.04 276.93);
 	--color-pl-card: oklch(20.5% 0.018 276.93);
 	--color-pl-card-hover: oklch(26% 0.03 276.93);
 	--color-pl-popover: oklch(20.5% 0.018 276.93);

package/dist/themes/maple.css

@@ -97,7 +97,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 66);
 	--color-pl-muted-bg: oklch(22.5% 0.02 58);
-	--color-pl-subtle: oklch(55% 0.04 60);
+	--color-pl-subtle: oklch(59% 0.04 60);
 
 	--color-pl-card: oklch(20.5% 0.018 58);
 	--color-pl-card-hover: oklch(26% 0.03 60);

package/dist/themes/nocturne.css

@@ -205,7 +205,7 @@ color-scheme: dark;
 .dark {
 	--color-pl-muted: #8a8f98;
 	--color-pl-muted-bg: #141516;
-	--color-pl-subtle: #62666d;
+	--color-pl-subtle: #72767d;
 	--color-pl-card: #0f1011;
 	--color-pl-card-hover: #141516;
 	--color-pl-popover: #141516;

package/dist/themes/ocean.css

@@ -81,7 +81,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 232.66);
 	--color-pl-muted-bg: oklch(22.5% 0.02 232.66);
-	--color-pl-subtle: oklch(55% 0.04 232.66);
+	--color-pl-subtle: oklch(60% 0.04 232.66);
 	--color-pl-card: oklch(20.5% 0.018 232.66);
 	--color-pl-card-hover: oklch(26% 0.03 232.66);
 	--color-pl-popover: oklch(20.5% 0.018 232.66);

package/dist/themes/purple.css

@@ -78,7 +78,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 293.54);
 	--color-pl-muted-bg: oklch(22.5% 0.02 293.54);
-	--color-pl-subtle: oklch(55% 0.04 293.54);
+	--color-pl-subtle: oklch(58% 0.04 293.54);
 	--color-pl-card: oklch(20.5% 0.018 293.54);
 	--color-pl-card-hover: oklch(26% 0.03 293.54);
 	--color-pl-popover: oklch(20.5% 0.018 293.54);

package/dist/themes/ruby.css

@@ -78,7 +78,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 13.43);
 	--color-pl-muted-bg: oklch(22.5% 0.02 13.43);
-	--color-pl-subtle: oklch(55% 0.04 13.43);
+	--color-pl-subtle: oklch(58% 0.04 13.43);
 	--color-pl-card: oklch(20.5% 0.018 13.43);
 	--color-pl-card-hover: oklch(26% 0.03 13.43);
 	--color-pl-popover: oklch(20.5% 0.018 13.43);

package/dist/themes/solar.css

@@ -81,7 +81,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 84.43);
 	--color-pl-muted-bg: oklch(22.5% 0.02 84.43);
-	--color-pl-subtle: oklch(55% 0.04 84.43);
+	--color-pl-subtle: oklch(61% 0.04 84.43);
 	--color-pl-card: oklch(20.5% 0.018 84.43);
 	--color-pl-card-hover: oklch(26% 0.03 84.43);
 	--color-pl-popover: oklch(20.5% 0.018 84.43);

package/dist/themes/vitepress.css

@@ -78,7 +78,7 @@ color-scheme: dark;
 
 	--color-pl-muted: oklch(72% 0.067 160.37);
 	--color-pl-muted-bg: oklch(22.5% 0.02 160.37);
-	--color-pl-subtle: oklch(55% 0.04 160.37);
+	--color-pl-subtle: oklch(61% 0.04 160.37);
 	--color-pl-card: oklch(20.5% 0.018 160.37);
 	--color-pl-card-hover: oklch(26% 0.03 160.37);
 	--color-pl-popover: oklch(20.5% 0.018 160.37);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publier/shell",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "license": "UNLICENSED",
   "description": "Qwik + Astro docs layout for Publier sites.",
   "type": "module",
@@ -129,7 +129,7 @@
     "@github/details-menu-element": "^1.0.13",
     "@github/relative-time-element": "^5.3.1",
     "@github/tab-container-element": "^4.9.0",
-    "@publier/native": "0.4.0",
+    "@publier/native": "0.14.1",
     "@tailwindcss/typography": "^0.5.20",
     "astro-pagefind": "^2.0.1",
     "daisyui": "^5.7.50",

package/src/components/ui/changelog-entry.astro

@@ -28,7 +28,7 @@ const displayTags = tags ?? (type ? [type] : []);
 			{date}
 		</time>
 		{version && (
-			<span class="mt-1.5 inline-block text-xs font-mono text-base-content/60">{version}</span>
+			<span class="mt-1.5 inline-block text-xs font-mono text-[var(--color-pl-muted,var(--color-base-content))]">{version}</span>
 		)}
 		{displayTags.length > 0 && (
 			<ul class="mt-2 flex flex-col items-end gap-1.5 list-none p-0 m-0">

package/src/components/ui/feature-grid.astro

@@ -26,7 +26,7 @@ const colCls = columns === 2
 			<div class="card-body">
 				{item.icon && <div class="text-3xl leading-none" aria-hidden="true">{item.icon}</div>}
 				<h3 class="card-title text-lg text-base-content">{item.title}</h3>
-				<p class="text-base-content/70">{item.description}</p>
+				<p class="text-[var(--color-pl-muted,var(--color-base-content))]">{item.description}</p>
 				{item.href && (
 					<a class="absolute inset-0" href={item.href} aria-label={item.title}>
 						<span class="sr-only">Learn more about {item.title}</span>

package/src/components/ui/feature-section.astro

@@ -31,7 +31,7 @@ const visualOrder = reverse ? 'md:order-first' : '';
 				<span class="badge badge-outline badge-primary">{eyebrow}</span>
 			)}
 			<h2 class="text-3xl md:text-4xl font-bold text-base-content">{title}</h2>
-			{subtitle && <p class="mt-3 text-lg text-base-content/70">{subtitle}</p>}
+			{subtitle && <p class="mt-3 text-lg text-[var(--color-pl-muted,var(--color-base-content))]">{subtitle}</p>}
 			{hasBullets && (
 				<ul class="mt-6 space-y-2">
 					{items.map((bullet) => (

package/src/components/ui/frame.astro

@@ -70,9 +70,9 @@ const hasCaption = Boolean(caption) || Boolean(hint);
 		)}
 	</div>
 	{hasCaption && (
-		<figcaption class="flex flex-wrap items-baseline gap-2 px-4 py-2 text-sm text-base-content/70 border-t border-base-300">
+		<figcaption class="flex flex-wrap items-baseline gap-2 px-4 py-2 text-sm text-[var(--color-pl-muted,var(--color-base-content))] border-t border-base-300">
 			{caption && <span>{caption}</span>}
-			{hint && <span class="text-xs text-base-content/50 italic">{hint}</span>}
+			{hint && <span class="text-xs text-[var(--color-pl-muted,var(--color-base-content))] italic">{hint}</span>}
 		</figcaption>
 	)}
 </figure>

package/src/components/ui/hero.astro

@@ -23,7 +23,7 @@ const ctasCls = align === 'center' ? 'justify-center' : 'justify-start';
 		)}
 		<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-base-content">{title}</h1>
 		{subtitle && (
-			<p class="mt-4 text-lg md:text-xl text-base-content/70 max-w-2xl">{subtitle}</p>
+			<p class="mt-4 text-lg md:text-xl text-[var(--color-pl-muted,var(--color-base-content))] max-w-2xl">{subtitle}</p>
 		)}
 		{(primaryCta || secondaryCta) && (
 			<div class={`mt-8 flex flex-wrap gap-3 ${ctasCls}`}>

package/src/components/ui/jobs-list.astro

@@ -30,17 +30,17 @@ const isEmpty = jobs.length === 0;
 <section>
 	{heading && <h2 class="text-2xl md:text-3xl font-bold text-base-content mb-6">{heading}</h2>}
 	{isEmpty ? (
-		<p class="text-base-content/60 italic">{emptyMessage}</p>
+		<p class="text-[var(--color-pl-muted,var(--color-base-content))] italic">{emptyMessage}</p>
 	) : (
 		departmentOrder.map((dept) => (
 			<div class="mb-8">
-				<h3 class="text-xs uppercase tracking-wider text-base-content/60 mb-2">{dept}</h3>
+				<h3 class="text-xs uppercase tracking-wider text-[var(--color-pl-muted,var(--color-base-content))] mb-2">{dept}</h3>
 				<ul class="menu menu-compact bg-base-100 border border-base-300 rounded-box">
 					{groups[dept]?.map((job) => (
 						<li>
 							<a href={job.href} class="justify-between">
 								<span class="font-semibold">{job.title}</span>
-								<span class="text-xs text-base-content/60">
+								<span class="text-xs text-[var(--color-pl-muted,var(--color-base-content))]">
 									{job.location}{job.type ? ` · ${job.type}` : ''}
 								</span>
 							</a>

package/src/components/ui/logo-cloud.astro

@@ -31,7 +31,7 @@ const colCls = columns === 3
 	{hasHeader && (
 		<header class="max-w-2xl mx-auto text-center mb-8 px-6">
 			{title && <h2 class="text-2xl md:text-3xl font-bold text-base-content">{title}</h2>}
-			{subtitle && <p class="mt-2 text-base-content/70">{subtitle}</p>}
+			{subtitle && <p class="mt-2 text-[var(--color-pl-muted,var(--color-base-content))]">{subtitle}</p>}
 		</header>
 	)}
 	<ul class={`list-none grid gap-8 items-center px-6 max-w-6xl mx-auto ${colCls}`}>

package/src/components/ui/press-gallery.astro

@@ -39,7 +39,7 @@ const { items } = Astro.props;
 					{item.quote && (
 						<blockquote class="italic text-base-content/80 mt-2">&ldquo;{item.quote}&rdquo;</blockquote>
 					)}
-					<footer class="mt-3 flex items-center justify-between text-sm text-base-content/60">
+					<footer class="mt-3 flex items-center justify-between text-sm text-[var(--color-pl-muted,var(--color-base-content))]">
 						<span>{item.outlet}</span>
 						{item.date && (
 							<time datetime={item.date}>{item.date}</time>

package/src/components/ui/pricing-section.astro

@@ -23,7 +23,7 @@ const yearlyId = `publier-pricing-${groupId}-yearly`;
 		{(title || subtitle) && (
 			<header class="max-w-2xl mx-auto text-center mb-8">
 				{title && <h2 class="text-3xl md:text-4xl font-bold text-base-content">{title}</h2>}
-				{subtitle && <p class="mt-3 text-lg text-base-content/70">{subtitle}</p>}
+				{subtitle && <p class="mt-3 text-lg text-[var(--color-pl-muted,var(--color-base-content))]">{subtitle}</p>}
 			</header>
 		)}
 

package/src/components/ui/pricing-table.astro

@@ -18,9 +18,9 @@ const { tiers } = Astro.props as PricingTableProps;
 					</span>
 				)}
 				<div class="card-body">
-					<h3 class="text-sm uppercase tracking-wider font-medium text-base-content/70">{tier.name}</h3>
+					<h3 class="text-sm uppercase tracking-wider font-medium text-[var(--color-pl-muted,var(--color-base-content))]">{tier.name}</h3>
 					<div class="text-3xl font-bold text-base-content">{tier.price}</div>
-					{tier.tagline && <p class="text-sm text-base-content/60">{tier.tagline}</p>}
+					{tier.tagline && <p class="text-sm text-[var(--color-pl-muted,var(--color-base-content))]">{tier.tagline}</p>}
 					<ul class="list-none space-y-2 mt-3 mb-6">
 						{tier.features.map((feat) => (
 							<li class="flex items-start gap-2 text-sm text-base-content">

package/src/components/ui/team-grid.astro

@@ -39,8 +39,8 @@ const colCls = columns === 2
 					</div>
 				)}
 				<h3 class="card-title text-base-content">{member.name}</h3>
-				<p class="text-sm text-base-content/60">{member.role}</p>
-				{member.bio && <p class="text-sm text-base-content/70">{member.bio}</p>}
+				<p class="text-sm text-[var(--color-pl-muted,var(--color-base-content))]">{member.role}</p>
+				{member.bio && <p class="text-sm text-[var(--color-pl-muted,var(--color-base-content))]">{member.bio}</p>}
 				{member.socials && member.socials.length > 0 && (
 					<ul class="list-none flex gap-3 mt-2">
 						{member.socials.map((s) => (

package/src/components/ui/testimonial-card.astro

@@ -35,7 +35,7 @@ const meta = [role, company].filter(Boolean).join(', ');
 			)}
 			<div class="flex flex-col">
 				<span class="font-semibold text-base-content">{author}</span>
-				{meta && <span class="text-sm text-base-content/60">{meta}</span>}
+				{meta && <span class="text-sm text-[var(--color-pl-muted,var(--color-base-content))]">{meta}</span>}
 			</div>
 		</figcaption>
 	</div>

package/src/styles/base.css

@@ -716,23 +716,34 @@ aside.alert .pl-callout__body > :first-child {
  *   - Dismiss button absolutely positioned so it doesn't push the centered
  *     message off-axis.
  */
+/* Theme-able through tokens (see docs/THEMING.md "Announcement banner"):
+ * `--publier-banner-{bg,fg,link,border,radius}`. Each fallback is what the
+ * variant's soft alert resolves to, so an unset token changes nothing. */
 header.alert[data-publier-banner] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding-block: 0.5rem;
-	color: var(--color-base-content);
+	color: var(--publier-banner-fg, var(--color-base-content));
+	background: var(
+		--publier-banner-bg,
+		color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100))
+	);
+	border-color: var(--publier-banner-border, var(--alert-border-color));
+	border-radius: var(--publier-banner-radius, 0);
 	position: relative;
 }
-header.alert[data-publier-banner] .link,
 header.alert[data-publier-banner] > span {
-	color: var(--color-base-content);
+	color: var(--publier-banner-fg, var(--color-base-content));
+}
+header.alert[data-publier-banner] .link {
+	color: var(--publier-banner-link, var(--publier-banner-fg, var(--color-base-content)));
 }
 header.alert[data-publier-banner] [data-publier-banner-dismiss] {
 	position: absolute;
 	inset-inline-end: 0.5rem;
 	margin-inline-start: 0;
-	color: var(--color-base-content);
+	color: var(--publier-banner-fg, var(--color-base-content));
 }
 
 /* Native dialog top-layer placement keeps mobile docs above the sticky header. */
@@ -775,6 +786,13 @@ header.alert[data-publier-banner] [data-publier-banner-dismiss] {
 	outline-offset: 2px;
 }
 
+/* Scrollable code blocks are focusable (code-scroll runtime); inset ring because
+ * the Expressive Code frame clips overflow. */
+.expressive-code pre[data-language]:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: -2px;
+}
+
 /* Documentation uses one primary header row; selectors and sections sit beside the brand. */
 [data-publier-top-nav] > .navbar {
 	min-height: var(--publier-nav-height, 4rem);

package/src/tailwind/preset.css

@@ -162,10 +162,15 @@
 	 * had as `--qw-color-muted-foreground`. Default derives from
 	 * base-content via color-mix so un-overridden themes still
 	 * look reasonable; themes with a deliberate warm/cool tint
-	 * should override. */
-	--color-pl-muted: color-mix(in oklch, var(--color-base-content) 62%, var(--color-base-100));
+	 * should override. 85% (not lower): a mid-tone `base-content` such as
+	 * #525666 on white is 7.3:1 itself, and 62% of it fell to ~3.1:1, below
+	 * WCAG AA (4.5:1) for body-size text; 85% measures ~5.1:1 there and
+	 * stays above 4.5:1 for any base-content that already has >= 6:1. */
+	--color-pl-muted: color-mix(in oklch, var(--color-base-content) 85%, var(--color-base-100));
 	--color-pl-muted-bg: var(--color-base-200);
-	--color-pl-subtle: color-mix(in oklch, var(--color-base-content) 45%, var(--color-base-100));
+	/* Quietest text (captions, counters). 65%: every shipped surface reaches
+	 * 4.5:1 at <= 61%, and it stays visibly lighter than muted (85%). */
+	--color-pl-subtle: color-mix(in oklch, var(--color-base-content) 65%, var(--color-base-100));
 
 	/* Raised — tile / card surfaces. `card-hover` is the
 	 * visible lift on pointer hover; missing in the daisyUI
@@ -219,6 +224,14 @@
 		--publier-radius-panel: var(--radius-box, 0.75rem);
 		--publier-radius-chip: var(--radius-selector, 0.5rem);
 
+		/* Announcement banner. Only the context-free defaults live here.
+		 * `--publier-banner-bg`, `-border` and `-link` are left unset on purpose:
+		 * their defaults depend on the banner's variant (info, warning, success)
+		 * and on its own `--alert-color`, so the banner rule in `base.css` carries
+		 * those fallbacks and a value set here or in `customCss` replaces them. */
+		--publier-banner-fg: var(--color-base-content);
+		--publier-banner-radius: 0;
+
 		--publier-space-xxs: 0.125rem;
 		--publier-space-xs: 0.25rem;
 		--publier-space-sm: 0.5rem;